/* === Sections — Kajsa & Axel === */ const SECTIONS = [ { id: 'hem', num: 'I', label: 'Välkommen' }, { id: 'program', num: 'II', label: 'Program' }, { id: 'plats', num: 'III', label: 'Plats' }, { id: 'boende', num: 'IV', label: 'Boende' }, { id: 'kladkod', num: 'V', label: 'Klädkod' }, { id: 'presenter', num: 'VI', label: 'Presenter' }, { id: 'osa', num: 'VII', label: 'OSA' }, { id: 'fragor', num: 'VIII', label: 'Frågor' }]; function getC() { return window.CONTENT || window.CONTENT_DEFAULTS || {}; } function useContentTick() { const [, setT] = React.useState(0); React.useEffect(() => { const h = () => setT(x => x + 1); window.addEventListener('content:update', h); return () => window.removeEventListener('content:update', h); }, []); } const WEDDING_DATE = new Date(getC().date?.iso || '2026-08-15T15:00:00+02:00'); // --- Crest / faux logotype --- function Crest({ small, top, year, sub }) { return (
{/* Crossed keys */} K&A
{top || '— Hôtel —'}
{year || 'MMXXVI'}
{sub || 'Österlen · Anno Domini'}
); } function HotelFacade() { const ink = "#2a1c0a"; const tile = "#b8451f"; // terracotta tile const tileShade = "#8e2e10"; // darker tile bands const wall = "#f6e6b8"; // creamy white-ish (palette-friendly) const door = "#a8431f"; const chimney = "#c98818"; const trim = "#2a1c0a"; const garden = "#1f4a3e"; const lavender = "#2f6a5a"; return ( {/* ground */} {/* tree on right edge — tucked outside the right wing */} {/* main body */} {/* low side wings (left + right) — set back, lower */} {/* main central block */} {/* roofs — long low pitch */} {/* tile bands */} {[60, 70].map((y, i) => ( ))} {[104, 112].map((y, i) => ( ))} {[104, 112].map((y, i) => ( ))} {/* central pediment / dormer */} {/* dormer windows (two arched) */} {/* balcony rail under dormer */} {[150,158,166,174,182,190,198,206].map((x,i)=>( ))} {/* chimneys */} {/* portico — four columns flanking the door */} {[152, 168, 192, 208].map((x, i) => ( ))} {/* portico entablature */} {/* red door (between the two inner columns) */} {/* ground-floor windows — three left of portico, three right, no overlap with columns */} {[ { x: 86 }, { x: 106 }, { x: 126 }, { x: 220 }, { x: 240 }, { x: 260 } ].map((w, i) => ( ))} {/* side wing windows — two each, breathing room */} {[16, 46, 298, 328].map((x, i) => ( ))} {/* fountain in front */} {/* shrubs / hedge boxes — sit between windows, not in front of them */} {[100, 144, 214, 258].map((x, i) => ( ))} {/* flower urns flanking portico */} {/* picket fence */} {Array.from({ length: 14 }).map((_, i) => { const x = 4 + i*9; return ; })} {Array.from({ length: 14 }).map((_, i) => { const x = 230 + i*9; return ; })} {/* hand-lettered sign on cream banner across pediment top */} HÔTEL ÖSTERLEN ); } // --- Section header (chapter tag + title + ornament) --- function SectionHead({ num, kicker, title, italicTitle, sub }) { return (
✦ DEL {num} ✦
{kicker}

{title} {italicTitle && {italicTitle}}

{sub &&

{sub}

}
); } // --- Countdown --- function Countdown() { useContentTick(); const target = new Date(getC().date?.iso || WEDDING_DATE).getTime(); const [now, setNow] = React.useState(Date.now()); React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []); const diff = Math.max(0, target - now); const d = Math.floor(diff / 86400000); const h = Math.floor(diff % 86400000 / 3600000); const m = Math.floor(diff % 3600000 / 60000); const s = Math.floor(diff % 60000 / 1000); const cells = [ { n: d, l: 'Dagar' }, { n: h, l: 'Timmar' }, { n: m, l: 'Minuter' }, { n: s, l: 'Sekunder' }]; return (
{cells.map((c, i) =>
{String(c.n).padStart(2, '0')} {c.l}
)}
); } // --- Hero --- function Hero() { useContentTick(); const c = getC(); const h = c.hero || {}; return (
{h.eyebrow || 'En liten tillställning · Lördag den 15 augusti · Anno 2026'}

