/* ============================================================
   Manigod Kids Club — common sections (used across pages)
   Depends on core.jsx (Icon, Photo, Reveal) + data.jsx.
   ============================================================ */
const { useState: useS, useRef, useEffect } = React;

/* small section header */
function SectionHead({ eyebrow, title, lead, center, paper, h = 2, style }) {
  const Tag = "h" + h;
  return (
    <Reveal className={"mkc-sechead" + (center ? " mkc-sechead--center" : "")} style={style}>
      {eyebrow && <span className={"mkc-eyebrow" + (paper ? " mkc-eyebrow--paper" : "")}>{eyebrow}</span>}
      <Tag style={h === 2 ? {} : { fontSize: "var(--mkc-text-" + (h === 3 ? "h3" : "h2") + ")", margin: ".4em 0 0" }}>{title}</Tag>
      {lead && <p>{lead}</p>}
    </Reveal>
  );
}

/* ---------- HOME HERO with fanned season cards ---------- */
function Hero({ book }) {
  const cue = (window.TWEAK_DEFAULTS || {}).showScrollCue !== false;
  const vidRef = useRef(null);
  useEffect(() => {
    const v = vidRef.current; if (!v) return;
    const ready = () => { if (v.readyState >= 2) v.setAttribute("data-ready", ""); };
    v.addEventListener("loadeddata", ready);
    v.addEventListener("canplay", ready);
    v.addEventListener("playing", ready);
    ready();
    const p = v.play && v.play();
    if (p && p.catch) p.catch(() => {});
    return () => {
      v.removeEventListener("loadeddata", ready);
      v.removeEventListener("canplay", ready);
      v.removeEventListener("playing", ready);
    };
  }, []);
  return (
    <header className="mkc-hero" id="top">
      <div className="mkc-hero__media">
        <video ref={vidRef} className="mkc-hero__video" src="/assets/video/hero.mp4"
          autoPlay loop muted playsInline preload="auto" aria-hidden="true"></video>
      </div>
      <div className="mkc-hero__inner">
        <div className="mkc-hero__copy">
          <Reveal as="h1" className="mkc-hero__title">{_T("Le premier Kids Club bilingue des Aravis")}</Reveal>
          <Reveal className="mkc-hero__sub" delay={90}>
            {_T("Un club pensé pour les 3 à 12 ans, dans un cadre naturel, familial et sécurisé — encadré par une équipe bilingue, été comme hiver.")}
          </Reveal>
          <Reveal className="mkc-hero__cta" delay={170}>
            <button className="mkc-btn" onClick={book}>{_T("Réserver")} <Icon name="arrow" size={19} /></button>
            <a className="mkc-btn mkc-btn--glass" href="/saisons/">{_T("Voir les saisons")}</a>
          </Reveal>
        </div>
        <Reveal className="mkc-hero__mono" delay={300}>
          <img src="/assets/logos/monogram-cream.svg" alt="" aria-hidden="true" />
        </Reveal>
      </div>

      {cue && (
        <div className="mkc-hero__scroll"><span>{_T("Découvrir")}</span><Icon name="arrowDown" size={20} /></div>
      )}

      <div className="mkc-hero__fanwrap">
        <div className="mkc-fan">
          <FanCard season={SEASONS.ete} side="a" />
          <FanCard season={SEASONS.hiver} side="b" />
        </div>
      </div>
    </header>
  );
}

function FanCard({ season, side }) {
  // flat SVG vignettes — English variants when the site is in English
  const en = window.LANG === "en";
  const card = season.key === "hiver"
    ? (en ? "/assets/img/card-hiver-en.svg" : "/assets/img/card-hiver.svg")
    : (en ? "/assets/img/card-ete-en.svg" : "/assets/img/card-ete.svg");
  return (
    <Reveal className={"mkc-fancard mkc-fancard--" + side} delay={side === "a" ? 120 : 0}>
      <a href={"/saisons/#" + season.key} aria-label={_T("Saison") + " " + _T(season.label) + " — Manigod Kids Club"}>
        <img className="mkc-fancard__svg" src={card} alt={_T("Saison") + " " + _T(season.label) + " — Manigod Kids Club"} />
      </a>
    </Reveal>
  );
}

