/* ──────────────────────────────────────────────────────────────────────
   Adviceworx Wedding — Landing Page
   Tracks the Figma source: F6F5EF cream, #101010 ink, Playfair + Inter.
   ────────────────────────────────────────────────────────────────────── */

/* ── Content ─────────────────────────────────────────────────────────── */

const FEATURES = [
  {
    title: "Eine eigene Website statt Papier",
    body: "Persönliche Einladung mit eurer Geschichte, Bildern und allen Details — als Link, der sich teilen lässt.",
  },
  {
    title: "RSVP & Formulare integriert",
    body: "Zu- und Absagen, Menüwahl, Allergien, Übernachtung — alles direkt über die Seite, übersichtlich für euch gesammelt.",
  },
  {
    title: "Template oder Custom Design",
    body: "Ab 250 € startbereit mit unserem Template. Oder wir entwerfen eure Einladung individuell — gemeinsam mit euch.",
  },
  {
    title: "In wenigen Tagen online",
    body: "Inhalte freigeben, Texte schreiben, Bilder hochladen — wir kümmern uns um Aufbau, Hosting und Domain.",
  },
  {
    title: "Mehrsprachig & mobil",
    body: "Auf jedem Gerät ein ruhiges Erlebnis. Auf Wunsch in Deutsch, Englisch oder weiteren Sprachen für internationale Gäste.",
  },
  {
    title: "Eure Daten, sicher",
    body: "Hosting in Deutschland, DSGVO-konform. Die Seite läuft solange ihr sie braucht — auch lange nach dem Tag.",
  },
];

const STEPS = [
  { num: "01", title: "Kennenlernen",   body: "Wir sprechen über euren Tag, eure Wünsche und welches Template oder Custom-Konzept passt." },
  { num: "02", title: "Inhalte sammeln",body: "Ihr füllt euer Inhalts­dokument: Daten, Programm, Bilder, Geschichten — ganz in eurem Tempo." },
  { num: "03", title: "Aufbau",         body: "Wir setzen eure Einladung um, ihr seht eine Preview und gebt Feedback — bis sie sich richtig anfühlt." },
  { num: "04", title: "Live & teilen",  body: "Eigene Domain, RSVP-Formular aktiv. Ihr verschickt den Link — und alles läuft automatisch zusammen." },
];

const FAQS = [
  { q: "Was kostet eine Einladungs­website?",
    a: "Unser Template startet bei 250 €. Darin enthalten sind das Setup, eure individuelle Domain für 12 Monate, alle Inhalte (auch Bilder), das RSVP-Formular und die Auswertung. Für ein Custom Design erstellen wir euch ein Angebot nach einem kurzen Briefing — abhängig von Umfang, Animationen und besonderen Wünschen." },
  { q: "Wie lange dauert die Umsetzung?",
    a: "Mit unserem Template ist die Seite typischerweise innerhalb von 5–10 Werktagen live, sobald wir eure Inhalte haben. Bei Custom Designs planen wir 3–6 Wochen — abhängig vom Konzept und der Anzahl der Korrekturschleifen." },
  { q: "Kann ich Inhalte später noch ändern?",
    a: "Ja. Kleinere Textänderungen, neue Bilder oder zusätzliche Programmpunkte könnt ihr jederzeit über uns einpflegen lassen — bis kurz vor dem Tag. Größere strukturelle Änderungen besprechen wir individuell." },
  { q: "Wie funktioniert das RSVP-Formular?",
    a: "Ihr definiert mit uns, welche Informationen ihr von euren Gästen braucht — von der Zusage über Menüwahl bis hin zu Allergien oder Übernachtung. Antworten landen in einer übersichtlichen Tabelle, die ihr jederzeit als Excel/CSV exportieren könnt." },
  { q: "Ist die Seite auch auf Englisch verfügbar?",
    a: "Ja. Auf Wunsch richten wir eure Seite mehrsprachig ein — typischerweise Deutsch + Englisch, weitere Sprachen sind möglich. Gäste sehen automatisch die passende Version." },
  { q: "Wo werden die Daten gespeichert?",
    a: "Hosting läuft auf Servern in Deutschland. Alle Antworten eurer Gäste sind DSGVO-konform gespeichert; nach der Hochzeit löschen wir die Daten auf Wunsch vollständig." },
  { q: "Was passiert nach der Hochzeit?",
    a: "Eure Seite bleibt mindestens 12 Monate online — gerne länger. Auf Wunsch verwandeln wir sie in eine kleine „Nach der Hochzeit“-Seite mit Bildern und Dankesworten." },
];

