// SIGIL v2 — Cyber Futurist (full content from original)
// pt-BR, sem travessões, datas DD/MM/AAAA, títulos grandes em destaque (sem badges)

const SigilOption = () => {
  const [time, setTime] = React.useState(new Date());
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  const [top10, setTop10] = React.useState([]);
  const containerRef = React.useRef(null);

  React.useEffect(() => {
    let alive = true;
    async function load() {
      if (window.IBB && window.IBB.getTop) {
        try {
          const data = await window.IBB.getTop(10);
          if (alive) setTop10(data || []);
        } catch (e) {}
      }
    }
    load();
    const intv = setInterval(load, 30000);
    return () => { alive = false; clearInterval(intv); };
  }, []);

  React.useEffect(() => {
    const t = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  React.useEffect(() => {
    const el = containerRef.current;
    if (!el) return;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      setMouse({ x: e.clientX - r.left, y: e.clientY - r.top });
    };
    el.addEventListener("mousemove", onMove);
    return () => el.removeEventListener("mousemove", onMove);
  }, []);

  const target = new Date("2026-08-31T23:59:59-03:00").getTime();
  const distance = Math.max(0, target - time.getTime());
  const days = Math.floor(distance / 86400000);
  const hours = Math.floor(distance % 86400000 / 3600000);
  const mins = Math.floor(distance % 3600000 / 60000);
  const secs = Math.floor(distance % 60000 / 1000);
  const pad = (n) => String(n).padStart(2, "0");

  // Palette
  const BG = "#08080A",INK = "#EFEFEC",MAG = "#FF2E88",LIME = "#C7FF3E",DIM = "#121216";

  const Title = ({ children, size = 88, accent = LIME, em }) =>
  <h2 className="s-display" style={{ fontSize: `clamp(40px, ${size / 16}vw, ${size}px)`, lineHeight: 0.88, letterSpacing: "-0.05em", fontWeight: 600, marginBottom: 28 }}>
      {children}
      {em ? <span style={{ color: accent }}> {em}</span> : null}
    </h2>;


  return (
    <div ref={containerRef} style={{ background: BG, color: INK, fontFamily: '"Geist", "Inter", sans-serif', minHeight: "100%", width: "100%", position: "relative", overflow: "hidden" }}>
      <style>{`
        @keyframes s-grid { from { background-position: 0 0; } to { background-position: 80px 80px; } }
        @keyframes s-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        @keyframes s-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
        @keyframes s-rot { to { transform: rotate(360deg); } }
        @keyframes s-glitch {
          0%,100% { transform: translate(0); }
          20% { transform: translate(-2px, 1px); }
          40% { transform: translate(2px, -1px); }
          60% { transform: translate(-1px, -1px); }
          80% { transform: translate(1px, 1px); }
        }
        .s-glitch:hover { animation: s-glitch .3s steps(2) infinite; }
        .s-card { position: relative; background: ${DIM}; border: 1px solid rgba(255,255,255,.08); transition: .25s; }
        .s-card:hover { border-color: ${MAG}; transform: translateY(-2px); }
        .s-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 2px solid ${LIME}; border-left: 2px solid ${LIME}; }
        .s-card::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 2px solid ${LIME}; border-right: 2px solid ${LIME}; }
        .s-input { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.12); color: ${INK}; padding: 14px 16px; font-family: "JetBrains Mono", monospace; font-size: 13px; width: 100%; transition: .2s; }
        .s-input:focus { outline: none; border-color: ${MAG}; background: rgba(255,46,136,.05); box-shadow: 0 0 0 3px rgba(255,46,136,.1); }
        .s-mono { font-family: "JetBrains Mono", "Berkeley Mono", monospace; }
        .s-display { font-family: "Space Grotesk", "Geist", sans-serif; }
      `}</style>

      {/* Animated grid bg with parallax */}
      <div style={{
        position: "absolute", inset: 0, zIndex: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)`,
        backgroundSize: "80px 80px",
        transform: `translate(${mouse.x * 0.02}px, ${mouse.y * 0.02}px)`,
        animation: "s-grid 30s linear infinite"
      }} />

      {/* Glow following cursor */}
      <div style={{
        position: "absolute", left: mouse.x - 300, top: mouse.y - 300, width: 600, height: 600,
        background: `radial-gradient(circle, ${MAG}22 0%, transparent 70%)`,
        pointerEvents: "none", zIndex: 1, transition: "left .3s, top .3s"
      }} />

      <div style={{ position: "relative", zIndex: 2 }}>

        {/* Ticker */}
        <div style={{ overflow: "hidden", padding: "10px 0" }}>
          <div className="s-mono" style={{ display: "flex", gap: 56, whiteSpace: "nowrap", animation: "s-marquee 45s linear infinite", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>
            {Array(4).fill(null).map((_, i) =>
            <React.Fragment key={i}>
                <span style={{ color: MAG }}>◢ PRÉ-LANÇAMENTO ABERTO</span>
                <span>100 BUILDERS FUNDADORES</span>
                <span style={{ color: LIME }}>◣ ENCERRA EM 31/08/2026</span>
                <span>10 ACESSOS VITALÍCIOS</span>
                <span style={{ color: MAG }}>◢ LANÇAMENTO 13/09/2026 // DIA DO PROGRAMADOR</span>
                <span>BUILDER PLUS GRÁTIS POR 1 ANO</span>
              </React.Fragment>
            )}
          </div>
        </div>

        {/* NAV */}
        <header style={{ padding: "20px 32px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div className="s-mono" style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13, fontWeight: 600, letterSpacing: "0.05em" }}>
            <svg width="36" height="26" viewBox="0 0 36 26" style={{ display: "block", borderRadius: 2, overflow: "hidden" }} aria-label="Bandeira do Brasil">
              <rect width="36" height="26" fill="#009C3B" />
              <polygon points="18,3 33,13 18,23 3,13" fill="#FFDF00" />
              <circle cx="18" cy="13" r="5.4" fill="#002776" />
              <path d="M 12.9 12.4 Q 18 9.6 23.1 12.4" stroke="#FFFFFF" strokeWidth="0.9" fill="none" />
            </svg>
            <span>IA Builder<span style={{ color: MAG }}> </span>Brasil</span>
          </div>
          <nav className="s-mono" style={{ display: "flex", gap: 28, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(255,255,255,.6)" }}>
            <a href="#manifesto" style={{ color: "inherit" }}>Manifesto</a>
            <a href="#fundadores" style={{ color: "inherit" }}>Fundadores</a>
            <a href="#plataforma" style={{ color: "inherit" }}>Como funciona</a>
            <a href="#ranking" style={{ color: "inherit" }}>Ranking</a>
            <a href="#marketplace" style={{ color: "inherit" }}>Marketplace</a>
            <a href="#faq" style={{ color: "inherit" }}>FAQ</a>
          </nav>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <a href="#" data-cta="login" className="s-mono" style={{ color: "rgba(255,255,255,.5)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", textDecoration: "none" }}>Login</a>
            <a href="#entrar" className="s-mono" style={{ background: MAG, color: BG, padding: "12px 18px", fontSize: 11, fontWeight: 700, letterSpacing: "0.15em", textTransform: "uppercase", border: 0 }}>
              ◢ ENTRAR COMO FUNDADOR
            </a>
          </div>
        </header>

        {/* HERO */}
        <section style={{ padding: "60px 32px 80px", position: "relative" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <h1 className="s-display s-glitch" style={{ fontSize: "clamp(44px, 7vw, 112px)", lineHeight: 0.92, letterSpacing: "-0.04em", fontWeight: 600, marginBottom: 36, maxWidth: 1280 }}>
              O Brasil não precisa só usar <span style={{ color: MAG, whiteSpace: "nowrap" }}>IA</span>.<br />
              <span style={{ color: LIME }}>Precisa construir com <span style={{ color: MAG, whiteSpace: "nowrap" }}>IA</span>.</span>
            </h1>

            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60, alignItems: "end", marginBottom: 56 }}>
              <div>
                <p style={{ fontSize: 21, lineHeight: 1.55, color: "rgba(255,255,255,.78)", maxWidth: 640, marginBottom: 20 }}>
                  Nasce o <strong style={{ color: INK }}>IA Builders Brasil</strong>: a comunidade para quem cria agentes, automações, SaaS, ferramentas, prompts, workflows e produtos reais com Inteligência Artificial.
                </p>
                <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.65)", maxWidth: 640 }}>
                  Publique seu projeto, receba feedback, encontre builders, descubra stacks e construa reputação em um ecossistema feito para quem está colocando a IA para trabalhar de verdade.
                </p>
              </div>

              <div className="s-mono" style={{ borderLeft: `2px solid ${MAG}`, paddingLeft: 18, fontSize: 11, lineHeight: 1.7, color: "rgba(255,255,255,.65)", letterSpacing: "0.05em" }}>
                <div style={{ color: MAG, marginBottom: 6, letterSpacing: "0.2em", textTransform: "uppercase" }}>STATUS</div>
                <div>&gt; comunidade: <span style={{ color: LIME }}>builders de IA</span></div>
                <div>&gt; foco: agentes, automações, SaaS</div>
                <div>&gt; missão: tirar ideias da gaveta</div>
                <div>&gt; vagas: <span style={{ color: MAG }}>100/100</span></div>
                <div>&gt; vitalícios: <span style={{ color: MAG }}>10</span></div>
                <div>&gt; fundadores: <span style={{ color: LIME }}>sendo selecionados</span></div>
              </div>
            </div>

            <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 30 }}>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "20px 32px", fontWeight: 700, fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase", border: 0, display: "inline-flex", alignItems: "center", gap: 12 }}>
                ◢ Quero ser Builder Fundador <span style={{ opacity: 0.5 }}>→</span>
              </a>
              <a href="#manifesto" className="s-mono" style={{ background: "transparent", color: INK, padding: "20px 32px", fontWeight: 600, fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase", border: "1px solid rgba(255,255,255,.2)" }}>
                Entender o desafio
              </a>
              <a href="#jobs" className="s-mono" style={{ background: "transparent", color: INK, padding: "20px 32px", fontWeight: 600, fontSize: 13, letterSpacing: "0.2em", textTransform: "uppercase", border: "1px solid rgba(255,255,255,.2)" }}>
                Ver vagas, freelas e jobs
              </a>
            </div>

            <p style={{ fontSize: 14, color: "rgba(255,255,255,.55)", maxWidth: 720, marginBottom: 56, lineHeight: 1.6 }}>
              Os primeiros membros fundadores recebem o PLANO <strong style={{ color: LIME }}>Builder Plus grátis por 1 ano</strong>. Os 10 que mais contribuírem para o crescimento real da comunidade ganham <strong style={{ color: MAG }}>Builder Plus vitalício</strong> e destaque permanente na Página de Fundadores.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid rgba(255,255,255,.1)", borderBottom: "1px solid rgba(255,255,255,.1)" }}>
              {[["100", "vagas iniciais\npara fundadores", LIME], ["12m", "Builder Plus\ngrátis", INK],
              ["10", "acessos\nvitalícios", MAG],
              ["13/09", "lançamento oficial\n(2026)", LIME]].
              map(([n, l, c], i) =>
              <div key={i} style={{ padding: "32px 24px", borderRight: i < 3 ? "1px solid rgba(255,255,255,.1)" : "none" }}>
                  <div className="s-display" style={{ fontSize: 64, fontWeight: 600, lineHeight: 0.9, letterSpacing: "-0.05em", color: c }}>{n}</div>
                  <div className="s-mono" style={{ fontSize: 10, marginTop: 10, letterSpacing: "0.2em", color: "rgba(255,255,255,.5)", whiteSpace: "pre-line", lineHeight: 1.4, textTransform: "uppercase" }}>{l}</div>
                </div>
              )}
            </div>
          </div>
        </section>

        {/* MANIFESTO */}
        <section id="manifesto" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={120}>
              Chega de só consumir tendência.<br />
              <span style={{ color: LIME }}>É hora de construir produto.</span>
            </Title>
            <p style={{ fontSize: 19, lineHeight: 1.6, maxWidth: 800, color: "rgba(255,255,255,.7)", marginBottom: 64 }}>
              A nova economia da IA não será dominada apenas por quem sabe fazer prompt bonito. Ela será liderada por quem transforma <em style={{ color: LIME, fontStyle: "normal" }}>prompt em sistema</em>, sistema em produto, produto em solução e solução em negócio.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "rgba(255,255,255,.08)", padding: 1 }}>
              {[
              ["Agentes de IA", "Compartilhe agentes, arquiteturas, fluxos multiagentes, integrações, erros reais e aprendizados práticos."],
              ["Automações", "Mostre workflows com n8n, Make, APIs, WhatsApp, CRM, atendimento, vendas, conteúdo e operação."],
              ["SaaS com IA", "Publique MVPs, microSaaS, ferramentas, dashboards, apps e produtos com IA aplicada ao mundo real."],
              ["Prompt Engineering", "Construa e compartilhe prompts, frameworks, bibliotecas, testes, padrões e técnicas profissionais."],
              ["No-code, Low-code, Vibe-code", "Discuta ferramentas, stacks, builders visuais, IA coder, deploy rápido e criação sem burocracia."],
              ["RAG, Fine-tuning, OSS", "Aprenda, teste e compare embeddings, bases de conhecimento, modelos, frameworks e repositórios úteis."]].
              map(([t, d], i) =>
              <div key={i} className="s-card" style={{ padding: 32 }}>
                  <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: MAG, marginBottom: 18 }}>{`0${i + 1}`}</div>
                  <h3 className="s-display" style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 12 }}>{t}</h3>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.6)" }}>{d}</p>
                </div>
              )}
            </div>

            <div style={{ marginTop: 40, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Você está construindo algo com IA?</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Entre como fundador, publique sua ideia e ganhe visibilidade antes da abertura oficial.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Entrar na lista agora</a>
            </div>
          </div>
        </section>

        {/* AI POWER / FUTURO */}
        <section style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)", background: `radial-gradient(ellipse at top right, ${MAG}11, transparent 60%)` }}>
          <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
            <div>
              <Title size={88}>
                O futuro chegou para quem sabe<br />
                <span style={{ color: MAG }}>construir, automatizar e vender com IA.</span>
              </Title>
              <p style={{ fontSize: 18, lineHeight: 1.65, color: "rgba(255,255,255,.7)", marginBottom: 32 }}>
                A próxima onda não será formada apenas por consumidores de ferramentas. Será liderada por builders capazes de transformar IA em agentes, automações, produtos, processos e receita.
              </p>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
                <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Quero entrar nessa onda</a>
                <a href="#marketplace" className="s-mono" style={{ background: "transparent", color: INK, padding: "16px 24px", fontWeight: 600, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", border: "1px solid rgba(255,255,255,.2)" }}>Ver como vender com IA</a>
              </div>
            </div>

            <div className="s-card" style={{ minHeight: 360, position: "relative", overflow: "hidden" }}>
              <svg width="100%" height="360" style={{ display: "block" }}>
                <defs>
                  <linearGradient id="ll" x1="0" x2="1">
                    <stop offset="0" stopColor={LIME} stopOpacity="0" />
                    <stop offset="0.5" stopColor={LIME} stopOpacity="0.7" />
                    <stop offset="1" stopColor={MAG} stopOpacity="0" />
                  </linearGradient>
                </defs>
                {[[80, 100, 220, 200], [220, 200, 380, 110], [380, 110, 480, 250], [120, 270, 320, 290], [320, 290, 480, 250], [220, 200, 320, 290]].map(([x1, y1, x2, y2], i) =>
                <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="url(#ll)" strokeWidth="1" />
                )}
                {[[80, 100, LIME], [220, 200, MAG], [380, 110, LIME], [480, 250, MAG], [120, 270, LIME], [320, 290, MAG]].map(([x, y, c], i) =>
                <g key={i}>
                    <circle cx={x} cy={y} r="14" fill={c} opacity="0.15"><animate attributeName="r" values="10;18;10" dur="3s" repeatCount="indefinite" begin={`${i * 0.4}s`} /></circle>
                    <circle cx={x} cy={y} r="5" fill={c} />
                  </g>
                )}
              </svg>
              <div className="s-mono" style={{ position: "absolute", left: 24, bottom: 80, padding: "10px 14px", background: "rgba(8,8,10,.85)", border: "1px solid rgba(255,255,255,.12)", fontSize: 11, letterSpacing: "0.1em" }}>Agentes conectando tarefas</div>
              <div className="s-mono" style={{ position: "absolute", right: 24, top: 24, padding: "10px 14px", background: "rgba(8,8,10,.85)", border: "1px solid rgba(255,255,255,.12)", fontSize: 11, letterSpacing: "0.1em" }}>Automações virando operação</div>
              <div className="s-mono" style={{ position: "absolute", right: 60, bottom: 30, padding: "10px 14px", background: "rgba(8,8,10,.85)", border: "1px solid rgba(255,255,255,.12)", fontSize: 11, letterSpacing: "0.1em" }}>Builders virando referência</div>
            </div>
          </div>
        </section>

        {/* FUNDADORES */}
        <section id="fundadores" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)", background: `radial-gradient(ellipse at top, ${MAG}11, transparent 60%)` }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={120}>
              100 Builders Fundadores.<br />
              <span style={{ color: MAG }}>10 vitalícios.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.6, maxWidth: 800, color: "rgba(255,255,255,.65)", marginBottom: 56 }}>
              Estamos selecionando os primeiros membros que vão ajudar a dar vida à comunidade antes da abertura oficial.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 32 }}>
              <div className="s-card" style={{ padding: 40 }}>
                <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: LIME, marginBottom: 22, textTransform: "uppercase" }}>● Campanha inicial</div>
                <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                  <div className="s-display" style={{ fontSize: 120, fontWeight: 600, lineHeight: 0.85, letterSpacing: "-0.06em", color: INK }}>R$0</div>
                  <div className="s-mono" style={{ fontSize: 13, color: "rgba(255,255,255,.6)" }}>por 12 meses</div>
                </div>
                <p style={{ fontSize: 13, color: "rgba(255,255,255,.55)", marginTop: 8, marginBottom: 24 }}>Acesso gratuito ao plano Builder Plus para todos os fundadores aprovados.</p>
                <div style={{ height: 1, background: "rgba(255,255,255,.1)", margin: "0 0 24px" }} />
                <ul style={{ listStyle: "none", padding: 0, display: "grid", gap: 14 }}>
                  {[
                  "Selo público de Builder Fundador",
                  "Builder Plus grátis por 1 ano",
                  "Prioridade para destacar projetos na newsletter",
                  "Acesso antecipado à biblioteca de prompts, templates e workflows",
                  "Participação nas primeiras decisões da comunidade",
                  "Página pública para mostrar projetos, links e especialidades"].
                  map((f, i) =>
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", fontSize: 14, color: "rgba(255,255,255,.85)" }}>
                      <span style={{ color: LIME, fontWeight: 700, marginTop: 2 }}>✓</span>
                      <span>{f}</span>
                    </li>
                  )}
                </ul>
              </div>

              <div className="s-card" style={{ padding: 40 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                  <div>
                    <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: MAG, marginBottom: 10, textTransform: "uppercase" }}>● Top 10 Founders</div>
                    <h3 className="s-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>Builder Plus<br />vitalício.</h3>
                  </div>
                  <div style={{ width: 80, height: 80, borderRadius: "50%", border: `1px solid ${MAG}`, display: "grid", placeItems: "center", animation: "s-rot 20s linear infinite" }}>
                    <div className="s-mono" style={{ fontSize: 9, letterSpacing: "0.15em", color: MAG, textAlign: "center", lineHeight: 1.3 }}>VITA<br />LÍCIO</div>
                  </div>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(255,255,255,.65)", marginBottom: 18 }}>
                  Os 10 fundadores que mais trouxerem usuários ativos, publicarem projetos e contribuírem com feedback útil receberão Builder Plus vitalício e destaque permanente na Página de Fundadores.
                </p>

                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 22, padding: "16px 0", borderTop: "1px solid rgba(255,255,255,.08)", borderBottom: "1px solid rgba(255,255,255,.08)" }}>
                  {[
                  ["Início", "Indicação dos 100 fundadores", LIME],
                  ["Encerra", "31/12/2026", INK],
                  ["Resultado", "02/01/2027", MAG]].
                  map(([k, v, c], i) =>
                  <div key={i}>
                      <div className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.45)", marginBottom: 6, textTransform: "uppercase" }}>{k}</div>
                      <div className="s-display" style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em", color: c, lineHeight: 1.25 }}>{v}</div>
                    </div>
                  )}
                </div>
                <div style={{ display: "grid", gap: 10 }}>
                  {[
                  ["10", "Indicação de usuário ativo (cadastra, completa perfil e publica)"],
                  ["15", "Projeto cadastrado com qualidade na vitrine"],
                  ["5", "Fundador comenta ajudando outro projeto"],
                  ["30", "Post entra no Top da Semana"],
                  ["50", "Projeto entra no Destaque da Semana"]].
                  map(([v, k], i) =>
                  <div key={i} className="s-mono" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 16px", background: "rgba(255,255,255,.02)", border: "1px solid rgba(255,255,255,.06)", fontSize: 12, letterSpacing: "0.03em", gap: 16 }}>
                      <span style={{ color: "rgba(255,255,255,.7)", flex: 1, lineHeight: 1.4 }}>{k}</span>
                      <span style={{ color: LIME, fontWeight: 700, whiteSpace: "nowrap" }}>+{v} pts</span>
                    </div>
                  )}
                </div>
              </div>
            </div>

            <p style={{ fontSize: 13, color: "rgba(255,255,255,.5)", marginTop: 28, lineHeight: 1.6, maxWidth: 900 }}>
              O Top 10 recebe Builder Plus vitalício e destaque permanente na Página de Fundadores. O benefício é pessoal, intransferível e válido enquanto a plataforma estiver ativa e o usuário respeitar os termos da comunidade.
            </p>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Quer disputar o Top 10?</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Entre cedo, convide builders reais, publique projetos e ajude a comunidade a ganhar tração.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Participar do desafio</a>
            </div>
          </div>
        </section>

        {/* PLATAFORMA */}
        <section id="plataforma" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={104}>
              Não será só uma comunidade.<br />
              <span style={{ color: LIME }}>Será um ecossistema de construção com IA.</span>
            </Title>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "rgba(255,255,255,.08)", padding: 1, marginTop: 48 }}>
              {[
              ["Conteúdo fundador", "Guias, análises, tutoriais, estudos de caso e publicações estratégicas para iniciar o ecossistema com valor real."],
              ["Vitrine de projetos", "Toda semana: 10 projetos de IA feitos por brasileiros, com destaque para demos, GitHub, stacks e pedidos de feedback."],
              ["Newsletter semanal", "Curadoria dos melhores posts, projetos, prompts, ferramentas, oportunidades e builders em destaque."],
              ["Comunidade WhatsApp e Discord", "Grupo fechado para conversas rápidas, networking, feedbacks, desafios, bastidores e movimentação inicial."],
              ["Desafios semanais", "Crie um agente em 7 dias, publique um microSaaS, automatize uma tarefa real e outros desafios práticos."],
              ["Parcerias com creators", "Conexões com criadores, especialistas, comunidades e builders que já produzem conteúdo sobre IA aplicada."],
              ["Lançamentos coordenados", "Divulgação em Product Hunt, LinkedIn, TabNews, Reddit, grupos, comunidades, newsletters e canais parceiros."],
              ["Biblioteca prática", "Prompts, templates, workflows, checklists, boilerplates, stacks e guias para acelerar projetos reais."],
              ["Oportunidades", "Vagas, freelas, parcerias, beta testers, chamadas para projetos, collabs e possibilidades de negócio."]].
              map(([t, d], i) =>
              <div key={i} className="s-card" style={{ padding: 28 }}>
                  <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: LIME, marginBottom: 16 }}>{`0${i + 1}`}</div>
                  <h3 className="s-display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 10 }}>{t}</h3>
                  <p style={{ fontSize: 13, lineHeight: 1.55, color: "rgba(255,255,255,.55)" }}>{d}</p>
                </div>
              )}
            </div>

            {/* JOBS spotlight */}
            <div id="jobs" className="s-card" style={{ marginTop: 32, padding: 40, display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 32, borderColor: `${LIME}55` }}>
              <div>
                <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: LIME, marginBottom: 16, textTransform: "uppercase" }}>● Em destaque</div>
                <h3 className="s-display" style={{ fontSize: 36, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1 }}>Vagas, freelas e jobs com IA em destaque.</h3>
              </div>
              <div>
                <p style={{ fontSize: 15, lineHeight: 1.65, color: "rgba(255,255,255,.7)", marginBottom: 22 }}>
                  Uma área dedicada para conectar quem sabe construir com IA a empresas, founders, agências e projetos que precisam de automações, agentes, microSaaS, integrações, prompt engineering, RAG, chatbots, dashboards e soluções reais.
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 22 }}>
                  {["Freelas de automação", "Jobs com agentes", "Projetos SaaS", "Beta testers", "Consultorias", "Parcerias"].map((p, i) =>
                  <span key={i} className="s-mono" style={{ padding: "8px 12px", border: "1px solid rgba(255,255,255,.15)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>{p}</span>
                  )}
                </div>
                <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                  <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "14px 22px", fontWeight: 700, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase" }}>Quero acessar oportunidades</a>
                  <a href="#marketplace" className="s-mono" style={{ background: "transparent", color: INK, padding: "14px 22px", fontWeight: 600, fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", border: "1px solid rgba(255,255,255,.2)" }}>Ver marketplace</a>
                </div>
              </div>
            </div>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Quer publicar seu projeto e ainda encontrar oportunidades?</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>A comunidade vai nascer com vitrine, vagas, freelas, jobs, ranking e marketplace.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Entrar como fundador</a>
            </div>
          </div>
        </section>

        {/* REPUTAÇÃO */}
        <section id="reputacao" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={104}>
              Quem contribui aparece.<br />
              <span style={{ color: MAG }}>Quem ajuda cresce.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 800, color: "rgba(255,255,255,.65)", marginBottom: 48 }}>
              O IA Builders Brasil terá um sistema de reputação pensado para valorizar contribuição útil, construção pública e colaboração real.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "rgba(255,255,255,.08)", padding: 1 }}>
              {[
              ["Builder Points", "Pontos por publicar, comentar, ajudar, receber votos, indicar usuários ativos e cadastrar projetos relevantes."],
              ["Badges", "Selos como Construtor de Agentes, Mestre n8n, SaaS Builder, Prompt Engineer e outros."],
              ["Projeto Verificado", "Projetos com demo, GitHub, prova funcional ou evidência clara de execução podem receber verificação."],
              ["Beta Tester Badge", "Usuários que testam projetos da comunidade e entregam feedback útil recebem reconhecimento próprio."],
              ["Ranking semanal", "Autores, projetos, comentários, prompts e contribuições mais úteis aparecem em rankings recorrentes."],
              ["Hall da Fama", "Projetos que nasceram na comunidade e viraram produto, negócio, case ou oportunidade ficam registrados."]].
              map(([t, d], i) =>
              <div key={i} className="s-card" style={{ padding: 28, display: "flex", gap: 18 }}>
                  <div className="s-mono" style={{ fontSize: 28, fontWeight: 700, color: i % 2 === 0 ? LIME : MAG, lineHeight: 1, letterSpacing: "-0.02em" }}>0{i + 1}</div>
                  <div>
                    <h3 className="s-display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 8 }}>{t}</h3>
                    <p style={{ fontSize: 13, lineHeight: 1.55, color: "rgba(255,255,255,.6)" }}>{d}</p>
                  </div>
                </div>
              )}
            </div>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Construa reputação antes da multidão chegar.</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Os primeiros membros tendem a ocupar os rankings, os badges e os destaques iniciais.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Quero meu selo fundador</a>
            </div>
          </div>
        </section>

        {/* CATEGORIAS */}
        <section id="categorias" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={88}>
              Um mapa claro<br />
              <span style={{ color: LIME }}>para todo tipo de builder.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 800, color: "rgba(255,255,255,.65)", marginBottom: 48 }}>
              A comunidade será organizada para separar projeto, dúvida, guia, ferramenta, oportunidade e construção prática.
            </p>

            <div className="s-card" style={{ overflow: "hidden" }}>
              <div className="s-mono" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", padding: "16px 24px", background: "rgba(255,255,255,.04)", borderBottom: "1px solid rgba(255,255,255,.08)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: LIME }}>
                <div>Categoria</div>
                <div>Objetivo</div>
              </div>
              {[
              ["Projetos", "Membros mostram o que estão construindo."],
              ["Peça Feedback", "Landing, ideia, código, UX, automação, monetização."],
              ["Agentes de IA", "CrewAI, AutoGen, LangGraph, OpenAI Agents, n8n agents etc."],
              ["Automações", "n8n, Make, Zapier, APIs, WhatsApp, CRM, vendas."],
              ["SaaS com IA", "MVPs, produto, deploy, pagamentos, arquitetura."],
              ["Vibe Coding", "Claude Code, Codex, Cursor, Cline, Windsurf, Lovable, Bolt."],
              ["Prompt Engineering", "Prompts, frameworks, testes, templates."],
              ["RAG e Fine-tuning", "Bases de conhecimento, embeddings, modelos especializados."],
              ["Open Source", "Repos úteis, ferramentas e projetos abertos."],
              ["Monetização", "Como vender automações, consultorias, templates e SaaS."],
              ["Oportunidades", "Vagas, freelas, parcerias e beta testers."]].
              map(([cat, obj], i) =>
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 2fr", padding: "16px 24px", borderBottom: i < 10 ? "1px solid rgba(255,255,255,.06)" : "none", fontSize: 14 }}>
                  <div style={{ color: INK, fontWeight: 600 }}>{cat}</div>
                  <div style={{ color: "rgba(255,255,255,.65)" }}>{obj}</div>
                </div>
              )}
            </div>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Tem projeto, dúvida, prompt, stack ou automação?</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Existe uma categoria pronta para você publicar, pedir feedback e encontrar gente para construir junto.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Publicar como fundador</a>
            </div>
          </div>
        </section>

        {/* MARKETPLACE */}
        <section id="marketplace" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)", background: `radial-gradient(ellipse at bottom, ${LIME}08, transparent 60%)` }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={120}>
              Pare de ser invisível.<br />
              <span style={{ color: MAG }}>Transforme suas automações e agentes em dinheiro real.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 920, color: "rgba(255,255,255,.7)", marginBottom: 24 }}>
              Imagine deixar de ser apenas mais um perfil perdido na internet e começar a aparecer para quem precisa comprar o que você sabe construir: <span style={{ color: LIME }}>clínicas, lojas, pet shops, escritórios, imobiliárias, infoprodutores, agências, consultórios, escolas e pequenos negócios</span> que ainda não sabem implementar IA sozinhos.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 920, color: "rgba(255,255,255,.7)", marginBottom: 56 }}>
              O <strong style={{ color: INK }}>Marketplace IA Builders</strong> nasce para tirar builders do anonimato e criar uma ponte direta entre quem cria soluções com IA e quem precisa pagar por <span style={{ color: MAG }}>automações, agentes, chatbots, workflows, prompts, integrações, consultorias e microSaaS</span> prontos para resolver problemas reais.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
              {[
              ["Prompts premium", "Venda prompts profissionais para atendimento, vendas, marketing, educação, jurídico, saúde, clínicas, lojas e operações comerciais."],
              ["Workflows n8n e Make", "Transforme fluxos de WhatsApp, CRM, agenda, cobrança, leads, pós-venda e conteúdo em produtos vendáveis para negócios locais."],
              ["Agentes e templates", "Crie agentes de IA para recepção, suporte, vendas, qualificação de leads, triagem, relatórios e atendimento especializado."],
              ["Serviços e reviews", "Ofereça implementação, auditoria, melhoria de landing, validação de ideia, setup de automação e consultoria para negócios."],
              ["Freelas e jobs", "Receba demandas de quem quer contratar alguém para criar automações, agentes, chatbots, integrações e sistemas com IA."],
              ["Destaques pagos", "Tenha vitrine para seus produtos, templates, agentes, cursos, APIs e serviços sem depender apenas de algoritmo ou indicação."]].
              map(([t, d], i) =>
              <div key={i} className="s-card" style={{ padding: 28 }}>
                  <div className="s-mono" style={{ fontSize: 22, color: LIME, marginBottom: 12, letterSpacing: "-0.02em", fontWeight: 700 }}>R$</div>
                  <h3 className="s-display" style={{ fontSize: 20, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 10 }}>{t}</h3>
                  <p style={{ fontSize: 13, lineHeight: 1.55, color: "rgba(255,255,255,.6)" }}>{d}</p>
                </div>
              )}
            </div>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${MAG}33`, background: `linear-gradient(135deg, ${MAG}11, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Você pode estar sentado em cima de uma solução que alguém pagaria para usar.</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Entre cedo, saia do anonimato e ajude a criar o marketplace onde builders vendem automações, agentes e serviços de IA para o mercado real.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Entrar antes do lançamento</a>
            </div>
          </div>
        </section>

        {/* TOP 10 PÚBLICO */}
        <section id="ranking" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)", background: `radial-gradient(ellipse at center, ${LIME}08, transparent 60%)` }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={104}>
              Ranking ao vivo.<br />
              <span style={{ color: LIME }}>Os 10 que estão construindo a comunidade.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,.65)", maxWidth: 720, marginBottom: 48 }}>
              Pontuação atualizada em tempo real. Os 100 com maior pontuação até 12/09/2026 viram fundadores. Os 10 com mais pontos ganham Builder Plus vitalício.
            </p>

            <div className="s-card" style={{ overflow: "hidden" }}>
              <div className="s-mono" style={{ display: "grid", gridTemplateColumns: "80px 1fr 140px 140px", padding: "18px 28px", background: "rgba(255,255,255,.04)", borderBottom: "1px solid rgba(255,255,255,.08)", fontSize: 10, letterSpacing: "0.25em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>
                <div>Pos</div>
                <div>Builder</div>
                <div style={{ textAlign: "right" }}>Indicados</div>
                <div style={{ textAlign: "right" }}>Pontos</div>
              </div>
              {top10.length === 0 ? (
                <div style={{ padding: "60px 28px", textAlign: "center", color: "rgba(255,255,255,.4)", fontSize: 14 }} className="s-mono">
                  Ainda sem builders no ranking. Seja o primeiro.
                </div>
              ) : top10.map((r, i) => {
                const posColor = i === 0 ? LIME : i === 1 ? MAG : i === 2 ? INK : "rgba(255,255,255,.5)";
                return (
                  <div key={r.ref_code} style={{ display: "grid", gridTemplateColumns: "80px 1fr 140px 140px", padding: "20px 28px", borderBottom: i < top10.length - 1 ? "1px solid rgba(255,255,255,.06)" : "none", alignItems: "center" }}>
                    <div className="s-mono" style={{ fontSize: 18, fontWeight: 600, color: posColor }}>{String(r.posicao).padStart(2, "0")}</div>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 500 }}>{r.nome || "—"}{r.is_founder && <span className="s-mono" style={{ marginLeft: 10, fontSize: 9, letterSpacing: "0.2em", padding: "3px 7px", background: MAG, color: BG, textTransform: "uppercase" }}>Fundador</span>}</div>
                      <div className="s-mono" style={{ fontSize: 10, color: "rgba(255,255,255,.4)", marginTop: 4, letterSpacing: "0.15em" }}>{r.ref_code}</div>
                    </div>
                    <div className="s-mono" style={{ fontSize: 14, textAlign: "right", color: "rgba(255,255,255,.7)" }}>{r.indicados}</div>
                    <div className="s-mono" style={{ fontSize: 16, textAlign: "right", color: LIME, fontWeight: 600 }}>{r.pontos}</div>
                  </div>
                );
              })}
            </div>

            <div style={{ marginTop: 32, padding: "24px 28px", border: `1px solid ${LIME}33`, background: `linear-gradient(135deg, ${LIME}08, transparent)`, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
              <div>
                <div className="s-display" style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em", marginBottom: 6 }}>Quer aparecer no ranking?</div>
                <div style={{ fontSize: 14, color: "rgba(255,255,255,.65)" }}>Crie sua conta abaixo, copie seu link de indicação e comece a pontuar.</div>
              </div>
              <a href="#entrar" className="s-mono" style={{ background: LIME, color: BG, padding: "16px 24px", fontWeight: 700, fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase" }}>Entrar para o ranking</a>
            </div>
          </div>
        </section>

        {/* COUNTDOWN + FORM */}
        <section id="entrar" style={{ padding: "100px 32px", borderTop: `1px solid ${MAG}33`, position: "relative" }}>
          <div style={{ maxWidth: 1280, margin: "0 auto" }}>
            <Title size={104}>
              O futuro da IA no Brasil será construído<br />
              <span style={{ color: MAG }}>por quem aparece primeiro.</span>
            </Title>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 920, color: "rgba(255,255,255,.7)", marginBottom: 16 }}>
              Não estamos abrindo apenas uma lista de espera. Estamos formando o primeiro grupo de builders que vão ocupar a vitrine inicial da comunidade.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.65, maxWidth: 920, color: "rgba(255,255,255,.7)", marginBottom: 56 }}>
              Entre agora para concorrer a uma das vagas de Builder Fundador e receber as próximas instruções antes do lançamento oficial.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }}>
              <div>
                <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(255,255,255,.5)", marginBottom: 18, textTransform: "uppercase" }}>Inscrições encerram em</div>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 10, marginBottom: 28 }}>
                  {[[days, "DIAS"], [hours, "HORAS"], [mins, "MIN"], [secs, "SEG"]].map(([n, l], i) =>
                  <div key={i} className="s-card" style={{ padding: "28px 12px", textAlign: "center" }}>
                      <div className="s-display" style={{ fontSize: 56, fontWeight: 600, lineHeight: 0.9, letterSpacing: "-0.05em", color: i % 2 === 0 ? LIME : INK, fontVariantNumeric: "tabular-nums" }}>{pad(n)}</div>
                      <div className="s-mono" style={{ fontSize: 10, marginTop: 6, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)" }}>{l}</div>
                    </div>
                  )}
                </div>

                <div className="s-card" style={{ padding: 24, marginBottom: 16 }}>
                  <div className="s-mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: "rgba(255,255,255,.5)", marginBottom: 8, textTransform: "uppercase" }}>Encerramento das inscrições</div>
                  <div className="s-display" style={{ fontSize: 32, fontWeight: 600, letterSpacing: "-0.02em" }}>31/08/2026<span style={{ color: "rgba(255,255,255,.3)" }}> · 23:59</span></div>
                </div>

                <div className="s-card" style={{ padding: 24, background: `linear-gradient(135deg, ${MAG}22, transparent)`, borderColor: MAG }}>
                  <div className="s-mono" style={{ fontSize: 10, letterSpacing: "0.2em", color: LIME, marginBottom: 8, textTransform: "uppercase" }}>◢ Lançamento oficial</div>
                  <div className="s-display" style={{ fontSize: 40, fontWeight: 600, letterSpacing: "-0.03em", marginBottom: 4 }}>13/09/2026</div>
                  <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.1em", color: "rgba(255,255,255,.7)", textTransform: "uppercase" }}>Dia do Programador</div>
                </div>
              </div>

              <form onSubmit={async (e) => {
                e.preventDefault();
                const btn = e.target.querySelector('button[type="submit"]');
                const fd = new FormData(e.target);
                const data = Object.fromEntries(fd.entries());
                if (!window.IBB) {
                  alert("Sistema de cadastro não carregou. Recarregue a página.");
                  return;
                }
                btn.disabled = true;
                const old = btn.textContent;
                btn.textContent = "Processando...";
                try {
                  const { data: out, error } = await window.IBB.signUp({
                    email: data.email,
                    password: data.password,
                    nome: data.name,
                    whatsapp: data.whatsapp,
                    profile: data.profile,
                    interest: data.interest,
                    project: data.project,
                  });
                  if (error) throw error;
                  // guarda dados extras no localStorage pra serem migrados depois
                  const extra = JSON.parse(localStorage.getItem("iabuilders_founder_extra") || "[]");
                  extra.push({ email: data.email, whatsapp: data.whatsapp, profile: data.profile, interest: data.interest, project: data.project, createdAt: new Date().toISOString() });
                  localStorage.setItem("iabuilders_founder_extra", JSON.stringify(extra));
                  if (out?.session) {
                    window.location.href = "/painel.html";
                  } else {
                    alert("Cadastro feito! Verifique seu email para confirmar e cair direto no painel.");
                    btn.textContent = "Verifique seu email";
                  }
                } catch (err) {
                  const msg = (err && err.message) || "Erro ao cadastrar.";
                  const dict = {
                    "User already registered": "Esse email já está cadastrado. Faça login.",
                    "Password should be at least 6 characters": "A senha precisa ter pelo menos 6 caracteres.",
                  };
                  alert(dict[msg] || msg);
                  btn.disabled = false;
                  btn.textContent = old;
                }
              }}
              className="s-card" style={{ padding: 36 }}>
                <div className="s-mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: MAG, marginBottom: 22, textTransform: "uppercase" }}>◢ Inscrição de Builder Fundador</div>
                <div style={{ display: "grid", gap: 12 }}>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>Nome</label>
                    <input className="s-input" name="name" type="text" required placeholder="Seu nome" />
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>E-mail</label>
                    <input className="s-input" name="email" type="email" required placeholder="voce@email.com" />
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>Senha (mín. 6 caracteres)</label>
                    <input className="s-input" name="password" type="password" minLength={6} required placeholder="••••••••" autoComplete="new-password" />
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>WhatsApp</label>
                    <input className="s-input" name="whatsapp" type="tel" placeholder="(00) 00000-0000" />
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>Seu perfil</label>
                    <select className="s-input" name="profile" required defaultValue="">
                      <option value="">Selecione</option>
                      <option>Dev / Programador</option>
                      <option>Founder / Empreendedor</option>
                      <option>No-code / Low-code Builder</option>
                      <option>Especialista em automação</option>
                      <option>Prompt Engineer</option>
                      <option>Consultor de IA</option>
                      <option>Estudante / Iniciante</option>
                      <option>Outro</option>
                    </select>
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>O que você mais quer construir?</label>
                    <select className="s-input" name="interest" required defaultValue="">
                      <option value="">Selecione</option>
                      <option>Agentes de IA</option>
                      <option>Automações com IA</option>
                      <option>SaaS ou microSaaS com IA</option>
                      <option>Ferramentas no-code/low-code</option>
                      <option>Prompts e engenharia de prompt</option>
                      <option>RAG, fine-tuning e bases de conhecimento</option>
                      <option>Conteúdo, educação e comunidade</option>
                    </select>
                  </div>
                  <div>
                    <label className="s-mono" style={{ fontSize: 9, letterSpacing: "0.25em", color: "rgba(255,255,255,.5)", display: "block", marginBottom: 6, textTransform: "uppercase" }}>Você já tem projeto, ideia ou área de atuação?</label>
                    <textarea className="s-input" name="project" rows="3" placeholder="Conte em poucas linhas o que você está criando, estudando ou quer publicar na comunidade." style={{ resize: "vertical", fontFamily: '"JetBrains Mono", monospace' }}></textarea>
                  </div>
                </div>
                <p className="s-mono" style={{ fontSize: 10, lineHeight: 1.6, color: "rgba(255,255,255,.4)", marginTop: 18, letterSpacing: "0.05em" }}>
                  Ao enviar, você demonstra interesse em participar do grupo inicial de Builders Fundadores. Depois você poderá receber um link de convite, regras do programa e orientações para publicar seu primeiro projeto.
                </p>
                <button type="submit" className="s-mono" style={{ marginTop: 18, width: "100%", background: LIME, color: BG, padding: 18, fontWeight: 700, fontSize: 12, letterSpacing: "0.25em", border: 0, textTransform: "uppercase", cursor: "pointer" }}>
                  ◢ Quero entrar como Builder Fundador
                </button>
                <div className="s-mono" style={{ textAlign: "center", marginTop: 14, fontSize: 11, letterSpacing: "0.15em", textTransform: "uppercase", color: "rgba(255,255,255,.5)" }}>
                  Já tem conta? <a href="#" data-cta="login" style={{ color: LIME, textDecoration: "none" }}>Entrar</a>
                </div>
              </form>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section id="faq" style={{ padding: "100px 32px", borderTop: "1px solid rgba(255,255,255,.08)" }}>
          <div style={{ maxWidth: 900, margin: "0 auto" }}>
            <Title size={88}>
              Perguntas <span style={{ color: LIME }}>rápidas.</span>
            </Title>

            <div style={{ display: "grid", gap: 1, background: "rgba(255,255,255,.08)", padding: 1, marginTop: 32 }}>
              {[
              ["O IA Builders Brasil é uma comunidade, um portal ou uma plataforma?", "É os três, mas começa como comunidade. O objetivo é reunir conteúdo, projetos, dúvidas, guias, prompts, ferramentas e pessoas construindo soluções reais com IA."],
              ["Preciso ser programador avançado para participar?", "Não. A comunidade é para devs, founders, no-code builders, consultores, estudantes, especialistas em automação e pessoas que querem transformar IA em produto, processo ou negócio."],
              ["O que é o Builder Plus?", "Será o plano com recursos extras, como destaque de perfil, mais projetos cadastrados, biblioteca premium de prompts, templates, workflows, desafios e benefícios de visibilidade."],
              ["Como funcionará o Builder Plus vitalício?", "Os 10 fundadores com mais contribuição real no lançamento recebem acesso vitalício ao Builder Plus enquanto a plataforma estiver ativa e o usuário respeitar os termos da comunidade."],
              ["Indicar várias pessoas é suficiente para ganhar?", "Não. O ranking prioriza qualidade. Usuários indicados precisam realizar ações úteis, como completar perfil, publicar, comentar ou cadastrar projeto. A comunidade não recompensa cadastro vazio."]].
              map(([q, a], i) =>
              <details key={i} className="s-card" style={{ padding: "20px 26px" }} open={i === 0}>
                  <summary style={{ cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", listStyle: "none", gap: 16 }}>
                    <span className="s-display" style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em" }}>{q}</span>
                    <span className="s-mono" style={{ color: MAG, fontSize: 12 }}>[+]</span>
                  </summary>
                  <p style={{ marginTop: 14, lineHeight: 1.65, fontSize: 14, color: "rgba(255,255,255,.65)" }}>{a}</p>
                </details>
              )}
            </div>
          </div>
        </section>

        <footer style={{ padding: "32px", borderTop: "1px solid rgba(255,255,255,.08)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <span className="s-mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "rgba(255,255,255,.5)" }}>© {time.getFullYear()} IA Builders Brasil. Todos os direitos reservados.</span>
          <span className="s-mono" style={{ fontSize: 11, letterSpacing: "0.15em", color: "rgba(255,255,255,.5)" }}>Agentes · Automações · SaaS · No-code · Low-code · Vibe-code</span>
        </footer>
      </div>
    </div>);

};

window.SigilOption = SigilOption;