/* global React, window */
const { Icon, SectionHead } = window;

const PainPoint = () => (
  <section data-theme="dark" className="section painpoint">
    <div className="painpoint-grid" />
    <div className="container" style={{ position: "relative" }}>
      <div className="eyebrow reveal" style={{ color: "rgba(250,249,246,.6)", marginBottom: 40 }}>El problema</div>
      <h2 className="reveal reveal-d1" style={{ maxWidth: "18ch", marginBottom: 40 }}>
        No es <span className="strike">más contenido</span>.<br />
        No es <span className="strike">más pauta</span>.<br />
        Es <span className="lime">más coherencia</span>.
      </h2>
      <p className="reveal reveal-d2" style={{ color: "rgba(250,249,246,.7)", fontSize: 20, lineHeight: 1.55, maxWidth: "52ch" }}>
        Las marcas que llegan a nosotros ya probaron agencias, freelancers y community managers. No entendían que les faltaba — Coherencia y un diferencial que justifique por qué ser la razón obvia para sus clientes. Por eso empezamos distinto.
      </p>

      <div className="reveal reveal-d3 painpoint-cards">
        {[
          { n: "01", k: "Sin nosotros",  t: "Ejecución sin diagnóstico", d: "Más piezas, más plata, menos resultado." },
          { n: "02", k: "Con el grupo",  t: "Saber que ejecutar y por qué",             d: "Entendemos qué necesitas antes de ejecutar." },
          { n: "03", k: "El resultado",  t: "Una marca diferenciada",     d: "Un negocio coherente y una marca recordable." },
        ].map((c) => (
          <div key={c.n} style={{ border: "1px solid rgba(250,249,246,.12)", borderRadius: 16, padding: 28, background: "rgba(255,255,255,.02)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28, fontFamily: "var(--font-mono)", letterSpacing: ".14em", textTransform: "uppercase", color: "rgba(250,249,246,.45)" }}>
              <span style={{ color: "var(--accent)", fontSize: 12 }}>{c.k}</span>
              <span style={{ fontSize: 12 }}>{c.n}</span>
            </div>
            <div style={{ fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", marginBottom: 10 }}>{c.t}</div>
            <div style={{ color: "rgba(250,249,246,.6)", fontSize: 14, lineHeight: 1.55 }}>{c.d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.PainPoint = PainPoint;