/* ---------- HOME — season preview (switch + showcase) ---------- */
function SeasonPreview({ first }) {
  const [season, setSeason] = useS("ete");
  const S = SEASONS[season];
  return (
    <section className={"mkc-sec" + (first ? " mkc-sec--first" : "")} id="saisons">
      <div className="mkc-container">
        <SectionHead center eyebrow={_T("Les saisons")}
          title={_T("Deux saisons, mille aventures")}
          lead={_T("Le même esprit toute l'année — l'ambiance change avec la montagne, jamais les couleurs.")} />

        <div className="mkc-switchrow">
          <Switch season={season} setSeason={setSeason} />
        </div>

        <div className="mkc-showcase" key={season}>
          <Reveal className={"mkc-showcase__hero mkc-showcase__hero--pict mkc-showcase__hero--" + season}>
            <img className="mkc-showcase__pict" src={season === "ete" ? "/assets/img/pict-bike.svg" : "/assets/img/pict-ski.svg"} alt="" aria-hidden="true" />
            <span className={"mkc-eyebrow" + (season === "hiver" ? " mkc-eyebrow--paper" : "")}>{_T(S.hero.sub)}</span>
            <h3>{_T(S.hero.title)}</h3>
            <div className="tags">
              {S.groups.map((g) => <span key={g.age} className={"mkc-tag" + (season === "hiver" ? " mkc-tag--glass" : " mkc-tag--ink")}>{_T(g.age)}</span>)}
            </div>
          </Reveal>

          <div className="mkc-showcase__list">
            {S.preview.map((a, i) => (
              <Reveal as="a" key={a.t} href={"/saisons/#" + season} delay={i * 70} className="mkc-actcard"
                aria-label={_T(a.t) + " — " + window.tx("voir les activités " + S.label + " sur la page Saisons", "see the " + (season === "ete" ? "summer" : "winter") + " activities on the Seasons page")}>
                <span className="mkc-actcard__ic"><Icon name={a.ic} size={22} /></span>
                <div><h4>{_T(a.t)}</h4></div>
                <span className="mkc-actcard__go"><Icon name="arrow" size={18} /></span>
              </Reveal>
            ))}
            <Reveal className="mkc-showcase__foot" delay={120}>
              <a className="mkc-btn mkc-btn--block" href={"/saisons/#" + season}>
                {window.tx("Toutes les activités " + S.label, "All " + (season === "ete" ? "summer" : "winter") + " activities")} <Icon name="arrow" size={18} />
              </a>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Switch({ season, setSeason, ink }) {
  return (
    <div className={"mkc-switch" + (ink ? " mkc-switch--ink" : "")} data-active={season} role="tablist" aria-label={_T("Saison")}>
      <span className="mkc-switch__thumb"></span>
      <button className="mkc-switch__opt" role="tab" aria-selected={season === "ete"} onClick={() => setSeason("ete")}>
        <Icon name="sun" size={17} /> {_T("Été")}
      </button>
      <button className="mkc-switch__opt" role="tab" aria-selected={season === "hiver"} onClick={() => setSeason("hiver")}>
        <Icon name="snow" size={17} /> {_T("Hiver")}
      </button>
    </div>
  );
}

/* ---------- AGNIA ---------- */
function Agnia({ first }) {
  return (
    <section className={"mkc-sec" + (first ? " mkc-sec--first" : "")} id="agnia">
      <div className="mkc-container">
        <div className="mkc-agnia">
          <Reveal className="mkc-agnia__photo">
            <Photo src={AGNIA_PHOTO} alt={_T("Agnia, fondatrice, avec les enfants")} />
          </Reveal>
          <Reveal delay={120}>
            <span className="mkc-eyebrow">{_T("La fondatrice")}</span>
            <h2 style={{ fontSize: "var(--mkc-text-h2)", margin: ".4em 0 0" }}>{_T("Agnia, à l'origine du club")}</h2>
            <p style={{ marginTop: 18, color: "var(--mkc-ink-soft)", fontSize: "var(--mkc-text-lead)", lineHeight: 1.5 }}>
              {_T("Passionnée de montagne et d'enfance, Agnia a créé le Manigod Kids Club pour offrir aux enfants un terrain de jeu grandeur nature — encadré, bienveillant et vivant, été comme hiver.")}
            </p>
            <p style={{ marginTop: 14, color: "var(--mkc-ink-soft)" }}>
              {_T("Le club travaille main dans la main avec les acteurs locaux pour que chaque journée soit sûre, fluide et inoubliable pour vos enfants.")}
            </p>
            <div className="mkc-collab">
              <span className="mkc-eyebrow">{_T("En collaboration avec")}</span>
              <div className="mkc-collab__logos">
                <a className="mkc-plogo" href={ESF_URL} target="_blank" rel="noreferrer" aria-label="ESF Manigod — site officiel (nouvel onglet)"><img src="/assets/logos/partner-esf.svg" alt="ESF" /></a>
                <span className="mkc-plogo"><img src="/assets/logos/partner-manigod.svg" alt="Manigod" /></span>
                <span className="mkc-plogo"><img src="/assets/logos/partner-laregion.svg" alt="La Région Auvergne-Rhône-Alpes" /></span>
                <span className="mkc-plogo"><img src="/assets/logos/partner-reseau-initiative.svg" alt="Réseau Initiative Grand Annecy" /></span>
                <span className="mkc-plogo"><img src="/assets/logos/partner-labellemontagne.png" alt="Labellemontagne" /></span>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- AVIS ---------- */
function Avis({ ink }) {
  return (
    <section className={"mkc-sec" + (ink ? " mkc-sec--ink" : "")} id="avis" data-thread-cream={ink ? "" : undefined}>
      <div className="mkc-container">
        <SectionHead center eyebrow={_T("Avis d'autres parents")} title={_T("Ils nous ont fait confiance")} paper={ink} />
        <div className="mkc-avis">
          {AVIS.map((a, i) => (
            <Reveal key={a.n} delay={i * 110} className="mkc-card mkc-card--pad mkc-avis__card">
              <div className="mkc-avis__stars">
                {Array.from({ length: a.s }).map((_, j) => <Icon key={j} name="star" size={17} fill />)}
              </div>
              <blockquote>« {_T(a.q)} »</blockquote>
              <div className="mkc-avis__who">
                <span className="mkc-avis__av">{a.n.charAt(0)}</span>
                <div>
                  <div style={{ fontWeight: 600, fontSize: ".95rem" }}>{a.n}</div>
                  <div style={{ fontSize: ".82rem", color: "var(--mkc-ink-faint)" }}>{_T(a.m)}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ brand line-illustration (cream on green) ---------- */
function FaqIllus() {
  return (
    <svg className="mkc-faq__illus" viewBox="0 0 440 300" fill="none"
      role="img" aria-label={_T("Illustration — la montagne du Manigod Kids Club")} aria-hidden="true">
      <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
        {/* soft sun */}
        <circle cx="372" cy="62" r="24" strokeWidth="2.2" opacity="0.4" />
        {/* back ridge */}
        <path d="M0 212 L66 166 L120 190 L188 134 L248 178 L314 144 L382 182 L440 158"
          strokeWidth="2.2" opacity="0.28" />
        {/* front ridge */}
        <path d="M0 260 L58 212 L130 246 L200 188 L270 230 L340 198 L440 236"
          strokeWidth="2.6" opacity="0.6" />
        {/* gondola cable + cabin (brand signature) */}
        <path d="M22 56 L418 102" strokeWidth="2" opacity="0.5" />
        <g strokeWidth="2.4" opacity="0.95">
          <path d="M208 79 L208 90" />
          <rect x="180" y="90" width="56" height="36" rx="13" />
          <path d="M180 104 H236" />
        </g>
        {/* pines */}
        <g strokeWidth="2.4" opacity="0.78">
          <path d="M62 266 L76 244 L90 266 Z" />
          <path d="M76 266 L76 277" />
          <path d="M99 268 L110 250 L121 268 Z" />
          <path d="M110 268 L110 277" />
        </g>
        {/* ground line */}
        <path d="M0 285 H440" strokeWidth="2.2" opacity="0.22" />
      </g>
    </svg>
  );
}

/* ---------- FAQ ---------- */
function Faq() {
  const [open, setOpen] = useS(0);
  return (
    <section className="mkc-sec mkc-sec--ink" id="faq">
      <div className="mkc-container">
        <div className="mkc-faqwrap">
          <Reveal>
            <span className="mkc-eyebrow mkc-eyebrow--paper">{_T("Questions fréquentes")}</span>
            <h2 style={{ fontSize: "var(--mkc-text-h2)", margin: ".4em 0 0" }}>{_T("Tout ce qu'il faut savoir")}</h2>
            <p style={{ marginTop: 16, color: "var(--mkc-paper-soft)", fontSize: "var(--mkc-text-lead)", lineHeight: 1.5 }}>
              {_T("Une question avant de réserver\u00a0? On vous répond — et l'équipe reste joignable à tout moment.")}
            </p>
            <FaqIllus />
          </Reveal>
          <Reveal delay={120}>
            <div className="mkc-faq" style={{ borderColor: "var(--mkc-border-paper)" }}>
              {FAQ.map((f, i) => (
                <div key={f.q} className={"mkc-faq__item" + (open === i ? " is-open" : "")}
                  style={{ borderColor: "var(--mkc-border-paper)" }}>
                  <button className="mkc-faq__q" style={{ color: "var(--mkc-cream)" }}
                    aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                    {_T(f.q)}
                    <span className="mkc-faq__icon" style={open === i ? {} : { background: "var(--mkc-cream-12)", color: "var(--mkc-cream)" }}>
                      <Icon name="plus" size={16} />
                    </span>
                  </button>
                  <div className="mkc-faq__a" style={{ maxHeight: open === i ? 260 : 0 }}>
                    <div className="mkc-faq__a-inner" style={{ color: "var(--mkc-paper-soft)" }}>{_T(f.a)}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- PARTNERS ---------- */
function Partners() {
  return (
    <section className="mkc-sec" id="partners">
      <div className="mkc-container">
        <SectionHead center eyebrow={_T("Un projet ancré à Manigod")} h={3}
          title={_T("Avec le soutien de nos partenaires locaux")} />
        <Reveal className="mkc-partners">
          <a className="mkc-plogo" href={ESF_URL} target="_blank" rel="noreferrer" aria-label={_T("ESF Manigod — site officiel (nouvel onglet)")}><img src="/assets/logos/partner-esf.svg" alt="ESF — École du Ski Français" /></a>
          <span className="mkc-plogo"><img src="/assets/logos/partner-manigod.svg" alt="Commune de Manigod" /></span>
          <span className="mkc-plogo"><img src="/assets/logos/partner-laregion.svg" alt="La Région Auvergne-Rhône-Alpes" /></span>
          <span className="mkc-plogo"><img src="/assets/logos/partner-reseau-initiative.svg" alt="Réseau Initiative Grand Annecy" /></span>
          <span className="mkc-plogo"><img src="/assets/logos/partner-labellemontagne.png" alt="Labellemontagne" /></span>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- FINAL CTA ---------- */
function FinalCta({ book }) {
  // Si la page expose une saison active (Saisons/Tarifs/Galerie posent
  // data-saison sur .mkc-app), on réserve directement la bonne saison ;
  // sinon (accueil, contexte neutre) on passe par la page /reservation/.
  const onBook = () => {
    const app = document.querySelector(".mkc-app");
    const s = app && app.getAttribute("data-saison");
    book(s === "ete" || s === "hiver" ? s : undefined);
  };
  return (
    <section className="mkc-sec" data-thread-cream="">
      <div className="mkc-container">
        <Reveal className="mkc-finalcta">
          <div className="mkc-media"><Photo src={IMG.feu} alt={_T("Feu de camp en forêt")} /></div>
          <span className="mkc-eyebrow mkc-eyebrow--paper">{_T("Prêts pour l'aventure\u00a0?")}</span>
          <h2 style={{ marginTop: 14 }}>{_T("Réservez la semaine de vos enfants")}</h2>
          <p>{_T("Une équipe bienveillante, un cadre naturel et sécurisé. Il ne reste plus qu'à choisir la saison.")}</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
            <button className="mkc-btn mkc-btn--on-ink mkc-btn--lg" onClick={onBook}>{_T("Réserver maintenant")}</button>
            <CallButton className="mkc-btn--secondary mkc-btn--on-ink mkc-btn--lg" />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SectionHead, Hero, FanCard, FaqIllus, SeasonPreview, Switch, Agnia, Avis, Faq, Partners, FinalCta });