// Miss-Scully — FAQ Seite mit Kontaktformular
// Lädt nach homepage-sections.jsx + subpages-content.jsx.

function FaqGroup({ label, items, openKey, setOpenKey }) {
  return (
    <div className="faq-group">
      <h3 className="faq-group-title">{label}</h3>
      <div className="faq-list">
        {items.map((f) =>
        <div key={f.q} className={'faq-item' + (openKey === f.q ? ' open' : '')}>
            <button className="faq-q" onClick={() => setOpenKey(openKey === f.q ? null : f.q)}>
              {f.q}
              <span className="faq-chevron"></span>
            </button>
            <div className="faq-a">
              <p>{f.a}</p>
            </div>
          </div>
        )}
      </div>
    </div>);

}

function FaqContactForm() {
  const [form, setForm] = React.useState({ vorname: '', nachname: '', email: '', telefon: '', nachricht: '' });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    const body =
    'Vorname: ' + form.vorname + '\n' +
    'Nachname: ' + form.nachname + '\n' +
    'E-Mail: ' + form.email + '\n' +
    'Telefon: ' + form.telefon + '\n\n' +
    form.nachricht;
    window.location.href =
    'mailto:info@miss-scully.ch?subject=' + encodeURIComponent('Anfrage über miss-scully.ch') +
    '&body=' + encodeURIComponent(body);
  };
  return (
    <section className="contact-section" data-screen-label="FAQ Kontakt">
      <div className="contact-card faq-contact" data-reveal>
        <div>
          <h3>Schreib mir eine Nachricht</h3>
          <p>
            Ihre Frage ist nicht dabei? Wir helfen gerne persönlich weiter.<br></br>
            <a href="mailto:info@miss-scully.ch">info@miss-scully.ch</a><br></br>
            <a href="tel:+41449742626">+41 44 974 26 26</a>
          </p>
        </div>
        <form className="contact-form" onSubmit={submit}>
          <div className="form-row">
            <input type="text" placeholder="Vorname" value={form.vorname} onChange={set('vorname')} required="required"></input>
            <input type="text" placeholder="Nachname" value={form.nachname} onChange={set('nachname')}></input>
          </div>
          <div className="form-row">
            <input type="email" placeholder="E-Mail" value={form.email} onChange={set('email')} required="required"></input>
            <input type="tel" placeholder="Telefon" value={form.telefon} onChange={set('telefon')}></input>
          </div>
          <textarea placeholder="Ihre Nachricht" rows="4" value={form.nachricht} onChange={set('nachricht')} required="required"></textarea>
          <button className="btn btn-primary" type="submit">Senden</button>
        </form>
      </div>
    </section>);

}

function FaqPage() {
  const [openKey, setOpenKey] = React.useState(null);

  const groups = [
  {
    label: 'Anifit Frischfutter',
    items: [
    { q: 'Was ist Anifit Frischfutter?', a: 'Natürliches Hunde- und Katzenfutter in Lebensmittelqualität – mit über 60 % Fleischanteil, schonend zubereitet, ohne chemische Zusätze, Zucker oder Füllstoffe.' },
    { q: 'Wie bestelle ich Anifit-Produkte?', a: 'Direkt im persönlichen Miss-Scully Anifit-Shop unter miss-scully.anifit.ch – mit Direktlieferung in die ganze Schweiz.' },
    { q: 'Ab wann ist die Lieferung kostenlos?', a: 'Ab einem Bestellwert von CHF 69 liefern wir versandkostenfrei in die ganze Schweiz.' },
    { q: 'Gibt es eine persönliche Beratung?', a: 'Ja. Als zertifizierter Anifit-Berater begleitet Nicolas Sie kostenlos und unverbindlich – passend zu Alter, Rasse, Aktivität und Unverträglichkeiten Ihres Tieres.' }]
  },
  {
    label: 'Tractive GPS Tracker',
    items: [
    { q: 'Wie funktioniert der Tractive GPS Tracker?', a: 'Wie ein kleines Handy am Halsband: Der Tracker hat eine eingebaute SIM-Karte, ortet Ihr Tier per GPS und schickt den Standort über das Mobilfunknetz an Ihre App.' },
    { q: 'Welche Reichweite hat der Tracker?', a: 'Es gibt keine Distanzgrenze. Solange Mobilfunkabdeckung besteht, sehen Sie den Standort – in über 175 Ländern, auch aus den Ferien.' },
    { q: 'Warum braucht es ein Abo?', a: 'Das Abo deckt die Mobilfunkgebühren der eingebauten SIM-Karte ab – ohne Roaming-Kosten und ohne Distanzlimit. Es ist jederzeit kündbar.' },
    { q: 'Ist der Tracker wasserdicht?', a: 'Ja, alle Modelle sind 100 % wasserdicht – schwimmen, Regen und nasse Wiesen sind kein Problem.' },
    { q: 'Gibt es Tracker für Katzen?', a: 'Ja – die Modelle CAT 6 Mini und CAT Mini sind federleicht und speziell für Katzenhalsbänder gemacht. Alle Infos auf unserer Tractive-Seite unter «Für Katzen».' }]
  },
  {
    label: 'Animalia Tierversicherung',
    items: [
    { q: 'Welche Deckungen gibt es?', a: 'Drei Varianten: Animalia Compact (Unfälle), Classic (Unfälle + Krankheiten + CHF 100.– Prävention) und Comfort (zusätzlich Erbkrankheiten und Geburtsgebrechen).' },
    { q: 'Wie berechne ich meine Prämie?', a: 'Direkt auf unserer Animalia-Seite im eingebetteten Prämienrechner – Sie müssen unsere Website dafür nicht verlassen.' },
    { q: 'Gibt es eine Altersbegrenzung?', a: 'Nein – Hunde und Katzen können ohne Altersbegrenzung versichert werden.' },
    { q: 'Wie funktioniert der Schadenfall?', a: 'Im Animalia-Kundenbereich einloggen, Tierarztrechnung hochladen – die Kosten werden direkt auf Ihr Bankkonto erstattet.' }]
  },
  {
    label: 'Hundezubehör',
    items: [
    { q: 'Woher stammt das Zubehör?', a: 'Von unserem Partner EMMY & PEPE: Geschirre, Leinen, Hundebetten und mehr – in 100 % Handarbeit gefertigt, aus veganen Materialien.' },
    { q: 'Kann ich Produkte risikofrei testen?', a: 'Ja – auf alle EMMY & PEPE Produkte gibt es mindestens 30 Tage Geld-zurück-Garantie.' },
    { q: 'Welches Geschirr passt meinem Hund?', a: 'Das Wau-Move Y-Geschirr gibt es in 13 Grössen von XXS bis XL. Zwei Masse genügen: Brust- und Halsumfang. Wir beraten Sie gerne persönlich.' }]
  }];

  return (
    <PageShell active="">
      <PageHero
        kicker="Häufige Fragen"
        title="Hast du noch Fragen? Hier bist du richtig!"
        lede="Antworten rund um Anifit Hunde- & Katzenfutter, Animalia Tierversicherung, Tractive GPS-Tracker und hochwertiges Hundezubehör.">
      </PageHero>

      <section className="faq-page-section" data-screen-label="FAQ">
        {groups.map((g) =>
        <FaqGroup
          key={g.label}
          label={g.label}
          items={g.items}
          openKey={openKey}
          setOpenKey={setOpenKey}>
        </FaqGroup>
        )}
      </section>

      <FaqContactForm></FaqContactForm>
    </PageShell>);

}

window.FaqPage = FaqPage;
