import React, { useState, useEffect, useRef } from 'react';

import {

Menu, X, Check, Heart, Play, ChevronDown,

ChevronLeft, ChevronRight, MessageCircle, Instagram, Mail, Plus, Minus, ExternalLink,

Gem, Anchor, Star

} from 'lucide-react';

/**

* AUTHENTIC.K - VERSION 11.10 (Akkordeon-Menü)

* ------------------------------------------------

* 1. NEU: Akkordeon-Menü in der mobilen Ansicht (Hamburger) eingebaut.

* 2. NEU: Alle Sektionen haben jetzt "id"-Tags (z.B. id="bio", id="pricing").

* 3. NEU: Weiches Scrollen zu den jeweiligen Ankerpunkten integriert.

* ------------------------------------------------

// --- DATEN-KONSTRUKTE ---

const images = {

catPortrait: "https://www.dropbox.com/scl/fi/gvlhmnkxaohsus4fczaei/Bild-Authentisch.jpg?rlkey=78glqfdr3tymd52rga6kvkkvh&raw=1",

catLarge: "Hochzeit-446.jpg",

splitPlanung: "https://www.dropbox.com/scl/fi/4y3o8zdsuzahrwq605suw/IMG_1804-2-Kopie.jpg?rlkey=f7d2tp192gaq2i669eg2i1son&raw=1",

catAction: "https://www.dropbox.com/scl/fi/q3f86ydlqkawkux14oj3q/Bildschirmfoto-2026-04-05-um-09.19.06.png?rlkey=7sj1ctsh8jk5hq9ca1w5rfoem&raw=1",

trauungHero: "https://images.unsplash.com/photo-1511285560982-1356c11d4606?auto=format&fit=crop&q=80&w=2000",

planungHero: "https://www.dropbox.com/scl/fi/ub9ww9nh6jcys7mf06pjs/Bildschirmfoto-2026-03-31-um-19.04.37.png?rlkey=p1xwk7r3a7d7enxpj1hw8pvps&raw=1",

planungFooterImg: "https://www.dropbox.com/scl/fi/cdzdxhocrz6ubeohvbw3h/Bildschirmfoto-2026-04-07-um-09.08.11.png?rlkey=mn5l0gluzq7jfsut9ppfkqqah&raw=1",

videoCover: "https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&q=80&w=1200",

collage1: "https://www.dropbox.com/scl/fi/u0fr1qjxm6x264zo5joc8/WhatsApp-Image-2025-10-22-at-15.56.27.jpeg?rlkey=6txclxr7dseeiuebixik80cds&raw=1",

collage2: "https://www.dropbox.com/scl/fi/kbrz04s34t5zhhxn1b0dy/WhatsApp-Image-2025-10-22-at-15.56.26.jpeg?rlkey=ajwqkr0b55o9aapewd28xijli&raw=1",

collage3: "https://www.dropbox.com/scl/fi/s4kem0dbqw8l1hsx22rxs/WhatsApp-Image-2025-10-22-at-15.56.26-1.jpeg?rlkey=3c6bd09q8xaictc9n6o120rp7&raw=1",

architekturGold: "https://images.unsplash.com/photo-1541701494587-cb58502866ab?auto=format&fit=crop&q=80&w=2000",

destinationBg: "https://www.dropbox.com/scl/fi/gp9szjj237m1tpuy1q0s6/Bildschirmfoto-2026-04-04-um-08.09.57.png?rlkey=rlx3pzla1sghnanh1e4bn6scr&raw=1",

visionDivider: "https://www.dropbox.com/scl/fi/22yculx9xq8j4qyw7e2os/Bildschirmfoto-2026-03-24-um-23.56.45.png?rlkey=xo539s6ct8afoty0eetcaczpw&raw=1",

trauungGal1: "https://www.dropbox.com/scl/fi/pobbau7cfz3gpfcm386jq/A-D-351-von-923-Kopie.jpg?rlkey=1zydbaa9m78n3x8iodkvmbma7&raw=1",

trauungGal2: "https://www.dropbox.com/scl/fi/xcwoxj8vlq0l3vbsmurxz/Bildschirmfoto-2025-11-10-um-16.54.11-Kopie.png?rlkey=bg4goqfcab02fp8ihtioc43zd&raw=1",

trauungGal3: "https://www.dropbox.com/scl/fi/po2sx6ih8t75kyli6apki/Bildschirmfoto-2025-11-11-um-14.33.39-Kopie.png?rlkey=jfeyjr86ajreoyaxrcntd5yzi&raw=1",

trauungGal4: "https://www.dropbox.com/scl/fi/vj4ihpo7tjam5lovtugkh/JON04247-2.jpg?rlkey=zi3p7pntq46asx8v7yg6bi8vg&raw=1",

trauungGal5: "https://www.dropbox.com/scl/fi/kry8ururtmzv86orz97eg/Bildschirmfoto-2025-11-11-um-14.22.55-Kopie.png?rlkey=z3uqvlbkykcfacymzz6f8cmzm&raw=1",

trauungGal6: "https://www.dropbox.com/scl/fi/lxxx18jv8ihm18yplwnkr/IMG_1927-Kopie.jpg?rlkey=ee8nfre7fsnu2scqnwij9yz71&raw=1",

pricingDivider: "https://www.dropbox.com/scl/fi/xdwmt9h3tvzeb5rtukd65/IMG_1924-Kopie.jpg?rlkey=wgrkr7uowq2degaloil406e7y&raw=1",

partnerDivider: "https://www.dropbox.com/scl/fi/2ph0b9byx6p37vihju3v2/IMG_1926-Kopie.jpg?rlkey=3nu47kmr1xwa669525foqx0pu&raw=1"

};

const planungStories = [

{

names: "Amelie & Alen",

location: "Hoher Darsberg",

origin: "Karlsruhe",

text: "Wir haben Caterina im Rahmen unserer Hochzeit auf dem Hohen Darsberg als Wedding Plannerin & Ansprechpartnerin kennengelernt. Sie an unserer Seite zu haben war absolut perfekt. Sie hat uns in so vielen Punkten unterstützt und uns unglaublich viel Arbeit abgenommen. Wir konnten sie jederzeit kontaktieren, hatten lange Gespräche und haben uns dank ihrer Ideen und Erfahrungen immer sehr gut aufgehoben gefühlt :) Cat ist unglaublich herzlich, sehr engagiert und lösungsorientiert. Am Hochzeitstag selbst hat sie den Ablauf und die Koordination professionell, mit ganz viel Wärme und Ruhe übernommen. Auch unsere Gäste waren von ihr absolut begeistert :) Wir denken auch heute noch gerne an die wunderschöne Zeit zurück. Wenn man mit Cat arbeitet, spürt man sofort, dass sie ihren Job liebt. Sie bringt bei egal welchem Wetter gute Laune mit, freut sich ehrlich für andere und setzt sich mit ganzem Herzen ein. Wer sich für eine Traurede von ihr entscheidet, kann sich auf absolute Herzlichkeit und ganz viel Liebe freuen. Liebe Cat, du bist ein unglaublich toller Mensch und wir danken dir von ganzem Herzen für diesen besonderen Tag und die tolle Art, wie du uns begleitet hast. Wir können dich jedem Brautpaar zu 100% empfehlen :)",

image: "https://www.dropbox.com/scl/fi/4b8gwg4tkwt0cenr0o5r5/Bildschirmfoto-2026-04-01-um-06.48.04.png?rlkey=m8j1wr467b65c47xjagj2i5j9&raw=1"

{

names: "Lisa & Robin",

location: "Hoher Darsberg",

origin: "Frankfurt",

text: "Cat war unsere absolute Traum-Weddingplanerin! Von Anfang an hat sie uns so viel Arbeit abgenommen und war dabei immer ganz nah an unserer Seite, nicht nur als Dienstleisterin, sondern fast schon wie eine Freundin. Mit ihrer warmen, herzlichen Art hat sie mit uns gelacht, mitgefiebert und jeden Schritt mit ganz viel Liebe zum Detail begleitet. Sie war unglaublich aufmerksam, hatte immer den Überblick und hat uns das Gefühl gegeben, dass wir uns zu 100 % auf sie verlassen können. Unsere Hochzeit war für uns einfach perfekt und das ist zu einem großen Teil ihr Verdienst. Aber nicht nur der Tag selbst, sondern auch die gesamte Zeit davor war durch sie viel entspannter, organisierter und schöner. Wir würden Cat immer, immer wieder buchen und können sie jedem nur von Herzen empfehlen. Danke für alles, liebe Cat! 💛",

image: "https://www.dropbox.com/scl/fi/32mpk2r981pfj0yysltoy/Bildschirmfoto-2026-04-01-um-06.50.32.png?rlkey=mgostv1ow4dbry9gykfpa0c4y&raw=1"

{

names: "Benjamin & Steffen",

location: "Hoher Darsberg",

origin: "Schliersee",

text: "Caterina ist ebenso unglaublich empathisch wie sympathisch und einfach ein ganz toller Mensch! Sie ist sprichwörtlich rund um die Uhr unermüdlich mit ganz viel Herzblut im Einsatz. Bei ihr ist man in den allerbesten Händen und fühlt sich hervorragend aufgehoben und exzellent betreut :-)",

image: "https://www.dropbox.com/scl/fi/4f3b5d0whfka2lr6a1h5j/Bildschirmfoto-2026-04-01-um-06.56.05.png?rlkey=l0b0lnrqjtf5w9joeqybua1ki&raw=1"

{

names: "Melanie & Kevin",

location: "",

origin: "Zürich",

text: "Wenige Entscheidungen bei der Planung unserer Hochzeit vielen uns so leicht wie diese. Die Entscheidung, dass wir Cat gerne als Rednerin für unsere Trauung hätten! Vom ersten Moment haben wir uns aufgehoben und unterstützt gefühlt. Das Entgegenkommen und der Aufwand, den Cat betreibt, sind unermüdlich und eine wahre Entlastung in einem so planungsintensiven Prozess wie einer Hochzeit. Sie hat uns mit so viel Rat und Tat beiseite gestanden und war zu jeder Zeit immer für uns erreichbar und hat sich uns angenommen. Die perfekt, auf uns abgestimmte Traurede hat nicht nur uns, sondern alle unsere Gäste zu Tränen gerührt und gleichermaßen zum Lachen gebracht. Cat hat einen großen Teil dazu beigetragen, unseren Tag einfach perfekt zu machen. Sie wird zum Glück immer ein fester Bestandteil unserer Hochzeitserinnerungen bleiben. Danke für alles!!! & Hoffentlich bis bald. K+M",

image: "https://www.dropbox.com/scl/fi/kds9an9kprgz8va680rau/Bildschirmfoto-2026-04-01-um-07.00.49.png?rlkey=v0aktnbl1c3bj4c5m0iv8f4b0&raw=1"

{

names: "Siena & Denis",

location: "Hoher Darsberg",

origin: "Stuttgart",

text: "Caterina war einfach fantastisch! Sie hat uns von Anfang an unglaublich professionell und mit viel Herzblut durch die gesamte Hochzeit begleitet. Egal ob es um die groben Abläufe oder die kleinsten Details ging, sie stand uns immer mit Rat und Tat zur Seite. Besonders beeindruckt hat mich, dass sie sich sogar an einem Sonntagabend bis spät mit mir in einer Video-Call Zeit genommen hat – das hat mich wirklich berührt. Am Tag der Hochzeit war sie ständig in unserer Nähe und hat dafür gesorgt, dass alles reibungslos abläuft. Erst als alles perfekt war, hat sie sich zurückgezogen. Und wie süß: Am Morgen danach hat sie mir sogar noch mein Lieblings-Eis vorbeigebracht, weil sie wusste, dass ich davor auf Süßes verzichtet habe. Ohne Caterina hätten wir uns nicht vorstellen können, dass unsere Hochzeit so traumhaft verläuft. Sie ist nicht nur eine wahre Profi, sondern auch eine Freundin geworden. Danke, Caterina!",

image: "https://www.dropbox.com/scl/fi/6hbuz6qfu4w1va2ln6ucz/Bildschirmfoto-2026-04-01-um-07.01.37.png?rlkey=cs9km8jay9c0xprd7srgb4jpa&raw=1"

}

];

const moodboardsData = [

{

title: "Modern Nude Elegance",

desc: "Beige, Nudetöne und reines Weiß mit einem zarten Hauch von Grün. Ein üppiger Traubogen, handgeschöpftes Papier und glitzernde Pumps verschmelzen zu einer dezenten, völlig unaufdringlichen Nude Elegance – hochmodern und absolut edel.",

img: "https://www.dropbox.com/scl/fi/85y8l3i1jgdnctay6wp6o/Bildschirmfoto-2026-04-04-um-02.31.36.png?rlkey=vz428fzpn3t9h0e8f9obb3y6k&raw=1"

{

title: "Cosmopolitan Fusion",

desc: "Eine atemberaubende chinesisch-deutsche Hochzeit voller Eleganz. Reines Weiß und strahlendes Gold treffen auf leuchtend pinke Akzente – von zarten Macarons bis zum spektakulären Pulverfeuerwerk. Transparente Teller mit Goldrand, Menükarten in Fächerform, ein schwarzer Bentley und das geradlinige Samtkleid der Braut schaffen einen hochmodernen, internationalen Look.",

img: "https://www.dropbox.com/scl/fi/iexxq2skhprqcq3fwfoag/Bildschirmfoto-2026-04-04-um-02.18.45.png?rlkey=nj1757t4brn6i1u30fpp78sru&raw=1"

{

title: "Caribic Classic",

desc: "Eine dezent karibische Traumhochzeit zweier wundervoller Männer. Die Lieblingsfarben Blau und Gelb-Orange verschmelzen elegant mit Palmen, Strelitzien und goldenen Akzenten – sanft geerdet durch warme Brauntöne. Eine 4-stöckige Torte, üppige Blütenpracht auf hölzernen Säulen und stimmungsvolle Live-Percussion fangen den Zauber dieses intimen Tages perfekt ein.",

img: "https://www.dropbox.com/scl/fi/9dtg65u9zyn9om4kzbgsh/Bildschirmfoto-2026-04-03-um-09.39.22.png?rlkey=iv9x9nb83maivheyf7skm10zg&raw=1"

{

title: "Botanical Boho Chic",

desc: "Champagnerfarben und eine üppige weiße Blütenpracht verschmelzen mit intensiven grünen Akzenten. Für zwei detailverliebte Ärzte mit Leidenschaft für edle Weine und Molekularküche entstand ein Fest des puren Genusses. Ein funkelnder Champagnertower, Segenssprüche auf Strelitzienblättern entlang des weißen Teppichs, das Anschneiden der edlen Torte und das strahlende Paar, das Hand in Hand durch den Sektempfang flaniert.",

img: "https://www.dropbox.com/scl/fi/0gdk4rom4saxdwdzrlgja/Bildschirmfoto-2026-04-03-um-11.50.07.png?rlkey=ixa6fw02i51tndw3ndfciap5a&raw=1"

{

title: "Fine Art Garden",

desc: "Üppige Blütenpracht, Pastellnuancen & pure Poesie.",

img: "https://www.dropbox.com/scl/fi/jc3r9uq347n145kgb8k8w/Bildschirmfoto-2026-04-03-um-10.18.28.png?rlkey=8459k9wp41jtjvr91rrr7hkro&raw=1"

{

title: "Urban Glamour",

desc: "Stilvolle Modernität mit dem gewissen Etwas. Diese Hochzeit bestach durch ein feines, elegantes Konzept, das durch ganz besondere Highlights unvergesslich wurde – wie die beeindruckende Ankunft des Bräutigams in einem weißen Helikopter. Üppige florale Arrangements in reinem Weiß und sattem Grün sorgten für ein frisches, modernes Flair. Ein wunderschönes Fest, das zeigt, wie herzlich und persönlich moderner Glamour sein kann.",

img: "https://www.dropbox.com/scl/fi/15ulboc8utpv7o3tb5gc2/Bildschirmfoto-2026-04-03-um-10.53.19.png?rlkey=6k0apau00yiyohuto75w7ayai&raw=1"

{

title: "Romantic Glow",

desc: "Strahlende Lichter, reines Weiß & sanfte rosafarbene Akzente.",

img: "https://www.dropbox.com/scl/fi/j5g9hflvfec54u7ajvjgu/Bildschirmfoto-2026-04-03-um-17.56.19.png?rlkey=aowjgsf21ikznf7rio0t0hkvl&raw=1"

}

];

const videoUrl = "https://www.dropbox.com/scl/fi/324bciv3lskoodfv9vamn/imagefilm.mp4?rlkey=rnkpofa3b4ik4ohq1qwb8cqk1&raw=1";

const socialLinks = {

instagram: "https://www.instagram.com/lofestoryanddetails/",

whatsapp: "https://wa.me/491633459243",

mail: "mailto:hallo@authentic-k.de"

};

const partners2026 = {

locations: [

{ name: "Hoher Darsberg - Heidelberg", url: "https://www.hoher-darsberg.de/" },

{ name: "Burg Schwarzenstein - Rheingau", url: "https://www.burg-schwarzenstein.de/" },

{ name: "Eventmühle Kraichgau - Karlsruhe", url: "https://eventmuehle-kraichgau.de/" },

{ name: "Raumühle - Darmstadt", url: "https://www.raumuehle.de/" },

{ name: "Weingut Steinbachhof - Stuttgart", url: "https://www.steinbachhof.de/" },

{ name: "Schloss Langenzell - Heidelberg", url: "https://www.schlosslangenzell.de/" },

{ name: "Morrhof - Bad Dürkheim", url: "https://morrhof.de/" },

{ name: "Schlossgut Lautenbach - Heilbronn", url: "https://www.schlossgut-lautenbach.de/" },

{ name: "Bonsai Zentrum - Heidelberg", url: "https://www.bonsaizentrum-hd.de/" },

{ name: "Casarose - Cannes (Frankreich)", url: "https://www.hotelcasarose.fr/" },

{ name: "Seehotel am Kaiserstrand - Bodensee", url: "https://www.kaiserstrand.at/de/" },

{ name: "Landhaus Westerhof - Hamburg", url: "https://landhaus-westerhof.de/" },

{ name: "Greenevents - Frankfurt", url: "https://www.greenevents.de/" },

{ name: "Stella Rheni - Bonn", url: "https://eventlocation-stella-rheni.de/" },

{ name: "Schlossgut Lüll - Stuttgart", url: "https://schlossgut-luell.de/" },

{ name: "Unser Forsthaus - Heilbronn", url: "https://www.unserforsthaus.de/" },

{ name: "Alte Reederei - Heilbronn", url: "https://alte-reederei-hn.de/" },

{ name: "Manufaktur - Mannheim", url: "https://www.manufaktur-ma.de/" },

{ name: "Woodyfull - Trier", url: "https://www.woodyfull.com/" },

{ name: "Kitchen & Soul - Baden-Baden", url: "https://www.kitchenandsoul.de/" }

photography: [

{ name: "Bee Mine - Mannheim", url: "https://www.bee-mine.de/" },

{ name: "Sandy Schuster - Mannheim", url: "https://www.sandyschuster.com/" },

{ name: "Tina Rössler - Frankfurt", url: "https://www.hochzeitsfotograf-tinaroesler.de/" },

{ name: "Ruffmoment - Homburg", url: "https://ruffmoment.com/" },

{ name: "Feinheidt - Heilbronn", url: "https://www.feinheidt.com/" },

{ name: "Julia Löffler - Stuttgart", url: "https://julialoeffler.com/" },

{ name: "Moment Films - Stuttgart", url: "https://www.moments-films.de/" },

{ name: "Koko Photography - Stuttgart", url: "https://koko-photography.com/" },

{ name: "Jackie Chick Photographie - Hamburg", url: "https://jchickphotography.com/" },

{ name: "Jonathan Schüssler - Heidelberg", url: "https://jonathanschuessler.com/" },

{ name: "Kevin Schulz - Wetzlar", url: "https://kevinschulz.com/" },

{ name: "Alex Maus - Marburg", url: "https://www.instagram.com/itsalexmaus/" }

music: [

{ name: "DJ Lumes - Karlsruhe", url: "https://www.facebook.com/djlumes/?locale=de_DE" },

{ name: "Dj Alex Maus - Marburg", url: "https://www.instagram.com/itsalexmaus/" },

{ name: "Amy Sue & Friends - Karlsruhe", url: "http://amy-sue.de/" },

{ name: "Tailia Belle - Karlsruhe", url: "https://www.instagram.com/taliabelle_official/" },

{ name: "Vincent Grenouille - Düsseldorf", url: "https://vincent-grenouille.de/" },

{ name: "Kapp & Chino - Wiesbaden", url: "https://www.kappundchino.de/" },

{ name: "Michael Gilb - Mannheim", url: "https://www.michael-gilb.de/" }

floristryStyling: [

{ name: "Gärtnerei Reinwald - Heilbronn", url: "https://gaertnerei-reinwald.de/" },

{ name: "Florales & Mehr - Heidelberg", url: "https://www.florales-mehr.de/" },

{ name: "Florales Handwerk - Sinsheim", url: "https://floraleshandwerk.de/" },

{ name: "Elena Cardella - Heidelberg", url: "https://www.makeupbyec.com/" },

{ name: "Styling Excellence - Heilbronn", url: "https://styling-excellence.de/" },

{ name: "Isabella Kirchner - Mannheim", url: "https://www.isabellakirchner.com/" }

]

};

// --- BASE UI HELPERS ---

function SchemaMarkup() {

const schema = {

"@context": "https://schema.org",

"@type": "WeddingPlanner",

"name": "authentic.k - Caterina Kohler",

"image": images.catPortrait,

"url": "https://www.authentic-k.de"

};

return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />;

}

function SignatureLogo({ size = "large", light = true, showSubtitle = false, smallSubtitle = false, subtitleText = "Freie Rednerin" }) {

const textColor = light ? 'text-[#FDFBF7]' : 'text-[#3D1E36]';

const subtitleSize = smallSubtitle ? 'text-[7px] md:text-[8px]' : 'text-[8px] md:text-[11px]';

return (

<span className={`${textColor} font-sans font-thin tracking-[0.3em] uppercase ${size === "large" ? 'text-4xl md:text-7xl' : 'text-xl md:text-2xl'}`}>authenti</span>

</div>

{showSubtitle && (

<span className={`text-[#C5A059] font-sans uppercase tracking-[0.2em] font-light ${subtitleSize}`}>{subtitleText}</span>

</div>

)}

</div>

);

}

// --- UPDATED NAV WITH ACCORDION ---

function Nav({ setView, setIsMenuOpen, isMenuOpen, view }) {

const isDark = (view !== 'landing');

const dynamicSubtitle = view === 'planning' ? "Hochzeitsplanung" : "Freie Rednerin";

const [expandedSection, setExpandedSection] = React.useState(null);

const toggleExpand = (section) => {

setExpandedSection(prev => prev === section ? null : section);

};

const handleNavigate = (targetView, sectionId) => {

// Falls man sich auf einer anderen Hauptseite befindet, zuerst Ansicht wechseln

if (view !== targetView) {

setView(targetView);

}

setIsMenuOpen(false);

// Etwas Zeit geben, falls die Ansicht (DOM) erst rendern muss

setTimeout(() => {

if (sectionId === 'top') {

window.scrollTo({ top: 0, behavior: 'smooth' });

} else {

const element = document.getElementById(sectionId);

if (element) {

element.scrollIntoView({ behavior: 'smooth', block: 'start' });

}

}, view !== targetView ? 300 : 100);

};

return (

{view !== 'landing' && (

<div onClick={() => { setView('landing'); window.scrollTo(0,0); }} className="cursor-pointer">

<SignatureLogo

size="small"

light={true}

showSubtitle={view === 'trauung' || view === 'planning'}

smallSubtitle={true}

subtitleText={dynamicSubtitle}

</div>

<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-[#C5A059] hover:bg-white/10 p-2 rounded-full transition-all">

{isMenuOpen ? <X size={32} /> : <Menu size={32} />}

</button>

</>

)}

</div>

{/* Mobile Menu Slide-In */}

