/* GayCard — Landing page app (scroll-driven motion) */
const { useState, useEffect, useRef } = React;

/* reveal helper: data-anim drives the scroll engine in motion.js */
function A({ anim = "up", d = 0, as = "div", className = "", style = {}, children, ...rest }) {
  const Tag = as;
  if (anim === "mask") {
    return <Tag data-anim="mask" data-delay={d} className={"maskline " + className} style={style} {...rest}><span>{children}</span></Tag>;
  }
  return <Tag data-anim={anim} data-delay={d} className={className} style={style} {...rest}>{children}</Tag>;
}

/* 3D mouse-tilt wrapper (the model's bento-card effect) */
function Tilt({ className = "", style = {}, max = 9, children, onMouseEnter, onMouseLeave }) {
  const ref = useRef(null);
  const move = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(900px) rotateX(${(-py * max).toFixed(2)}deg) rotateY(${(px * max).toFixed(2)}deg)`;
  };
  const leave = (e) => { if (ref.current) ref.current.style.transform = "perspective(900px) rotateX(0deg) rotateY(0deg)"; onMouseLeave && onMouseLeave(e); };
  return <div ref={ref} onMouseMove={move} onMouseEnter={onMouseEnter} onMouseLeave={leave} className={className} style={{ transition: "transform .25s ease", transformStyle: "preserve-3d", ...style }}>{children}</div>;
}

/* center-crop an uploaded image to a square (the card photo slot is 1:1) */
function cropSquare(file, size = 560) {
  return new Promise((resolve, reject) => {
    const r = new FileReader();
    r.onload = () => {
      const img = new Image();
      img.onload = () => {
        const s = Math.min(img.width, img.height);
        const c = document.createElement("canvas");
        c.width = c.height = size;
        const ctx = c.getContext("2d");
        ctx.drawImage(img, (img.width - s) / 2, (img.height - s) / 2, s, s, 0, 0, size, size);
        resolve(c.toDataURL("image/jpeg", 0.9));
      };
      img.onerror = reject; img.src = r.result;
    };
    r.onerror = reject; r.readAsDataURL(file);
  });
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const bar = useRef(null);
  useEffect(() => {
    const h = () => {
      setScrolled(window.scrollY > 40);
      const max = document.documentElement.scrollHeight - window.innerHeight;
      if (bar.current) bar.current.style.transform = `scaleX(${max > 0 ? window.scrollY / max : 0})`;
    };
    window.addEventListener("scroll", h, { passive: true }); h();
    return () => window.removeEventListener("scroll", h);
  }, []);
  const links = [["Como funciona", "#como"], ["Na carta", "#caixa"], ["Presente", "#presente"], ["Comunidade", "#comunidade"], ["Preços", "#precos"]];
  return (
    <nav style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 60, transition: "all .35s ease",
      background: scrolled ? "rgba(255,255,255,0.86)" : "transparent", backdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid rgba(18,18,18,0.08)" : "1px solid transparent" }}>
      <div className="wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 70 }}>
        <a href="#top" className="brand" style={{ display: "flex", alignItems: "center", gap: 9, textDecoration: "none" }}>
          <PrideFlag width={30} />
          <span className="display" style={{ fontSize: "1.4rem", color: "var(--ink)" }}>Gay<span className="rainbow-text brand-accent">Card</span></span>
        </a>
        <div className="nav-links" style={{ display: "flex", alignItems: "center", gap: 26 }}>
          {links.map(([l, h]) => <a key={h} href={h} style={{ textDecoration: "none", color: "var(--ink)", fontWeight: 600, fontSize: "0.92rem" }}>{l}</a>)}
        </div>
        <a className="btn btn-rainbow nav-cta" href="Comprar.html" style={{ padding: "0.7rem 1.3rem", fontSize: "0.9rem" }}>Quero o meu</a>
        <button className="nav-burger" onClick={() => setOpen(!open)} style={{ display: "none", background: "none", border: "none", cursor: "pointer", padding: 6 }} aria-label="menu">
          <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="var(--ink)" strokeWidth="2.5"><path d={open ? "M6 6l12 12M6 18L18 6" : "M3 6h18M3 12h18M3 18h18"} strokeLinecap="round"/></svg>
        </button>
      </div>
      <div style={{ height: 3, background: "transparent" }}><div ref={bar} style={{ height: "100%", background: "var(--rainbow)", transformOrigin: "0 50%", transform: "scaleX(0)" }} /></div>
      {open && (
        <div className="wrap" style={{ paddingBottom: 18, display: "flex", flexDirection: "column", gap: 14 }}>
          {links.map(([l, h]) => <a key={h} href={h} onClick={() => setOpen(false)} style={{ textDecoration: "none", color: "var(--ink)", fontWeight: 700, fontSize: "1.1rem" }}>{l}</a>)}
          <a className="btn btn-rainbow" href="Comprar.html" style={{ justifyContent: "center" }}>Quero o meu · R$ 29,90</a>
        </div>
      )}
    </nav>
  );
}

function Hero() {
  const [photo, setPhoto] = useState(() => { try { return localStorage.getItem("gaycard:preview:photo") || null; } catch (e) { return null; } });
  const fileRef = useRef(null);
  const onFile = async (e) => {
    const f = e.target.files && e.target.files[0]; if (!f) return;
    try { const url = await cropSquare(f); setPhoto(url); try { localStorage.setItem("gaycard:preview:photo", url); } catch (_) {} } catch (_) {}
  };
  const clearPhoto = () => { setPhoto(null); try { localStorage.removeItem("gaycard:preview:photo"); } catch (_) {} };
  return (
    <section id="top" data-hero className="noise" style={{ position: "relative", minHeight: "100vh", display: "flex", alignItems: "center", overflow: "hidden", paddingTop: 90 }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(1100px 600px at 78% 12%, rgba(255,206,0,0.16), transparent 60%), radial-gradient(900px 600px at 12% 90%, rgba(18,87,255,0.12), transparent 60%)" }} />
      <div data-anim="parallax" data-speed="0.4" style={{ position: "absolute", top: "16%", left: "6%", width: 180, height: 180, borderRadius: "50%", background: "var(--purple)", filter: "blur(90px)", opacity: 0.18 }} />
      <div data-anim="parallax" data-speed="-0.3" style={{ position: "absolute", bottom: "12%", right: "10%", width: 220, height: 220, borderRadius: "50%", background: "var(--red)", filter: "blur(100px)", opacity: 0.14 }} />

      <div className="wrap hero-grid" style={{ position: "relative", zIndex: 2, display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }}>
        <div data-hfade>
          <div className="chip load-fade" style={{ background: "var(--ink)", color: "#fff", marginBottom: 26, animationDelay: "0.05s" }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--yellow)", display: "inline-block" }} />
            EDIÇÃO PREMIUM · BRASIL
          </div>
          <h1 className="display" style={{ fontSize: "clamp(2.15rem, 7vw, 5.6rem)", margin: 0 }}>
            <span data-hx="-0.5" className="line-mask" style={{ whiteSpace: "nowrap" }}><span className="line-in" style={{ animationDelay: "0.08s" }}>SEU ORGULHO</span></span>
            <span className="line-mask" style={{ whiteSpace: "nowrap" }}><span className="line-in" style={{ animationDelay: "0.18s" }}>AGORA TEM</span></span>
            <span data-hx="0.7" className="line-mask" style={{ whiteSpace: "nowrap" }}><span className="line-in rainbow-text" style={{ animationDelay: "0.28s" }}>CARTEIRINHA.</span></span>
          </h1>
          <p className="load-fade" style={{ fontSize: "clamp(1.05rem,1.5vw,1.25rem)", color: "var(--ink-70)", maxWidth: 480, marginTop: 22, lineHeight: 1.55, fontWeight: 500, animationDelay: "0.42s" }}>
            O cartão de membro oficial da comunidade. Personalizado com a sua foto — entregue na sua casa com <strong style={{ color: "var(--ink)" }}>frete grátis pro Brasil inteiro.</strong>
          </p>
          <div className="load-fade" style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 30, animationDelay: "0.52s" }}>
            <a className="btn btn-rainbow" href="Comprar.html?plano=fisico">Quero o meu · R$ 29,90
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a className="btn btn-ghost" href="Comprar.html?modo=presente">Presentear alguém</a>
          </div>
          <div className="load-fade" style={{ display: "flex", flexWrap: "wrap", gap: "10px 22px", marginTop: 32, animationDelay: "0.62s" }}>
            {["Frete grátis Brasil todo", "Carta + cartão físico", "QR de certificado", "Versão digital R$ 19,90"].map((b) => (
              <span key={b} className="mono" style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "0.78rem", color: "var(--ink-70)", fontWeight: 700 }}>
                <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--green)" }} />{b}
              </span>
            ))}
          </div>
        </div>

        <div className="hero-card-wrap" style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 18 }}>
          <div data-anim="parallax" data-speed="0.18" style={{ position: "absolute", top: 0, width: "78%", height: "78%", borderRadius: "50%", background: "var(--rainbow)", filter: "blur(70px)", opacity: 0.32 }} />
          <div data-hcard style={{ width: "min(532px, 100%)", marginTop: -14 }}>
            <div className="card-intro" style={{ animationDelay: "0.3s" }}>
              <div className="floaty" style={{ animation: "floaty 7s ease-in-out infinite", transform: "rotate(-7deg)", "--rot": "-7deg" }}>
                <GayCardVisual name="Nome Sobrenome" memberNo="BR-024601" photo={photo} floating />
              </div>
            </div>
          </div>
          <div className="load-fade" style={{ animationDelay: "0.5s", marginTop: 28, display: "flex", alignItems: "center", gap: 7, color: "var(--ink-45)", fontFamily: "var(--font-mono)", fontWeight: 700, fontSize: "0.74rem", letterSpacing: "0.05em" }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5" strokeLinecap="round" strokeLinejoin="round"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            toque no cartão para virar
          </div>
          <div className="load-fade" style={{ animationDelay: "0.55s", position: "relative", zIndex: 3, display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }}>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <button className="btn btn-ghost" style={{ padding: "0.72rem 1.25rem", fontSize: "0.9rem" }} onClick={() => fileRef.current && fileRef.current.click()}>
                <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M12 16V5m0 0L7 10m5-5l5 5M5 19h14" strokeLinecap="round" strokeLinejoin="round"/></svg>
                {photo ? "Trocar foto" : "Ver com a minha foto"}
              </button>
              {photo && <button onClick={clearPhoto} className="mono" style={{ background: "none", border: "none", cursor: "pointer", color: "var(--ink-45)", fontWeight: 700, fontSize: "0.74rem", letterSpacing: "0.08em" }}>REMOVER</button>}
            </div>
            <input ref={fileRef} type="file" accept="image/*" style={{ display: "none" }} onChange={onFile} />
          </div>
        </div>
      </div>

      <div className="scroll-cue" style={{ position: "absolute", bottom: 22, left: "50%", transform: "translateX(-50%)", zIndex: 3 }}>
        <div className="floaty" style={{ animation: "floaty 2.4s ease-in-out infinite" }}>
          <div style={{ width: 22, height: 36, border: "2px solid rgba(18,18,18,0.3)", borderRadius: 999, display: "flex", justifyContent: "center", paddingTop: 6 }}>
            <div style={{ width: 4, height: 8, borderRadius: 999, background: "rgba(18,18,18,0.4)" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  const items = ["FRETE GRÁTIS PRO BRASIL TODO", "★", "EDIÇÃO PREMIUM", "★", "FEITO COM ORGULHO", "★", "ENTREGA EM CASA", "★", "CERTIFICADO COM QR", "★"];
  // Two identical groups (the second is decorative / aria-hidden). The CSS
  // animates each by -100% of its width for a seamless, gap-free infinite loop.
  const group = (key, hidden) => (
    <div className="marquee__group" key={key} aria-hidden={hidden || undefined}>
      {items.map((t, i) => <span key={i} className="display" style={{ fontSize: "1.3rem", color: t === "★" ? "var(--yellow)" : "#fff", letterSpacing: "0.02em" }}>{t}</span>)}
    </div>
  );
  return (
    <div className="marquee" style={{ background: "var(--ink)", padding: "16px 0", borderTop: "4px solid", borderBottom: "4px solid", borderImage: "var(--rainbow) 1" }}>
      {group("a", false)}
      {group("b", true)}
    </div>
  );
}

function Section({ id, eyebrow, eyebrowColor = "var(--blue)", title, children, dark = false, style = {} }) {
  return (
    <section id={id} className="section" style={{ background: dark ? "var(--char)" : "var(--bg)", color: dark ? "#fff" : "var(--ink)", overflow: "hidden", ...style }}>
      <div className="wrap">
        {eyebrow && <A anim="up" className="eyebrow" style={{ color: eyebrowColor, marginBottom: 14 }}>{eyebrow}</A>}
        {title && <A as="h2" anim="mask" className="display" style={{ fontSize: "clamp(2.1rem,4.6vw,3.6rem)", margin: "0 0 46px", maxWidth: 760 }}>{title}</A>}
        {children}
      </div>
    </section>
  );
}

function Como() {
  const steps = [
    { n: "01", c: "var(--red)", t: "Monte seu cartão", d: "Envie sua melhor foto e escolha o nome que vai no GayCard. Veja como o cartão vai ficar na hora." },
    { n: "02", c: "var(--blue)", t: "A gente produz e posta", d: "Imprimimos seu cartão em alta qualidade dentro de uma carta de boas-vindas. Frete grátis pra todo o Brasil." },
    { n: "03", c: "var(--purple)", t: "Receba e escaneie", d: "Carta + cartão físico chegam na sua casa. O QR Code abre o seu Certificado de Membro online." },
  ];
  return (
    <Section id="como" eyebrow="Como funciona" eyebrowColor="var(--red)" title={<>Três passos entre você e o seu <span className="rainbow-text">orgulho oficial.</span></>}>
      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22 }}>
        {steps.map((s, i) => (
          <A key={s.n} anim="up" d={i * 90}>
            <Tilt className="step-card" style={{ background: "#fff", border: "2px solid #efe9dc", borderRadius: "var(--radius)", padding: 30, height: "100%" }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = s.c; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "#efe9dc"; }}>
              <div className="display" style={{ fontSize: "3rem", color: s.c, lineHeight: 1 }}>{s.n}</div>
              <h3 className="display" style={{ fontSize: "1.5rem", margin: "18px 0 10px" }}>{s.t}</h3>
              <p style={{ color: "var(--ink-70)", lineHeight: 1.55, fontWeight: 500, margin: 0 }}>{s.d}</p>
            </Tilt>
          </A>
        ))}
      </div>
    </Section>
  );
}

function Caixa() {
  return (
    <Section id="caixa" eyebrow="O que será enviado?" eyebrowColor="var(--yellow)" dark title={<>Uma carta. Um cartão. <span className="rainbow-text">Um QRcode.</span></>}>
      <div className="caixa-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
        <A anim="left" style={{ position: "relative" }}>
          <div style={{ position: "absolute", inset: "-6% -4%", background: "var(--rainbow)", filter: "blur(60px)", opacity: 0.22, borderRadius: 40 }} />
          <div className="caixa-stage" data-anim="parallax" data-speed="0.06" style={{ position: "relative" }}>
            <LetterDocument name="Alexander" date="12 · 03 · 2026" />
            <div style={{ position: "absolute", right: "-4%", bottom: "-7%", width: "58%", transform: "rotate(6deg)" }}>
              <GayCardVisual name="Nome Sobrenome" memberNo="BR-024601" photo={null} floating />
            </div>
          </div>
        </A>
        <div>
          {[
            ["Carta de boas-vindas", "Uma mensagem calorosa de acolhimento da comunidade, com nome — e o espaço para mensagem personalizada."],
            ["Cartão premium com foto", "Impresso em alta qualidade, com foto, nome e QRcode."],
            ["QR do seu certificado", "Escaneou, abriu: uma página exclusiva com o seu Certificado de Membro Gay, para compartilhar com todo mundo."],
          ].map(([t, d], i) => (
            <A key={t} anim="right" d={i * 110} style={{ display: "flex", gap: 18, padding: "20px 0", borderBottom: i < 2 ? "1px solid rgba(255,255,255,0.12)" : "none" }}>
              <span className="display" style={{ fontSize: "1.3rem", color: ["var(--red)", "var(--green)", "var(--blue)"][i], flexShrink: 0 }}>0{i + 1}</span>
              <div>
                <h3 className="display" style={{ fontSize: "1.35rem", margin: "0 0 6px", color: "#fff" }}>{t}</h3>
                <p style={{ color: "rgba(255,255,255,0.66)", lineHeight: 1.55, margin: 0, fontWeight: 500 }}>{d}</p>
              </div>
            </A>
          ))}
          <A anim="up" d={340}><a className="btn btn-light" href="Comprar.html?plano=fisico" style={{ marginTop: 28 }}>Garantir o meu · R$ 29,90</a></A>
        </div>
      </div>
    </Section>
  );
}

function Presente() {
  return (
    <Section id="presente" eyebrow="Modo presente" eyebrowColor="var(--purple)" title={<>Surpreenda alguém com <span className="rainbow-text">orgulho de presente.</span></>}>
      <div className="presente-grid" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 48, alignItems: "center" }}>
        <A anim="left" style={{ order: 1 }}>
          <p style={{ fontSize: "1.15rem", color: "var(--ink-70)", lineHeight: 1.6, fontWeight: 500, marginTop: 0 }}>
            Compre o GayCard pra um amigo(a), crush ou namorado(a) e mande direto pra casa dele(a). Você escreve uma mensagem que vai impressa na carta — a surpresa chega completa.
          </p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, margin: "26px 0" }}>
            {["Enviamos direto pro endereço do presenteado", "Sua mensagem vai impressa na carta", "Frete grátis também nos presentes"].map((t) => (
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 12, fontWeight: 600 }}>
                <span style={{ width: 26, height: 26, borderRadius: "50%", background: "var(--rainbow)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3"><path d="M5 12l5 5L20 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>{t}
              </div>
            ))}
          </div>
          <a className="btn btn-rainbow" href="Comprar.html?modo=presente">Presentear agora</a>
        </A>
        <A anim="right" style={{ order: 2 }}>
          <Tilt style={{ background: "linear-gradient(135deg,#fff,#faf6ec)", border: "2px solid #efe9dc", borderRadius: "var(--radius)", padding: 34, position: "relative", overflow: "hidden" }}>
            <div style={{ position: "absolute", top: -40, right: -40, width: 160, height: 160, background: "var(--rainbow)", filter: "blur(60px)", opacity: 0.2, borderRadius: "50%" }} />
            <div className="eyebrow" style={{ color: "var(--purple)" }}>Cartão presente · prévia</div>
            <div style={{ background: "#fff", borderRadius: 16, padding: 20, marginTop: 16, border: "1px solid #eee" }}>
              <p style={{ fontStyle: "italic", color: "#3a372f", lineHeight: 1.6, margin: 0 }}>“Para a melhor Gay do mundo: seja sempre exatamente quem você é. 🏳️‍🌈”</p>
              <p className="mono" style={{ marginTop: 16, marginBottom: 0, fontSize: "0.75rem", color: "var(--ink-45)", letterSpacing: "0.1em" }}>— DE VOCÊ</p>
            </div>
            <div style={{ marginTop: 20, transform: "rotate(2deg)" }}>
              <GayCardVisual name="Nome Sobrenome" memberNo="BR-077820" floating />
            </div>
          </Tilt>
        </A>
      </div>
    </Section>
  );
}

function Comunidade() {
  const slots = [
    { id: "comm1", span: "col", ar: "16/9", src: "assets/landingpage6.png" },
    { id: "comm2", span: "", ar: "1/1", src: "assets/landingpage1.png" },
    { id: "comm3", span: "", ar: "1/1", src: "assets/landingpage2.png" },
    { id: "comm4", span: "", ar: "1/1", src: "assets/landingpage4.png" },
    { id: "comm5", span: "", ar: "1/1", src: "assets/landingpage5.png" },
    { id: "comm6", span: "col", ar: "16/9", src: "assets/landingpage3.png" },
  ];
  const posts = [
    { h: "@duduribeiro", t: "Chegou em casa numa carta linda. 🏳️‍🌈", l: "3.1k" },
    { h: "@theo.alves", t: "Dei de presente pro meu namorado nesse mês do orgulho LGBT e foi a melhor surpresa do ano.", l: "2.4k" },
    { h: "@mari.lopez", t: "O cartão é muito bonito, adorei!", l: "1.7k" },
  ];
  return (
    <Section id="comunidade" eyebrow="Comunidade" eyebrowColor="var(--green)" dark title={<>Quem recebeu, <span className="rainbow-text">amou.</span></>}>
      <div className="comm-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gridAutoRows: "1fr", gap: 14 }}>
        {slots.map((s, i) => (
          <A key={s.id} anim="scale" d={i * 70} className={s.span === "col" ? "comm-wide" : ""} style={{ gridColumn: s.span === "col" ? "span 2" : "span 1" }}>
            <div className="comm-photo" style={{ position: "relative", aspectRatio: s.ar, borderRadius: 16, overflow: "hidden", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.08)" }}
              dangerouslySetInnerHTML={{ __html: `<image-slot id="${s.id}" shape="rounded" radius="16" fit="cover" style="width:100%;height:100%" placeholder="Foto da comunidade"${s.src ? ` src="${s.src}"` : ""}></image-slot>` }} />
          </A>
        ))}
      </div>
      <div className="comm-posts" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18, marginTop: 20 }}>
        {posts.map((p, i) => (
          <A key={p.h} anim="up" d={i * 90}>
            <Tilt max={6} style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", borderRadius: 18, padding: 24, height: "100%" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                <span style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--rainbow)", display: "flex", alignItems: "center", justifyContent: "center", color: "#fff", fontWeight: 800 }}>{p.h.charAt(1).toUpperCase()}</span>
                <span className="mono" style={{ color: "rgba(255,255,255,0.6)", fontSize: "0.85rem" }}>{p.h}</span>
              </div>
              <p style={{ color: "#fff", fontSize: "1.05rem", lineHeight: 1.5, margin: 0 }}>{p.t}</p>
              <div className="mono" style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16, color: "rgba(255,255,255,0.4)", fontSize: "0.82rem" }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
                {p.l}
              </div>
            </Tilt>
          </A>
        ))}
      </div>
    </Section>
  );
}

function Precos() {
  const plans = [
    { id: "fisico", name: "Físico", price: "29,90", tag: "Mais pedido", feats: ["Tudo do plano digital", "Cartão físico premium impresso", "Carta de boas-vindas personalizada", "Frete grátis pro Brasil todo"], cta: "Quero o físico", accent: "var(--purple)", featured: true, q: "?plano=fisico" },
    { id: "digital", name: "Digital", price: "19,90", tag: "Só o certificado online", feats: ["Certificado de Membro digital", "Cartão com sua foto em alta", "Link e QR pra compartilhar", "Entrega na hora, por e-mail"], cta: "Quero o digital", accent: "var(--blue)", featured: false, q: "?plano=digital" },
  ];
  return (
    <Section id="precos" eyebrow="Preços" eyebrowColor="var(--green)" title={<>Escolha como você quer <span className="rainbow-text">o seu.</span></>}>
      <div className="precos-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, maxWidth: 820 }}>
        {plans.map((p, i) => (
          <A key={p.id} anim="up" d={i * 110}>
            <Tilt max={5} style={{ position: "relative", borderRadius: "var(--radius)", padding: 34, height: "100%",
              background: p.featured ? "var(--ink)" : "#fff", color: p.featured ? "#fff" : "var(--ink)",
              border: p.featured ? "2px solid transparent" : "2px solid #efe9dc", boxShadow: p.featured ? "0 30px 70px -30px rgba(139,20,201,0.5)" : "none", overflow: "hidden" }}>
              {p.featured && <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 6, background: "var(--rainbow)" }} />}
              <div className="eyebrow" style={{ color: p.accent }}>{p.tag}</div>
              <h3 className="display" style={{ fontSize: "1.9rem", margin: "12px 0 4px" }}>{p.name}</h3>
              <div style={{ display: "flex", alignItems: "baseline", gap: 4, margin: "8px 0 22px" }}>
                <span style={{ fontSize: "1rem", fontWeight: 700, opacity: 0.7 }}>R$</span>
                <span className="display" style={{ fontSize: "3.2rem" }}>{p.price}</span>
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "0 0 26px", display: "flex", flexDirection: "column", gap: 12 }}>
                {p.feats.map((f) => (
                  <li key={f} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontWeight: 500, fontSize: "0.95rem", color: p.featured ? "rgba(255,255,255,0.82)" : "var(--ink-70)" }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={p.accent} strokeWidth="3" style={{ flexShrink: 0, marginTop: 2 }}><path d="M5 12l5 5L20 6" strokeLinecap="round" strokeLinejoin="round"/></svg>{f}
                  </li>
                ))}
              </ul>
              <a className={p.featured ? "btn btn-rainbow" : "btn btn-ink"} href={"Comprar.html" + p.q} style={{ width: "100%", justifyContent: "center" }}>{p.cta}</a>
            </Tilt>
          </A>
        ))}
      </div>
    </Section>
  );
}

function FinalCTA() {
  return (
    <section className="section" style={{ background: "var(--rainbow)", textAlign: "center", position: "relative", overflow: "hidden" }}>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <A as="h2" anim="mask" className="display" style={{ fontSize: "clamp(2.4rem,6vw,4.8rem)", color: "#fff", margin: 0, textShadow: "0 2px 20px rgba(0,0,0,0.18)" }}>Bem-vindo(a) à comunidade.</A>
        <A anim="up" d={120} as="p" style={{ color: "rgba(255,255,255,0.92)", fontSize: "1.2rem", fontWeight: 600, maxWidth: 540, margin: "18px auto 32px" }}>
          Seu lugar está garantido. Falta só a carteirinha chegar em casa.
        </A>
        <A anim="up" d={200}><a className="btn btn-light" href="Comprar.html" style={{ fontSize: "1.05rem", padding: "1.1rem 2rem" }}>Pegar meu GayCard
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </a></A>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ background: "var(--ink)", color: "#fff", paddingTop: 60 }}>
      <div className="wrap footer-grid" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 32, paddingBottom: 44 }}>
        <div style={{ maxWidth: 320 }}>
          <div className="brand" style={{ display: "inline-flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
            <PrideFlag width={30} />
            <span className="display" style={{ fontSize: "1.4rem" }}>Gay<span className="rainbow-text brand-accent">Card</span></span>
          </div>
          <p style={{ color: "rgba(255,255,255,0.6)", lineHeight: 1.55, fontWeight: 500 }}>Feito com orgulho. Para todo mundo. O cartão de membro oficial da comunidade, entregue na sua casa.</p>
        </div>
        <div style={{ display: "flex", gap: 60, flexWrap: "wrap" }}>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.4)", marginBottom: 14 }}>Produto</div>
            {[["Como funciona", "#como"], ["Na carta", "#caixa"], ["Comunidade", "#comunidade"], ["Preços", "#precos"], ["Comprar", "Comprar.html"]].map(([l, h]) => (
              <a key={l} href={h} style={{ display: "block", color: "rgba(255,255,255,0.7)", textDecoration: "none", padding: "5px 0", fontWeight: 500, whiteSpace: "nowrap" }}>{l}</a>
            ))}
          </div>
          <div>
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.4)", marginBottom: 14 }}>Contato</div>
            <a href="Contato.html" style={{ display: "block", color: "rgba(255,255,255,0.7)", textDecoration: "none", padding: "5px 0", fontWeight: 500 }}>Fale com a gente</a>
            <a href="Privacidade.html" style={{ display: "block", color: "rgba(255,255,255,0.7)", textDecoration: "none", padding: "5px 0", fontWeight: 500 }}>Privacidade e Termos</a>
          </div>
        </div>
      </div>
      <div className="rainbow-bar" />
      <div className="wrap" style={{ padding: "20px 24px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
        <span className="mono" style={{ fontSize: "0.72rem", color: "rgba(255,255,255,0.45)" }}>© 2026 GAYCARD · FEITO COM 🏳️‍🌈</span>
      </div>
    </footer>
  );
}

function App() {
  useEffect(() => {
    if (window.Motion) { window.Motion.scan(); }
    const t1 = setTimeout(() => window.Motion && window.Motion.scan(), 200);
    const t2 = setTimeout(() => window.Motion && window.Motion.scan(), 800);
    // Safety net: guarantee the hero intro elements are visible even if the
    // runtime freezes CSS animation timelines (animation plays well before this).
    const t3 = setTimeout(() => document.documentElement.classList.add("intro-done"), 1900);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);
  return (
    <React.Fragment>
      <Nav />
      <Hero />
      <Marquee />
      <Como />
      <Caixa />
      <Presente />
      <Comunidade />
      <Precos />
      <FinalCTA />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);