/* ============================================================
   Manigod Kids Club — feature sections
   SeasonExplorer (Saisons), TarifsView, GalleryView (+lightbox),
   ContactView. Depends on core.jsx + data.jsx + sections-common.jsx.
   ============================================================ */
const { useState: uS2, useEffect: uE2 } = React;

/* ====================================================
   SAISONS — explorer with switch, age groups, activities, ESF
   ==================================================== */
function ActPhoto({ act, idx }) {
  return (
    <Reveal as="article" className="mkc-actphoto" delay={idx % 3 * 80}>
      <div className="mkc-media">
        {act.photo ?
        <Photo src={act.photo} alt={_T(act.t)} /> :
        <div className="mkc-ph" style={{ position: "absolute", inset: 0 }}>
              <span style={{ color: "var(--mkc-cream-40)" }}><Icon name={act.ic} size={54} /></span>
            </div>}
      </div>
      <span className="mkc-actphoto__num">{String(idx + 1).padStart(2, "0")}</span>
      <div className="mkc-actphoto__body">
        <h4>{_T(act.t)}</h4>
        <p>{_T(act.desc)}</p>
      </div>
    </Reveal>);

}

function SeasonExplorer() {
  // Été prioritaire : la page Saisons s'ouvre toujours sur l'été au
  // chargement / rechargement (l'utilisateur bascule ensuite via le switch).
  const [season, setSeason] = uS2("ete");
  const S = SEASONS[season];
  const ink = season === "hiver";
  let n = 0;

  // Hiver = green ambiance on the whole Saisons page
  uE2(() => {
    const app = document.querySelector(".mkc-app");
    if (app) app.setAttribute("data-saison", season);
    return () => {if (app) app.removeAttribute("data-saison");};
  }, [season]);

  const bannerClass = "mkc-showcase__hero mkc-showcase__hero--pict mkc-showcase__hero--banner mkc-showcase__hero--" +
  season + (ink ? " mkc-showcase__hero--onink" : "");

  return (
    <>
      {/* season banner + switch */}
      <section className={"mkc-sec mkc-sec--tight" + (ink ? " mkc-sec--ink" : "")}>
        <div className="mkc-container">
          <div className="mkc-switchrow"><Switch season={season} setSeason={setSeason} ink={ink} /></div>
          <Reveal className={bannerClass} key={season}
          style={{ minHeight: "clamp(300px,34vw,430px)", borderRadius: "var(--mkc-r-2xl)" }}>
            <img className="mkc-showcase__pict" src={ink ? "/assets/img/pict-ski.svg" : "/assets/img/pict-bike.svg"} alt="" aria-hidden="true" />
            <span className={"mkc-eyebrow" + (ink ? " mkc-eyebrow--paper" : "")}>{_T(S.hero.sub)}</span>
            <h3 style={{ fontFamily: "var(--mkc-font-display)" }}>{_T(S.hero.title)}</h3>
            <p style={{ maxWidth: "52ch", marginTop: 12, fontSize: "var(--mkc-text-lead)", lineHeight: 1.45, opacity: .82 }}>{_T(S.hero.lead)}</p>
          </Reveal>
        </div>
      </section>

      {/* age groups + activities */}
      <section className={"mkc-sec" + (ink ? " mkc-sec--ink mkc-sec--flush-b" : "")} style={{ paddingTop: 0 }}>
        <div className="mkc-container">
          {S.groups.map((g) =>
          <div className="mkc-agegroup" key={g.name}>
              <Reveal className="mkc-agegroup__head">
                <div>
                  <span className="mkc-eyebrow">{_T(S.label)} · {_T(g.age)}</span>
                  {g.titleSvg ?
                <img className="mkc-agegroup__titlesvg" src={g.titleSvg} alt={_T(g.name)} /> :
                <h3>{_T(g.name)}</h3>}
                  <p className="sub">{_T(g.sub)}</p>
                </div>
                <span className={"mkc-tag" + (ink ? " mkc-tag--glass" : " mkc-tag--ink")}>{_T(g.age)}</span>
              </Reveal>
              <div className="mkc-actgrid">
                {g.acts.map((a) => <ActPhoto key={a.t} act={a} idx={n++} />)}
              </div>
              {season === "ete" &&
              <Reveal as="p" className="mkc-credit">{_T("Crédit photo : Cathy Cohendet")}</Reveal>
              }
            </div>
          )}

          {season === "hiver" &&
          <Reveal className="mkc-esf">
              <a className="mkc-esf__logo" 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" /></a>
              <div>
                <span className="mkc-eyebrow">{_T("Collaboration ESF")}</span>
                <h3 style={{ marginTop: 8, color: "rgb(19, 53, 29)" }}>{_T("Une liaison fluide avec l'École du Ski Français")}</h3>
                <p><span style={{ color: "#13351d" }}>{_T("Prise en charge des enfants directement entre le Manigod Kids Club et les activités ESF — nous assurons l'accueil avant et après les cours de ski, sans transition à gérer pour vous.")}</span></p>
                <div className="mkc-esf__tags">
                  <span className="mkc-tag"><Icon name="ski" size={15} /> {_T("Ski")}</span>
                  <span className="mkc-tag"><Icon name="snow" size={15} /> {_T("Snowboard")}</span>
                  <span className="mkc-tag"><Icon name="shield" size={15} /> {_T("Activités encadrées")}</span>
                </div>
              </div>
            </Reveal>
          }

          {season === "ete" &&
          <Reveal className="mkc-esf" style={{ marginTop: "clamp(32px,4vw,56px)" }}>
              <div className="mkc-esf__logo"><Icon name="shield" size={56} style={{ color: "var(--mkc-green)" }} /></div>
              <div>
                <span className="mkc-eyebrow">{_T("Encadrement")}</span>
                <h3 style={{ marginTop: 8 }}>{_T("Un cadre naturel, familial et sécurisé")}</h3>
                <p>{_T("Chaque groupe est suivi par une équipe dédiée. Les activités sont adaptées à l'âge des enfants, avec un vrai temps pour observer, jouer et découvrir la montagne à leur rythme.")}</p>
              </div>
            </Reveal>
          }
        </div>
      </section>

      <JourneeType season={season} />
    </>);

}

