// Isac Lacerda — Sections 8-13
// Gallery · Testimonials · About · FAQ · Final CTA · Footer

/* ─── 08 · GALLERY (editorial 3:4 grid, no crop) ──────── */
function Gallery({ t }) {
  return (
    <section className="is-section" data-screen-label="08 Gallery" id="gallery">
      <div className="is-wrap">
        <EditorialDivider num={t.gallery.num} label={t.gallery.label} />

        <div className="grid-2-1" style={{ alignItems: "end", marginBottom: 64 }}>
          <BlurReveal>
            <ItalicSplit a={t.gallery.h1a} b={t.gallery.h1b} className="h-display-2" />
          </BlurReveal>
          <BlurReveal delay={150}>
            <p className="is-body-lg txt-pretty" style={{ margin: 0 }}>{t.gallery.lede}</p>
          </BlurReveal>
        </div>

        <CurtainReveal delay={120}>
          <div
            className="is-gallery-grid"
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(4, 1fr)",
              gap: 24,
            }}
          >
            {t.gallery.caps.map((cap, i) => (
              <figure
                key={i}
                className="tile"
                style={{ margin: 0, position: "relative", aspectRatio: "3/4", overflow: "hidden", background: "#1F1A17" }}
              >
                <img
                  src={`assets/gallery-${String(i + 1).padStart(2, "0")}.webp`}
                  alt={cap}
                  loading="lazy"
                  decoding="async"
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top" }}
                />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(31,26,23,0) 55%, rgba(31,26,23,.72) 100%)", pointerEvents: "none" }} aria-hidden />
                <div className="is-mono is-mono-sm" style={{ position: "absolute", top: 14, left: 16, color: "rgba(244,239,230,.9)", zIndex: 2, textShadow: "0 1px 2px rgba(0,0,0,.4)" }}>
                  Nº {String(i + 1).padStart(3, "0")}
                </div>
                <figcaption className="cap" style={{ position: "absolute", bottom: 14, left: 16, right: 16, color: "rgba(244,239,230,.95)", fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, letterSpacing: ".14em", textTransform: "uppercase", zIndex: 2, lineHeight: 1.5, textShadow: "0 1px 2px rgba(0,0,0,.5)" }}>
                  {cap}
                </figcaption>
              </figure>
            ))}
          </div>
        </CurtainReveal>

        <style>{`
          @media (max-width: 1024px) { .is-gallery-grid { grid-template-columns: repeat(3, 1fr) !important; } }
          @media (max-width: 720px)  { .is-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } }
          @media (max-width: 440px)  { .is-gallery-grid { grid-template-columns: 1fr !important; } }
        `}</style>

        <BlurReveal delay={300}>
          <div className="is-mono is-mono-sm" style={{ marginTop: 32, color: "var(--is-text-3)", maxWidth: 720, lineHeight: 2 }}>
            {t.gallery.pending}
          </div>
        </BlurReveal>
      </div>
    </section>
  );
}

