/* global React */

function Diagnostico() {
  const points = [
    "Posicionamento",
    "Captação",
    "Conversão",
    "Ticket médio",
    "Recorrência",
    "Comercial",
    "Oportunidades de escala",
  ];
  return (
    <section id="diagnostico" style={{ background: "var(--bg-canvas)" }}>
      <div className="wrap">
        <div style={{
          background: "var(--ink-900)",
          color: "#fff",
          borderRadius: 32,
          padding: "72px 64px",
          position: "relative",
          overflow: "hidden",
        }} className="diag-card">
          {/* glow */}
          <div aria-hidden="true" style={{
            position: "absolute",
            top: "-20%", right: "-10%",
            width: 700, height: 700,
            background: "radial-gradient(circle, rgba(64,13,166,0.55), transparent 60%)",
            filter: "blur(40px)",
            pointerEvents: "none",
          }} />
          <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: "60px 60px",
            maskImage: "radial-gradient(ellipse at 30% 50%, #000 30%, transparent 80%)",
            WebkitMaskImage: "radial-gradient(ellipse at 30% 50%, #000 30%, transparent 80%)",
          }} />

          <div style={{
            position: "relative",
            display: "grid",
            gridTemplateColumns: "1.2fr 1fr",
            gap: 64,
            alignItems: "center",
          }} className="diag-grid">
            <div>
              <span className="eyebrow-tag on-dark" style={{ marginBottom: 20 }}>
                <span className="dot" />
                Diagnóstico estratégico
              </span>
              <h2 style={{
                color: "#fff",
                fontFamily: "var(--font-display)",
                fontWeight: 600,
                fontSize: "clamp(32px, 4vw, 52px)",
                lineHeight: 1.06,
                letterSpacing: "-0.02em",
                textWrap: "balance",
                marginBottom: 20,
              }}>
                Em uma conversa,<br />
                identificamos os <span style={{ color: "var(--brand-violet-300)" }}>gargalos invisíveis</span> que estão travando seu crescimento.
              </h2>
              <p style={{
                color: "rgba(255,255,255,0.72)",
                fontSize: 18,
                lineHeight: 1.55,
                maxWidth: 480,
                marginBottom: 36,
              }}>
                Sem promessa, sem fórmula. Mapeamos o cenário real da sua
                clínica e mostramos onde está a maior alavanca de crescimento.
              </p>
              <a href="#contato" className="btn btn-primary">
                Solicitar diagnóstico da clínica
                <span className="arrow"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></span>
              </a>
            </div>

            <div>
              <div style={{
                fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
                color: "rgba(255,255,255,0.5)", marginBottom: 20,
              }}>
                Pontos analisados
              </div>
              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                {points.map((p) => (
                  <span key={p} style={{
                    padding: "10px 16px",
                    borderRadius: 999,
                    background: "rgba(255,255,255,0.06)",
                    border: "1px solid rgba(255,255,255,0.12)",
                    color: "#fff",
                    fontSize: 14,
                    fontWeight: 500,
                  }}>
                    {p}
                  </span>
                ))}
              </div>
            </div>
          </div>

          <style>{`
            @media (max-width: 880px) {
              .diag-card { padding: 48px 28px !important; border-radius: 20px !important; }
              .diag-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
            }
          `}</style>
        </div>
      </div>
    </section>
  );
}

window.Diagnostico = Diagnostico;