<button onClick={() => setIsMenuOpen(false)} className="self-end text-[#C5A059] mb-12"><X size={32}/></button>

{/* Akkordeon: Freie Trauung */}

<button onClick={() => toggleExpand('trauung')} className="w-full flex justify-between items-center text-2xl font-serif text-[#FDFBF7] hover:text-[#C5A059] text-left transition-colors">

Freie Trauung

</button>

<button onClick={() => handleNavigate('trauung', 'top')} className="text-sm font-bold tracking-widest uppercase text-[#C5A059] hover:text-[#FDFBF7] text-left">Zur Übersicht</button>

<button onClick={() => handleNavigate('trauung', 'bio')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Über mich</button>

<button onClick={() => handleNavigate('trauung', 'vision')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Philosophie</button>

<button onClick={() => handleNavigate('trauung', 'video')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Video</button>

<button onClick={() => handleNavigate('trauung', 'feedback')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Love Notes (Feedback)</button>

<button onClick={() => handleNavigate('trauung', 'galerie')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Galerie</button>

<button onClick={() => handleNavigate('trauung', 'journey')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Der Ablauf</button>

<button onClick={() => handleNavigate('trauung', 'pricing')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Pakete & Investition</button>

<button onClick={() => handleNavigate('trauung', 'faq')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Häufige Fragen (FAQ)</button>

<button onClick={() => handleNavigate('trauung', 'network')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Network & Friends</button>

</div>

{/* Akkordeon: Hochzeitsplanung */}

<button onClick={() => toggleExpand('planning')} className="w-full flex justify-between items-center text-2xl font-serif text-[#FDFBF7] hover:text-[#C5A059] text-left transition-colors">

Hochzeitsplanung

</button>

<button onClick={() => handleNavigate('planning', 'top')} className="text-sm font-bold tracking-widest uppercase text-[#C5A059] hover:text-[#FDFBF7] text-left">Zur Übersicht</button>

<button onClick={() => handleNavigate('planning', 'leistungen')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Meine Leistungen</button>

<button onClick={() => handleNavigate('planning', 'design')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Design & Struktur</button>

<button onClick={() => handleNavigate('planning', 'lovestories')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Lovestories (Feedback)</button>

<button onClick={() => handleNavigate('planning', 'moods')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Design Moodboards</button>

<button onClick={() => handleNavigate('planning', 'destination')} className="text-sm font-light tracking-wide text-[#FDFBF7]/80 hover:text-[#C5A059] text-left">Destination Weddings</button>

</div>

{/* Feste Links unten */}

<a href={socialLinks.whatsapp} target="_blank" rel="noopener noreferrer" onClick={() => setIsMenuOpen(false)} className="text-sm uppercase tracking-widest font-bold text-[#C5A059] hover:text-[#FDFBF7] text-left flex items-center gap-2">

<MessageCircle size={16} /> WhatsApp Kontakt

</a>

<button onClick={() => handleNavigate(view, 'contact')} className="text-sm uppercase tracking-widest font-bold text-[#C5A059] hover:text-[#FDFBF7] text-left flex items-center gap-2">

<Mail size={16} /> E-Mail schreiben

</button>

</div>

{isMenuOpen && <div onClick={() => setIsMenuOpen(false)} className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[95]"></div>}

</nav>

);

}

// --- LEGAL VIEWS ---

const ImpressumView = () => (

<h1 className="text-5xl md:text-7xl font-serif italic text-[#3D1E36]">Impressum</h1>

<h2 className="text-xl font-bold uppercase tracking-[0.2em] text-[#C5A059]">Verantwortlich nach § 5 TMG</h2>

<p className="text-lg leading-relaxed">Caterina Kohler<br />authentic.k<br />Wallonenstr. 40<br />69250 Schönau</p>

</section>

<h2 className="text-xl font-bold uppercase tracking-[0.2em] text-[#C5A059]">Kontakt</h2>

<p className="text-lg leading-relaxed">Telefon: 0163 345 9243<br />E-Mail: <a href={socialLinks.mail} className="underline hover:text-[#C5A059]">hallo@authentic-k.de</a></p>

</section>

<p>Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links. Für den Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>

</section>

</div>

);

const DatenschutzView = () => (

<h1 className="text-5xl md:text-7xl font-serif italic text-[#3D1E36]">Datenschutz</h1>

<h2 className="text-xl font-bold uppercase tracking-[0.2em] text-[#C5A059]">1. Google Analytics</h2>

<p>Wir nutzen Google Analytics zur Webanalyse (Anbieter Google Ireland Limited). Ihre IP-Adresse wird innerhalb der EU gekürzt. Sie können der Erfassung via Browser-Einstellung widersprechen.</p>

</section>

<h2 className="text-xl font-bold uppercase tracking-[0.2em] text-[#C5A059]">2. WhatsApp & Instagram</h2>

<p>Bei Kontakt via WhatsApp werden Daten an Meta übertragen. Unser Instagram-Feed wird via Elfsight geladen; dabei werden technische Browserdaten an Elfsight und Instagram übermittelt.</p>

</section>

<h2 className="text-xl font-bold uppercase tracking-[0.2em] text-[#C5A059]">3. Datensicherheit</h2>

<p>Ihre Kommunikation wird vertraulich behandelt. Personenbezogene Daten werden nur mit Einwilligung oder zur Vertragserfüllung verarbeitet.</p>

</section>

</div>

);

// --- PLANUNG SPECIFIC COMPONENTS ---

function PlanungDetails() {

return (

{/* Left Column: Was ich für euch tue */}

Was ich für euch tue

</h2>

<div>

<h3 className="text-sm font-bold tracking-[0.2em] uppercase text-[#C5A059] mb-2">Locationsuche</h3>

<p className="font-light leading-relaxed text-[#3D1E36]/80">Den perfekten Ort aufspüren, der eure Herzen höher schlagen lässt. Ob verwunschenes Schloss, freie Natur oder gemütliche Scheune – wir finden den Raum für eure Magie.</p>

</div>

<div>

<h3 className="text-sm font-bold tracking-[0.2em] uppercase text-[#C5A059] mb-2">Dekokonzept & Design</h3>

<p className="font-light leading-relaxed text-[#3D1E36]/80">Eure persönliche Vision zum Leben erwecken. Mit viel Liebe zum Detail kreieren wir eine Atmosphäre aus Farben, Blüten und Licht, die euch und eure Gäste verzaubert.</p>

</div>

<div>

<h3 className="text-sm font-bold tracking-[0.2em] uppercase text-[#C5A059] mb-2">Budgetierung</h3>

<p className="font-light leading-relaxed text-[#3D1E36]/80">Eure Investition behalte ich transparent und verlässlich im Blick. So könnt ihr euch völlig entspannt zurücklehnen und die pure Vorfreude genießen.</p>

</div>

<div>

<h3 className="text-sm font-bold tracking-[0.2em] uppercase text-[#C5A059] mb-2">Dienstleister-Management</h3>

<p className="font-light leading-relaxed text-[#3D1E36]/80">Ich bringe echte Herzensdienstleister für euch zusammen. Ein handverlesenes Team, das euren Tag mit genauso viel Leidenschaft begleitet wie ich.</p>

</div>

<div>

<h3 className="text-sm font-bold tracking-[0.2em] uppercase text-[#C5A059] mb-2">Koordination am Tag</h3>

<p className="font-light leading-relaxed text-[#3D1E36]/80">Ich halte im Hintergrund liebevoll alle Fäden zusammen. Eure einzige Aufgabe an diesem Tag? Loslassen, feiern und jeden einzelnen Gänsehaut-Moment voll auskosten.</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#C5A059] block leading-tight">Jahre Erfahrung<br/>in der Branche</span>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#C5A059] block leading-tight">Erfolgreich geplante<br/>Hochzeiten</span>

</div>

{/* Right Column: Cat in a Nutshell */}

<h3 className="absolute -top-5 right-8 bg-[#FDFBF7] px-4 text-2xl font-serif italic text-[#C5A059]">Cat in a Nutshell</h3>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Morgenmensch oder Nachteule?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Morgenmensch! Ganz klar, denn der frühe Vogel fängt den Wurm... ☀️🐛</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Ordnung oder Chaos?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Kreatives Chaos im Kopf 🎨, aber sortierte Excel-Listen im Laptop 📊. Die perfekte Mischung.</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Lieblingsgetränk?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Als Ischitanerin liebe ich Zitrone 🍋, Limoncello Spritz und guten Espresso ☕... oder einen Zitronentee aus Zitronenschale und ganz viel Zucker!</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Was ich liebe?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Ganz klar meine Familie, meine 5 Tiere, Reisen, Pfützenspringen und große und kleine Abenteuer. Mein Mann sagt, mein ganzes Leben ist ein Event. Ja & warum nicht? Ich liebe das Leben in jedem kleinen Detail... ✨</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Gänsehaut-Moment?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Wenn der Bräutigam die Braut zum ersten Mal sieht. Da muss ich mich selbst immer zusammenreißen! 🥹</p>

</div>

<div>

<span className="text-[10px] font-bold tracking-widest uppercase text-[#3D1E36] block mb-1">Erfahrung & Prägung?</span>

<p className="text-sm font-light leading-relaxed text-[#3D1E36]">Events und Hochzeiten zu planen habe ich in Zermatt, Baveno, im Münsterland (SportSchloss Velen) und vor allem auf dem Hohen Darsberg gelernt. Jürgen Frey ist für mich ein absolutes Vorbild – als Visionär, Organisationstalent und darin, sich selbst treu zu bleiben.</p>

</div>

</section>

{/* Full-Width Interactive Image Divider */}

<img

src={images.planungFooterImg}

className="w-full h-full object-cover grayscale hover:grayscale-0 transition-all duration-1000 ease-in-out cursor-pointer"

alt="Impressionen Meisterwerke"

</section>

</>

);

}

function DesignStrukturSection() {

return (

{/* GARANTIERT SICHTBARER HINTERGRUND: Viel präsenter, dicker und dauerhaft animiert */}

<svg

viewBox="0 0 1000 800"

className="w-[150%] h-[150%] max-w-none text-[#C5A059]"

fill="none"

stroke="currentColor"

{/* Fundament-Linien */}

</g>

{/* Großes, verspieltes Design-Artwork */}

{/* Fließende Bänder */}

{/* Skizzierte Herzen */}

{/* Große, funkelnde Sterne */}

</g>

{/* Riesige florale Zweige */}

</g>

</g>

{/* Farb-Blobs / Moodboard-Kreise */}

</g>

</svg>

</div>

{/* Left Column: Text & Cards */}

<span className="inline-block mb-2">Design trifft</span><br/>

<span className="inline-block text-[#C5A059]" style={{ fontFamily: '"Brush Script MT", cursive' }}>Struktur.</span>

</h2>

Planung ist für mich wie das Erschaffen eures ganz persönlichen Wohlfühlortes. Ich baue ein sicheres Fundament, auf das ihr euch blind verlassen könnt – mit einem Netzwerk aus echten Herzensdienstleistern, liebevoller Gästebetreuung und einem Zeitplan, der euch Raum zum Durchatmen lässt. Und dann kommt die Magie: das Design. Mit viel Feingefühl kreiere ich Farbwelten, Moodboards und Atmosphären, die nicht nur atemberaubend aussehen, sondern sich zu 100% nach euch anfühlen. Jedes kleine Detail wird zu einem Spiegel eurer einzigartigen Geschichte.

</p>

</div>

<span className="text-xs font-bold tracking-[0.2em] uppercase text-[#C5A059] block w-max mb-3">DESIGN</span>

Vision, Mood<br/>& Papeterie

</span>

</div>

<span className="text-xs font-bold tracking-[0.2em] uppercase text-[#C5A059] block w-max mb-3">STRUKTUR</span>

Dienstleister,<br/>Gäste & Pläne

</span>

</div>

{/* Right Column: Collage */}

<h3 className="absolute top-6 left-6 text-5xl md:text-6xl text-[#FDFBF7] drop-shadow-md" style={{ fontFamily: '"Brush Script MT", cursive' }}>Moods</h3>

</div>

</section>

);

}

function LovestoriesSection() {

const scrollContainerRef = React.useRef(null);

const [selectedStory, setSelectedStory] = React.useState(null);

const scroll = (direction) => {

if (scrollContainerRef.current) {

const scrollAmount = direction === 'left' ? -400 : 400;

scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });

}

};

return (

Echte <span className="text-[#C5A059]" style={{ fontFamily: '"Brush Script MT", cursive' }}>Lovestories</span>

</h2>

<p className="text-[#FDFBF7]/70 mt-8 text-lg font-light tracking-wide">Einblicke in unvergessliche Momente und wahre Geschichten.</p>

</div>

{/* Navigation Arrows */}

<button onClick={() => scroll('left')} className="absolute -left-6 top-1/2 -translate-y-1/2 z-20 bg-[#C5A059] text-[#1A2B3C] w-14 h-14 rounded-full flex items-center justify-center hover:scale-105 transition-transform shadow-xl hidden md:flex">

</button>

<button onClick={() => scroll('right')} className="absolute -right-6 top-1/2 -translate-y-1/2 z-20 bg-[#C5A059] text-[#1A2B3C] w-14 h-14 rounded-full flex items-center justify-center hover:scale-105 transition-transform shadow-xl hidden md:flex">

</button>

{/* Scrollable Container */}

{planungStories.map((story, i) => (

<div key={i} className="min-w-[320px] md:min-w-[420px] w-[320px] md:w-[420px] flex-shrink-0 snap-start bg-[#3D2336] shadow-2xl rounded-sm overflow-hidden group/card cursor-pointer border border-white/5 flex flex-col" onClick={() => setSelectedStory(story)}>

{story.location && (

{story.location}

</div>

)}

</div>

<h3 className="text-3xl font-serif text-[#C5A059] mb-1">{story.names}</h3>

<span className="text-[#FDFBF7]/60 text-[10px] font-bold tracking-widest uppercase mb-4 block">Hochzeitsplanung | {story.origin}</span>

<p className="text-[#FDFBF7]/80 font-light text-sm line-clamp-4 leading-loose flex-grow">{story.text}</p>

Ganzer Einblick <Plus size={14} />

</div>

))}

</div>

{/* Story Modal */}

{selectedStory && (

<div className="absolute inset-0 bg-[#1A2B3C]/90 backdrop-blur-md" onClick={() => setSelectedStory(null)}></div>

<button className="absolute top-6 right-6 text-[#3D1E36]/50 hover:text-[#C5A059] z-20 bg-white/50 backdrop-blur-sm p-2 rounded-full transition-colors" onClick={() => setSelectedStory(null)}>

</button>

</div>

{selectedStory.location && <span className="text-[#C5A059] text-[10px] font-bold tracking-[0.2em] uppercase block mb-2">{selectedStory.location}</span>}

<h3 className="text-3xl md:text-5xl font-serif text-[#3D1E36] mb-1">{selectedStory.names}</h3>

<span className="text-[#3D1E36]/50 text-xs font-bold tracking-[0.2em] uppercase block mb-8">Hochzeitsplanung | {selectedStory.origin}</span>

<p className="text-[#3D1E36]/80 font-light leading-loose whitespace-pre-line text-sm md:text-base">{selectedStory.text}</p>

</div>

)}

</section>

);

}

function MoodboardsSection() {

const [selectedMood, setSelectedMood] = React.useState(null);

return (

<span className="text-[#C5A059] text-[10px] tracking-[0.5em] uppercase font-bold block mb-4">Inspiration</span>

Design <span className="text-[#C5A059] italic" style={{ fontFamily: '"Brush Script MT", cursive' }}>Moods</span>

</h2>

Von zeitloser Eleganz bis hin zu urbanem Flair – taucht ein in Farbwelten und Atmosphären, die nicht nur wunderschön aussehen, sondern sich zu 100% nach eurer ganz persönlichen Geschichte anfühlen.

</p>

</div>

{moodboardsData.map((mood, idx) => {

// Masonry-artiges Grid: 1. und 7. Element nehmen 2 Spalten ein (wenn genug Platz)

const isWide = idx === 0 || idx === 6;

return (

<div key={idx} onClick={() => setSelectedMood(mood)} className={`relative overflow-hidden group rounded-sm shadow-xl aspect-[3/4] cursor-pointer ${isWide ? 'md:col-span-2 lg:col-span-2 md:aspect-[16/9] lg:aspect-[21/9]' : ''}`}>

<h3 className="text-2xl md:text-4xl font-serif text-[#FDFBF7] mb-2">{mood.title}</h3>

</div>

);

})}

</div>

{/* Lightbox Modal für die Vollansicht */}

{selectedMood && (

<div className="absolute inset-0 bg-[#1A2B3C]/95 backdrop-blur-md cursor-pointer" onClick={() => setSelectedMood(null)}></div>

<button

className="absolute top-4 right-4 md:top-0 md:right-0 text-white/50 hover:text-[#C5A059] z-20 p-2 transition-colors pointer-events-auto"

onClick={() => setSelectedMood(null)}

</button>

<img

src={selectedMood.img}

className="max-w-full max-h-[65vh] md:max-h-[75vh] object-contain shadow-2xl rounded-sm pointer-events-auto"

alt={selectedMood.title}

<h3 className="text-3xl md:text-5xl font-serif text-[#C5A059] mb-2">{selectedMood.title}</h3>

<p className="text-[#FDFBF7]/90 font-light text-sm md:text-base max-w-2xl mx-auto">{selectedMood.desc}</p>

</div>

)}

</section>

);

}

function DestinationWeddingsSection() {

return (

{/* Background Image with Fixed Parallax effect */}

<div

className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat md:bg-fixed"

style={{ backgroundImage: `url(${images.destinationBg})` }}

></div>

{/* Elegant Dark Overlay */}

{/* Content */}

<span className="text-[#C5A059] text-[10px] tracking-[0.6em] uppercase font-bold block drop-shadow-lg">Für bis zu 45 Herzensmenschen</span>

Tiny <br/>

<span className="text-[#C5A059] italic" style={{ fontFamily: '"Brush Script MT", cursive' }}>Destination Wedding</span>

</h2>

"Manchmal liegt der allergrößte Zauber im kleinsten Kreis. Für Paare, die nicht von der großen Bühne träumen, sondern sich ihr Ja-Wort ganz intim geben möchten."

</p>

Ob ein verstecktes Chalet in den <strong>Schweizer Alpen</strong>, eine verwunschene Villa in der <strong>Toskana</strong>, echtes Dolce Vita auf <strong>Sizilien</strong> oder ein magischer Abend direkt am <strong>Wasser</strong>. Ich plane und begleite euer intimes Hochzeitsabenteuer – von der Suche nach eurem ganz persönlichen Hideaway bis hin zum letzten liebevollen Detail.

</p>

href={socialLinks.whatsapp}

target="_blank"

rel="noopener noreferrer"

className="inline-flex items-center gap-3 bg-[#C5A059] text-[#1A2B3C] px-8 py-5 rounded-sm text-sm font-bold uppercase tracking-widest hover:bg-[#FDFBF7] transition-all duration-300 hover:scale-105 shadow-2xl"

Destination Wedding anfragen

</a>

</div>

</section>

);

}

// --- TRAUUNG SPECIFIC COMPONENTS ---

function TrauungBio({ isExpanded, setExpanded }) {

return (

</div>

<span className="text-[#3D1E36] font-sans font-thin tracking-[0.2em] uppercase text-2xl md:text-5xl">AUTHENTI</span>

</h2>

<p>Hi ich bin <strong className="text-[#C5A059] font-sans text-xl font-bold">Cat</strong> – freie Rednerin, Hochzeitsplanerin und mit vollen Herzen <strong className="text-[#C5A059] font-sans text-xl font-bold">Italo-Schwäbin.</strong></p>

<p>In meiner Brust schlagen somit zwei Herzen. Das eine sorgt für <strong className="text-[#C5A059] font-sans font-bold">Dolce Vita, großes Temperament und Tränen vor Lachen</strong>. Das andere sorgt dafür, dass wir pünktlich anfangen und der Plan steht.</p>

<p>Meine absolute Leidenschaft sind Menschen und ihre Geschichte.</p>

<p>Ich liebe das Leben in all seinen bunten Facetten (und Pasta, aber das ist ein anderes Thema).</p>

<p>Als freie Rednerin darf ich in eure Geschichte eintauchen.</p>

{!isExpanded ? (

<button onClick={() => setExpanded(true)} className="flex items-center gap-2 text-[#C5A059] font-bold uppercase tracking-widest hover:underline mt-4 text-xs">Mehr lesen <ChevronDown size={14} /></button>

) : (

<p>Diesen Schatz berge ich, um eure Trauung komplett authentisch zu gestalten.</p>

<p>Ihr und Eure Gäste sollt Euch in jeder Zeile spüren. Eure Liebe soll gefeiert und fühlbar werden.</p>

<p className="font-serif italic text-[#C5A059] text-xl py-2 bg-[#C5A059]/5 leading-snug">"Mein persönliches Ziel? Dass sich eure Mutter nach der Trauung fragt, seit wann wir uns eigentlich kennen."</p>

<p>Eure Trauung - der perfekte Auftakt für Eure Ehe und eine unvergessliche Feier.</p>

<button onClick={() => setExpanded(false)} className="flex items-center gap-2 text-[#C5A059] font-bold uppercase tracking-widest hover:underline mt-4 text-xs">Weniger lesen <ChevronDown size={14} className="rotate-180" /></button>

</div>

)}

</div>

</section>

);

}

function VisionSection() {

return (

{/* Full-Width Image Divider */}

<img

src={images.visionDivider}

alt="The Art of Celebration"

className="w-full h-full object-cover"

</div>

{/* The Art of Celebration nach ganz oben */}

<span className="text-[#C5A059] font-sans font-bold uppercase tracking-[0.3em] text-[10px]">The Art of Celebration</span>

</div>

{/* Philosophie in der Pinsel-Schrift und in Salbeigrün (Sage) */}

Philosophie

</span>

</div>

{/* Kernaussage in Gold, Sans-Serif, Uppercase und gesperrt */}

Eure Liebe, eure Geschichte, <br className="md:hidden" /> Euer Spirit!

</h2>

Meine Worte für Euch.

</p>

{/* Intro-Satz nach unten verschoben und ebenfalls in Salbeigrün (Sage) */}

Let's celebrate your life.

</p>

</div>

<div className="absolute -bottom-10 -right-10 text-[15vw] font-black text-[#3D1E36]/[0.02] pointer-events-none select-none uppercase">Vision</div>

</section>

</div>

);

}

function TrauungGallerySection() {

return (

// 'pt-12' (statt py-32) rückt die Sektion deutlich näher an die LoveNotes heran!

{/* Linke Spalte: Portraitbild (kleiner als zuvor) + NEUES Bild darunter */}

{/* object-top bleibt bestehen, damit der Kopf immer sichtbar ist */}

</div>

</div>

{/* Rechte Spalte: Querformat-Bild + Text in der Lücke darunter */}

</div>

{/* Der Text, ganz normal in der Lücke rechts platziert */}

So soll es sein, oder?! 🤍

</h2>

EURE Trauung! Euer persönlicher Augenblick!

</p>

Eure 45 Minuten, kurzweilig, voller Lachen, Freudentränen.<br className="hidden xl:block"/> Der perfekte Auftakt für Eure Ehe und eine unvergessliche Erinnerung für Euch und Eure Herzensmenschen.

</p>

</div>

{/* Untere Reihe (die 3 quadratischen Bilder) */}

</div>

</div>

</div>

</section>

);

}

function ProcessSection() {

const steps = [

{

num: "01",

title: "Das Kennenlernen",

text: "Wir treffen uns ganz entspannt auf einen (virtuellen) Kaffee oder Espresso. Dabei geht es vor allem um eins: Das Bauchgefühl. Stimmt die Chemie? Ihr könnt alle Fragen stellen und spürt direkt, wie ich ticke. Völlig unverbindlich und authentisch."

{

num: "02",

title: "Deep Dive",

text: "Wenn der Funke überspringt, bin ich via WhatsApp jederzeit für Euch da. Etwa 6 Monate vorher komme ich am liebsten zu Euch nach Hause für unser großes Traugespräch. Wir tauchen tief in Eure Geschichte ein. Einen Monat vor der Hochzeit gehen wir alles noch einmal durch, damit Ihr Euch absolut sicher und entspannt fühlt. Parallel kontaktiere ich Eure Herzensmenschen für ganz persönliche Highlights die Euch ganz bestimmt zu Tränen rühren und den Tag absolut unvergesslich machen."

{

num: "03",

title: "The Magic",

text: "Es geht um so viel mehr als „nur“ eine Rede. Am großen Tag bin ich frühzeitig an Eurer Seite, halte Euch den Rücken frei und beruhige die Nerven. Und dann kreieren wir Euren Moment: Eine Trauung, die Euch und Eure Gäste fesselt, mitreißt und die Liebe spürbar macht!"

}

];

return (

<span className="text-[#C5A059] text-[10px] tracking-[0.5em] uppercase font-bold block mb-4">Journey</span>

Unser gemeinsamer <br />

</h2>

{/* Dezente Verbindungslinie im Hintergrund (nur Desktop) */}

{steps.map((step, i) => (

{step.num}

</div>

<h3 className="text-2xl font-serif text-[#3D1E36] mb-4 tracking-wider text-center md:text-left">{step.title}</h3>

{step.text}

</p>

</div>

))}

</div>

</section>

);

}

function VideoSection() {

const [isPlaying, setIsPlaying] = React.useState(false);

return (

<span className="text-[#C5A059] text-[10px] md:text-xs tracking-[0.6em] uppercase font-medium block text-center">See the magic</span>

<div className="relative group cursor-pointer overflow-hidden rounded-sm shadow-2xl aspect-video max-w-5xl mx-auto text-left" onClick={() => setIsPlaying(true)}>

</div>

{isPlaying && (

<div className="fixed inset-0 z-[1000] flex items-center justify-center bg-[#1A2B3C]/95 backdrop-blur-md p-4 animate-fadeIn text-left" onClick={() => setIsPlaying(false)}>

<div className="max-w-6xl w-full aspect-video bg-black shadow-2xl border-4 border-white/5 rounded-sm overflow-hidden text-left" onClick={e => e.stopPropagation()}>

</div>

)}

</section>

);

}

function LoveNotes() {

const [index, setIndex] = React.useState(0);

const [expandedNotes, setExpandedNotes] = React.useState({});

const toggleNote = (i) => {

setExpandedNotes(prev => ({ ...prev, [i]: !prev[i] }));

};

const feedbacks = [

{

names: "LAURA & JOHANNES",

location: "HOHER DARSBERG",

text: "Caterina hat unsere freie Trauung begleitet und das war die beste Entscheidung, die wir getroffen haben 😊\nDer Tag war für uns wirklich rundum perfekt und genau so, wie wir es uns immer erträumt hatten. Wir waren beide überrascht, dass die Trauung tatsächlich mit zu unseren absoluten Highlights der gesamten Hochzeit gezählt haben. Caterina hat uns von Beginn an direkt ein gutes und persönliches Gefühl gegeben weshalb wir uns dann auch für Sie als Traurednerin entschieden haben. Das Gespräch mit ihr als wir ihr unsere gesamte Beziehungslaufbahn geschildert haben hat sich fast wie eine Therapie (im guten Sinn! 😃) angefühlt!\nSie hat die Trauung so persönlich gestaltet -es war wirklich etwas ganz besonderes ❤️\nVielen vielen Dank",

image: "https://www.dropbox.com/scl/fi/58051ir296oahitvh5eb2/Bildschirmfoto-2026-03-24-12.56.33.png?rlkey=lpdvt6vw29qnjkfx1xvxtssdg&raw=1"

{

names: "SARAH & PATRICK",

location: "HOHER DARSBERG",

text: "Wir möchten uns von ganzem Herzen für diesen wundervollen Tag und Vorallem die Trauung bedanken. Unsere freie Trauung war einfach unbeschreiblich – voller Liebe, Emotionen und unvergesslicher Momente.\nEs war atemberaubend zu erleben, wie viel Herzenswärme, Freude und Unterstützung uns an diesem Tag umgeben hat. Caterina ist und bleibt einfach die BESTE Rednerin die man sich vorstellen kann. Wir sind ihr so dankbar für all die schönen Gespräche & Momente (auch schon vor der Trauung).\nJeder einzelne Augenblick war etwas ganz Besonderes – ein Tag, den wir niemals vergessen werden.\nDanke danke danke ❤️",

image: "https://www.dropbox.com/scl/fi/zgtsarvi9o04u475s4jj2/Bildschirmfoto-2026-03-24-um-13.09.21.png?rlkey=zjojsqoj2ruh2x10f8zotdgx1&raw=1"

{

names: "CATHARINA & NICKLAS",

location: "AACHEN",

text: "Liebe Cat,\nwir sind dir von Herzen dankbar! Deine Rede war einfach wunderschön, berührend und perfekt – wir hätten uns keinen schöneren Moment vorstellen können. Besonders toll fanden wir, dass du dir im Vorfeld so viel Zeit genommen hast, extra nach Aachen gekommen bist und uns mit so viel Herzlichkeit begleitet hast. Die Idee mit dem Baum und der liebevoll zusammengestellten Aufnahme hat uns unglaublich bewegt. Auch unsere Gäste waren begeistert – wir haben nur positives Feedback bekommen.\n\nDu hast unseren Tag für uns wirklich vollkommen gemacht, und sogar um unsere kleine Luna hast du dich so rührend gekümmert. Wir können dich nur von Herzen weiterempfehlen und hoffen sehr, dich irgendwann wiederzusehen!",

image: "https://www.dropbox.com/scl/fi/mhq7crb9xozyek79s2tw4/Bildschirmfoto-2026-03-24-um-13.14.21.png?rlkey=ff97082eht2wd33t80exdojyh&raw=1"

{

names: "SARAH & SANDRO",

location: "HOHER DARSBERG",

text: "Dank Caterina hatten wir eine wunderschöne freie Trauung. Sie hat uns während den Treffen ganz aufmerksam zugehört und so eine individuelle und für uns perfekte Trauung gezaubert. Sogar unseren Hund hat sie in ihr Herz geschlossen und es uns ermöglicht, dass er uns die Ringe gebracht hat. Wir werden den Tag niemals vergessen und sind Caterina von Herzen für alles dankbar! Wer eine Traurednerin mit Herz & Verstand sucht, der ist hier an der richtigen Adresse!!",

image: "https://www.dropbox.com/scl/fi/lu6nr1rm99jmk4nl2bvt3/Bildschirmfoto-2026-03-24-um-13.21.42.png?rlkey=sv7ffx9m7e11ctv6e4h71squb&raw=1"

{

names: "ISABEL & MO",

location: "RAUMÜHLE",

text: "Wir können wirklich nicht glücklicher sein, Caterina kennengelernt zu haben und sie insbesondere damals als Rednerin für unsere freie Trauung gefragt zu haben.\nEs fühlte sich von Anfang an - eigentlich schon nach wenigen Minuten - richtig an. Cat steckt so viel Liebe, Herz und Kreativität in alles, das merkt man direkt.\nWir haben jedes einzelne Treffen sehr genossen.\n\nSchöner hätte unsere Hochzeit nicht sein können.\nEinen ganz großen Teil davon, hast Du, liebe Cat, dazu beigetragen!\nDeine Rede und deine Ideen, haben unseren Tag mit so viel Liebe, Wärme, Humor und Emotionen gefüllt - einfach unvergesslich - fast so, als hättest Du unsere Geschichte selbst erlebt. :)\n\nDu hast es geschafft, mit deiner liebevollen, authentischen Art uns und wirklich jeden Gast zu berühren und hast mit deinen Worten jedes Herz getroffen.\nDu bist ein wundervoller Mensch.\nNicht „nur“ unsere Traurednerin, sondern für uns eine ganz besondere Person - ein Herzensmensch.\nUmso schöner ist es, dass wir auch nach der Hochzeit weiter Kontakt haben und gemeinsam wunderschöne Momente und Erlebnisse teilen.",

image: "https://www.dropbox.com/scl/fi/ovr439p49f178650g9d9p/Bildschirmfoto-2026-03-24-um-13.32.40.png?rlkey=kfmu74q2xmmozo06gcfryx1r5&raw=1"

{

names: "MELISSA & JÖRN",

location: "ALTE REEDEREI",

text: "Eine Trauung, die für immer in unseren Herzen bleibt – Dank Cat!\n\nLetzten Oktober durften wir die wohl schönste und emotionalste freie Trauung erleben – und das haben wir Cat zu verdanken!\nSchon beim ersten Kennenlernen war klar: Wir sind sofort auf einer Wellenlänge.\nMit ihrer lockeren, humorvollen und gleichzeitig einfühlsamen Art hat sie uns von Anfang an das Gefühl gegeben, mit ihr genau die richtige Person an unserer Seite zu haben.\n\nCat hat sich um jedes Detail gekümmert, mit so viel Hingabe und Liebe, dass wir uns einfach nur wohlfühlen konnten.\nUnsere Geschichte, unsere Wünsche, unsere Herzensmelodie – sie hat alles aufgenommen und mit so viel Kreativität und Feingefühl in die Zeremonie eingebaut.\nBesonders bedeutend für uns war, wie sie unsere befreundeten Musiker mit einbezogen hat, sodass die Live-Musik unsere Trauung noch persönlicher und emotionaler machte.\n\nEs war eine Zeremonie, die uns in jeder Hinsicht widerspiegelte – einzigartig, herzlich, voller Liebe und mit genau dem Humor, der zu uns passt.\nCat hat sich jede Mühe gemacht, um unseren Tag unvergesslich zu gestalten, und das ist ihr mehr als gelungen.\nWir hätten uns keine bessere Traurednerin wünschen können!\n\nLiebe Cat, von Herzen DANKE! Du hast unsere Trauung perfekt gemacht und unsere Herzensmelodie damit weitergeschrieben!",

image: "https://www.dropbox.com/scl/fi/oq1gu9eo1bevkarkfojde/Bildschirmfoto-2026-03-24-um-13.36.41.png?rlkey=rgpicgssfb1hyx698m77765cz&raw=1"

{

names: "JUDITH & FERDI",

location: "MOSBACH",

text: "Caterina war unsere Traurednerin im vergangenen Jahr und hat uns bei unserer Freien Trauung begleitet.\nAlles in Allem war es eine wundervolle Trauung, an die wir uns sehr gerne zurückerinnern.\nSie hat sich unglaublich Mühe gegeben die Rede auf uns als Paar abzustimmen, hat unsere Liebsten wundervoll eingebunden. Besser kann man es nicht machen!!\nDanke für Alles !!!",

image: "https://www.dropbox.com/scl/fi/hizgguaafl1r4cveeblst/Bildschirmfoto-2026-03-24-um-14.15.31.png?rlkey=krkplerkx97albok455n1u7ns&raw=1"

{

names: "CLAUDIA & THOMAS",

location: "HEILBRONN",

text: "Caterina ist einfach super, professionel und authentisch. Jedes Treffen mit ihr war von tollen Gesprächen, Humor und Spaß geprägt. Die Trauung war super schön, emotional aber auch humorvoll, so hatten wir es uns gewünscht. Wir haben auch heute noch Kontakt :)",

image: "https://www.dropbox.com/scl/fi/huvb3nochnnq35kyfkhd2/Bildschirmfoto-2026-03-24-um-14.23.28.png?rlkey=us83umpcp6nbu9s4rr1uwwp55&raw=1"

{

names: "NICII & DANIEL",

location: "STUTTGART",

text: "Liebe Caterina,\nIch weis garnicht so recht wie ich anfangen soll.\nVon Anfang an stimmte bei uns die Chemie.\nWir haben uns so wohl gefühlt, so verstanden und so gut behütet.\nWir wussten überhaupt nicht was uns erwartet und sind komplett Blind in unser erstes Treffen gegangen. Du hast uns so toll durch den Prozess begleitet und jedes unserer Treffen ist immer länger geworden wie geplant, da wir immer in den Gesprächen so abgedriftet sind 😂.\nDer Gesprächsstoff ging uns also definitiv nie aus!\n\nAn unserem großen Tag hast du uns mehrfach Überrascht. Alle unsere Liebsten haben mitgewirkt und Ihr habt uns gemeinsam durch die Trauung geführt. Von Herzhaftem Lachen bis hin zu Tränen war alles dabei!\nGenau so haben wir uns die Trauung vorgestellt!\nEs waren einfach wir und es war einfach perfekt!\nWir wollten dir nochmal von Herzen danken!\nOhne dich wäre unsere Hochzeit nur halb so perfekt gewesen!\n\nAlso jeder der eine Humorvolle, Professionelle, Liebevolle und Leidenschaftliche Traurednerin sucht ist hier genau richtig!\nWir können Caterina von Herzen empfehlen!",

image: "https://www.dropbox.com/scl/fi/cwka5i9oyginihpgo4fmo/Bildschirmfoto-2026-03-24-um-14.30.04.png?rlkey=o5ecni8ezoem8czl9mh7klv5c&raw=1"

{

names: "ALEXANDRA & PATRICK",

location: "EVENTMÜHLE KRAICHGAU",

text: "Unsere Erfahrungen mit Caterina waren durch und durch positiv! Zum kennenlernen hat sie sich so viel Zeit genommen, wie es nötig war. Ihre Rede war sprachlich auf höchstem Niveau.",

image: "https://www.dropbox.com/scl/fi/5zu9rzt7f2pzzzd99y6a2/Bildschirmfoto-2026-03-24-um-23.23.13.png?rlkey=mlvqbtgahxl6x577nxthi4ll0&raw=1"

{

names: "ERIC & NINA",

location: "BURG SCHWARZENSTEIN",

text: "Liebe Cat,\n\nwir können schwer in Worte fassen, wie wunderbar wir deine Rede gefunden haben. Als wir deine Webseite das erste Mal gesehen und mit dir telefoniert haben, haben wir sofort ziemlich hohe Erwartungen gebildet. Diese sind dann bei jedem unserer Treffen immer weiter gestiegen. Aber wir hätten nicht gedacht, dass deine Rede unsere Erwartungen so deutlich noch übertrifft. Es war wie ein perfekter und magischer Traum, von dem man nicht mehr aufwachsen möchte. Zum Glück müssen wir ja auch nicht 🥰❤️\n\nVielen lieben Dank dafür!",

image: "https://www.dropbox.com/scl/fi/vkhfg7mp0h0ibapqwfapp/WhatsApp-Image-2026-03-24-at-23.41.20.jpeg?rlkey=kew99d86mjsyeeu24c2zj2d8m&raw=1"

{

names: "MELANIE & ZAFER",

location: "MANUFAKTUR MANNHEIM",

text: "Hallo liebste Caterina ❤️ Wir bedanken uns bei DIr. Du hast unsere Hochzeit wirklich so besonders gemacht. Auch heute noch stehen Freunde mit Tränen in den Augen vor uns, weil sie so emotional berührt waren von der Trauung. Und aus so ging es uns, wir haben auch heute noch nicht alles verarbeitet, weil wir so gerührt und bewegt waren. Du hast es einfach so perfekt für uns gemacht, auch mit den kleinen Überraschungen wie die beiden Lieder, die Du eingebaut hast ❤️.. Wir danke Dir von Herzen und melden uns auf jeden Fall, wenn wir mal wieder Weinheim sind. Es war wirklich eine tolle Zeit, die wir niemals vergessen werden.",

image: "https://www.dropbox.com/scl/fi/qhm2k921sp867x4ovt2uq/WhatsApp-Image-2026-03-24-at-23.32.11.jpeg?rlkey=7qa96o27cy78oylvu9ziyk5nc&raw=1"

{

names: "MIRI & HEIKO",

location: "KARLSRUHE",

text: "Wir hatten eine wunderschöne Zeit mit Caterina, vom ersten Telefonat bis zur wundervollen Trauung an unserer Hochzeit.\nDie Gespräche waren immer sehr vertraut und wir haben uns bei Caterina sehr gut aufgehoben gefühlt. Wir haben es immer liebevoll unsere \"kleine Paartherapie\" genannt, weil es so schön war mit ihr über uns als Paar zu reden und zu erzählen :D\nDie Trauung selbst war eine umwerfende Zeremonie und von der ein oder anderen Überraschung geprägt :)\nCaterina ist so ein toller Mensch und als Traurednerin nur zu empfehlen",

image: "https://www.dropbox.com/scl/fi/22yculx9xq8j4qyw7e2os/Bildschirmfoto-2026-03-24-um-23.56.45.png?rlkey=xo539s6ct8afoty0eetcaczpw&raw=1"

{

names: "ISI & MUHAMMED",

location: "ACHTWERK SCHWÄBISCH GEMÜND",

text: "Cat ist eine unbeschreibliche wundervolle Person.\n\nJedes Treffen und Gespräch mit Ihr war unglaublich schön und herzlich. Mit jedem Wort hat sie uns Ernst genommen und somit etwas besonderes aus unserer Geschichte gezaubert.\nSie half uns in der Zeit nicht nur als freie Rednerin, sondern auch als Freundin, Beraterin und wenn Man es so nennen kann, auch Psychologin 😅\nSie führte und begleitete uns mit einer unfassbaren Ruhe durch eine schwierige Zeit und hat sich viel mit Ihren Kollegen aus der Branche zusammengesetzt, damit wir trotz allem den wunderschönsten Tag unseres gemeinsamen Lebens haben können. Und dass hat Sie geschafft und alle mitreisen können, auch dann, wenn wir aufgegeben und alles absagen wollten.\nAlle haben während der Trauung gelacht aber auch geweint. Auch hat sie unsere engsten Vertrauten sehr in die Trauung mit einbezogen, was uns sehr viel bedeutet hat.\nAus tiefstem Herzen können wir diesen Herzensmenschen weiterempfehlen und wünschen allen zukünftigen Brautpaaren die selbe Unzerstützung, wie auch wir erfahren durften.",

image: "https://www.dropbox.com/scl/fi/5zr3a6y2gdseadt2ld4ex/Bildschirmfoto-2026-03-24-14.34.59.png?rlkey=2ov0xhicldk7syce3hak8itcx&raw=1"

}

];

const next = () => setIndex((prev) => (prev + 1) % feedbacks.length);

const prev = () => setIndex((prev) => (prev - 1 + feedbacks.length) % feedbacks.length);

return (

<span className="text-[#C5A059] text-[10px] tracking-[0.4em] uppercase font-bold text-center block mb-4">Feedback</span>

<span className="text-6xl md:text-[11rem] text-[#C5A059] -mt-2 md:-mt-8 text-left text-left" style={{ fontFamily: '"Brush Script MT", cursive' }}>Notes</span>

</h3>

{/* Prominente goldene Pfeile für das Karussell */}

</button>

</button>

{feedbacks.map((item, i) => {

const isExpanded = expandedNotes[i];

const needsExpand = item.text.length > 140;

const displayText = isExpanded || !needsExpand ? item.text : `${item.text.substring(0, 140)}...`;

return (

<span className="block text-[#C5A059] font-bold tracking-widest text-[10px] uppercase mb-1 text-left">{item.location}</span>

<h4 className="text-xl md:text-2xl font-serif text-white uppercase tracking-wider text-left">{item.names}</h4>

{/* HIER das whitespace-pre-line, damit die Absätze wunderschön erhalten bleiben */}

{displayText}

</p>

{needsExpand && (

<button onClick={() => toggleNote(i)} className="text-[#C5A059] font-bold uppercase tracking-widest text-[10px] mt-4 flex items-center gap-1 hover:text-white transition-colors">

{isExpanded ? 'Weniger lesen' : 'Mehr lesen'} <ChevronDown size={14} className={`transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`} />

</button>

)}

</div>

);

})}

</div>

{feedbacks.map((_, i) => (

<button key={i} onClick={() => setIndex(i)} className={`h-1 transition-all ${index === i ? 'w-8 bg-[#C5A059]' : 'w-2 bg-gray-200'}`} />

))}

</div>

</section>

);

}

function PricingSection({ type }) {

const content = type === "trauung" ? {

titleS: "Standard",

descS: "Ideal für Paare, die sich eine liebevolle, persönliche und stimmige Zeremonie wünschen, bei der eure Geschichte im Mittelpunkt steht.",

listS: [

"Kostenloses & unverbindliches Kennenlerngespräch",

"Ausführliches Traugespräch per FaceTime",

"Individuell geschriebene Traurede – mit eurer Geschichte im Mittelpunkt",

"Planung & Gestaltung des Ablaufs eurer Zeremonie",

"Tipps für Rituale und Musik",

"Persönliche Abstimmung mit Musiker:innen, Fotograf:in & Co.",

"Durchführung der freien Trauung am Hochzeitstag",

"Anfahrt im Umkreis von 150 km inkl.",

"Begleitung: Ich bin an eurem Tag an eurer Seite – prüfe die Location und Technik & führe euch und eure Gäste herzlich durch die Zeremonie"

titleP: "Premium",

descP: "Für alle, die sich das volle Herzenspaket wünschen – mit kreativer Begleitung, noch mehr Tiefe, persönlichen Extras und kleinen Gänsehautmomenten, die bleiben.",

listP: [

"Alle Inhalte des Standard-Pakets",

"plus:",

"Ausführliches Traugespräch bei euch zu Hause",

"Zweites digitales Gespräch zur Vertiefung",

"Individuell gestaltetes Trauritual oder symbolischer Moment",

"Einbindung von Herzensmenschen",

"Persönlich abgestimmte Trauunterlagen (Ablauf, Musiktipps, Traufragen)",

"Unterstützung bei Eheversprechen oder Redebeiträgen",

"Erweiterte Anfahrt (D'land inkl.)",

"Jederzeit per Whatsapp erreichbar",

"Am Tag der Hochzeit: kleines Rehearsal mit allen Beteiligten, so dass sich alle sicher im Ablauf fühlen."

]

} : {

titleS: "Teilplanung",

descS: "Für Paare, die bereits gestartet sind, aber punktuelle Unterstützung bei der weiteren Organisation benötigen.",

listS: ["Kennenlerngespräch (kostenlos)", "Location-Recherche & Auswahlhilfe", "Budget-Überwachung & Kostenkontrolle", "Vermittlung einzelner Dienstleister", "Konzept-Erstellung (Farben, Moodboard)", "Ansprechpartner für Gäste & Fragen", "Unterstützung bei Einladungen & RSVP"],

titleP: "Komplettplanung",

descP: "Lehnt euch zurück. Ich übernehme die gesamte Planung von A bis Z für euer maßgeschneidertes Hochzeitskonzept.",

listP: ["Das volle Rundum-Sorglos Paket", "Vollständige Budget-Verwaltung", "Komplette Dienstleister-Steuerung & Buchung", "Detaillierter Ablaufplan für den Tag", "Wedding-Day-Coordinator inklusive", "Design- & Deko-Konzept Umsetzung", "Begleitung bei allen Terminen", "Krisenmanagement & WhatsApp-Support"]

};

return (

<span className="text-white text-[10px] md:text-xs tracking-[0.5em] uppercase font-bold block mb-4 text-center">Investition</span>

</h2>

{/* Standard Card */}

<h3 className="text-3xl font-sans font-medium text-[#3D1E36] uppercase tracking-wider mb-4">{content.titleS}</h3>

{content.descS && <p className="text-[#3D1E36]/80 text-sm leading-relaxed mb-8">{content.descS}</p>}

{content.listS.map((li, i) => {

if(li === 'plus:') return <li key={i} className="text-[#C5A059] font-bold italic text-sm ml-8 my-2">{li}</li>;

const isBold = li === 'Alle Inhalte des Standard-Pakets' || li === 'Das volle Rundum-Sorglos Paket';

return (

{isBold ? <Star className="text-[#C5A059] shrink-0 mt-0.5" fill="currentColor" size={16}/> : <Check className="text-[#C5A059] shrink-0 mt-0.5" size={16}/>}

</li>

);

})}

</ul>

<a href={socialLinks.mail} className="block py-4 border border-[#3D1E36] text-center uppercase tracking-widest font-bold text-xs hover:bg-[#3D1E36] hover:text-white transition-all text-left">Anfragen</a>

</div>

{/* Premium Card */}

<div className="absolute top-0 right-0 bg-[#C5A059] text-[#1A2B3C] px-6 py-2 font-bold uppercase tracking-widest text-[10px] text-left">Signature</div>

<h3 className="text-3xl font-sans font-medium text-[#C5A059] uppercase tracking-wider mb-4">{content.titleP}</h3>

{content.descP && <p className="text-white/80 text-sm leading-relaxed mb-8">{content.descP}</p>}

{content.listP.map((li, i) => {

if(li === 'plus:') return <li key={i} className="text-[#C5A059] font-bold italic text-sm ml-8 my-2">{li}</li>;

const isBold = li === 'Alle Inhalte des Standard-Pakets' || li === 'Das volle Rundum-Sorglos Paket';

return (

{isBold ? <Star className="text-[#C5A059] shrink-0 mt-0.5" fill="currentColor" size={16}/> : <Check className="text-[#C5A059] shrink-0 mt-0.5" size={16}/>}

</li>

);

})}

</ul>

<a href={socialLinks.mail} className="block py-4 bg-[#C5A059] text-[#1A2B3C] text-center uppercase tracking-widest font-bold text-xs hover:bg-white transition-all text-left">Buchen</a>

</div>

</section>

);

}

function FAQSection() {

const [openIndex, setOpenIndex] = React.useState(null);

const faqs = [

{

q: "Wie weit reist du für eine Trauung?",

a: "Für die Liebe ist mir kein Weg zu weit – ich begleite euch überall dorthin, wo eure Geschichte geschrieben wird. Mein regionales Einzugsgebiet umfasst Baden-Württemberg, Rheinland-Pfalz und Hessen (Heidelberg, Mannheim, Speyer, Karlsruhe, Baden-Baden, Stuttgart, Heilbronn und Frankfurt). Aber meine Koffer sind für Abenteuer immer gepackt – wo immer eure Magie stattfindet, bin ich dabei! Dieses Jahr führt es mich zum Beispiel auch nach Hamburg, Cannes (Cote d'Azur), an den Bodensee (Österreich), nach Trier, Paderborn und Bonn."

{

q: "Was Passiert, wenn du am Hochzeitstag krank wirst?",

a: "In über 10 Jahren ist dieser Fall noch nie eingetreten – toi, toi, toi! Aber als Planerin liebe ich natürlich doppelte Böden. Sollte ich wirklich einmal flachliegen, greift sofort mein professionelles Backup-System. Ich habe ein festes Herzens-Netzwerk aus fantastischen, hochkarätigen Kolleg:innen, die euch auffangen und eure Trauung und die Hochzeitskoordination mit genauso viel Liebe übernehmen."

{

q: "Kannst du die Trauung auch zweisprachig halten?",

a: "Als echte Italo-Schwäbin? Na klar! Italienisch fließt ohnehin durch meine Adern. Aber für die Liebe lerne ich gerne dazu: Ich durfte schon Passagen auf Portugiesisch, Türkisch und Französisch einbauen, eine japanische Zeremonie einstudieren oder einen iranischen Gabentisch begleiten. Kulturelle Vielfalt Lebe und Liebe ich!"

{

q: "Können wir dich auch 'nur' für die Planung buchen?",

a: "Absolut! Ihr habt die völlig freie Wahl. Ob als eure freie Rednerin für die emotionalen Worte, als eure Weddingplanerin für das perfekte Fundament oder im 'Best of Both'-Paket - wir schnüren genau das Päckchen, das zu euren Träumen passt."

{

q: "Unterstützt du uns bei der Suche nach anderen Dienstleistern?",

a: "Von Herzen gerne! In all den Jahren durfte ich so viele wunderbare, kreative Köpfe kennenlernen. Ich teile mein exklusives Netzwerk an Fotograf:innen, Musiker:innen, Florist:innen und Styling-Profis mit euch. Ich empfehle euch nur Menschen, die echte Herzensdienstleister sind und menschlich zu 100% zu eurem Vibe passen."

{

q: "Begleitest du mehrere Hochzeiten am selben Tag?",

a: "Ein ganz klares Nein. Euer Tag gehört exklusiv euch! Ich nehme pro Wochenende extrem limitiert an und begleite definitiv nur eine Hochzeit pro Tag. So bin ich mit meinem ganzen Herzen, voller Energie und mit völliger zeitlicher Flexibilität nur für euch da."

{

q: "Wie lange dauert eine freie Trauung üblicherweise?",

a: "Meistens landen wir bei magischen 45 Minuten. Das ist der absolute Sweet-Spot! Genau genug Zeit für all eure wunderbaren Anekdoten, Lachen, Freudentränen und Rituale, ohne dass es sich zieht. Ein kurzweiliger, unvergesslicher Auftakt, nach dem alle sofort Lust aufs Feiern haben!"

}

];

return (

<span className="text-3xl md:text-5xl text-[#3D1E36] font-sans font-thin tracking-[0.2em] uppercase text-left text-left">Häufige</span>

<span className="text-5xl md:text-[7rem] text-[#C5A059] -mt-2 text-left text-left" style={{ fontFamily: '"Brush Script MT", cursive' }}>Fragen</span>

</h2>

{faqs.map((faq, i) => (

<button onClick={() => setOpenIndex(openIndex === i ? null : i)} className="w-full text-left flex justify-between items-center group py-4 text-left text-left">

{openIndex === i ? <Minus size={20} className="text-[#C5A059]" /> : <Plus size={20} className="text-[#3D1E36]/40" />}

</button>

{openIndex === i && <p className="text-[#3D1E36]/70 leading-loose animate-fadeIn pb-4 text-left whitespace-pre-line text-left text-left">{faq.a}</p>}

</div>

))}

</div>

</section>

);

}

function PartnerSection() {

const [expanded, setExpanded] = React.useState({ loc: false, photo: false, music: false, flor: false });

const renderList = (id, title, items) => {

const isEx = expanded[id];

const visible = isEx ? items : items.slice(0, 3);

return (

<h3 className="text-[#C5A059] font-bold uppercase tracking-[0.2em] text-[10px] border-b border-[#C5A059]/20 pb-2 text-left text-left">{title}</h3>

{visible.map((p, i) => (

{p.name} <ExternalLink size={12} className="opacity-0 group-hover:opacity-100 transition-opacity" />

</a>

))}

</div>

{items.length > 3 && (

<button onClick={() => setExpanded({...expanded, [id]: !isEx})} className="text-[9px] uppercase tracking-widest font-black text-[#C5A059]/50 hover:text-[#C5A059] transition-all flex items-center gap-1 text-left text-left">

{isEx ? "Weniger anzeigen" : "Mehr anzeigen"} <ChevronDown size={12} className={isEx ? 'rotate-180' : ''} />

</button>

)}

</div>

);

};

return (

{/* Full-Width Image Divider vor Network */}

</div>

<span className="text-[#C5A059] text-[10px] tracking-[0.5em] uppercase font-bold block mb-4 text-center text-left text-left">Network</span>

<span className="text-2xl md:text-5xl font-sans font-thin tracking-[0.3em] uppercase opacity-90 text-center text-left text-left">FRIENDS & PLACES</span>

</h2>

{/* Das Grid wurde auf 4 Spalten (lg:grid-cols-4) geändert und die Gruppierung aufgehoben */}

{renderList("loc", "Hochzeits-Locations", partners2026.locations)}

{renderList("photo", "Fotografen & Videografen", partners2026.photography)}

{renderList("music", "Bands & DJs", partners2026.music)}

{renderList("flor", "Floristik & Styling", partners2026.floristryStyling)}

</div>

<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[20vw] font-black text-white/[0.02] pointer-events-none select-none uppercase text-left text-left text-left">Friends</div>

</section>

</div>

);

}

function InstagramFeed() {

return (

<span className="text-[#C5A059] text-[10px] tracking-[0.6em] uppercase font-bold block mb-4 text-center text-left text-left text-left">Journey</span>

<span className="text-3xl md:text-5xl text-[#1A2B3C] font-sans font-thin tracking-[0.3em] uppercase leading-none text-left text-left text-left">FOLLOW THE</span>

<span className="text-6xl md:text-[9rem] text-[#C5A059] -mt-2 md:-mt-6 text-left text-left text-left text-left" style={{ fontFamily: '"Brush Script MT", cursive' }}>Moments</span>

</h2>

</div>

</section>

);

}

function Footer({ setView }) {

return (

<span className="text-3xl font-serif text-[#C5A059] block text-left text-left text-left">authentic.k</span>

<p className="leading-loose text-left text-left text-left">Caterina Kohler<br/>Wallonenstr. 40<br/>69250 Schönau</p>

</div>

</a>

</a>

</a>

</div>

<button onClick={() => { setView('landing'); window.scrollTo(0,0); }} className="hover:text-[#C5A059] transition-all block w-full md:ml-auto md:w-auto text-right text-left text-left text-left">Startseite</button>

<button onClick={() => { setView('impressum'); window.scrollTo(0,0); }} className="hover:text-[#C5A059] transition-all block w-full md:ml-auto md:w-auto text-right text-left text-left text-left">Impressum</button>

<button onClick={() => { setView('datenschutz'); window.scrollTo(0,0); }} className="hover:text-[#C5A059] transition-all block w-full md:ml-auto md:w-auto text-right text-left text-left text-left">Datenschutz</button>

</div>

</footer>

);

}

// --- COOKIE BANNER ---

function CookieBanner({ setView }) {

const [visible, setVisible] = React.useState(false);

React.useEffect(() => {

const timer = setTimeout(() => setVisible(true), 1500);

return () => clearTimeout(timer);

}, []);

if (!visible) return null;

return (

<h3 className="text-xl font-serif italic text-[#C5A059] mb-4 text-left text-left">Virtuelle Cookies</h3>

Wir nutzen Cookies und Tracking-Tools wie Google Analytics sowie externe Integrationen von Instagram (Elfsight) und WhatsApp, um Ihnen das bestmögliche Erlebnis zu bieten. Aber wir wissen, was Sie eigentlich wollen...

Details finden Sie in unserer <button onClick={() => { setView('datenschutz'); setVisible(false); }} className="underline hover:text-[#C5A059]">Datenschutzerklärung</button>.

</p>

<button onClick={() => setVisible(false)} className="bg-[#C5A059] text-[#3D1E36] py-3 text-xs font-bold uppercase tracking-widest hover:bg-white transition-all text-center text-left text-left">Alle akzeptieren (Technisch)</button>

<button onClick={() => setVisible(false)} className="border border-white/20 py-3 text-xs font-bold uppercase tracking-widest hover:bg-white/10 transition-all text-center text-left text-left">Nur essenzielle</button>

<button onClick={() => setVisible(false)} className="bg-[#1A2B3C] text-[#C5A059] py-3 text-xs font-bold uppercase tracking-widest hover:text-white transition-all text-center text-left text-left">Einfach nur einen Keks essen 🍪</button>

</div>

);

}

// --- MAIN APPLICATION ---

export default function App() {

const [view, setView] = React.useState('landing');

const [isMenuOpen, setIsMenuOpen] = React.useState(false);

const [hoverSide, setHoverSide] = React.useState(null);

const [isStoryExpanded, setIsStoryExpanded] = React.useState(false);

React.useEffect(() => {

// Elfsight Instagram Integration

const script = document.createElement("script");

script.src = "https://elfsightcdn.com/platform.js";

script.async = true;

document.body.appendChild(script);

const style = document.createElement('style');

style.innerHTML = `

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;700&display=swap');

body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; overflow-x: hidden; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.animate-fadeIn { animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

.hide-scrollbar::-webkit-scrollbar { display: none; }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

document.head.appendChild(style);

return () => { if (document.body.contains(script)) document.body.removeChild(script); };

}, []);

// Soft scroll to top when changing main views

React.useEffect(() => { window.scrollTo(0, 0); }, [view]);

if (view === 'impressum') return <><Nav setView={setView} setIsMenuOpen={setIsMenuOpen} isMenuOpen={isMenuOpen} view={view} /><ImpressumView /><Footer setView={setView} /></>;

if (view === 'datenschutz') return <><Nav setView={setView} setIsMenuOpen={setIsMenuOpen} isMenuOpen={isMenuOpen} view={view} /><DatenschutzView /><Footer setView={setView} /></>;

if (view === 'landing') {

return (

<h2 className="text-[#FDFBF7] text-[10px] md:text-[11px] tracking-[0.6em] uppercase font-medium mb-10 opacity-95">Freie Rednerin & Weddingplanerin</h2>

<h3 className="text-[#C5A059] font-serif italic font-light text-lg md:text-xl opacity-95 tracking-widest text-center">The art of celebration</h3>

</div>

<div onMouseEnter={() => setHoverSide('left')} onMouseLeave={() => setHoverSide(null)} onClick={() => setView('trauung')} className={`relative h-full cursor-pointer overflow-hidden transition-all duration-700 border-r border-white/5 bg-[#3D1E36] ${hoverSide === 'left' ? 'w-[75%]' : hoverSide === 'right' ? 'w-[25%]' : 'w-1/2'}`}>

<span className="text-4xl md:text-6xl block">Herzens</span>

<span className="text-2xl md:text-4xl block mt-[-4px] md:mt-[-8px]">worte</span>

</h2>

<p className={`text-xs uppercase tracking-widest mt-4 text-[#C5A059] transition-opacity duration-500 ${hoverSide === 'left' ? 'opacity-100' : 'opacity-0'}`}>Freie Trauung</p>

</div>

<div onMouseEnter={() => setHoverSide('right')} onMouseLeave={() => setHoverSide(null)} onClick={() => setView('planning')} className={`relative h-full cursor-pointer overflow-hidden transition-all duration-700 bg-[#1A2B3C] ${hoverSide === 'right' ? 'w-[75%]' : hoverSide === 'left' ? 'w-[25%]' : 'w-1/2'}`}>

<span className="text-4xl md:text-6xl block">Meister</span>

<span className="text-2xl md:text-4xl block mt-[-4px] md:mt-[-8px]">werke</span>

</h2>

<p className={`text-xs uppercase tracking-widest mt-4 text-[#C5A059] transition-opacity duration-500 ${hoverSide === 'right' ? 'opacity-100' : 'opacity-0'}`}>Hochzeitsplanung</p>

</div>

</div>

);

}

return (

<img

src={view === 'trauung' ? images.trauungHero : images.planungHero}

className={`absolute inset-0 w-full h-full object-cover transition-all duration-1000 ease-in-out ${view === 'trauung' ? 'opacity-20' : 'opacity-5 group-hover:opacity-15 brightness-50 saturate-50'}`}

alt="Hero"

<span className="text-3xl md:text-[6rem] text-white font-sans font-thin tracking-[0.3em] uppercase leading-none">{view === 'trauung' ? 'LIEBE' : 'MEISTER'}</span>

<span className={`text-[#C5A059] uppercase leading-none ${view === 'trauung' ? 'text-7xl md:text-[18rem] mt-8 md:mt-16' : 'text-6xl md:text-[11rem] mt-4 md:mt-8'}`} style={{ fontFamily: '"Brush Script MT", cursive' }}>{view === 'trauung' ? 'PUR' : 'Werke'}</span>

</h1>

</div>

</header>

{view === 'trauung' ? (

{/* Neues Vollbild vor der PricingSection */}

</div>

</>

) : (

</>

)}

<h2 className="text-6xl md:text-8xl font-serif italic text-[#3D1E36] mb-12 text-center text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left">Let's connect.</h2>

<a href={socialLinks.mail} className="text-2xl md:text-5xl font-sans font-black uppercase hover:text-[#C5A059] transition-colors border-b-2 border-transparent hover:border-[#C5A059] text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left">hallo@authentic-k.de</a>

<a href={socialLinks.whatsapp} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-xl font-bold hover:text-[#C5A059] transition-colors mt-4 text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left text-left"><MessageCircle size={24}/> 0163 345 9243 (WhatsApp)</a>

</div>

</section>

</div>

);

}