/* ─── 09 · TESTIMONIALS ────────────────────────────────── */
function Testimonials({ t }) {
  return (
    <section className="is-section" data-screen-label="09 Testimonials" id="testimonials" style={{ background: "var(--is-bg-2)" }}>
      <div className="is-wrap">
        <EditorialDivider num={t.testimonials.num} label={t.testimonials.label} />

        <BlurReveal>
          <ItalicSplit a={t.testimonials.h1a} b={t.testimonials.h1b} className="h-display-2" />
        </BlurReveal>

        <div style={{ marginTop: 72, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(360px, 1fr))", gap: 28 }}>
          {t.testimonials.items.map((it, i) => (
            <CurtainReveal key={i} delay={i * 100}>
              <div style={{ background: "var(--is-card)", border: "1px solid var(--is-hairline)", padding: "clamp(28px, 3vw, 40px)", position: "relative", height: "100%" }}>
                <div style={{ position: "absolute", top: 14, right: 16, fontFamily: "Fraunces, serif", fontStyle: "italic", fontSize: "3.4rem", lineHeight: 1, color: "var(--is-accent)", opacity: .6 }}>
                  "
                </div>
                <p className="is-italic" style={{ fontSize: "1.32rem", lineHeight: 1.4, color: "var(--is-text)", margin: 0, paddingRight: "1.4rem" }}>
                  {it.q}
                </p>
                <div className="is-mono is-mono-sm" style={{ marginTop: 28, paddingTop: 18, borderTop: "1px solid var(--is-hairline)", color: "var(--is-text-2)" }}>
                  — {it.c}
                </div>
              </div>
            </CurtainReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 10 · ABOUT ISAC (extensivo) ──────────────────────── */
function About({ t }) {
  const paras = [t.about.p1, t.about.p2, t.about.p3, t.about.p4, t.about.p5, t.about.p6];
  return (
    <section className="is-section" data-screen-label="10 About" id="about">
      <div className="is-wrap">
        <EditorialDivider num={t.about.num} label={t.about.label} />

        <BlurReveal>
          <ItalicSplit a={t.about.h1a} b={t.about.h1b} className="h-display-2" />
        </BlurReveal>

        <div className="grid-2" style={{ marginTop: 80, alignItems: "start" }}>
          {/* LEFT — prose */}
          <div>
            {paras.map((p, i) => (
              <BlurReveal key={i} delay={i * 90}>
                <p className={"is-body-lg txt-pretty " + (i === 0 ? "is-dropcap" : "")} style={{ marginBottom: "1.4rem", color: i === 0 ? "var(--is-text)" : "var(--is-text-2)" }}>
                  {p}
                </p>
              </BlurReveal>
            ))}

            <BlurReveal delay={paras.length * 90}>
              <div style={{ marginTop: 36 }}>
                <PullQuote cite={t.about.cite}>{t.about.quote}</PullQuote>
              </div>
            </BlurReveal>
          </div>

          {/* RIGHT — sticky portrait */}
          <div>
            <div style={{ position: "sticky", top: 100 }}>
              <CurtainReveal>
                <PaperFrame label="ISAC · STUDIO" ratio="3/4" tone="cool" caption={t.about.photoLabel} src="assets/about-studio.webp" alt="Isac Lacerda · retrato editorial em estúdio, Orlando" />
              </CurtainReveal>

              <div style={{ marginTop: 28, display: "grid", gap: 14 }}>
                <div className="is-mono is-mono-sm" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--is-hairline)" }}>
                  <span>Base</span><span style={{ color: "var(--is-text)" }}>Orlando, FL · USA</span>
                </div>
                <div className="is-mono is-mono-sm" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--is-hairline)" }}>
                  <span>Atende</span><span style={{ color: "var(--is-text)" }}>Brasil · Miami · NYC · LA · Paris</span>
                </div>
                <div className="is-mono is-mono-sm" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--is-hairline)" }}>
                  <span>Idiomas</span><span style={{ color: "var(--is-text)" }}>PT · EN</span>
                </div>
                <div className="is-mono is-mono-sm" style={{ display: "flex", justifyContent: "space-between", padding: "12px 0", borderTop: "1px solid var(--is-hairline)", borderBottom: "1px solid var(--is-hairline)" }}>
                  <span>Desde</span><span style={{ color: "var(--is-text)" }}>2017</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 11 · FAQ ─────────────────────────────────────────── */
function FAQ({ t }) {
  return (
    <section className="is-section" data-screen-label="11 FAQ" id="faq" style={{ background: "var(--is-bg-2)" }}>
      <div className="is-wrap-narrow">
        <EditorialDivider num={t.faq.num} label={t.faq.label} />

        <BlurReveal>
          <ItalicSplit a={t.faq.h1a} b={t.faq.h1b} className="h-display-3" />
        </BlurReveal>

        <div className="is-faq" style={{ marginTop: 60 }}>
          {t.faq.items.map((it, i) => (
            <details key={i}>
              <summary>
                <span>{it.q}</span>
                <span className="plus">+</span>
              </summary>
              <div>{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 12 · FINAL CTA ───────────────────────────────────── */
function FinalCta({ t, onConsulta, onMentoria }) {
  const handlers = [onConsulta, () => {
    document.getElementById("lulu")?.scrollIntoView({ behavior: "smooth", block: "start" });
  }, onMentoria];

  return (
    <section className="is-section" data-screen-label="12 Final CTA" id="final" style={{ background: "var(--is-text)", color: "var(--is-bg)", position: "relative", overflow: "hidden" }}>
      {/* Bordeaux orb top-right */}
      <div style={{ position: "absolute", top: "-30%", right: "-10%", width: "60vw", height: "60vw", maxWidth: 700, maxHeight: 700, background: "var(--is-accent)", borderRadius: "50%", filter: "blur(140px)", opacity: .22 }} aria-hidden />

      <div className="is-wrap" style={{ position: "relative" }}>
        <BlurReveal>
          <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent-warm)", marginBottom: 28 }}>
            — {t.finalCta.tag}
          </div>
        </BlurReveal>
        <BlurReveal delay={120}>
          <h2 className="is-display h-display-1 txt-balance" style={{ margin: 0, color: "var(--is-bg)" }}>
            {t.finalCta.h1a}
            <br />
            <em style={{ color: "var(--is-accent-warm)" }}>{t.finalCta.h1b}</em>
          </h2>
        </BlurReveal>

        <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 0, border: "1px solid rgba(244,239,230,.18)" }}>
          {t.finalCta.paths.map((p, i) => (
            <CurtainReveal key={i} delay={i * 120}>
              <button
                onClick={handlers[i]}
                className="cta-path"
                style={{
                  padding: "clamp(32px, 3vw, 48px) clamp(28px, 2.8vw, 40px)",
                  borderRight: i < 2 ? "1px solid rgba(244,239,230,.18)" : "0",
                  textAlign: "left",
                  background: "transparent",
                  color: "var(--is-bg)",
                  width: "100%",
                  height: "100%",
                  cursor: "pointer",
                  transition: "background .35s",
                  display: "block",
                }}
                onMouseEnter={e => e.currentTarget.style.background = "rgba(92,26,43,.4)"}
                onMouseLeave={e => e.currentTarget.style.background = "transparent"}
              >
                <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent-warm)", marginBottom: 18 }}>
                  — {String(i + 1).padStart(2, "0")} / {p.k}
                </div>
                <div className="is-serif" style={{ fontSize: "1.65rem", marginBottom: 24, lineHeight: 1.2, color: "var(--is-bg)" }}>
                  {p.v}
                </div>
                <div className="is-mono is-mono-sm" style={{ color: "var(--is-bg)", paddingTop: 22, borderTop: "1px solid rgba(244,239,230,.18)" }}>
                  {p.c} →
                </div>
              </button>
            </CurtainReveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── 13 · FOOTER ──────────────────────────────────────── */
function Footer({ t }) {
  return (
    <footer className="is-footer" data-screen-label="13 Footer">
      <div className="is-wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }} className="footer-grid">
          {/* Identity */}
          <div>
            <div className="is-serif" style={{ fontSize: "2rem", letterSpacing: "-.02em", marginBottom: 14 }}>
              {t.footer.tag.split(" ")[0]} <em style={{ color: "var(--is-accent)", fontStyle: "italic" }}>{t.footer.tag.split(" ").slice(1).join(" ")}</em>
            </div>
            <div className="is-mono is-mono-sm" style={{ lineHeight: 2 }}>
              {t.footer.addr}
            </div>
          </div>

          {t.footer.cols.map((col, i) => (
            <div key={i}>
              <div className="is-mono is-mono-sm" style={{ color: "var(--is-accent)", marginBottom: 18 }}>
                — {col.h}
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {col.links.map((l, j) => (
                  <li key={j} style={{ padding: "6px 0" }}>
                    <a href="#" className="is-serif" style={{ fontSize: "1.02rem", color: "var(--is-text-2)", letterSpacing: 0 }}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 60, paddingTop: 24, borderTop: "1px solid var(--is-hairline)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
          <div className="is-mono is-mono-sm">{t.footer.copyright}</div>
          <div className="is-mono is-mono-sm" style={{ color: "var(--is-text-3)" }}>{t.footer.stack}</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 560px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, {
  Gallery, Testimonials, About, FAQ, FinalCta, Footer,
});