/* ====================================================
   JOURNÉE TYPE (Saisons) — timeline par groupe d'âge
   ==================================================== */
function JourneeStep({ s }) {
  return (
    <Reveal className="mkc-step">
      <div className="mkc-step__time">{s.time}</div>
      <span className="mkc-step__dot"><Icon name={s.ic} size={20} /></span>
      <div className="mkc-step__body">
        {s.txt.map((t, i) => <p key={i}>{_T(t)}</p>)}
      </div>
    </Reveal>);

}

function JourneeGroup({ g, hideName, inkCard }) {
  return (
    <Reveal className={"mkc-journee" + (inkCard ? " mkc-journee--ink" : "")}>
      <div className="mkc-journee__head">
        <div>
          <span className="mkc-eyebrow">{_T("Journée type")}{hideName ? "" : " · " + _T(g.age)}</span>
          {hideName ?
          <h3 className="mkc-journee__agetitle">{_T(g.age)}</h3> :
          <img className="mkc-journee__titlesvg" src={g.titleSvg} alt={_T(g.title)} style={{ marginTop: 8 }} />}
          <p className="sub">{_T(g.sub)}</p>
        </div>
        {!hideName && <span className="mkc-journee__age">{_T(g.age)}</span>}
      </div>
      <div className="mkc-timeline">
        {g.steps.map((s, i) => <JourneeStep key={i} s={s} />)}
      </div>
    </Reveal>);

}