/* ── App ─────────────────────────────────────────────────────────────── */

function HomeApp() {
  return (
    <React.Fragment>
      <NavBar />
      <Hero />
      <Ornament />
      <Promise />
      <Features />
      <Steps />
      <FAQ />
      <FinalCTA />
      <Footer />
    </React.Fragment>
  );
}

function Hero() {
  return (
    <section className="hero" id="hero" data-screen-label="Hero">
      <div className="hero-bg" aria-hidden="true"></div>
      <div className="hero-inner">
        <div className="hero-eyebrow">Hochzeits­einladung als Website</div>
        <h1 className="hero-title">Lade deine Gäste<br />einzigartig ein.</h1>
        <div className="hero-actions">
          <a href="erstgespraech.html" className="btn-rect solid">Kontaktiere uns</a>
          <a href="#vorteile" className="btn-rect outline" onClick={handleAnchorClick}>Unsere Services</a>
        </div>
      </div>
    </section>
  );
}

function Ornament() {
  return (
    <div className="ornament" aria-hidden="true">
      <div className="ornament-line"></div>
      <div className="ornament-dot"></div>
    </div>
  );
}

function Promise() {
  return (
    <section className="promise">
      <p className="promise-text">
        Es sind die Details, die eine Einladung tragen. Die richtige Wortwahl,
        der Moment auf dem Foto, das Gefühl, wenn der Link beim Lieblingsmenschen ankommt.
      </p>
    </section>
  );
}

function Features() {
  return (
    <section className="section-pad" id="vorteile" data-screen-label="Vorteile">
      <div className="wrap">
        <div className="features-intro">
          <div>
            <div className="eyebrow">Eure Vorteile</div>
            <h2 className="display" style={{ marginTop: 22 }}>
              Alles, was eine moderne Einladung heute können sollte.
            </h2>
          </div>
          <p>
            Eine Einladungs­website ersetzt nicht nur das Papier — sie nimmt euch
            in den Wochen davor unzählige Nachrichten und Listen ab.
          </p>
        </div>

        <div className="features-grid">
          {FEATURES.map((f, i) => (
            <article className="feature" key={f.title}>
              <div className="feature-num">{String(i + 1).padStart(2, "0")} / {String(FEATURES.length).padStart(2, "0")}</div>
              <h3>{f.title}</h3>
              <div className="feature-spacer" />
              <p>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Steps() {
  return (
    <section className="steps" id="ablauf" data-screen-label="Ablauf">
      <div className="steps-grid">
        {STEPS.map((s) => (
          <div className="step" key={s.num}>
            <span className="step-num">{s.num}</span>
            <h4>{s.title}</h4>
            <p>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section-pad" id="faq" data-screen-label="FAQ">
      <div className="wrap faq">
        <div className="faq-side">
          <div className="eyebrow">Häufige Fragen</div>
          <h2 className="display" style={{ marginTop: 22 }}>Alles geklärt.</h2>
          <p style={{ marginTop: 22 }}>
            Antworten auf die häufigsten Fragen rund um eure Einladungs­website.
            Etwas fehlt? Schreibt uns — wir antworten meist innerhalb eines Werktages.
          </p>
        </div>

        <div className="faq-list">
          {FAQS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div className="faq-item" key={item.q} data-open={isOpen}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{item.q}</span>
                  <span className="faq-plus" aria-hidden="true"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="cta" id="kontakt" data-screen-label="CTA">
      <div className="cta-eyebrow">Bereit für den nächsten Schritt?</div>
      <h2>Lass uns über eure Einladung sprechen.</h2>
      <div className="actions">
        <a href="erstgespraech.html" className="btn-rect dark">Erstgespräch buchen</a>
        <a href="mailto:wedding@adviceworx.de" className="btn-rect ghost">wedding@adviceworx.de</a>
      </div>
    </section>
  );
}

/* ── Mount ───────────────────────────────────────────────────────────── */

ReactDOM.createRoot(document.getElementById("root")).render(<HomeApp />);