/* global React */

function Truth() {
  const points = [
    "Falta de posicionamento claro",
    "Atendimento sem método",
    "WhatsApp sem processo comercial",
    "Baixo ticket médio",
    "Ausência de recorrência",
    "Falta de indicadores",
    "Crescimento baseado em achismo",
  ];
  return (
    <section style={{ background: "var(--ink-900)", color: "#fff" }} className="dark">
      <div className="wrap" style={{ position: "relative" }}>
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            backgroundImage:
              "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
            backgroundSize: "80px 80px",
            maskImage: "radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%)",
            WebkitMaskImage: "radial-gradient(ellipse at 80% 20%, #000 20%, transparent 70%)",
            pointerEvents: "none",
          }}
        />

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }} className="truth-grid">
          <div>
            <span className="eyebrow-tag on-dark" style={{ marginBottom: 24 }}>
              <span className="dot" />
              A verdade que quase ninguém fala
            </span>
            <h2 style={{
              color: "#fff",
              fontFamily: "var(--font-display)",
              fontWeight: 600,
              fontSize: "clamp(32px, 4vw, 52px)",
              lineHeight: 1.06,
              letterSpacing: "-0.02em",
              textWrap: "balance",
            }}>
              O problema da sua clínica<br />
              <span style={{ color: "rgba(255,255,255,0.4)" }}>pode não ser</span> marketing.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.7)", fontSize: 18, lineHeight: 1.55, marginTop: 28, maxWidth: 480 }}>
              Enquanto muitos buscam mais leads, perdem os que já chegam.
              Antes de aumentar o topo do funil, é preciso consertar o meio e o fim.
            </p>

            <div style={{ marginTop: 48, display: "flex", alignItems: "center", gap: 18 }}>
              <div style={{
                fontFamily: "var(--font-display)",
                fontSize: 64,
                fontWeight: 700,
                color: "var(--brand-violet-300)",
                lineHeight: 1,
                letterSpacing: "-0.03em",
              }}>
                7
              </div>
              <div style={{ color: "rgba(255,255,255,0.7)", fontSize: 14, lineHeight: 1.4, maxWidth: 200 }}>
                pontos que travam o crescimento — sem nenhum deles ser tráfego pago.
              </div>
            </div>
          </div>

          <div>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column" }}>
              {points.map((p, i) => (
                <li
                  key={p}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: 24,
                    padding: "20px 0",
                    borderBottom: i === points.length - 1 ? "none" : "1px solid rgba(255,255,255,0.08)",
                  }}
                >
                  <span style={{
                    fontFamily: "var(--font-display)",
                    fontSize: 13,
                    color: "rgba(255,255,255,0.4)",
                    letterSpacing: "0.06em",
                    minWidth: 28,
                    fontVariantNumeric: "tabular-nums",
                  }}>
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <span style={{ color: "#fff", fontSize: 18, fontWeight: 500, flex: 1 }}>
                    {p}
                  </span>
                  <span style={{ color: "var(--brand-violet-300)", fontSize: 18 }}>→</span>
                </li>
              ))}
            </ol>
          </div>
        </div>

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

window.Truth = Truth;