/* global React, Icon, Button, Kicker, CtaBanner */
// FaqPage — /faq  ·  Contenu + données structurées FAQPage (GEO/SEO)

const FAQ_GROUPS = [
  {
    title: "Nos huîtres",
    kicker: "Gigas Meduli",
    items: [
      {
        q: "Qu'est-ce qu'une huître Gigas Meduli ?",
        a: "Gigas Meduli est le nom de nos huîtres affinées dans les marais médocains. « Gigas » vient de Crassostrea gigas, le nom latin de l'huître creuse ; « Meduli » fait référence aux Médulli, le peuple gaulois qui occupait le Médoc avant la conquête romaine. Toutes nos huîtres sont issues de la même exploitation à Saint-Vivien-de-Médoc et ne diffèrent que par leur calibre.",
      },
      {
        q: "Comment vos huîtres sont-elles affinées ?",
        a: "Nous recevons nos huîtres adultes en provenance d'autres bassins ostréicoles, puis nous les plaçons dans nos marais médocains pour 6 semaines à 6 mois. Pendant ce temps, elles se nourrissent en continu du phytoplancton présent dans nos marais maritimes. Avant chaque vente, chaque huître passe par une purification de 36 heures sous ultraviolets.",
      },
      {
        q: "Vos huîtres sont-elles iodées ?",
        a: "Non. Nos huîtres sont salées mais pas iodées : elles offrent un goût équilibré terre-mer. L'absence d'iode s'explique par le côté volatile de ce composé chimique, qui n'est jamais présent dans des huîtres affinées en marais.",
      },
      {
        q: "Pourquoi certaines huîtres ont-elles une teinte verte ?",
        a: "Parfois, la navicule verte est présente dans le marais. Cette micro-algue peut conférer aux branchies de l'huître une couleur verte très particulière, signature d'une huître affinée en marais.",
      },
      {
        q: "Quels calibres d'huîtres proposez-vous ?",
        a: "Nous proposons quatre calibres au prix de 11 €/kg : n°2 La Méga (85 à 120 g), n°3 Résistance (75 à 85 g), n°4 L'entrée des artistes (45 à 75 g) et n°5 Miss Cocktail (30 à 45 g). Plus le numéro est élevé, plus l'huître est petite.",
      },
      {
        q: "Que sont les huîtres déclassées ?",
        a: "Ce sont les mêmes huîtres, le même affinage et le même goût, à 9 €/kg au lieu de 11 €/kg. Leur seule différence est une possible « chambre » dans la coquille, qui demande un peu plus d'attention à l'ouverture.",
      },
    ],
  },
  {
    title: "Acheter & commander",
    kicker: "Vente directe",
    items: [
      {
        q: "Où acheter vos huîtres ?",
        a: "Directement à la boutique de l'exploitation, 1 La Petite Canau à Saint-Vivien-de-Médoc (vendredi 9h-12h, samedi 9h-12h et 15h-18h), au marché de Saint-Vivien le mercredi, au marché de Migron à Eysines le dimanche, ainsi que chez nos restaurants et revendeurs partenaires en Médoc et à Bordeaux.",
      },
      {
        q: "Comment passer commande ?",
        a: "Vous composez votre commande en ligne, choisissez votre point de retrait (Saint-Vivien ou Eysines) et la date. Le règlement se fait sur place au retrait : il n'y a aucun paiement en ligne.",
      },
      {
        q: "Proposez-vous d'autres produits que des huîtres ?",
        a: "Oui : des coquillages purifiés (palourdes, praires, tellines, lavagnons), des bigorneaux et bulots, ainsi que des crustacés cuits maison dans notre court-bouillon parfumé (tourteaux, araignées, étrilles, gambas, homards).",
      },
      {
        q: "Vos produits ont-ils été congelés ? Puis-je les congeler moi-même ?",
        a: "Selon les arrivages et pour anticiper la demande, certains produits proposés à l'étal peuvent avoir été congelés puis décongelés. Si vous souhaitez congeler vous-même un produit, demandez-nous conseil au marché ou en boutique avant de le faire : nous vous indiquerons s'il a déjà été congelé, car un produit décongelé ne doit pas être recongelé.",
      },
    ],
  },
  {
    title: "La ferme & nos pratiques",
    kicker: "Depuis 1989",
    items: [
      {
        q: "Depuis quand la Ferme Eau Médoc existe-t-elle ?",
        a: "La Ferme Eau Médoc a été fondée en 1989 par Bertrand Iung, sur 17 hectares de marais salés gagnés sur l'estuaire de la Gironde à Saint-Vivien-de-Médoc.",
      },
      {
        q: "Produisez-vous encore des gambas ?",
        a: "La production de gambas a été limitée par l'apparition d'une plante envahissante locale protégée, la ruppia maritima. La ferme se consacre aujourd'hui essentiellement à l'affinage d'huîtres Gigas Meduli.",
      },
      {
        q: "Proposez-vous des prestations pour les professionnels et l'évènementiel ?",
        a: "Oui. Nous fournissons restaurants et revendeurs, réalisons des devis adaptés aux professionnels et proposons des prestations évènementielles ainsi que des visites de l'exploitation.",
      },
    ],
  },
];

