/* global React */

function Dupla() {
  const rows = [
    { h: "Direção de arte",     i: "Geração de variações" },
    { h: "Estratégia de marca", i: "Velocidade de produção" },
    { h: "Curadoria final",     i: "Escala infinita" },
    { h: "Critério de gosto",   i: "Cálculo de padrões" },
    { h: "Responsabilidade",    i: "Paciência infinita" }
  ];

  return (
    <Section id="dupla" tone="cream">
      <SectionHead
        num="04 / Princípio"
        title="A Dupla. <em>Humano + IA.</em>"
        sub="Cada peça Bolder é feita a quatro mãos: duas humanas, duas digitais. É nesta intersecção deliberada que vive o trabalho."
      />

      <div className="card" style={{ padding: 0, overflow: "hidden", background: "var(--paper)" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr" }} className="dupla-grid">
          <div style={{ padding: "clamp(28px, 3vw, 48px)", borderRight: "1px solid var(--rule)" }}>
            <span className="chip"><span className="dot" />Agent 01 · Lead</span>
            <h3 className="display" style={{ fontSize: "clamp(56px, 9vw, 128px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.045em" }}>
              <em style={{ fontStyle: "italic", fontFamily: "var(--font-serif)", color: "var(--coral)", fontWeight: 300 }}>Human</em>
            </h3>
            <p style={{ marginTop: 14, fontSize: 15, color: "var(--muted)" }}>Decide. Cria. Cura. Aprova.</p>
          </div>
          <div style={{ padding: "clamp(28px, 3vw, 48px)", background: "var(--coral)" }}>
            <span className="chip" style={{ borderColor: "rgba(255,255,255,0.3)", color: "#fff" }}>
              <span className="dot" style={{ background: "#fff" }} />Agent 02 · Loop
            </span>
            <h3 className="display" style={{ fontSize: "clamp(56px, 9vw, 128px)", margin: "20px 0 0", lineHeight: 0.9, letterSpacing: "-0.045em", color: "#fff" }}>
              IA<span style={{ color: "rgba(255,255,255,0.5)" }}>_</span>
            </h3>
            <p style={{ marginTop: 14, fontSize: 15, color: "rgba(255,255,255,0.75)" }}>Executa. Itera. À velocidade da luz.</p>
          </div>

          <div style={{ gridColumn: "1 / -1", borderTop: "1px solid var(--rule)" }}>
            {rows.map((r, i) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "1fr 100px 1fr",
                borderBottom: i < rows.length - 1 ? "1px solid var(--rule)" : "none"
              }} className="dupla-row">
                <div style={{ padding: "16px 24px", borderRight: "1px solid var(--rule)", fontSize: 15, background: "#fff" }}>{r.h}</div>
                <div style={{ padding: "16px", textAlign: "center", borderRight: "1px solid rgba(255,255,255,0.25)", fontFamily: "var(--font-mono)", fontSize: 10, color: "#fff", background: "var(--coral)" }}>
                  {String(i + 1).padStart(2, "0")}_
                </div>
                <div style={{ padding: "16px 24px", fontSize: 15, background: "var(--coral)", color: "rgba(255,255,255,0.92)" }}>{r.i}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "1fr auto", gap: 24, alignItems: "center" }} className="dupla-foot">
        <p className="display" style={{ fontSize: "clamp(24px, 2.5vw, 36px)", margin: 0, letterSpacing: "-0.02em", lineHeight: 1.15 }}>
          "Cada peça Bolder é <em>feita a quatro mãos</em>. Duas humanas, duas digitais."
        </p>
        <HumanVerifiedBadge id="MANIFESTO-2026" />
      </div>

      <style>{`
        @media (max-width: 760px) {
          .dupla-grid { grid-template-columns: 1fr !important; }
          .dupla-grid > div:first-child { border-right: none !important; border-bottom: 1px solid var(--rule); }
          .dupla-row { grid-template-columns: 1fr 60px 1fr !important; }
          .dupla-foot { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </Section>
  );
}

window.Dupla = Dupla;