/* global React, ICONS, useReveal, useStaggerGroup, useCountUp */

function Stat({ value, suffix, label }) {
  const [display, ref] = useCountUp(value);
  return (
    <div ref={ref}>
      <div
        style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(56px, 8vw, 96px)",
          fontWeight: 400,
          letterSpacing: "-0.04em",
          lineHeight: 1,
          color: "var(--text)",
        }}
      >
        {display}
        <span style={{ color: "var(--cyan)" }}>{suffix}</span>
      </div>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 12,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          color: "var(--text-mute)",
          marginTop: 16,
        }}
      >
        {label}
      </div>
    </div>
  );
}

function Pillar({ icon, kicker, title, desc }) {
  return (
    <div
      className="reveal pillar"
      style={{
        position: "relative",
        padding: "44px 32px 36px",
        borderRadius: 18,
        background: "rgba(255,255,255,0.02)",
        border: "1px solid rgba(255,255,255,0.08)",
        transition: "background .4s ease, border-color .4s ease",
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.borderColor = "rgba(94, 233, 242, 0.35)";
        e.currentTarget.style.background = "rgba(94, 233, 242, 0.04)";
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)";
        e.currentTarget.style.background = "rgba(255,255,255,0.02)";
      }}
    >
      <div
        style={{
          width: 72,
          height: 72,
          borderRadius: 16,
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          background: "rgba(94, 233, 242, 0.10)",
          color: "var(--cyan)",
          marginBottom: 28,
        }}
      >
        <div style={{ width: 38, height: 38 }}>{ICONS[icon]}</div>
      </div>
      <div
        style={{
          fontFamily: "var(--font-mono)",
          fontSize: 11,
          letterSpacing: "0.18em",
          textTransform: "uppercase",
          color: "var(--cyan)",
          marginBottom: 12,
        }}
      >
        {kicker}
      </div>
      <h3
        style={{
          fontFamily: "var(--font-display)",
          fontSize: 30,
          fontWeight: 500,
          letterSpacing: "-0.02em",
          lineHeight: 1.05,
          marginBottom: 14,
        }}
      >
        {title}
      </h3>
      <p style={{ color: "var(--text-dim)", fontSize: 15.5, lineHeight: 1.55 }}>{desc}</p>
    </div>
  );
}

function Trust() {
  const headRef = useReveal();
  const pillarsRef = useStaggerGroup({ step: 150, selector: ".pillar" });
  const statsRef = useStaggerGroup({ step: 130, selector: ".stat" });

  return (
    <section id="confianza" className="section" style={{ position: "relative" }}>
      <div
        aria-hidden="true"
        style={{
          position: "absolute",
          inset: 0,
          opacity: 0.4,
          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(80% 60% at 50% 40%, black, transparent)",
          WebkitMaskImage: "radial-gradient(80% 60% at 50% 40%, black, transparent)",
          pointerEvents: "none",
        }}
      />

      <div className="container" style={{ position: "relative" }}>
        <div ref={headRef} className="reveal section-head" style={{ marginBottom: 80 }}>
          <span className="eyebrow">
            <span className="dash"></span>
            Por qué confiar
          </span>
          <h2 className="h-section" style={{ marginTop: 22, maxWidth: "16ch" }}>
            Tres garantías que ponemos por escrito.
          </h2>
        </div>

        <div
          ref={pillarsRef}
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
            gap: 18,
            marginBottom: 100,
          }}
        >
          <Pillar
            icon="reach"
            kicker="01 · Alcance"
            title="Amplio alcance"
            desc="Cobertura en toda el área metropolitana, con equipos móviles listos para estar en obra el mismo día en urgencias."
          />
          <Pillar
            icon="shield"
            kicker="02 · Calidad"
            title="Trabajo profesional"
            desc="Técnicos certificados, materiales homologados por el fabricante, garantía escrita en cada instalación que firmamos."
          />
          <Pillar
            icon="clock"
            kicker="03 · Velocidad"
            title="Respuesta rápida"
            desc="Una persona real atiende el teléfono. Presupuesto en 48 horas. Urgencias programadas para el siguiente día laborable."
          />
        </div>

        <div
          ref={statsRef}
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
            gap: 32,
            paddingTop: 60,
            borderTop: "1px solid rgba(255,255,255,0.08)",
          }}
        >
          <div className="reveal stat">
            <Stat value={15} suffix="+" label="Años de experiencia combinada" />
          </div>
          <div className="reveal stat">
            <Stat value={6} suffix="" label="Líneas de servicio" />
          </div>
          <div className="reveal stat">
            <Stat value={24} suffix="h" label="Tiempo de respuesta" />
          </div>
          <div className="reveal stat">
            <Stat value={2} suffix="" label="Fundadores especialistas" />
          </div>
        </div>
      </div>
    </section>
  );
}

window.Trust = Trust;