{h.coupleA || 'Kajsa'}& {h.coupleB || 'Axel'}

{h.ceremony || 'Vigsel kl. 15.00'}
— {h.tagline || 'gifter sig på Österlen'} —
{h.after || 'Middag & dans följer'}
{h.stamp1 || 'Var god OSA före 15 juni'} {h.stamp2 || 'Hjärtligt välkomna'}
); } // --- Program --- const PROGRAM = [ { time: '14.30', what: 'Ankomst', sub: 'Mingel med bubbel & saft i trädgården', where: 'Stenladan' }, { time: '15.00', what: 'Vigsel', sub: 'Borgerlig ceremoni under äppelträden', where: 'Trädgården' }, { time: '16.00', what: 'Gruppfoto & fördrink', sub: 'För den som vill — eller bara vill ha en till bubbel', where: 'Allén' }, { time: '17.30', what: 'Bröllopsmiddag', sub: 'Tre rätter från trakten, tal & sång', where: 'Logen' }, { time: '21.00', what: 'Tårta & kaffe', sub: 'Och möjligen ett glas calvados', where: 'Logen' }, { time: '22.00', what: 'Dans till smått omöjliga timmar', sub: 'Live-band följt av DJ Farbror Bertil', where: 'Logen' }, { time: '01.00', what: 'Nattamat & farväl', sub: 'Korv med bröd för de modiga', where: 'Köksingången' }]; function Program() { useContentTick(); const items = getC().program || PROGRAM; return (
{items.map((p, i) =>
{p.time}
{p.what} {p.sub}
{p.where}
)}
); } // --- Map (illustrated SVG placeholder) --- function MapSVG() { return ( {/* Sea */} {/* coastline curves */} {/* fields */} {/* field stripes */} {Array.from({ length: 12 }).map((_, i) => )} {/* hills */} {/* trees */} {[[80, 180], [140, 200], [110, 360], [260, 150], [300, 360], [420, 310]].map(([cx, cy], i) => )} {/* roads */} {/* compass */} N {/* pins */} {/* fish doodle — swimming */} {/* dotted sea waves — drifting */} {Array.from({ length: 6 }).map((_, i) => )} ); } function Pin({ x, y, color, label, sub }) { return ( {label} {sub.toUpperCase()} ); } function Plats() { return (
Festplats
Boende A
Boende B
Tågstation
01 — Med bil

Genom rapsfält

E22 söderut till Tomelilla, sedan väg 11 mot Simrishamn. Cirka 1 t 20 min från Malmö, 1 t 40 min från Köpenhamn.

Fri parkering på ängen vid Stenladan. Följ skyltarna med K&A.

02 — Med tåg

Pågatåg & skjuts

Pågatåget går från Malmö till Tomelilla. Vi ordnar gratis skjuts från stationen kl. 13.30 och 14.15.

Bocka i rutan i OSA-formuläret så vet vi att vi väntar på er.