function JourneeType({ season }) {
  const hideName = season === "hiver";
  const inkCard = season === "ete";
  return (
    <section className={"mkc-sec" + (hideName ? " mkc-sec--ink mkc-sec--flush-t" : "")} id="journee">
      <div className="mkc-container">
        <SectionHead center paper={hideName} eyebrow={_T("Le rythme d'une journée")}
        title={_T("La journée type")}
        lead={_T("Pour vous projeter : le déroulé concret d'une journée, pensé selon l'âge de votre enfant.")} />
        {JOURNEES.map((g) => <JourneeGroup key={g.key} g={g} hideName={hideName} inkCard={inkCard} />)}
      </div>
    </section>);

}

/* ====================================================
   TARIFS
   ==================================================== */
function TarifCard({ t, book, season }) {
  const feat = t.feat;
  return (
    <Reveal className={"mkc-card mkc-card--pad mkc-tarif" + (feat ? " mkc-card--ink mkc-tarif--feat" : "")}
    style={feat ? { boxShadow: "var(--mkc-shadow-xl)" } : {}}>
      <h3 style={feat ? { color: "var(--mkc-cream)" } : {}}>{_T(t.t)}</h3>
      <p>{_T(t.d)}</p>
      <div className="price" style={feat ? { color: "var(--mkc-cream)" } : {}}>{t.p}<small> €</small></div>
      <ul>
        {t.bullets.map((b) =>
        <li key={b}><Icon name="check" size={17} /> {_T(b)}</li>
        )}
      </ul>
      <button className={"mkc-btn mkc-btn--block" + (feat ? " mkc-btn--on-ink" : " mkc-btn--secondary")}
      style={{ marginTop: 16 }} onClick={() => book(season)}>{_T("Réserver")}</button>
    </Reveal>);

}

function ResidentInfo() {
  return (
    <Reveal className="mkc-resbanner">
      <span className="mkc-resbanner__ic"><Icon name="heart" size={28} /></span>
      <div className="mkc-resbanner__main">
        <span className="mkc-eyebrow">{_T("Résident de Manigod\u00a0?")}</span>
        <h3>{_T("Vous avez droit à une réduction.")}</h3>
        <p>{_T("Inutile de payer à l'avance\u00a0: contactez-nous et nous appliquons la réduction ensuite.")}</p>
      </div>
      <a className="mkc-btn mkc-btn--on-ink mkc-btn--lg mkc-resbanner__cta" href="mailto:contact@manigodkidsclub.com?subject=Réduction%20résident%20de%20Manigod">
        <Icon name="mail" size={19} /> {_T("Nous contacter")}
      </a>
    </Reveal>);

}

function AccueilPonctuel() {
  return (
    <Reveal className="mkc-flexopt">
      <span className="mkc-flexopt__ic"><Icon name="clock" size={36} /></span>
      <div className="mkc-flexopt__main">
        <span className="mkc-eyebrow">{_T("Option flexible · sans réservation")}</span>
        <h3>{_T("Besoin de quelques heures pour vous\u00a0?")}</h3>
        <p>
          {_T("Déposez votre enfant au Kids Club pour une courte durée, selon les disponibilités. Paiement sur place, selon le temps d'accueil.")}
        </p>
      </div>
      <a className="mkc-btn mkc-btn--lg mkc-flexopt__cta" href="mailto:contact@manigodkidsclub.com?subject=Disponibilité%20accueil%20ponctuel">
        {_T("Demander une disponibilité")} <Icon name="arrow" size={19} />
      </a>
    </Reveal>);

}

