/* Services.jsx — the 5 core services */
const SERVICES = [
  {
    n: "01", t: "Movimiento de suelos",
    d: "Desmonte, excavación, terraplenes, nivelación y compactación. Preparamos el terreno para que la obra arranque sobre base firme.",
    tags: ["Excavación", "Nivelación", "Compactación", "Terraplenes"],
  },
  {
    n: "02", t: "Pavimento de hormigón",
    d: "Pavimentos rígidos de alta durabilidad para calzadas, playas de maniobra y accesos industriales que soportan cargas pesadas.",
    tags: ["Calzadas", "Playas logísticas", "Juntas", "Accesos"],
  },
  {
    n: "03", t: "Pavimento asfáltico",
    d: "Carpetas asfálticas en caliente, bacheo y repavimentación. Terminaciones parejas y drenaje correcto para una vida útil prolongada.",
    tags: ["Carpeta en caliente", "Bacheo", "Repavimentación", "Fresado"],
  },
  {
    n: "04", t: "Adoquinado",
    d: "Colocación de adoquines de hormigón para calles, plazas, veredas y accesos. Estética, permeabilidad y mantenimiento sencillo.",
    tags: ["Calles", "Plazas", "Veredas", "Accesos"],
  },
  {
    n: "05", t: "Mantenimiento vial",
    d: "Conservación integral: sellado de juntas y fisuras, demarcación horizontal, limpieza y bacheo programado para mantener la vía segura.",
    tags: ["Sellado", "Demarcación", "Bacheo", "Conservación"],
  },
];

function ServiceRow({ s }) {
  const [hover, setHover] = useState(false);
  return (
    <Reveal as="div"
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: "grid", gridTemplateColumns: "auto 1fr", gap: "clamp(20px,4vw,64px)",
        padding: "clamp(28px,4vw,48px) clamp(16px,3vw,40px)",
        borderTop: "1px solid var(--line)",
        background: hover ? "var(--paper-2)" : "transparent",
        transition: "background .25s ease",
        alignItems: "start",
      }}
      className="svc-row">
      <div className="display" style={{
        fontSize: "clamp(2.4rem,5vw,4rem)", color: hover ? "var(--accent)" : "var(--ink)",
        transition: "color .25s ease", lineHeight: 1,
      }}>{s.n}</div>
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(16px,3vw,48px)" }} className="svc-body">
        <div>
          <h3 className="display" style={{ fontSize: "clamp(1.5rem,2.8vw,2.2rem)" }}>{s.t}</h3>
          <p style={{ marginTop: 12, color: "var(--ink-2)", fontSize: "1.02rem", maxWidth: 460 }}>{s.d}</p>
        </div>
        <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 10, alignSelf: "center" }}>
          {s.tags.map((tag) => (
            <li key={tag} style={{ display: "flex", alignItems: "center", gap: 12, fontSize: ".96rem", fontWeight: 500 }}>
              <span style={{ width: 7, height: 7, background: "var(--accent)", transform: "rotate(45deg)", flexShrink: 0 }} />
              {tag}
            </li>
          ))}
        </ul>
      </div>
      <style>{`
        @media (max-width:760px){
          .svc-body{grid-template-columns:1fr!important;gap:18px!important}
        }
      `}</style>
    </Reveal>
  );
}

function Services() {
  return (
    <section id="servicios" className="sec-pad">
      <div className="wrap">
        <Reveal><SecHead num="01" kicker="Servicios" title="Todo el ciclo de la obra vial"
          intro="Desde la tierra hasta la terminación. Cinco frentes de trabajo que cubren cada etapa de un proyecto vial, con un solo responsable." max={680} /></Reveal>
      </div>
      <div className="wrap" style={{ marginTop: "clamp(36px,5vw,60px)" }}>
        <div style={{ borderBottom: "1px solid var(--line)" }}>
          {SERVICES.map((s) => <ServiceRow key={s.n} s={s} />)}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });