/* ============================================================
   PAGES — Home, Collection, Experiences, Story, Visit
   ============================================================ */
const { useState: uS, useEffect: uE, useRef: uR } = React;

/* ---------- HERO CAROUSEL ---------- */
function Hero({ d, go }) {
  const [i, setI] = uS(0);
  const [paused, setPaused] = uS(false);
  const n = d.slides.length;
  uE(() => {
    if (paused) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setI((x) => (x + 1) % n), 6000);
    return () => clearInterval(id);
  }, [n, paused]);
  return (
    <section className="hero" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="hero-slides">
        {d.slides.map((s, k) => (
          <div key={k} className={"hslide" + (k === i ? " on" : "")}>
            {s.video ? (
              <video className="hslide-img" src={s.video} autoPlay muted loop playsInline
                style={{ width:"100%", height:"100%", objectFit:"cover" }} />
            ) : (
              <img className="hslide-img" src={s.img} alt={s.cap}
                loading={k === 0 ? "eager" : "lazy"} decoding="async"
                style={{ width:"100%", height:"100%", objectFit:"cover" }} />
            )}
          </div>
        ))}
      </div>
      <div className="hero-scrim"></div>
      <div className="hero-content">
        <span className="eyebrow">{d.eyebrow}</span>
        <h1 className="display" dangerouslySetInnerHTML={{ __html: d.title }} />
        <p className="lede hero-sub">{d.sub}</p>
        <div className="hero-cta">
          <button className="btn btn--gold" onClick={() => window.__gcBook()}>{d.cta1} {Ico.arrow({ width:16, height:16 })}</button>
          <button className="btn btn--outline" onClick={() => go("collection")}>{d.cta2}</button>
        </div>
        {d.chip && <span className="hero-chip">{d.chip}</span>}
      </div>
      <div className="hero-meta">
        <span className="hslide-cap" key={i}>{d.slides[i].cap}</span>
        <div className="hero-dots">
          {d.slides.map((_, k) => (
            <button key={k} className={k === i ? "on" : ""} onClick={() => setI(k)} aria-label={"Slide " + (k + 1)} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- STATS — asymmetric editorial ---------- */
function Stats({ data, light }) {
  const lead = data[0];
  const rest = data.slice(1);
  return (
    <section className={"section section--statblock" + (light ? " section--light" : "")}>
      <div className="wrap">
        <div className="statblock">
          <Reveal className="stat-lead">
            <span className="stat-lead-num">{lead.n}</span>
            <span className="stat-lead-lbl">{lead.l}</span>
          </Reveal>
          <div className="stat-rest">
            {rest.map((s, k) => (
              <Reveal key={k} delay={k + 1} className={"stat-row" + (k === 0 ? " stat-row--accent" : "")}>
                <span className="stat-row-num">{s.n}</span>
                <span className="stat-row-lbl">{s.l}</span>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- INTRO / STORY TEASER ---------- */
function Intro({ d, go }) {
  return (
    <section className="section section--light">
      <div className="wrap">
        <div className="two-col">
          <Reveal>
            <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
            <h2 className="display" style={{ margin:"20px 0 26px" }} dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="lede" style={{ marginBottom: 30 }}>{d.body}</p>
            <p className="serif-italic" style={{ fontSize: 26, color:"var(--gold-deep)", lineHeight:1.3, marginBottom: 8 }}>{d.quote}</p>
            <p className="eyebrow eyebrow--ink" style={{ marginTop: 18, marginBottom: 30 }}>{d.attr}</p>
            <button className="btn btn--outline" onClick={() => go("story")}>{d.cta} {Ico.arrow({ width:15, height:15 })}</button>
          </Reveal>
          <Reveal delay={1}>
            <Img src="site/img/hero-og.jpg" label="Sergio Goldvarg" ratio="4/5" className="ph--stone" style={{ borderRadius: 4 }} />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- BATMOBILE FEATURE (full-bleed) ---------- */
function BatFeature({ d, go }) {
  return (
    <section className="section section--stone" style={{ overflow:"hidden" }}>
      <div className="wrap">
        <div className="two-col--rev two-col">
          <Reveal>
            <Img src="site/img/batmobile-seat.jpg" label="1966 Batmobile" ratio="5/4" className="ph--oxblood" style={{ borderRadius: 4 }} />
          </Reveal>
          <Reveal delay={1}>
            <span className="eyebrow">{d.eyebrow}</span>
            <h2 className="display" style={{ margin:"20px 0 24px" }} dangerouslySetInnerHTML={{ __html: d.title }} />
            <p className="lede" style={{ marginBottom: 28 }}>{d.body}</p>
            <ul style={{ listStyle:"none", display:"flex", flexDirection:"column", gap:14, marginBottom: 34 }}>
              {d.points.map((p, k) => (
                <li key={k} style={{ display:"flex", gap:13, alignItems:"flex-start" }}>
                  <span style={{ color:"var(--gold)", flex:"none", marginTop:2 }}>{Ico.check({ width:18, height:18 })}</span>
                  <span style={{ color:"var(--t-mid)" }}>{p}</span>
                </li>
              ))}
            </ul>
            <button className="btn btn--gold" onClick={() => go("collection")}>{d.cta} {Ico.arrow({ width:15, height:15 })}</button>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- COLLECTION GALLERIES ---------- */
function CollectionGrid({ d, full, go, lang, showHead = true }) {
  const items = full ? d.items : d.items.slice(0, 4);
  return (
    <section className="section">
      <div className="wrap">
        {showHead && (
          <Reveal className="sec-head" style={{ marginBottom: 50 }}>
            <span className="eyebrow">{d.eyebrow}</span>
            <h2 className="display" style={{ margin:"16px 0 16px" }}>{d.title}</h2>
            <p className="lede">{d.sub}</p>
          </Reveal>
        )}
        <div className="coll-grid">
          {items.map((it, k) => {
            const span = full ? (k % 5 === 0 || k % 5 === 3 ? "s8" : "s4") : "s6";
            return (
              <Reveal key={k} delay={(k % 3) + 1} className={"coll-card " + span} role={!full && go ? "link" : undefined} tabIndex={!full && go ? 0 : undefined}
                onClick={() => { if (!full && go) go("collection"); }}
                onKeyDown={(e) => { if (!full && go && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); go("collection"); } }}>
                <Img src={it.img} className="ph" style={{ position:"absolute", inset:0 }} />
                <div className="coll-card-grad"></div>
                <div className="coll-card-body">
                  <span className="num">{it.num}</span>
                  <h3>{it.t}</h3>
                  <p>{it.d}</p>
                </div>
              </Reveal>
            );
          })}
        </div>
        {!full && go && (
          <Reveal style={{ marginTop: 40, textAlign:"center" }}>
            <button className="btn btn--outline" onClick={() => go("collection")}>
              {lang === "es" ? "Ver todas las galerías" : "View all galleries"} {Ico.arrow({ width:15, height:15 })}
            </button>
          </Reveal>
        )}
      </div>
    </section>
  );
}

/* ---------- EXPERIENCES / PRICING ---------- */
function Experiences({ d, go, light, showHead = true, avail }) {
  return (
    <section className={"section" + (light ? " section--light" : " section--stone")}>
      <div className="wrap">
        {showHead && (
          <Reveal className="sec-head" style={{ marginBottom: 48, maxWidth:"56ch" }}>
            <span className="eyebrow">{d.eyebrow}</span>
            <h2 className="display" style={{ margin:"16px 0 16px" }}>{d.title}</h2>
            <p className="lede">{d.sub}</p>
          </Reveal>
        )}
        <div className="tiers">
          {d.tiers.map((t, k) => (
            <Reveal key={k} delay={k + 1} className={"tier" + (t.feature ? " tier--feature" : "")}>
              <span className="tier-flag">{t.flag}</span>
              <h3>{t.name}</h3>
              <div className="dur">{t.dur}</div>
              <div className="price">${t.price}<span> {t.unit}</span></div>
              {avail && avail[k] && <span className="tier-avail">{avail[k]}</span>}
              <ul>
                {t.feats.map((f, j) => (
                  <li key={j}>{Ico.check({})}{f}</li>
                ))}
              </ul>
              <button className={"btn " + (t.feature ? "btn--gold" : "btn--outline")} onClick={() => window.__gcBook(k)}>{t.cta}</button>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ textAlign:"center", marginTop: 34 }}>
          <p className="muted" style={{ fontSize: 15 }}>{d.note} <a onClick={() => go("events")} style={{ color:"var(--gold)", cursor:"pointer", borderBottom:"1px solid currentColor", paddingBottom:1 }}>{light ? "" : ""}{(window.GC.nav[document.documentElement.lang] || window.GC.nav.es).events} →</a></p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- REVIEWS ---------- */
function Reviews({ d }) {
  return (
    <section className="section section--light">
      <div className="wrap">
        <Reveal className="sec-head" style={{ marginBottom: 44, textAlign:"center", marginInline:"auto" }}>
          <span className="eyebrow eyebrow--ink">{d.eyebrow}</span>
          <h2 className="display" style={{ marginTop: 16 }}>{d.title}</h2>
          {d.sub && <p className="lede" style={{ marginTop: 14 }}>{d.sub}</p>}
        </Reveal>
        <div className="reviews-wall">
          {d.items.map((r, k) => (
            <Reveal key={k} delay={(k % 3) + 1} className="review">
              <div className="review-head">
                <span className="stars">★★★★★</span>
                {r.src && <span className={"review-src src-" + r.src.toLowerCase()}>{r.src}</span>}
              </div>
              <p>{r.q}</p>
              <div className="who">{r.who}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   PAGE: HOME
   ============================================================ */
/* ============================================================
   PAGE: HOME
   ============================================================ */
function HomeFaq({ C, go }) {
  const f = C.faqHome;
  return (
    <section className="section section--light">
      <div className="wrap" style={{ maxWidth: 900 }}>
        <Reveal className="sec-head" style={{ marginBottom: 26 }}>
          <span className="eyebrow eyebrow--ink">{f.eyebrow}</span>
          <h2 className="display" style={{ marginTop: 16 }}>{f.title}</h2>
        </Reveal>
        <div>
          {C.visit.faqs.slice(0, 3).map((q, k) => <FaqItem key={k} q={q.q} a={q.a} />)}
        </div>
        <Reveal style={{ marginTop: 26 }}>
          <button className="btn btn--ghost" style={{ color:"var(--gold-deep)" }} onClick={() => go("visit")}>
            {f.more} {Ico.arrow({ width:15, height:15, className:"arr" })}
          </button>
        </Reveal>
      </div>
    </section>
  );
}

function HomePage({ C, go, lang }) {
  return (
    <main>
      <Hero d={C.hero} go={go} />
      <TrustBar d={C.trust} />
      <PressStrip d={C.strip} go={go} />
      <Stats data={C.stats} />
      <Intro d={C.intro} go={go} />
      <BatFeature d={C.bat} go={go} />
      <ForWho d={C.forwho} go={go} />
      <CollectionGrid d={C.collection} full={false} go={go} lang={lang} />
      <Experiences d={C.experiences} go={go} light={true} avail={C.avail} />
      <Reviews d={C.reviews} />
      <GuessGame d={C.game} />
      <HomeFaq C={C} go={go} />
      <SignCta d={C.sign} />
      <CollectorsClub d={C.club} />
    </main>
  );
}

/* ============================================================
   PAGE: COLLECTION
   ============================================================ */
function CollectionPage({ C, go, lang }) {
  return (
    <main>
      <PageHero img="site/img/work-10.jpg" eyebrow={C.collection.eyebrow} title={C.collection.title} sub={C.collection.sub} />
      <CollectionGrid d={C.collection} full={true} go={go} lang={lang} showHead={false} />
      <Motorsport d={C.moto} />
      <Pano360 d={C.pano} />
      <ScaleCalc d={C.calc} />
      <BatFeature d={C.bat} go={go} />
    </main>
  );
}

/* ============================================================
   PAGE: EXPERIENCES
   ============================================================ */
function ExperiencesPage({ C, go }) {
  return (
    <main>
      <PageHero img="site/img/work-08.jpg" eyebrow={C.experiences.eyebrow} title={C.experiences.title} sub={C.experiences.sub} />
      <Experiences d={C.experiences} go={go} light={false} showHead={false} avail={C.avail} />
      <Reviews d={C.reviews} />
    </main>
  );
}

/* ============================================================
   PAGE: STORY
   ============================================================ */
function StoryPage({ C, go }) {
  const d = C.story;
  return (
    <main>
      <PageHero img="site/img/hero-og.jpg" eyebrow={d.eyebrow} title={d.title.replace(/<br>/g, " ")} sub={d.lead} pos="center 22%" />
      <section className="section section--light">
        <div className="wrap" style={{ maxWidth: 960 }}>
          <div className="timeline">
            {d.timeline.map((it, k) => (
              <Reveal key={k} className="tl-item">
                <div className="tl-year">{it.y}</div>
                <div className="tl-body">
                  <h3>{it.t}</h3>
                  <p>{it.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <BatFeature d={C.bat} go={go} />
    </main>
  );
}

/* ============================================================
   PAGE: VISIT
   ============================================================ */
function FaqItem({ q, a }) {
  const [open, setOpen] = uS(false);
  const ref = uR(null);
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span><span className="pm">+</span>
      </button>
      <div className="faq-a" style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + 40 : 400) : 0 }}>
        <div className="faq-a-inner" ref={ref}>{a}</div>
      </div>
    </div>
  );
}

function VisitPage({ C, go, lang }) {
  const v = C.visit;
  const f = C.footer;
  return (
    <main>
      <PageHero img="site/img/exhibit.jpg" eyebrow={v.eyebrow} title={v.title} />
      <section className="section section--light" style={{ paddingTop: "clamp(48px,7vh,90px)" }}>
        <div className="wrap">
          <div className="info-grid">
            {v.info.map((it, k) => (
              <Reveal key={k} className="info-cell">
                <span className="eyebrow eyebrow--ink">{it.k}</span>
                <h4>{it.v}</h4>
                <p className="small">{it.s}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Meeting point + map */}
      <section className="section section--stone">
        <div className="wrap">
          <div className="two-col">
            <Reveal>
              <span className="eyebrow">{lang === "es" ? "El punto de encuentro" : "The meeting point"}</span>
              <h2 className="display" style={{ margin:"18px 0 22px" }}>{v.meetTitle}</h2>
              <p className="lede" style={{ marginBottom: 26 }}>{v.meetBody}</p>
              <p className="serif-italic" style={{ fontSize: 22, color:"var(--gold-soft)", lineHeight:1.4 }}
                 dangerouslySetInnerHTML={{ __html: v.meetAddr }} />
              <div style={{ display:"flex", gap:14, marginTop: 32, flexWrap:"wrap" }}>
                <a className="btn btn--gold" href="https://maps.google.com/?q=Bell+Tower+Weston+Town+Center+1900+Bell+Tower+Ln+Weston+FL" target="_blank" rel="noopener">
                  {Ico.pin({ width:16, height:16 })} {lang === "es" ? "Cómo llegar" : "Get directions"}
                </a>
                <a className="btn btn--outline" href="tel:+19548172196">+1 (954) 817-2196</a>
              </div>
            </Reveal>
            <Reveal delay={1}>
              <MeetingMap lang={lang} />
            </Reveal>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section section--light">
        <div className="wrap" style={{ maxWidth: 900 }}>
          <Reveal className="sec-head" style={{ marginBottom: 30 }}>
            <span className="eyebrow eyebrow--ink">{lang === "es" ? "Antes de venir" : "Before you come"}</span>
            <h2 className="display" style={{ marginTop: 16 }}>{v.faqTitle}</h2>
          </Reveal>
          <div>
            {v.faqs.map((q, k) => <FaqItem key={k} q={q.q} a={q.a} />)}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--stone" style={{ textAlign:"center" }}>
        <div className="wrap">
          <Reveal>
            <h2 className="display" style={{ maxWidth:"16ch", margin:"0 auto 24px" }}>{v.ctaTitle}</h2>
            <p className="lede" style={{ maxWidth:"44ch", margin:"0 auto 36px" }}>{v.ctaBody}</p>
            <div style={{ display:"flex", gap:16, justifyContent:"center", flexWrap:"wrap" }}>
              <button className="btn btn--gold" onClick={() => window.__gcBook()}>{f.book}</button>
              <a className="btn btn--outline" href="https://wa.me/19548172196" target="_blank" rel="noopener">{Ico.wa({ width:17, height:17 })} WhatsApp</a>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

/* ---------- Generic inner-page hero ---------- */
function PageHero({ img, eyebrow, title, sub, pos }) {
  return (
    <section className="pagehero" style={{ position:"relative", paddingTop:"clamp(150px,22vh,230px)", paddingBottom:"clamp(60px,10vh,110px)", overflow:"hidden" }}>
      <div style={{ position:"absolute", inset:0, zIndex:0 }}>
        <img src={img} alt="" style={{ width:"100%", height:"100%", objectFit:"cover", objectPosition: pos || "center" }} />
        <div style={{ position:"absolute", inset:0, background:"linear-gradient(180deg, rgba(20,16,10,.9) 0%, rgba(20,16,10,.74) 45%, rgba(20,16,10,.97) 100%), linear-gradient(95deg, rgba(20,16,10,.66) 0%, rgba(20,16,10,.28) 48%, rgba(20,16,10,0) 78%)" }}></div>
      </div>
      <div className="wrap" style={{ position:"relative", zIndex:1 }}>
        <Reveal>
          <span className="eyebrow">{eyebrow}</span>
          <h1 className="display" style={{ fontSize:"clamp(40px,6.5vw,92px)", margin:"18px 0 0", maxWidth:"16ch", color:"#fff" }}
              dangerouslySetInnerHTML={{ __html: title }} />
          {sub && <p className="lede" style={{ maxWidth:"54ch", marginTop: 24 }}>{sub}</p>}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  HomePage, CollectionPage, ExperiencesPage, StoryPage, VisitPage, PageHero,
});