/* ============================================================
   EXTRAS — interactive widgets
   #4 GuessGame · #9 ScaleCalc · #8 CollectorsClub
   uses window globals (Reveal, Ico, Img)
   ============================================================ */
const { useState: xS } = React;

/* ---------- #4 Guess the car ---------- */
function GuessGame({ d }) {
  const [i, setI] = xS(0);
  const [picked, setPicked] = xS(null);
  const [score, setScore] = xS(0);
  const [finished, setFinished] = xS(false);
  const r = d.rounds[i];
  const last = i === d.rounds.length - 1;

  const pick = (k) => {
    if (picked != null) return;
    setPicked(k);
    if (k === r.answer) setScore((s) => s + 1);
  };
  const advance = () => {
    if (last) { setFinished(true); return; }
    setI(i + 1); setPicked(null);
  };
  const restart = () => { setI(0); setPicked(null); setScore(0); setFinished(false); };

  return (
    <section className="section section--stone">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 40, maxWidth: "52ch" }}>
          <span className="eyebrow">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 14px" }}>{d.title}</h2>
          <p className="lede">{d.sub}</p>
        </Reveal>

        {finished ? (
          <Reveal className="game">
            <div className="game-finish">
              <div className="game-score">{score}<span>/ {d.rounds.length}</span></div>
              <div className="game-score-lbl">{d.scoreLbl}</div>
              <button className="btn btn--gold" onClick={restart}>{d.again}</button>
            </div>
          </Reveal>
        ) : (
          <div className="game">
            <div className="game-img">
              <Img src={r.img} className="ph--stone" style={{ position: "absolute", inset: 0 }} />
              <span className="game-count">{i + 1} / {d.rounds.length}</span>
            </div>
            <div className="game-body">
              <p className="game-q">{r.q}</p>
              <div className="game-opts">
                {r.options.map((o, k) => {
                  let cls = "game-opt";
                  if (picked != null) {
                    if (k === r.answer) cls += " right";
                    else if (k === picked) cls += " wrong";
                    else cls += " dim";
                  }
                  return <button key={k} className={cls} onClick={() => pick(k)}>{o}</button>;
                })}
              </div>
              {picked != null && (
                <div className="game-feedback">
                  <span className={picked === r.answer ? "fb-ok" : "fb-no"}>
                    {picked === r.answer ? d.correct : d.wrong}
                  </span>
                  <button className="btn btn--gold" onClick={advance}>{last ? (d.finish || d.scoreLbl) : d.next}</button>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------- #9 Scale calculator ---------- */
function ScaleCalc({ d }) {
  const [real, setReal] = xS(5410);
  const [scale, setScale] = xS(43);
  const scales = [43, 18, 64];
  const model = real / scale; // mm
  const cm = (model / 10).toFixed(1);
  const mm = Math.round(model);

  return (
    <section className="section section--light">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 40, maxWidth: "52ch" }}>
          <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 14px" }}>{d.title}</h2>
          <p className="lede">{d.sub}</p>
        </Reveal>

        <div className="calc">
          <div className="calc-controls">
            <div className="calc-field">
              <label>{d.realLbl} <b>{real} {d.unit}</b></label>
              <input type="range" min="3000" max="7000" step="10" value={real} onChange={(e) => setReal(+e.target.value)} />
            </div>
            <div className="calc-presets">
              <span className="calc-presets-lbl">{d.presetLbl}</span>
              <div className="calc-preset-btns">
                {d.presets.map(([name, len], k) => (
                  <button key={k} className={"calc-chip" + (real === len ? " on" : "")} onClick={() => setReal(len)}>{name}</button>
                ))}
              </div>
            </div>
            <div className="calc-field">
              <label>{d.scaleLbl}</label>
              <div className="calc-scales">
                {scales.map((s) => (
                  <button key={s} className={"calc-scale" + (scale === s ? " on" : "")} onClick={() => setScale(s)}>1/{s}</button>
                ))}
              </div>
            </div>
          </div>
          <div className="calc-result">
            <span className="calc-result-lbl">{d.resultLbl}</span>
            <span className="calc-result-num">{cm}<small>cm</small></span>
            <span className="calc-result-sub">{mm} {d.unit} · 1/{scale}</span>
            <div className="calc-bar"><span style={{ width: Math.min(100, (model / 160) * 100) + "%" }}></span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- #8 Collectors club ---------- */
function CollectorsClub({ d }) {
  const [email, setEmail] = xS("");
  const [done, setDone] = xS(false);
  const submit = (e) => { e.preventDefault(); if (/\S+@\S+\.\S+/.test(email)) setDone(true); };
  return (
    <section className="section section--stone club-sec">
      <div className="wrap">
        <Reveal className="club">
          <span className="eyebrow">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 16px", maxWidth: "18ch" }}>{d.title}</h2>
          <p className="lede" style={{ maxWidth: "48ch", marginBottom: 30 }}>{d.body}</p>
          {done ? (
            <p className="club-done">{Ico.check({ width: 18, height: 18 })} {d.success}</p>
          ) : (
            <form className="club-form" onSubmit={submit}>
              <input type="email" required placeholder={d.placeholder} value={email} onChange={(e) => setEmail(e.target.value)} aria-label={d.placeholder} />
              <button type="submit" className="btn btn--gold">{d.button}</button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- #3 + #10 Events page (with quoter) ---------- */
function EventsPage({ C, go, lang }) {
  const d = C.events;
  const q = d.quoter;
  const [type, setType] = xS(0);
  const [guests, setGuests] = xS(20);
  const [dinner, setDinner] = xS(false);
  const base = q.types[type][1];
  const per = base + (dinner ? 100 : 0);
  const total = per * guests;

  return (
    <main>
      <PageHero img={d.heroImg} eyebrow={d.eyebrow} title={d.title} sub={d.sub} pos="center 35%" />

      {/* Packages */}
      <section className="section section--light">
        <div className="wrap">
          <div className="ev-packs">
            {d.packages.map((p, k) => (
              <Reveal key={k} delay={k + 1} className="ev-pack">
                <div className="ev-pack-img"><Img src={p.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>
                <div className="ev-pack-body">
                  <span className="ev-pack-tag">{p.tag}</span>
                  <h3>{p.name}</h3>
                  <p>{p.desc}</p>
                  <ul>
                    {p.points.map((pt, j) => <li key={j}>{Ico.check({ width:16, height:16 })}{pt}</li>)}
                  </ul>
                  <div className="ev-pack-from">{lang === "es" ? "Desde" : "From"} <strong>${p.from}</strong> {lang === "es" ? "por persona" : "per person"}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Quoter */}
      <section className="section section--stone">
        <div className="wrap">
          <Reveal className="sec-head" style={{ marginBottom: 40, maxWidth: "44ch" }}>
            <span className="eyebrow">{q.title}</span>
            <h2 className="display" style={{ marginTop: 14 }}>{q.title}</h2>
          </Reveal>
          <div className="ev-quoter">
            <div className="ev-q-controls">
              <div className="ev-q-field">
                <label>{q.typeLbl}</label>
                <div className="ev-q-types">
                  {q.types.map(([name], k) => (
                    <button key={k} className={"ev-q-type" + (type === k ? " on" : "")} onClick={() => setType(k)}>{name}</button>
                  ))}
                </div>
              </div>
              <div className="ev-q-field">
                <label>{q.guestsLbl} <b>{guests}</b></label>
                <input type="range" min="10" max="120" step="5" value={guests} onChange={(e) => setGuests(+e.target.value)} />
              </div>
              <div className="ev-q-field">
                <label>{q.dinnerLbl}</label>
                <div className="ev-q-toggle">
                  <button className={dinner ? "" : "on"} onClick={() => setDinner(false)}>{q.no}</button>
                  <button className={dinner ? "on" : ""} onClick={() => setDinner(true)}>{q.yes}</button>
                </div>
              </div>
            </div>
            <div className="ev-q-result">
              <span className="ev-q-result-lbl">{q.resultLbl}</span>
              <span className="ev-q-result-num">${total.toLocaleString(lang === "es" ? "es-AR" : "en-US")}</span>
              <span className="ev-q-result-sub">{q.perPerson.replace("{n}", guests)} · ${per}/{lang === "es" ? "persona" : "person"}</span>
              <a className="btn btn--gold ev-q-cta" href={"https://wa.me/19548172196?text=" + encodeURIComponent((lang === "es" ? "Hola! Quiero cotizar un evento: " : "Hi! I'd like a quote for an event: ") + q.types[type][0] + ", " + guests + (lang === "es" ? " personas" : " guests") + (dinner ? (lang === "es" ? ", con cena" : ", with dinner") : "") + ".")} target="_blank" rel="noopener">{q.cta}</a>
              <p className="ev-q-note">{q.note}</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ---------- #6 Motorsport filter ---------- */
function Motorsport({ d }) {
  const [f, setF] = xS("all");
  const items = d.items.filter((it) => f === "all" || it.cat === f);
  return (
    <section className="section section--stone">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 32, maxWidth: "52ch" }}>
          <span className="eyebrow">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 14px" }}>{d.title}</h2>
          <p className="lede">{d.sub}</p>
        </Reveal>
        <div className="moto-filters">
          {d.filters.map(([k, label]) => (
            <button key={k} className={"moto-filter" + (f === k ? " on" : "")} onClick={() => setF(k)}>{label}</button>
          ))}
        </div>
        <div className="moto-grid">
          {items.map((it, k) => (
            <div className="moto-card" key={it.name + k}>
              <div className="moto-card-img"><Img src={it.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>
              <div className="moto-card-body">
                <h4>{it.name}</h4>
                <p>{it.note}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- #5 360 / panorama (drag to pan) ---------- */
function Pano360({ d }) {
  const ref = React.useRef(null);
  const drag = React.useRef({ down: false, x: 0, left: 0 });
  const onDown = (e) => { const el = ref.current; drag.current = { down: true, x: (e.touches ? e.touches[0].clientX : e.clientX), left: el.scrollLeft }; };
  const onMove = (e) => { if (!drag.current.down) return; const x = (e.touches ? e.touches[0].clientX : e.clientX); ref.current.scrollLeft = drag.current.left - (x - drag.current.x); };
  const onUp = () => { drag.current.down = false; };
  React.useEffect(() => {
    const el = ref.current;
    if (el) el.scrollLeft = (el.scrollWidth - el.clientWidth) / 2;
  }, []);
  return (
    <section className="section section--light">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 30, maxWidth: "52ch" }}>
          <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 14px" }}>{d.title}</h2>
          <p className="lede">{d.sub}</p>
        </Reveal>
        <Reveal className="sec-head" style={{ marginBottom: 30, maxWidth: "52ch" }}>
          <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
          <h2 className="display" style={{ margin: "16px 0 14px" }}>{d.title}</h2>
          <p className="lede">{d.sub}</p>
        </Reveal>
        <div
          className="pano"
          ref={ref}
          onMouseDown={onDown} onMouseMove={onMove} onMouseUp={onUp} onMouseLeave={onUp}
          onTouchStart={onDown} onTouchMove={onMove} onTouchEnd={onUp}
        >
          <img src={d.img} alt="" className="pano-img" draggable="false" />
          <span className="pano-hint">{Ico.arrow({ width: 16, height: 16 })} {d.hint}</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- #2 "As seen in" press strip ---------- */
function PressStrip({ d, go }) {
  return (
    <div className="pstrip">
      <div className="pstrip-inner">
        <span className="pstrip-label">{d.label}</span>
        <div className="pstrip-names">
          {d.outlets.map((o, k) => <span className="pstrip-name" key={k}>{o}</span>)}
        </div>
        <button className="pstrip-cta" onClick={() => go("press")}>{d.cta} →</button>
      </div>
    </div>
  );
}

/* ---------- #6 Who is it for ---------- */
function ForWho({ d, go }) {
  return (
    <section className="section section--light">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 44 }}>
          <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
          <h2 className="display" style={{ marginTop: 16 }}>{d.title}</h2>
        </Reveal>
        <div className="who-grid">
          {d.items.map((it, k) => (
            <Reveal key={k} delay={k + 1} className="who-card">
              <div className="who-card-img"><Img src={it.img} className="ph--stone" style={{ position:"absolute", inset:0 }} /></div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
              <button className="btn btn--ghost" onClick={() => it.act === "events" ? go("events") : window.__gcBook()}>
                {it.cta} {Ico.arrow({ width:15, height:15, className:"arr" })}
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- #7 Sergio's signature CTA ---------- */
function SignCta({ d }) {
  return (
    <section className="section section--stone">
      <div className="wrap">
        <div className="sign">
          <Reveal className="sign-photo">
            <Img src="site/img/hero-og.jpg" className="ph--stone" ratio="4/5" style={{ borderRadius:"4px" }} />
          </Reveal>
          <Reveal delay={1} className="sign-body">
            <span className="eyebrow">{d.eyebrow}</span>
            <h2 className="display" style={{ margin:"18px 0 20px" }}>{d.title}</h2>
            <p className="lede" style={{ marginBottom: 28 }}>{d.body}</p>
            <div className="sign-script">{d.name}</div>
            <div className="sign-role">{d.name} · {d.role}</div>
            <button className="btn btn--gold" style={{ marginTop: 28 }} onClick={() => window.__gcBook()}>{d.cta}</button>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- #10 Kiosk mode ---------- */
function KioskMode({ C, lang, onExit }) {
  const slides = [
    ...C.hero.slides,
    ...C.collection.items.map((it) => ({ img: it.img, cap: it.t })),
  ];
  const [i, setI] = xS(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((x) => (x + 1) % slides.length), 5000);
    return () => clearInterval(id);
  }, [slides.length]);
  const k = C.kiosk;
  return (
    <div className="kiosk">
      {slides.map((s, j) => (
        <div key={j} className={"kiosk-slide" + (j === i ? " on" : "")}>
          <img src={s.img} alt="" />
        </div>
      ))}
      <div className="kiosk-scrim"></div>
      <div className="kiosk-ui">
        <div className="brand">
          <span className="brand-mark"></span>
          <span className="brand-txt"><b>Goldvarg</b><span>Collection Museum</span></span>
        </div>
        <div className="kiosk-cap">{slides[i].cap}</div>
        <div className="kiosk-tip">{k.tip}</div>
      </div>
      <button className="kiosk-exit" onClick={onExit}>{k.exit}</button>
    </div>
  );
}

/* ---------- Meeting-point map (real embed) ---------- */
function MeetingMap({ lang, compact }) {
  const q = encodeURIComponent("Bell Tower, Weston Town Center, 1900 Bell Tower Ln, Weston, FL 33326");
  const src = "https://maps.google.com/maps?q=" + q + "&z=15&hl=" + (lang === "es" ? "es" : "en") + "&output=embed";
  return (
    <div className={"gmap" + (compact ? " gmap--compact" : "")}>
      <iframe
        src={src}
        title={lang === "es" ? "Mapa del punto de encuentro" : "Meeting point map"}
        loading="lazy"
        referrerPolicy="no-referrer-when-downgrade"
        allowFullScreen
      ></iframe>
      <div className="gmap-card">
        <span className="gmap-card-k">{lang === "es" ? "Punto de encuentro" : "Meeting point"}</span>
        <span className="gmap-card-v">Bell Tower · Weston Town Center</span>
        <span className="gmap-card-s">1900 Bell Tower Ln, Weston, FL 33326</span>
        <a className="gmap-card-cta" href="https://maps.google.com/?q=Bell+Tower+Weston+Town+Center+1900+Bell+Tower+Ln+Weston+FL" target="_blank" rel="noopener">
          {lang === "es" ? "Cómo llegar" : "Get directions"} →
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { GuessGame, ScaleCalc, CollectorsClub, EventsPage, Motorsport, Pano360, PressStrip, ForWho, SignCta, KioskMode, MeetingMap });