// Faq.jsx — Tschense Bestattungen · eigenständige FAQ-Seite
// Erreichbar über die Trauerfall-Utility-Bar ("Hilfe & häufige Fragen").
//
// Struktur:
//   1. Page-Hero      — Eyebrow + Cormorant/Mulish-Headliner + Lede
//   2. Zwei-Spalten   — Sticky Kategorie-TOC links, Akkordeon-Sektionen rechts
//   3. Schluss-CTA    — Warm: "Ihre Frage ist nicht dabei?" + Phone-CTA + Kontakt
//
// Voice-Mix per Kategorie (siehe DESIGN.md Anwendungs-Matrix):
//   trauerfall  → warm     (Tiefrot-Eyebrow)
//   formen      → neutral  (Kupfer)
//   kosten      → sachlich (Kupfer)
//   vorsorge    → sachlich (Salbei-Eyebrow)
//   formales    → neutral  (Kupfer)

/* ─────────────── Accordion (wird auch von FaqSection in index.html genutzt) ─────────────── */
function Accordion({ items, idPrefix='acc', tone='brand' }) {
  const [open, setOpen] = React.useState([0]);
  const toggle = i => setOpen(o => o.includes(i) ? o.filter(x=>x!==i) : [...o, i]);
  return (
    <div className={`acc acc--${tone}`}>
      {items.map((it, i) => (
        <div key={i} id={`${idPrefix}-${i}`}
             className={"acc-item" + (open.includes(i) ? ' open' : '')}>
          <div className="acc-head" onClick={()=>toggle(i)} role="button" tabIndex={0}
               aria-expanded={open.includes(i)}
               onKeyDown={e=>{if(e.key==='Enter'||e.key===' '){e.preventDefault();toggle(i)}}}>
            {it.q}
            <span className="acc-toggle" aria-hidden="true"/>
          </div>
          <div className="acc-body">{it.a}</div>
        </div>
      ))}
    </div>
  );
}

