const { useState: useStateP, useEffect: useEffectP, useRef: useRefP } = React;

// All of the studio's "creations" set, sized by build_media.py.
const GALLERY = mediaList("gallery");

// ── PageHead — the masthead every inner page opens with ───────────
function PageHead({ eyebrow, title, lede, index }) {
  return (
    <Reveal as="section" className="wrap phead">
      <div className="masthead-top" style={{ marginBottom: "var(--s7)" }}>
        <span className="label">{eyebrow}</span>
        <span className="num">{index}</span>
      </div>
      <div className="phead-grid">
        <MaskTitle as="h1" text={title} step={48} />
        {lede && <p className="lede rise" style={{ "--d": "260ms" }}>{lede}</p>}
      </div>
      <div className="phead-rule draw" style={{ "--d": "420ms" }} />
    </Reveal>
  );
}

// ── HomePage ──────────────────────────────────────────────────────
function HomePage({ t, setPage }) {
  return (
    <main>
      <Hero t={t} setPage={setPage} />
      <IndexRow t={t} />
      <Marquee items={t.marquee} />
      <Manifesto t={t} setPage={setPage} />
      <SeminarIndex t={t} setPage={setPage} />
      <SpecStrip t={t} />
      <Maker t={t} />
      <Quotes t={t} />
      <ClosingCall t={t} setPage={setPage} />
    </main>
  );
}

// ── SeminarsPage ──────────────────────────────────────────────────
function SeminarsPage({ t, setPage }) {
  const [tab, setTab] = useStateP(0);
  const cat = t.seminars.categories[tab];

  return (
    <main>
      <PageHead eyebrow={t.seminars.eyebrow} title={t.seminars.title} lede={t.seminars.lede} index="01" />

      <section className="wrap sec-tight">
        <div className="tabs">
          {t.seminars.categories.map((c, i) => (
            <button key={i} className={"tab" + (tab === i ? " active" : "")} onClick={() => setTab(i)}>
              <Icon name={c.icon} size={15} />
              <span>{c.name}</span>
            </button>
          ))}
        </div>

        {/* key forces a remount per tab so the reveal animations replay */}
        <Reveal className="sheet" key={tab}>
          <div>
            <MaskTitle as="h2" text={cat.name} step={45} />
            <p className="sheet-lede rise" style={{ "--d": "180ms", marginTop: "var(--s5)" }}>{cat.lede}</p>
            <div className="sheet-tags rise" style={{ "--d": "300ms" }}>
              {cat.items.map((it, i) => <span key={i} className="sheet-tag">{it}</span>)}
            </div>
          </div>

          <div>
            {cat.tiers.map((tier, i) => <SeminarCard key={i} t={t} tier={tier} index={i} />)}
          </div>
        </Reveal>

        {cat.media && (
          <Reveal className="sec-tight" key={"media-" + tab} style={{ paddingBottom: 0 }}>
            <div className="masthead-top" style={{ marginBottom: "var(--s5)" }}>
              <span className="label">{t.gallery.eyebrow}</span>
              <span className="num">{cat.name}</span>
            </div>
            <Slideshow images={mediaList(cat.media)} label={cat.name} />
          </Reveal>
        )}
      </section>

      <Reveal as="section" className="wrap sec">
        <div className="masthead">
          <div className="masthead-top">
            <span className="label">{t.seminars.faqTitle}</span>
            <span className="num">{String(t.seminars.faq.length)}</span>
          </div>
        </div>
        <Accordion items={t.seminars.faq} />
      </Reveal>

      <ClosingCall t={t} setPage={setPage} />
    </main>
  );
}

