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

const SERVICES = [
  {
    id: "01",
    icon: "bolt",
    title: "Instalaciones eléctricas integrales",
    desc: "Viviendas, oficinas y locales comerciales. Desde el cuadro hasta el último enchufe — certificado y según normativa.",
    tag: "Instalaciones",
    accent: "cyan",
  },
  {
    id: "02",
    icon: "ev",
    title: "Puntos de recarga VE",
    desc: "Cargadores inteligentes para garajes privados y comunitarios. Gestión de carga, facturación e instalación completa.",
    tag: "Movilidad",
    accent: "cyan",
  },
  {
    id: "03",
    icon: "building",
    title: "Mantenimiento de comunidades",
    desc: "Portales, garajes, zonas comunes e iluminación de emergencia. Un único punto de contacto para el administrador.",
    tag: "Mantenimiento",
    accent: "cyan",
  },
  {
    id: "04",
    icon: "solar",
    title: "Instalación de placas solares",
    desc: "Sistemas fotovoltaicos para autoconsumo. Diseñados para el sol español, dimensionados para la demanda real.",
    tag: "Solar",
    accent: "amber",
  },
  {
    id: "05",
    icon: "leaf",
    title: "Estudios de ahorro energético",
    desc: "Mejoras LED, sensores de presencia y optimización de potencia. Medimos, modelamos y demostramos el ahorro.",
    tag: "Eficiencia",
    accent: "amber",
  },
  {
    id: "06",
    icon: "network",
    title: "Redes de voz, datos e IT",
    desc: "Cableado estructurado, armarios rack y cobertura Wi-Fi. Redes diseñadas por especialistas en redes.",
    tag: "Redes",
    accent: "cyan",
  },
];

function ServiceCard({ s }) {
  return (
    <Tilt
      max={4}
      className="reveal service-card"
      style={{
        position: "relative",
        padding: 28,
        borderRadius: 18,
        background: "linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.01))",
        border: "1px solid rgba(255,255,255,0.07)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        minHeight: 380,
      }}
    >
      <article style={{ display: "contents" }}>
        <div
          style={{
            height: 140,
            margin: -28,
            marginBottom: 20,
            position: "relative",
            overflow: "hidden",
            background:
              s.accent === "amber"
                ? "linear-gradient(135deg, rgba(245, 181, 71, 0.14), rgba(245, 181, 71, 0.02))"
                : "linear-gradient(135deg, rgba(94, 233, 242, 0.14), rgba(94, 233, 242, 0.02))",
            borderBottom: "1px solid rgba(255,255,255,0.06)",
          }}
        >
          <ServiceVisual kind={s.icon} accent={s.accent} />
          <div
            style={{
              position: "absolute",
              top: 14,
              left: 18,
              fontFamily: "var(--font-mono)",
              fontSize: 10,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: "var(--text-mute)",
            }}
          >
            {s.id} · {s.tag}
          </div>
        </div>

        <div
          style={{
            width: 44,
            height: 44,
            borderRadius: 12,
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            background: s.accent === "amber" ? "rgba(245, 181, 71, 0.12)" : "rgba(94, 233, 242, 0.12)",
            color: s.accent === "amber" ? "var(--amber)" : "var(--cyan)",
            marginBottom: 18,
          }}
        >
          <div style={{ width: 22, height: 22 }}>{ICONS[s.icon]}</div>
        </div>

        <h3 className="h-card" style={{ marginBottom: 10 }}>{s.title}</h3>
        <p style={{ color: "var(--text-dim)", fontSize: 15, lineHeight: 1.55, marginBottom: "auto" }}>
          {s.desc}
        </p>

        <div
          style={{
            marginTop: 24,
            display: "inline-flex",
            alignItems: "center",
            gap: 8,
            color: s.accent === "amber" ? "var(--amber)" : "var(--cyan)",
            fontFamily: "var(--font-display)",
            fontSize: 13,
            fontWeight: 500,
          }}
        >
          Más información
          <span style={{ width: 14, height: 14, display: "inline-flex" }}>{ICONS.arrow}</span>
        </div>
      </article>
    </Tilt>
  );
}