// Tous les Q/R à plat — sert à la fois au sommaire et au schéma FAQPage.
const FAQ_FLAT = FAQ_GROUPS.flatMap((g) => g.items);

function FaqItem({ q, a, open, onToggle }) {
  return (
    <div>
      <h3 className="m-0">
        <button
          type="button"
          onClick={onToggle}
          aria-expanded={open}
          className="w-full text-left flex items-start gap-4 py-5 md:py-6 group">
          <span className="flex-1 font-serif text-primary text-[19px] md:text-[22px] leading-snug">{q}</span>
          <span className={"shrink-0 w-9 h-9 rounded-full grid place-items-center mt-0.5 transition-colors " + (open ? "bg-primary text-white" : "bg-foam text-primary group-hover:bg-primary/10")}>
            <Icon name={open ? "chevron-up" : "chevron-down"} size={18} />
          </span>
        </button>
      </h3>
      <div
        className="overflow-hidden transition-all duration-300 ease-out"
        style={{ maxHeight: open ? 520 : 0, opacity: open ? 1 : 0 }}>
        <p className="body pb-6 pr-12 md:pr-14">{a}</p>
      </div>
    </div>
  );
}

function FaqPage({ onNav }) {
  const [open, setOpen] = React.useState(() => new Set([0]));
  const toggle = (key) =>
    setOpen((prev) => {
      const next = new Set(prev);
      next.has(key) ? next.delete(key) : next.add(key);
      return next;
    });

  // Données structurées FAQPage (schema.org) — injectées le temps de la visite.
  React.useEffect(() => {
    const data = {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: FAQ_FLAT.map((it) => ({
        "@type": "Question",
        name: it.q,
        acceptedAnswer: { "@type": "Answer", text: it.a },
      })),
    };
    const el = document.createElement("script");
    el.type = "application/ld+json";
    el.id = "faq-jsonld";
    el.textContent = JSON.stringify(data);
    document.head.appendChild(el);
    return () => { el.remove(); };
  }, []);

  return (
    <>
      {/* HERO */}
      <section className="bg-foam pt-16 md:pt-24 pb-12 md:pb-16">
        <div className="container-x">
          <div className="max-w-[820px]">
            <Kicker>Questions fréquentes</Kicker>
            <h1 className="h-display mt-3">Tout savoir sur nos <span className="italic text-primary-light">huîtres</span></h1>
            <p className="lead mt-5">
              Affinage, goût, calibres, points de vente, commande&nbsp;: voici les réponses aux questions que l'on nous pose le plus souvent sur la Ferme Eau Médoc et nos huîtres Gigas Meduli.
            </p>
          </div>
        </div>
      </section>

      {/* GROUPES */}
      <section className="py-16 md:py-24 bg-white">
        <div className="container-x max-w-[920px]">
          <div className="space-y-14 md:space-y-20">
            {FAQ_GROUPS.map((group, gi) => {
              let base = 0;
              for (let k = 0; k < gi; k++) base += FAQ_GROUPS[k].items.length;
              return (
                <div key={group.title} className="grid md:grid-cols-12 gap-6 md:gap-10 items-start">
                  <div className="md:col-span-4 md:sticky md:top-28">
                    <Kicker>{group.kicker}</Kicker>
                    <h2 className="font-serif text-primary text-[26px] md:text-[32px] leading-tight mt-3">{group.title}</h2>
                  </div>
                  <div className="md:col-span-8">
                    <div className="panel px-6 md:px-8">
                      {group.items.map((it, ii) => {
                        const key = base + ii;
                        return (
                          <FaqItem
                            key={it.q}
                            q={it.q}
                            a={it.a}
                            open={open.has(key)}
                            onToggle={() => toggle(key)} />
                        );
                      })}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Encart contact */}
          <div className="mt-16 md:mt-20 bg-foam rounded-hero p-7 md:p-10 flex flex-col md:flex-row items-start md:items-center gap-6">
            <span className="w-12 h-12 rounded-card bg-white text-primary grid place-items-center shrink-0 shadow-soft"><Icon name="help-circle" size={26} /></span>
            <div className="flex-1">
              <h3 className="font-serif text-primary text-[22px] md:text-[26px] leading-tight">Une autre question&nbsp;?</h3>
              <p className="body-sm mt-2 max-w-[520px]">Nous sommes joignables par téléphone et par e-mail, ou venez nous rencontrer en boutique et sur les marchés.</p>
            </div>
            <div className="flex flex-wrap gap-3 shrink-0">
              <Button variant="secondary" onClick={() => onNav("contact")}>Nous contacter</Button>
              <Button variant="primary" iconRight="arrow-right" onClick={() => onNav("commander")}>Commander</Button>
            </div>
          </div>
        </div>
      </section>

      <CtaBanner
        image={"assets/photos/aube-marais-3.webp"}
        title="Prêt à goûter nos huîtres affinées en Médoc ?"
        subtitle="Réservez votre commande pour un retrait à Saint-Vivien ou Eysines. Aucun paiement en ligne, règlement au retrait."
        primary="Commander en ligne"
        secondary="Où nous trouver"
        onPrimary={() => onNav("commander")}
        onSecondary={() => onNav("ou-trouver")} />
    </>
  );
}

window.FaqPage = FaqPage;
