/* global React */

function ForWhom() {
  const yes = [
    "Faturam e sabem que podem crescer mais",
    "Já entendem a importância do digital",
    "Querem cobrar melhor",
    "Estão cansadas de marketing sem resultado",
    "Querem previsibilidade",
    "Buscam estrutura profissional",
  ];
  const no = [
    "Quem busca milagre rápido",
    "Quem quer só post bonito",
    "Quem não valoriza vendas e processo",
    "Quem não quer evoluir operação",
  ];
  return (
    <section id="para-quem" style={{ background: "var(--bg-canvas)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            Para quem é
          </span>
          <h2>
            Não é para todo mundo.<br />
            <span className="accent">É para quem está pronto.</span>
          </h2>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr",
          gap: 24,
        }} className="forwhom-grid">
          <div style={{
            background: "#fff",
            border: "1px solid var(--border-subtle)",
            borderRadius: 16,
            padding: 36,
          }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--brand-violet)", marginBottom: 24,
              padding: "6px 12px", borderRadius: 999,
              background: "var(--brand-violet-50)",
            }}>
              É para você
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {yes.map((y) => (
                <li key={y} style={{
                  display: "flex", alignItems: "center", gap: 14,
                  padding: "16px 0",
                  borderTop: "1px solid var(--border-subtle)",
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999,
                    background: "var(--brand-violet)", color: "#fff",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontSize: 12, fontWeight: 700, flexShrink: 0,
                  }}>✓</span>
                  <span style={{ color: "var(--fg-primary)", fontSize: 16, fontWeight: 500 }}>{y}</span>
                </li>
              ))}
            </ul>
          </div>

          <div style={{
            background: "var(--ink-050)",
            border: "1px solid var(--border-subtle)",
            borderRadius: 16,
            padding: 36,
          }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--fg-tertiary)", marginBottom: 24,
              padding: "6px 12px", borderRadius: 999,
              background: "#fff", border: "1px solid var(--border-subtle)",
            }}>
              Não é para você
            </div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {no.map((n) => (
                <li key={n} style={{
                  display: "flex", alignItems: "center", gap: 14,
                  padding: "16px 0",
                  borderTop: "1px solid var(--border-subtle)",
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: 999,
                    border: "1px solid var(--ink-300)", color: "var(--ink-400)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    fontSize: 12, flexShrink: 0,
                  }}>×</span>
                  <span style={{ color: "var(--fg-secondary)", fontSize: 16 }}>{n}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <style>{`
          @media (max-width: 880px) {
            .forwhom-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.ForWhom = ForWhom;