/* ─────────────── FAQ-Daten ─────────────── */
const FAQ_CATEGORIES = [
  {
    id: 'trauerfall',
    label: 'Im Trauerfall',
    tone: 'trauerfall',
    eyebrow: 'Im Trauerfall',
    title: 'Die ersten',
    accent: 'Stunden.',
    sub: 'Was zu tun ist, wenn ein Mensch verstorben ist — und was Sie uns einfach überlassen können.',
    items: [
      { q:'Was tun in den ersten Stunden nach einem Todesfall?',
        a:'Atmen Sie. Es eilt nicht. Rufen Sie uns an — Tag und Nacht. Wir besprechen mit Ihnen alles Weitere am Telefon und kommen, wenn Sie es möchten, zu Ihnen nach Hause oder begleiten Sie in unserem Trauerhaus.' },
      { q:'Müssen wir den Verstorbenen sofort überführen lassen?',
        a:'Nein. In Niedersachsen haben Sie bis zu 36 Stunden Zeit, in Ruhe Abschied zu nehmen. Wir übernehmen die Überführung im Anschluss — zu jeder Tages- und Nachtzeit.' },
      { q:'Was bringen wir zum ersten Gespräch mit?',
        a:'Wenn vorhanden: Personalausweis, Stammbuch (Geburts- und Heiratsurkunde), Sterbebescheinigung des Arztes, Versicherungsunterlagen und eventuell eine Bestattungsverfügung. Fehlt etwas — kein Problem, das holen wir gemeinsam nach.' },
      { q:'Wie schnell muss eine Bestattung stattfinden?',
        a:'Eine Erdbestattung erfolgt in der Regel zwischen dem vierten und neunten Tag nach dem Todesfall. Bei einer Feuerbestattung haben Sie deutlich mehr Zeit. Wir nehmen Ihnen den Termin-Druck ab und stimmen alles mit Friedhof und Pfarramt ab.' },
    ],
  },
  {
    id: 'formen',
    label: 'Bestattungsformen',
    tone: 'brand',
    eyebrow: 'Bestattungsformen',
    title: 'Welche Form',
    accent: 'passt?',
    sub: 'Ein Überblick über die Bestattungsformen, die wir in Wolfsburg und Umgebung begleiten.',
    items: [
      { q:'Welche Bestattungsformen gibt es?',
        a:'Wir begleiten Erd- und Feuerbestattungen, See- und Baumbestattungen sowie Sonderformen wie die Diamantbestattung. Welche Form zu Ihrem Wunsch und zu Ihrer Familie passt, finden wir gemeinsam in einem persönlichen Gespräch heraus.' },
      { q:'Was ist der Unterschied zwischen Erd- und Feuerbestattung?',
        a:'Bei einer Erdbestattung wird der Verstorbene im Sarg auf einem Friedhof beigesetzt. Bei einer Feuerbestattung erfolgt zunächst die Einäscherung; die Urne wird anschließend in einem Erd-, Wahl-, Anonymen- oder Baumgrab oder auf See beigesetzt.' },
      { q:'Was ist eine Baumbestattung?',
        a:'Die Urne wird im Wurzelbereich eines Baumes in einem Friedwald oder Ruheforst beigesetzt — eine naturnahe Ruhestätte, die ohne Grabpflege auskommt. Wir kooperieren mit mehreren Bestattungswäldern in der Region.' },
      { q:'Können wir bei einer Seebestattung dabei sein?',
        a:'Ja. Sie können die Beisetzung an Bord des Bestattungsschiffes begleiten oder die Urne in stiller Form beisetzen lassen. Wir koordinieren Reederei, Termin und die Überführung der Urne zur Nord- oder Ostsee.' },
    ],
  },
  {
    id: 'kosten',
    label: 'Kosten & Planung',
    tone: 'brand',
    eyebrow: 'Kosten & Planung',
    title: 'Was eine Bestattung',
    accent: 'kostet.',
    sub: 'Transparente Antworten zu Preisen, Förderung und Zahlungswegen. Im Kostenplaner ermitteln Sie eine erste Orientierung in vier Schritten.',
    items: [
      { q:'Was kostet eine Bestattung?',
        a:'Die Gesamtkosten hängen von der Bestattungsform, der Grabart, den Friedhofsgebühren und persönlichen Wünschen ab. Eine schlichte Feuerbestattung beginnt bei rund 2.400 €, eine Erdbestattung bei rund 3.800 €. Ein verbindliches Angebot erstellen wir im Vorgespräch.' },
      { q:'Wofür ist der Kostenplaner?',
        a:'Der Kostenplaner führt Sie in vier Schritten durch Bestattungsart, Sarg- oder Urnenwahl, Trauerfeier und Friedhof. Am Ende erhalten Sie eine Orientierung über die zu erwartenden Kosten — unverbindlich und transparent.' },
      { q:'Was tun, wenn die Kosten nicht aufgebracht werden können?',
        a:'Sozialhilfeträger übernehmen unter bestimmten Voraussetzungen die Bestattungskosten. Wir kennen die Anträge und unterstützen Sie bei der Antragstellung beim Sozialamt der Stadt Wolfsburg oder Ihrer Wohnortgemeinde.' },
      { q:'Gibt es Ratenzahlung?',
        a:'Ja. Auf Wunsch vereinbaren wir eine Ratenzahlung, abgestimmt auf Ihre Situation. Sprechen Sie uns an — wir finden eine tragfähige Lösung.' },
    ],
  },
  {
    id: 'vorsorge',
    label: 'Vorsorge',
    tone: 'vorsorge',
    eyebrow: 'Vorsorge',
    title: 'Selbst entscheiden,',
    accent: 'schriftlich festgehalten.',
    sub: 'Antworten zur Bestattungsvorsorge — wie Sie Ihre Wünsche festhalten und die Kosten absichern.',
    items: [
      { q:'Was ist eine Bestattungsvorsorge?',
        a:'Mit einer Bestattungsvorsorge halten Sie schriftlich fest, wie Ihre Bestattung ablaufen soll, und sichern die Kosten ab. So entlasten Sie Ihre Angehörigen organisatorisch und finanziell.' },
      { q:'Wann sollte ich vorsorgen?',
        a:'Es gibt keinen falschen Zeitpunkt. Viele Menschen treffen die Entscheidung im Ruhestand, andere früher — etwa beim Verfassen einer Patientenverfügung oder im Zuge eines Nachlassgesprächs.' },
      { q:'Wo wird das Geld verwahrt?',
        a:'Vorsorgebeträge werden auf einem insolvenzgesicherten Treuhandkonto beim Kuratorium Deutsche Bestattungskultur hinterlegt. Das Geld ist dort getrennt von unserem Betriebsvermögen verwahrt und im Fall der Fälle unmittelbar verfügbar.' },
      { q:'Kann ich meine Vorsorge ändern?',
        a:'Ja, jederzeit. Sie können Wünsche anpassen, Beträge erhöhen oder Bezugsberechtigte ändern. Wir aktualisieren Ihre Vorsorgemappe und das hinterlegte Treuhandverhältnis kostenfrei.' },
    ],
  },
  {
    id: 'formales',
    label: 'Formales',
    tone: 'brand',
    eyebrow: 'Formales',
    title: 'Dokumente &',
    accent: 'Behörden.',
    sub: 'Was an formalen Schritten zu erledigen ist — und welche davon wir Ihnen abnehmen.',
    items: [
      { q:'Welche Dokumente brauchen wir?',
        a:'Personalausweis, Stammbuch oder Geburts-/Heiratsurkunde, Sterbebescheinigung des Arztes sowie Renten- und Versicherungsunterlagen. Fehlende Urkunden beschaffen wir auf Wunsch über das Standesamt.' },
      { q:'Wer kümmert sich um die Sterbeurkunde?',
        a:'Das übernehmen wir. Mit der vom Arzt ausgestellten Sterbebescheinigung beantragen wir die Sterbeurkunden beim Standesamt — in der Anzahl, die Sie für Versicherungen, Banken und Behörden benötigen.' },
      { q:'Müssen Versicherungen informiert werden?',
        a:'Renten- und Lebensversicherungen sowie Krankenkassen müssen schriftlich informiert werden. Wir stellen Ihnen die Adressen und Mustertexte zur Verfügung und übernehmen auf Wunsch den gesamten Schriftverkehr.' },
    ],
  },
];