Skjuts ordnas
); } // --- Boende --- function Boende() { useContentTick(); const places = getC().boende || [ { tag: 'A', name: 'Kivik Pensionat', meta: '10 minuter med bil', body: 'Charmig pension i gamla Kivik. Vi har förbokat 12 rum till rabatterat pris — uppge "Bröllop K&A" vid bokning.', price: 'Från 1 450 kr/natt' }, { tag: 'B', name: 'Hotell Svea, Simrishamn', meta: '20 minuter med bil', body: 'Klassiskt sjöhotell vid hamnen. Trevligt promenadläge och frukost med utsikt över Östersjön.', price: 'Från 1 890 kr/natt' }, { tag: 'C', name: 'Vandrarhem & stugor', meta: '5 minuter till fots', body: 'Enklare stugor på gården intill — perfekta för gänget som ändå tänker stanna länge på dansgolvet.', price: 'Från 590 kr/natt' }]; return (
{places.map((p, i) =>
Alternativ {p.tag}

{p.name}

{p.meta}

{p.body}

{p.price}
)}
); } // --- Klädkod --- function Kladkod() { useContentTick(); const d = getC().dress || {}; const swatches = (d.swatches && d.swatches.length) ? d.swatches : [ { color: '#7a8a6a', label: 'Salviagrön' }, { color: '#d4a04a', label: 'Senap' }, { color: '#8a4a3a', label: 'Terrakotta' }, { color: '#cfc3a3', label: 'Linnesand' }, { color: '#3a4a5a', label: 'Havsblå' }, ]; return (

{d.quote || '"Klä er som om ni vore på väg till en sommarpicknick — men en alldeles särskilt fin sådan."'}

{d.body || 'Kavaj för herrar, klänning eller dräkt för damer. Bekväma skor rekommenderas — gräsmatta, grus och dans väntar. Färgskalan nedan är ett varmt förslag, ingen lag.'}

{swatches.map((s, i) => (
{s.label}
))}
{(d.footer || 'Undvik gärna helvitt · brudens privilegium') && (

{d.footer || 'Undvik gärna helvitt · brudens privilegium'}

)}
); } // --- Presenter / Gifts --- function Presenter() { useContentTick(); const p = getC().presenter || {}; const titleLines = (p.mendlsTitle || 'Smekmånads-\nkassan').split('\n'); return (
{p.mendlsLabel || "— Mendl's patisserie —"}

{titleLines.map((line, i) => ( {line}{i < titleLines.length - 1 &&
} ))}

{p.mendlsSub || 'à la maison K&A'}
Mottagare {p.receiver || 'Kajsa & Axel'}
Swish {p.swish || '073 — 123 45 67'}
{p.footnote && (

{p.footnote}

)}
); } // --- Under construction (small screen) --- function UnderConstruction() { useContentTick(); const c = getC(); const u = c.construction || {}; return (
{u.eyebrow || 'Hôtel Österlen · Anno MMXXVI'}

{u.title || 'Snart'} {u.italicTitle && {u.italicTitle}}

{u.sub &&

{u.sub}

}
{u.stamp || 'Under konstruktion'}
); } // --- Save the date (small screen) --- function SaveTheDate() { useContentTick(); const c = getC(); const s = c.saveTheDate || {}; const dStamp = c.date?.stamp || '15 · VIII · MMXXVI'; const dDisplay = c.date?.display || '15 augusti 2026'; // Split display into day / month / year roughly const m = (dDisplay || '').match(/^(\d+)\s+(\S+)\s+(\d+)/); const day = m ? m[1] : '15'; const month = m ? m[2] : 'augusti'; const year = m ? m[3] : '2026'; return (
{s.eyebrow || 'Save the date'}

{s.coupleA || 'Kajsa'}& {s.coupleB || 'Axel'}

— {s.tagline || 'gifter sig'} —
Anno {year}
Den {day} {month}
Roman. {dStamp.split('·')[1]?.trim() || 'VIII'}
{s.location || 'Stenladan, Kivik · Österlen'}
{s.footnote || 'Inbjudan & detaljer följer'}
Hôtel Österlen · {dStamp}
); } Object.assign(window, { SECTIONS, WEDDING_DATE, Crest, HotelFacade, SectionHead, Countdown, Hero, Program, Plats, Boende, Kladkod, Presenter, UnderConstruction, SaveTheDate });