function TarifsView({ book }) {
  const [season, setSeason] = uS2("hiver");
  const S = TARIFS_BY_SEASON[season];
  const six = S.plans.length > 3;
  const ink = season === "hiver";
  // mirror the Saisons page: the switch changes the whole page ambiance
  uE2(() => {
    const app = document.querySelector(".mkc-app");
    if (app) app.setAttribute("data-saison", season);
    return () => { if (app) app.removeAttribute("data-saison"); };
  }, [season]);
  return (
    <section className="mkc-sec mkc-sec--tight" style={{ paddingTop: "clamp(20px,3vw,40px)" }}>
      <div className="mkc-container">
        <div className="mkc-switchrow"><Switch season={season} setSeason={setSeason} ink={ink} /></div>

        <ResidentInfo />

        <Reveal className="mkc-tarifhead" key={season + "h"}>
          <span className="mkc-eyebrow">{window.tx("Saison " + S.label, (season === "ete" ? "Summer" : "Winter") + " season")}</span>
          <div className="mkc-tarifhead__period">{_T(S.period)}</div>
          <span className="mkc-tarifhead__note"><Icon name={S.icon} size={16} /> {_T(S.note)}</span>
        </Reveal>

        <div className={"mkc-tarifs" + (six ? " mkc-tarifs--6" : "")} key={season + "g"}>
          {S.plans.map((t) => <TarifCard key={t.t} t={t} book={book} season={season} />)}
        </div>

        <AccueilPonctuel />

        <div className="mkc-perks">
          {TARIF_PERKS.map((p, i) =>
          <Reveal key={p.h} className="mkc-perk" delay={i * 80}>
              <span className="mkc-perk__ic"><Icon name={p.ic} size={22} /></span>
              <div><h4>{_T(p.h)}</h4><p>{_T(p.p)}</p></div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

/* ====================================================
   GALERIE + LIGHTBOX
   ==================================================== */
function GalleryView() {
  const [season, setSeason] = uS2("ete");
  const [box, setBox] = uS2(-1);
  const items = GALLERY[season];
  const isEte = season === "ete";
  const ink = season === "hiver";

  // mirror the Saisons page: the switch changes the whole page ambiance
  uE2(() => {
    const app = document.querySelector(".mkc-app");
    if (app) app.setAttribute("data-saison", season);
    return () => { if (app) app.removeAttribute("data-saison"); };
  }, [season]);

  uE2(() => {
    if (box < 0) return;
    const k = (e) => {
      if (e.key === "Escape") setBox(-1);else
      if (e.key === "ArrowRight") setBox((b) => (b + 1) % items.length);else
      if (e.key === "ArrowLeft") setBox((b) => (b - 1 + items.length) % items.length);
    };
    window.addEventListener("keydown", k);
    return () => window.removeEventListener("keydown", k);
  }, [box, items.length]);

  return (
    <>
      <section className="mkc-sec mkc-sec--tight">
        <div className="mkc-container">
          <div className="mkc-switchrow"><Switch season={season} setSeason={setSeason} ink={ink} /></div>

          {!isEte &&
          <Reveal style={{ textAlign: "center", color: "var(--mkc-paper-soft)", marginBottom: "clamp(20px,3vw,32px)", maxWidth: "58ch", marginInline: "auto" }}>
              <p>{_T("Illustrations de la saison hiver en attendant vos photos réelles — mises à jour dès qu'elles sont disponibles.")}</p>
            </Reveal>
          }

          <div className="mkc-gallery" key={season}>
            {items.map((it, i) =>
            <Reveal as="button" key={season + it.src} className="mkc-gallery__item" delay={i % 3 * 60}
            onClick={() => setBox(i)} aria-label={window.tx("Agrandir : " + it.cap, "Enlarge: " + _T(it.cap))}>
                <img src={it.src} alt={_T(it.cap)} loading="lazy" />
                <span className="mkc-gallery__cap"><span className="mkc-tag mkc-tag--glass">{_T(it.cap)}</span></span>
              </Reveal>
            )}
          </div>

          {isEte &&
          <Reveal as="p" className="mkc-credit mkc-credit--center">{_T("Crédit photo : Cathy Cohendet")}</Reveal>
          }
        </div>
      </section>

      {box >= 0 &&
      <div className="mkc-lightbox" onClick={() => setBox(-1)} role="dialog" aria-modal="true">
          <button className="mkc-lightbox__close" aria-label={_T("Fermer")} onClick={() => setBox(-1)}><Icon name="close" size={22} /></button>
          <button className="mkc-lightbox__nav mkc-lightbox__nav--prev" aria-label={_T("Précédent")}
        onClick={(e) => {e.stopPropagation();setBox((box - 1 + items.length) % items.length);}}><Icon name="prev" size={24} /></button>
          <img className="mkc-lightbox__img" src={items[box].src} alt={_T(items[box].cap)} onClick={(e) => e.stopPropagation()} />
          <button className="mkc-lightbox__nav mkc-lightbox__nav--next" aria-label={_T("Suivant")}
        onClick={(e) => {e.stopPropagation();setBox((box + 1) % items.length);}}><Icon name="next" size={24} /></button>
          <div className="mkc-lightbox__cap">{_T(items[box].cap)} · {box + 1} / {items.length}</div>
        </div>
      }
    </>);

}

/* ====================================================
   CONTACT
   ==================================================== */
function ContactView({ sent }) {
  return (
    <section className="mkc-sec mkc-sec--tight" style={{ paddingTop: "clamp(20px,3vw,40px)" }}>
      <div className="mkc-container">
        <div className="mkc-contact">
          <Reveal className="mkc-contact__info">
            <a className="mkc-infoline" href="tel:+33613944509"><span className="ic"><Icon name="phone" size={20} /></span> +33 6 13 94 45 09</a>
            <a className="mkc-infoline" href="mailto:contact@manigodkidsclub.com"><span className="ic"><Icon name="mail" size={20} /></span> contact@manigodkidsclub.com</a>
            <a className="mkc-infoline" href="https://maps.google.com/?q=7082+Route+du+Col+de+la+Croix+Fry+74230+Manigod" target="_blank" rel="noreferrer">
              <span className="ic"><Icon name="marker" size={20} /></span> 7082 Route du Col de la Croix Fry, 74230 Manigod</a>
            <div className="mkc-map">
              <div className="mkc-map__bg"></div>
              <Photo src={IMG.map} alt={_T("Carte — Manigod, col de la Croix-Fry")} />
              <div className="mkc-map__pin">
                <span className="mkc-map__bubble">{_T("On est juste ici")}</span>
                <span className="mkc-map__dot"><Icon name="marker" size={20} /></span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={120} as="form" className="mkc-card mkc-card--pad"
          onSubmit={(e) => {e.preventDefault();sent && sent();}}>
            <h3 style={{ fontSize: "var(--mkc-text-h3)", fontWeight: 600, margin: "0 0 6px" }}>{_T("Écrivez-nous")}</h3>
            <p style={{ color: "var(--mkc-ink-soft)", margin: "0 0 20px" }}>{_T("On revient vers vous rapidement.")}</p>
            <div className="mkc-formgrid">
              <div className="mkc-field"><label className="mkc-field__label" htmlFor="c-nom">{_T("Nom")}</label><input id="c-nom" className="mkc-input" required placeholder={_T("Votre nom")} /></div>
              <div className="mkc-field"><label className="mkc-field__label" htmlFor="c-tel">{_T("Téléphone")}</label><input id="c-tel" className="mkc-input" placeholder="06 …" /></div>
              <div className="mkc-field full"><label className="mkc-field__label" htmlFor="c-mail">{_T("Email")}</label><input id="c-mail" type="email" className="mkc-input" required placeholder={_T("vous@email.com")} /></div>
              <div className="mkc-field full"><label className="mkc-field__label" htmlFor="c-msg">{_T("Message")}</label><textarea id="c-msg" className="mkc-textarea" placeholder={_T("Dites-nous tout : saison, dates, âge des enfants…")}></textarea></div>
              <button className="mkc-btn mkc-btn--block full" type="submit">{_T("Envoyer")} <Icon name="arrow" size={19} /></button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

Object.assign(window, { SeasonExplorer, JourneeType, JourneeGroup, JourneeStep, TarifsView, AccueilPonctuel, GalleryView, ContactView, ActPhoto, TarifCard, ResidentInfo });