// Servicios — 4 áreas con expand
const SERVICES = [
  {
    id: "hab",
    title: "Habilitación comercial",
    short: "De principio a fin: definimos riesgo, presentamos y obtenemos tu certificado.",
    icon: "IconHabilitacion",
    color: "#009775",
    items: [
      "Definición de Riesgo (Bajo, Intermedio, Alto) y requisitos",
      "Relevamiento de documentación y actividades",
      "Certificado Apto Eléctrico",
      "Informe de Condiciones de Higiene y Seguridad",
      "Certificado de Bomberos",
      "Gestión municipal y provincial hasta el Certificado de Habilitación",
    ],
  },
  {
    id: "amb",
    title: "Gestión ambiental",
    short: "Cumplimiento ambiental con visitas mensuales, planes y certificaciones ISO.",
    icon: "IconAmbiental",
    color: "#40C1AC",
    items: [
      "Autorización Ambiental Municipal",
      "Estudios de Impacto Ambiental",
      "Planes de Gestión Ambiental",
      "Asesoramiento con visitas mensuales",
      "Sistemas de Gestión Ambiental (ISO 14001/15)",
      "Capacitaciones",
      "Residuos peligrosos y patógenos",
    ],
  },
  {
    id: "res",
    title: "Grandes generadores",
    short: "Plan de gestión, capacitaciones y Certificado IPAA.",
    icon: "IconResiduos",
    color: "#F1C400",
    items: [
      "Relevamiento del establecimiento",
      "Verificación de sistema de gestión y mejoras",
      "Plan de Gestión de Residuos",
      "Implementación del plan",
      "Capacitaciones",
      "Tramitación del Certificado de Grandes Generadores ante el IPAA",
    ],
  },
  {
    id: "hys",
    title: "Higiene y seguridad",
    short: "Asesoramiento mensual, mediciones, capacitaciones y representación.",
    icon: "IconSeguridad",
    color: "#009775",
    items: [
      "Relevamiento de agentes de riesgo",
      "Asesoramiento mensual",
      "Informes técnicos",
      "Mediciones laborales",
      "Capacitaciones",
      "Seguridad contra incendios",
      "Representación frente a ART, Min. de Trabajo, SRT, Municipalidad",
      "Programas de seguridad y visitas a obra",
    ],
  },
];

const Servicios = () => {
  const [active, setActive] = React.useState("hab");
  const cur = SERVICES.find(s => s.id === active);
  const Icon = window[cur.icon];

  return (
    <section id="servicios" style={{ padding: "120px 0", position: "relative" }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 60 }}>
          <div className="eyebrow reveal">Qué hacemos</div>
          <h2 className="reveal" style={{ fontSize: "clamp(36px, 4.4vw, 60px)", marginTop: 14, marginBottom: 18 }}>
            Cuatro áreas. Un solo equipo.<br/>
            <span style={{ color: "var(--green-primary)" }}>Cero idas y vueltas.</span>
          </h2>
          <p className="reveal" style={{ fontSize: 18, color: "var(--ink-soft)", maxWidth: 580 }}>
            Centralizamos todos los trámites como único proveedor.
            Vos hablás con una sola persona, nosotros coordinamos al equipo entero.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "320px 1fr", gap: 32 }} className="srv-grid">
          {/* tabs */}
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {SERVICES.map(s => {
              const I = window[s.icon];
              const sel = s.id === active;
              return (
                <button key={s.id} onClick={() => setActive(s.id)} className="card-lift" style={{
                  display: "flex", alignItems: "center", gap: 14,
                  padding: "18px 20px", borderRadius: 18,
                  background: sel ? s.color : "white",
                  color: sel ? "white" : "var(--ink)",
                  border: sel ? "none" : "1.5px solid rgba(14,42,36,.08)",
                  textAlign: "left", fontSize: 16, fontWeight: 600,
                  boxShadow: sel ? `0 14px 34px ${s.color}33` : "0 2px 8px rgba(14,42,36,.04)",
                  transition: "all .25s"
                }}>
                  <I color={sel ? "white" : s.color} size={32}/>
                  <span style={{ flex: 1 }}>{s.title}</span>
                  <IconArrow size={16} color={sel ? "white" : "var(--ink-soft)"}/>
                </button>
              );
            })}
          </div>

          {/* detail */}
          <div key={active} style={{
            background: "white", borderRadius: 28, padding: 44,
            boxShadow: "0 20px 50px rgba(14,42,36,.06)",
            border: "1px solid rgba(14,42,36,.05)",
            position: "relative", overflow: "hidden",
            animation: "fadeIn .4s ease"
          }}>
            <div style={{ position: "absolute", top: -40, right: -40, width: 200, height: 200, borderRadius: "50%",
              background: cur.color, opacity: .08 }}></div>
            <div style={{ position: "relative" }}>
              <Icon color={cur.color} size={56}/>
              <h3 style={{ fontSize: 32, marginTop: 16, marginBottom: 10 }}>{cur.title}</h3>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", marginBottom: 28, maxWidth: 520 }}>{cur.short}</p>

              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 24px", marginBottom: 32 }} className="srv-items">
                {cur.items.map((it, i) => (
                  <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 15 }}>
                    <IconCheck color={cur.color} size={20}/> <span>{it}</span>
                  </div>
                ))}
              </div>

              <a href="https://walink.co/a546fc" target="_blank" className="btn btn-primary" style={{ background: cur.color, boxShadow: `0 6px 20px ${cur.color}40` }}>
                <IconWhatsapp size={18}/> Consultar por {cur.title.toLowerCase()}
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .srv-grid { grid-template-columns: 1fr !important; }
          .srv-items { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { Servicios });