/* global React */

function Frankenstein() {
  const before = [
    "Social media separado",
    "Gestor de tráfego separado",
    "Designer separado",
    "Recepção sem preparo comercial",
    "Vendas sem script",
    "Dono decidindo tudo sozinho",
  ];
  const after = [
    "Estratégia única e integrada",
    "Posicionamento e captação alinhados",
    "Atendimento com método",
    "Comercial com processo e script",
    "Indicadores por etapa da jornada",
    "Decisão baseada em número, não achismo",
  ];
  return (
    <section style={{ background: "var(--ink-050)" }}>
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow-tag" style={{ marginBottom: 20 }}>
            <span className="dot" />
            O erro mais comum
          </span>
          <h2>
            O <span className="accent">Frankenstein</span> que trava clínicas promissoras.
          </h2>
          <p className="lede">
            Quando cada peça é contratada separadamente, o resultado é
            previsível: sem integração, sem estratégia única, sem previsibilidade.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24,
        }} className="frank-grid">
          {/* Before */}
          <div style={{
            background: "#fff",
            border: "1px solid var(--border-subtle)",
            borderRadius: 16,
            padding: 36,
          }}>
            <div style={{
              display: "flex", alignItems: "center", gap: 10,
              fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--fg-tertiary)", marginBottom: 16,
            }}>
              <span style={{ width: 20, height: 1, background: "var(--ink-300)" }} />
              Hoje
            </div>
            <h3 style={{
              fontFamily: "var(--font-display)", fontWeight: 600,
              fontSize: 26, lineHeight: 1.15, letterSpacing: "-0.01em",
              color: "var(--ink-700)", marginBottom: 24,
            }}>
              Peças soltas que não conversam.
            </h3>
            <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
              {before.map((b, i) => (
                <li key={b} style={{
                  display: "flex", alignItems: "center", gap: 14,
                  padding: "14px 0",
                  borderTop: "1px solid var(--border-subtle)",
                }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999,
                    border: "1px solid var(--ink-300)",
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    color: "var(--ink-400)", fontSize: 12,
                  }}>×</span>
                  <span style={{ color: "var(--ink-600)", fontSize: 15 }} className="text-strike">
                    {b}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* After */}
          <div style={{
            background: "var(--ink-900)",
            color: "#fff",
            borderRadius: 16,
            padding: 36,
            position: "relative",
            overflow: "hidden",
          }}>
            <div aria-hidden="true" style={{
              position: "absolute", inset: 0,
              background: "radial-gradient(ellipse at 80% 0%, rgba(64,13,166,0.55), transparent 60%)",
              pointerEvents: "none",
            }} />
            <div style={{ position: "relative" }}>
              <div style={{
                display: "flex", alignItems: "center", gap: 10,
                fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase",
                color: "var(--brand-violet-300)", marginBottom: 16,
              }}>
                <span style={{ width: 20, height: 1, background: "var(--brand-violet-300)" }} />
                Com a MaveUp
              </div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 600,
                fontSize: 26, lineHeight: 1.15, letterSpacing: "-0.01em",
                color: "#fff", marginBottom: 24,
              }}>
                Crescimento estruturado, com método.
              </h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {after.map((b, i) => (
                  <li key={b} style={{
                    display: "flex", alignItems: "center", gap: 14,
                    padding: "14px 0",
                    borderTop: "1px solid rgba(255,255,255,0.08)",
                  }}>
                    <span style={{
                      width: 18, height: 18, borderRadius: 999,
                      background: "var(--brand-violet)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: "#fff", fontSize: 11, fontWeight: 700,
                    }}>✓</span>
                    <span style={{ color: "rgba(255,255,255,0.92)", fontSize: 15, fontWeight: 500 }}>
                      {b}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>

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

window.Frankenstein = Frankenstein;
