/* global React */

function Studio() {
  const tokens = [
    { out: "Imagem",                cost: "1",  note: "qualquer formato" },
    { out: "Vídeo curto · até 15s", cost: "5",  note: "reels, ads, loops" },
    { out: "Vídeo promo · até 30s", cost: "15", note: "ads de marca" },
    { out: "Adaptação de formato",  cost: "1",  note: "1:1 → 9:16 → 16:9" },
    { out: "Locução IA",            cost: "3",  note: "PT-PT / multi-idioma" },
    { out: "Revisão extra",         cost: "1",  note: "após as 2 incluídas" }
  ];

  return (
    <Section id="visual" tone="ink">
      <SectionHead
        num="06 / Módulo"
        tag={<BeTag name="Visual" size="lg" />}
        title="<em>100% consistente.</em><br/>Infinitas possibilidades."
        sub="Selecionamos atributos base e geramos catálogos vastos. O Blueprint garante que o estilo nunca se perde."
      />

      <div className="grid-2">
        <Reveal>
          <div className="card" style={{ background: "rgba(255,255,255,0.03)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 14 }}>
              <span className="chip"><span className="dot" />Studio · 9 variações</span>
              <PoweredByBoldy />
            </div>
            {/* Real assets: ROUPA variation grid */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
              {Array.from({ length: 9 }).map((_, i) => (
                <img
                  key={i}
                  src={(window.BOLDER_MEDIA_URL || '') + `ROUPA/var${i + 1}.png`}
                  alt={`Variação V${String(i + 1).padStart(2, "0")}`}
                  style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: 8, display: "block" }}
                  onError={e => { e.target.style.background = "#1a1a1a"; e.target.removeAttribute("src"); }}
                />
              ))}
            </div>
            <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--rule)", display: "flex", justifyContent: "space-between" }}>
              <span className="mono">BLDR-GEN-2026-013</span>
              <HumanVerifiedBadge id="HV-V01" />
            </div>
          </div>
        </Reveal>

        <Reveal delay={1}>
          <span className="mono mono-ink">Tabela de tokens · Be Visual</span>
          <div className="card" style={{ padding: 0, marginTop: 12, background: "transparent" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1.5fr 70px 1fr", padding: "12px 16px", borderBottom: "1px solid var(--rule)" }}>
              <span className="mono">Output</span>
              <span className="mono" style={{ textAlign: "right" }}>Tokens</span>
              <span className="mono" style={{ textAlign: "right" }}>Notas</span>
            </div>
            {tokens.map((r, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 70px 1fr", padding: "14px 16px", borderBottom: i < tokens.length - 1 ? "1px solid var(--rule)" : "none", alignItems: "baseline" }}>
                <span style={{ fontSize: 14 }}>{r.out}</span>
                <span className="display" style={{ fontSize: 22, textAlign: "right", color: "var(--coral)" }}>{r.cost}</span>
                <span style={{ fontSize: 12, color: "var(--muted)", textAlign: "right" }}>{r.note}</span>
              </div>
            ))}
          </div>
          <p className="mono" style={{ marginTop: 14 }}>Até 2 rondas de revisão incluídas · Acumula até 5 tokens</p>
        </Reveal>
      </div>
    </Section>
  );
}

window.Studio = Studio;