// ── GalleryPage — plates with museum captions, click to enlarge ───
function GalleryPage({ t, setPage }) {
  const [lb, setLb] = useStateP(-1);
  const N = GALLERY.length;

  useEffectP(() => {
    if (lb < 0) return;
    const onKey = (e) => {
      if (e.key === "Escape") setLb(-1);
      if (e.key === "ArrowRight") setLb(i => (i + 1) % N);
      if (e.key === "ArrowLeft")  setLb(i => (i - 1 + N) % N);
    };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [lb < 0, N]);

  return (
    <main>
      <PageHead eyebrow={t.gallery.eyebrow} title={t.gallery.title} lede={t.gallery.lede} index="02" />

      <Reveal as="section" className="wrap sec-tight">
        <div className="plates">
          {GALLERY.map((src, i) => (
            <figure key={src} onClick={() => setLb(i)}>
              <div className="plate" style={{ "--d": ((i % 3) * 120) + "ms" }}>
                <img src={src} alt={t.gallery.title + " — " + nn(i)} loading={i < 3 ? "eager" : "lazy"} />
              </div>
              <figcaption>
                <span className="num">{nn(i)}</span>
                <span>{t.gallery.eyebrow}</span>
              </figcaption>
            </figure>
          ))}
        </div>
      </Reveal>

      <ClosingCall t={t} setPage={setPage} />

      {lb >= 0 && ReactDOM.createPortal(
        <div className="lightbox" onClick={() => setLb(-1)}>
          <button className="lb-btn lb-close" aria-label="Close" onClick={() => setLb(-1)}>×</button>
          <button className="lb-btn lb-prev" aria-label="Previous"
                  onClick={(e) => { e.stopPropagation(); setLb((lb - 1 + N) % N); }}>‹</button>
          <img src={GALLERY[lb]} alt={t.gallery.title + " — " + nn(lb)} onClick={(e) => e.stopPropagation()} />
          <button className="lb-btn lb-next" aria-label="Next"
                  onClick={(e) => { e.stopPropagation(); setLb((lb + 1) % N); }}>›</button>
          <span className="lb-count">{nn(lb)} / {N}</span>
        </div>,
        document.body
      )}
    </main>
  );
}

// ── AboutPage ─────────────────────────────────────────────────────
function AboutPage({ t, setPage }) {
  return (
    <main>
      <PageHead eyebrow={t.about.eyebrow} title={t.about.title} index="03" />

      <Reveal as="section" className="wrap sec-tight">
        <div className="about-grid">
          <div className="about-body">
            {t.about.body.map((p, i) => (
              <p key={i} className="rise" style={{ "--d": (i * 110) + "ms" }}>{p}</p>
            ))}
          </div>
          <figure style={{ margin: 0 }}>
            <div className="plate about-plate" style={{ "--d": "160ms" }}>
              <img src="/assets/photos/cuff.jpg" alt="Σφυρήλατο βραχιόλι με υφές και ασημοκόλληση" loading="lazy" />
            </div>
            <figcaption className="plate-cap"><span className="num">—</span><span>{t.gallery.eyebrow}</span></figcaption>
          </figure>
        </div>
      </Reveal>

      <Reveal as="section" className="wrap sec">
        <div className="masthead">
          <div className="masthead-top">
            <span className="label">{t.about.principlesEb}</span>
            <span className="num">03</span>
          </div>
          <MaskTitle as="h2" text={t.home.introTitle} step={45} />
        </div>
        <div className="principles">
          {t.about.principles.map((p, i) => (
            <div key={i} className="principle rise" style={{ "--d": (i * 110) + "ms" }}>
              <span className="num">{nn(i)}</span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </Reveal>

      <Maker t={t} />
      <Quotes t={t} />
      <ClosingCall t={t} setPage={setPage} />
    </main>
  );
}

// ── ContactPage ───────────────────────────────────────────────────
function ContactPage({ t }) {
  const [sent, setSent] = useStateP("");   // "" | sending | ok | err

  const submitContact = async (e) => {
    e.preventDefault();
    if (sent === "sending") return;
    const form = e.currentTarget;
    setSent("sending");
    try {
      await postForm(Object.fromEntries(new FormData(form)), t.contact.email, "Website contact form");
      setSent("ok");
      form.reset();
    } catch (err) {
      setSent("err");
    }
  };

  const transit = t.contact.transit;

  return (
    <main>
      <PageHead eyebrow={t.contact.eyebrow} title={t.contact.title} lede={t.contact.lede} index="04" />

      <Reveal as="section" className="wrap sec-tight">
        <div className="contact-grid">
          <form className="form" onSubmit={submitContact}>
            <div className="rise" style={{ "--d": "60ms" }}>
              <Field name="name"    required label={t.contact.name}     placeholder={t.contact.namePh} />
            </div>
            <div className="rise" style={{ "--d": "130ms" }}>
              <Field name="email"   required label={t.contact.emailLbl} placeholder="you@email.com" type="email" />
            </div>
            <div className="rise" style={{ "--d": "200ms" }}>
              <Field name="phone"            label={t.contact.phoneLbl} placeholder={t.contact.phonePh} type="tel" />
            </div>
            <div className="rise" style={{ "--d": "270ms" }}>
              <Field name="message" required label={t.contact.msg}      placeholder={t.contact.msgPh} multiline />
            </div>
            <div className="rise" style={{ "--d": "340ms" }}>
              <Btn className="btn-solid" type="submit" disabled={sent === "sending"}>{t.contact.send}</Btn>
              {sent === "ok"  && <p className="form-msg">{t.contact.ok}</p>}
              {sent === "err" && <p className="form-msg err">{t.contact.err}</p>}
            </div>
          </form>

          <div>
            <div className="info-block rise" style={{ "--d": "120ms" }}>
              <h4>{t.footer.findEb}</h4>
              <a className="info-big" href={mapsHref(t.contact)} target="_blank" rel="noopener noreferrer">
                {t.contact.addr.join(", ")}
              </a>
            </div>
            <div className="info-block rise" style={{ "--d": "200ms" }}>
              <h4>{t.contact.contactEb}</h4>
              <ContactDetails t={t} showAddress={false} />
            </div>
            <div className="info-block rise" style={{ "--d": "280ms" }}>
              <h4>{t.contact.hoursEb}</h4>
              <div className="info-list">
                {t.contact.hours.map((h, i) => <span key={i}>{h}</span>)}
              </div>
            </div>
            <div className="info-block rise" style={{ "--d": "360ms" }}>
              <h4>{t.contact.transitEb}</h4>
              <ul className="transit-list">
                {transit.map((line, i) => (
                  <li key={i} className={(i === 0 || i === transit.length - 1) ? "head" : ""}>{line}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>

        <div className="map rise" style={{ "--d": "220ms" }}>
          <iframe
            title="Vortex Arts — Google Maps"
            src={"https://www.google.com/maps?q=" + encodeURIComponent(t.contact.mapQuery) + "&output=embed"}
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            allowFullScreen />
        </div>
      </Reveal>
    </main>
  );
}

Object.assign(window, { PageHead, HomePage, SeminarsPage, GalleryPage, AboutPage, ContactPage });