/* ─────────────── Sticky TOC ─────────────── */
function FaqTOC({ active, onSelect }) {
  return (
    <nav aria-label="FAQ Kategorien" className="faq-toc">
      <span style={{
        font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
        color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
        marginBottom:18,
      }}>
        <span style={{width:18, height:1, background:'var(--brand-accent)'}}/>
        Themen
      </span>
      <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column'}}>
        {FAQ_CATEGORIES.map(cat => {
          const isActive = active === cat.id;
          return (
            <li key={cat.id}>
              <a href={`#${cat.id}`}
                 onClick={e => { e.preventDefault(); onSelect(cat.id); }}
                 className={'faq-toc-link' + (isActive ? ' is-active' : '')}>
                {cat.label}
              </a>
            </li>
          );
        })}
      </ul>
    </nav>
  );
}

/* ─────────────── Closing CTA ─────────────── */
function FaqClosingCTA({ onKontakt }) {
  return (
    <section style={{
      background:'var(--surface-ink, var(--surface-ink))',
      padding:'80px var(--page-x)',
    }}>
      <div style={{
        maxWidth:980, margin:'0 auto',
        display:'grid', gridTemplateColumns:'1.1fr .9fr', gap:64, alignItems:'center',
      }} className="faq-cta-grid">
        <div>
          <span style={{
            font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
            Persönlich sprechen
          </span>
          <h2 style={{
            fontFamily:'var(--f-display)', fontWeight:300,
            fontSize:42, lineHeight:1.15, letterSpacing:'-.01em',
            color:'#fff', margin:'14px 0 14px',
          }}>
            Ihre Frage ist nicht dabei?{' '}
            <em style={{fontStyle:'normal', color:'var(--brand-accent)', fontWeight:400}}>Wir hören zu.</em>
          </h2>
          <p style={{
            color:'rgba(255,255,255,.72)', fontSize:16, lineHeight:1.7,
            margin:'0 0 28px', maxWidth:'52ch',
          }}>
            Manche Antworten gehören in ein ruhiges Gespräch. Rufen Sie uns an — Tag und Nacht — oder schreiben Sie uns. Wir sind für Sie da.
          </p>
          <div style={{display:'inline-flex', alignItems:'center', gap:18, flexWrap:'wrap'}}>
            <PhoneCTA dark/>
            <a href="#kontakt" onClick={e=>{e.preventDefault(); onKontakt && onKontakt();}}
               style={{
                 font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
                 color:'#fff', textDecoration:'none',
                 paddingBottom:6, borderBottom:'1px solid rgba(255,255,255,.4)',
               }}>
              Schreiben Sie uns →
            </a>
          </div>
        </div>
        <div style={{
          borderLeft:'1px solid rgba(255,255,255,.12)',
          paddingLeft:48,
        }} className="faq-cta-side">
          <span style={{
            font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
            color:'rgba(255,255,255,.55)',
          }}>Bestattungshaus</span>
          <p style={{
            margin:'14px 0 6px',
            fontFamily:'var(--f-display)', fontWeight:300, fontSize:22, lineHeight:1.4,
            color:'#fff', letterSpacing:'-.005em',
          }}>
            Tschense Bestattungen
          </p>
          <p style={{margin:0, color:'rgba(255,255,255,.7)', fontSize:14.5, lineHeight:1.65}}>
            Kurt-Schumacher-Ring 256<br/>
            38444 Wolfsburg
          </p>
          <div style={{height:1, background:'rgba(255,255,255,.12)', margin:'22px 0'}}/>
          <span style={{
            font:'600 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase',
            color:'rgba(255,255,255,.55)',
          }}>Erreichbar</span>
          <p style={{
            margin:'14px 0 0', color:'rgba(255,255,255,.85)', fontSize:14.5, lineHeight:1.65,
          }}>
            Tag &amp; Nacht für Sie da.<br/>
            Vorgespräche nach Vereinbarung.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ─────────────── FaqPage ─────────────── */
function FaqPage({ onBack, onKontakt }) {
  const [active, setActive] = React.useState(FAQ_CATEGORIES[0].id);
  const sectionRefs = React.useRef({});

  // Smooth-Scroll bei TOC-Klick + setze aktive Kategorie
  const handleSelect = id => {
    setActive(id);
    const el = sectionRefs.current[id];
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 24;
      window.scrollTo({ top, behavior:'smooth' });
    }
  };

  // Scroll-Spy: bei Scroll markiere aktive Kategorie
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY + 120;
      let current = FAQ_CATEGORIES[0].id;
      for (const cat of FAQ_CATEGORIES) {
        const el = sectionRefs.current[cat.id];
        if (el && el.offsetTop <= y) current = cat.id;
      }
      setActive(current);
    };
    window.addEventListener('scroll', onScroll, { passive:true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div className="page faq-page">
      <style>{`
        .faq-page .faq-toc-link {
          display:block; padding: 11px 0 11px 14px;
          font: 400 14px/1.4 var(--f-body); letter-spacing:.01em;
          color: var(--ink-500); text-decoration:none;
          border-left: 1px solid var(--line);
          transition: color .18s, border-color .18s, padding-left .18s, background .18s;
        }
        .faq-page .faq-toc-link:hover { color: var(--ink-900); }
        .faq-page .faq-toc-link.is-active {
          color: var(--brand-accent); font-weight: 500;
          border-left-color: var(--brand-accent);
          padding-left: 18px;
        }
        .faq-page .faq-section { scroll-margin-top: 32px; }
        .faq-page .faq-section + .faq-section { margin-top: 72px; }
        @media (max-width: 880px) {
          .faq-page .faq-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .faq-page .faq-toc {
            position: static !important;
            display: flex; flex-direction: column;
          }
          .faq-page .faq-toc ul {
            display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px;
          }
          .faq-page .faq-toc-link {
            border-left: none; border-bottom: 1px solid var(--line);
            padding: 8px 14px;
          }
          .faq-page .faq-toc-link.is-active {
            border-left: none; border-bottom-color: var(--brand-accent);
            padding-left: 14px;
          }
          .faq-page .faq-cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          .faq-page .faq-cta-side { border-left: none !important; padding-left: 0 !important;
            border-top: 1px solid rgba(255,255,255,.12); padding-top: 32px !important; }
        }
      `}</style>

      {/* Hero */}
      <section style={{
        padding:'56px var(--page-x) 32px',
        background:'var(--surface-paper, var(--surface-paper))',
        minHeight:'var(--hero-page-h, 520px)',
        display:'flex', alignItems:'center',
      }}>
        <div style={{maxWidth:1140, margin:'0 auto', width:'100%'}}>
          <span style={{
            font:'600 11px/1 var(--f-body)', letterSpacing:'var(--ls-caps)', textTransform:'uppercase',
            color:'var(--brand-accent)', display:'inline-flex', alignItems:'center', gap:10,
          }}>
            <span style={{width:24, height:1, background:'var(--brand-accent)'}}/>
            Hilfe &amp; Antworten
          </span>
          <h1 style={{
            fontFamily:'var(--f-display)', fontWeight:300,
            fontSize:64, lineHeight:1.05, letterSpacing:'-.015em',
            color:'var(--ink-900)', margin:'18px 0 14px',
            maxWidth:'18ch',
          }}>
            Häufig gestellte{' '}
            <em style={{fontStyle:'normal', fontWeight:400, color:'var(--brand-accent)'}}>Fragen.</em>
          </h1>
          <p style={{
            color:'var(--ink-700)', fontSize:18, lineHeight:1.7,
            margin:'0', maxWidth:'54ch',
          }}>
            Antworten auf das, was uns am häufigsten gefragt wird — sortiert nach Trauerfall, Bestattungsformen, Kosten, Vorsorge und Formalem. Finden Sie Ihr Anliegen nicht, rufen Sie uns einfach an.
          </p>
        </div>
      </section>

      {/* Breadcrumb — unter dem Hero */}
      <div style={{padding:'14px var(--page-x)', background:'var(--surface-paper)', borderTop:'1px solid var(--line-soft)', borderBottom:'1px solid var(--line-soft)', font:'500 10px/1 var(--f-body)', letterSpacing:'var(--ls-caps-md)', textTransform:'uppercase', color:'var(--ink-warm-mute)'}}>
        <div style={{maxWidth:'var(--page-max-w)', margin:'0 auto'}}>
          <a href="#" onClick={e=>{e.preventDefault(); onBack && onBack();}} style={{color:'var(--ink-warm-mute)', textDecoration:'none'}}>Home</a>
          &emsp;›&emsp;
          <span style={{color:'var(--brand-accent)'}}>FAQ</span>
        </div>
      </div>

      {/* Two-column body */}
      <section style={{padding:'48px var(--page-x) 96px'}}>
        <div className="faq-grid" style={{
          maxWidth:1140, margin:'0 auto',
          display:'grid', gridTemplateColumns:'220px 1fr', gap:96,
        }}>
          <div>
            <div className="faq-toc" style={{position:'sticky', top:24}}>
              <FaqTOC active={active} onSelect={handleSelect}/>
            </div>
          </div>

          <div>
            {FAQ_CATEGORIES.map(cat => (
              <div key={cat.id} id={cat.id}
                   ref={el => { sectionRefs.current[cat.id] = el; }}
                   className="faq-section">
                <SectionHeader
                  eyebrow={cat.eyebrow}
                  title={cat.title}
                  accent={cat.accent}
                  sub={cat.sub}
                  tone={cat.tone}
                />
                <Accordion items={cat.items} idPrefix={`faq-${cat.id}`} tone={cat.tone}/>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FaqClosingCTA onKontakt={onKontakt}/>
    </div>
  );
}

Object.assign(window, { Accordion, FaqPage });