function ServiceVisual({ kind, accent }) {
  const accentColor = accent === "amber" ? "#F5B547" : "#5EE9F2";

  const motifs = {
    bolt: (
      <g>
        <path d="M 30 20 L 70 20 M 30 32 L 90 32 M 50 44 L 90 44" stroke={accentColor} strokeOpacity="0.5" strokeWidth="0.8" />
        <path d="M 110 30 L 100 60 L 115 60 L 105 100 L 130 50 L 115 50 L 125 30 Z" fill={accentColor} fillOpacity="0.25" stroke={accentColor} strokeWidth="0.6" />
      </g>
    ),
    ev: (
      <g>
        <rect x="28" y="50" width="40" height="50" rx="3" fill="none" stroke={accentColor} strokeWidth="0.8" strokeOpacity="0.7" />
        <path d="M 35 60 H 60 M 35 70 H 55 M 35 80 H 60" stroke={accentColor} strokeOpacity="0.5" strokeWidth="0.6" />
        <path d="M 70 65 H 80 V 85 C 80 90 85 92 90 92 V 105" fill="none" stroke={accentColor} strokeWidth="0.8" />
        <circle cx="48" cy="40" r="3" fill={accentColor} />
        <path d="M 48 40 L 48 50" stroke={accentColor} strokeWidth="1" />
      </g>
    ),
    building: (
      <g>
        <path d="M 20 110 H 180" stroke={accentColor} strokeOpacity="0.6" strokeWidth="0.8" />
        <rect x="40" y="30" width="50" height="80" fill="none" stroke={accentColor} strokeWidth="0.8" strokeOpacity="0.6" />
        <rect x="100" y="50" width="50" height="60" fill="none" stroke={accentColor} strokeWidth="0.8" strokeOpacity="0.7" />
        {Array.from({ length: 4 }).map((_, r) =>
          [0, 1].map((c) => (
            <rect key={`${r}-${c}`} x={50 + c * 20} y={42 + r * 18} width="8" height="10" fill={accentColor} fillOpacity={r === 1 && c === 0 ? 0.6 : 0.15} />
          ))
        )}
        {Array.from({ length: 3 }).map((_, r) =>
          [0, 1].map((c) => (
            <rect key={`b-${r}-${c}`} x={110 + c * 20} y={60 + r * 16} width="8" height="9" fill={accentColor} fillOpacity={r === 0 && c === 1 ? 0.6 : 0.15} />
          ))
        )}
      </g>
    ),
    solar: (
      <g>
        <circle cx="50" cy="40" r="14" fill="none" stroke={accentColor} strokeWidth="0.8" />
        <circle cx="50" cy="40" r="8" fill={accentColor} fillOpacity="0.3" />
        {Array.from({ length: 8 }).map((_, i) => {
          const angle = (i * Math.PI) / 4;
          const x1 = 50 + Math.cos(angle) * 18;
          const y1 = 40 + Math.sin(angle) * 18;
          const x2 = 50 + Math.cos(angle) * 24;
          const y2 = 40 + Math.sin(angle) * 24;
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={accentColor} strokeWidth="0.8" />;
        })}
        <path d="M 90 110 L 100 70 L 170 70 L 180 110 Z" fill="none" stroke={accentColor} strokeWidth="0.8" />
        <path d="M 110 70 L 105 110 M 130 70 L 130 110 M 150 70 L 155 110" stroke={accentColor} strokeOpacity="0.5" strokeWidth="0.6" />
        <path d="M 100 90 L 180 90" stroke={accentColor} strokeOpacity="0.5" strokeWidth="0.6" />
      </g>
    ),
    leaf: (
      <g>
        <path d="M 40 110 C 40 50 80 30 150 30 C 150 90 110 110 40 110 Z" fill={accentColor} fillOpacity="0.15" stroke={accentColor} strokeWidth="0.8" />
        <path d="M 40 110 L 130 50" stroke={accentColor} strokeOpacity="0.6" strokeWidth="0.7" />
        <path d="M 60 95 L 100 70 M 80 102 L 130 70 M 100 105 L 145 75" stroke={accentColor} strokeOpacity="0.4" strokeWidth="0.5" />
      </g>
    ),
    network: (
      <g>
        {[0, 1, 2].map((i) => (
          <g key={i}>
            <rect x="30" y={30 + i * 22} width="120" height="16" rx="2" fill="none" stroke={accentColor} strokeWidth="0.7" strokeOpacity="0.7" />
            <circle cx="40" cy={38 + i * 22} r="1.4" fill={accentColor} />
            <circle cx="46" cy={38 + i * 22} r="1.4" fill={accentColor} fillOpacity="0.4" />
            <path d={`M 130 ${38 + i * 22} H 142`} stroke={accentColor} strokeWidth="0.7" />
          </g>
        ))}
      </g>
    ),
  };

  return (
    <svg
      viewBox="0 0 200 140"
      style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
      preserveAspectRatio="xMidYMid slice"
    >
      <defs>
        <pattern id={`stripes-${kind}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke={accentColor} strokeOpacity="0.06" strokeWidth="2" />
        </pattern>
      </defs>
      <rect width="200" height="140" fill={`url(#stripes-${kind})`} />
      {motifs[kind]}
    </svg>
  );
}

function Services() {
  const headRef = useReveal();
  const gridRef = useStaggerGroup({ step: 110, selector: ".service-card" });

  return (
    <section id="servicios" className="section" style={{ background: "var(--navy-900)" }}>
      <div className="container">
        <div ref={headRef} className="reveal section-head">
          <span className="eyebrow">
            <span className="dash"></span>
            Lo que hacemos
          </span>
          <h2 className="h-section" style={{ marginTop: 18 }}>
            Seis líneas de servicio. <br />
            <span style={{ color: "var(--text-mute)" }}>Un equipo de confianza.</span>
          </h2>
          <p className="lead" style={{ marginTop: 22 }}>
            Cada línea cuenta con especialistas certificados. No subcontratamos —
            la persona que presupuesta es la que termina el trabajo.
          </p>
        </div>

        <div
          ref={gridRef}
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
            gap: 18,
          }}
        >
          {SERVICES.map((s) => (
            <ServiceCard key={s.id} s={s} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;