/* global React */

function Compare() {
  const cols = [
    { n: "DIY · Midjourney", note: "tu sozinho" },
    { n: "Produtora tradicional", note: "preço enterprise" },
    { n: "Bolder", note: "human-in-the-loop", win: true }
  ];
  const rows = [
    { k: "Consistência de marca",    v: ["✗", "✓", "✓"] },
    { k: "Velocidade",                v: ["✓", "✗", "✓"] },
    { k: "Custo por asset",           v: ["€", "€€€", "€"] },
    { k: "Curadoria humana",          v: ["✗", "✓", "✓"] },
    { k: "Filmes publicitários",      v: ["✗", "✓", "✓"] },
    { k: "Agendamento social",        v: ["✗", "—", "✓"] },
    { k: "Plataforma dedicada",       v: ["—", "✗", "✓"] }
  ];

  return (
    <Section id="compare" tone="ink">
      <SectionHead
        num="11 / Comparativo"
        title="Bolder vs <em>alternativas</em>."
        sub="Sem polémica. Apenas o que cada caminho entrega, e onde a Bolder faz a diferença."
      />

      <div className="card" style={{ padding: 0, background: "rgba(255,255,255,0.03)", overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", borderBottom: "1px solid var(--rule-strong)" }} className="cmp-grid">
          <div style={{ padding: "20px 24px" }}>
            <span className="mono">Critério</span>
          </div>
          {cols.map((c, i) => (
            <div key={i} style={{
              padding: "20px 24px",
              borderLeft: "1px solid var(--rule)",
              background: c.win ? "var(--coral-soft)" : "transparent"
            }}>
              <span className="mono mono-ink">{c.n}</span>
              <div className="mono" style={{ marginTop: 4, fontSize: 9 }}>{c.note}</div>
            </div>
          ))}
        </div>

        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", borderBottom: i < rows.length - 1 ? "1px solid var(--rule)" : "none" }} className="cmp-grid">
            <div style={{ padding: "16px 24px", fontSize: 14 }}>{r.k}</div>
            {r.v.map((val, j) => (
              <div key={j} style={{
                padding: "16px 24px",
                borderLeft: "1px solid var(--rule)",
                fontFamily: "var(--font-mono)", fontSize: 13,
                color: val === "✓" ? "var(--coral)" : val === "✗" ? "var(--muted-2)" : "var(--ink)",
                background: cols[j].win ? "var(--coral-soft)" : "transparent"
              }}>{val}</div>
            ))}
          </div>
        ))}
      </div>

      <style>{`
        @media (max-width: 760px) {
          .cmp-grid { grid-template-columns: 1fr !important; }
          .cmp-grid > div { border-left: none !important; border-bottom: 1px solid var(--rule); }
        }
      `}</style>
    </Section>
  );
}

window.Compare = Compare;