/* global React, SLCommon */
const { useState: useState_s } = React;
const { useReveal: useReveal_s, I: I_s } = SLCommon;

/* ============ SOBRE NOSOTROS ============ */
function Nosotros() {
  const r1 = useReveal_s();
  const r2 = useReveal_s();
  return (
    <section id="nosotros" className="nosotros">
      <div className="container">
        <div className="section-head">
          <div ref={r1} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Nosotros</div>
            <h2>
              Empresa dedicada a la <span className="italic-serif" style={{ color: "var(--green-deep)" }}>medicina ocupacional</span>
            </h2>
          </div>
          <div ref={r2} className="reveal right">
            Profesionalismo y transparencia nos identifican. Brindamos un servicio de excelencia
            basado en una ecuación simple: <strong style={{ color: "var(--ink)" }}>menos riesgo, más productividad</strong>. Acompañamos a las empresas
            más allá de la cobertura, protegiendo la salud desde la prevención.
          </div>
        </div>

        <div className="pillars reveal-stagger" ref={useReveal_s()}>
          <div className="pillar">
            <div className="pillar-num">01</div>
            <h4>Prevención primero</h4>
            <p>Reducimos riesgos antes de que se conviertan en accidentes o enfermedades laborales.</p>
          </div>
          <div className="pillar">
            <div className="pillar-num">02</div>
            <h4>Transparencia total</h4>
            <p>Reportes claros, trazabilidad completa y auditorías que tu equipo puede entender.</p>
          </div>
          <div className="pillar">
            <div className="pillar-num">03</div>
            <h4>A medida de tu empresa</h4>
            <p>Planes adaptados a la industria, el riesgo y la dotación de cada cliente corporativo.</p>
          </div>
          <div className="pillar">
            <div className="pillar-num">04</div>
            <h4>Atención profesional</h4>
            <p>Equipo médico, técnico y administrativo formado en salud ocupacional.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ STATS ============ */
function StatBlock({ target, suffix, label, ref }) {
  const [val, r] = SLCommon.useCountUp(target);
  return (
    <div className="stat" ref={r}>
      <div className="stat-num">
        {val.toLocaleString("es-AR")}
        <span className="stat-suffix">{suffix}</span>
      </div>
      <div className="stat-label">{label}</div>
    </div>
  );
}

function Stats() {
  return (
    <section className="stats tight">
      <div className="container">
        <div className="stats-grid">
          <StatBlock target={15} suffix="+" label="Años de trayectoria" />
          <StatBlock target={200} suffix="+" label="Empresas atendidas" />
          <StatBlock target={45000} suffix="" label="Exámenes realizados" />
          <StatBlock target={98} suffix="%" label="Retención de clientes" />
        </div>
      </div>
    </section>
  );
}

/* ============ SERVICIOS ============ */
const SERVICIOS = [
  {
    cat: "Exámenes médicos",
    icon: I_s.stethoscope,
    desc: "Evaluaciones de salud completas en cada etapa de la relación laboral.",
    items: [
      { name: "Examen preocupacional", desc: "Aptitud física y psicofísica previa al ingreso." },
      { name: "Exámenes periódicos de salud", desc: "Control anual según riesgo del puesto." },
      { name: "Examen post ausencia prolongada", desc: "Reincorporación segura tras licencia médica." },
      { name: "Examen de retiro o egreso", desc: "Estado de salud al finalizar la relación laboral." },
      { name: "Libreta sanitaria", desc: "Tramitación y emisión completa." },
      { name: "Test Covid en el ámbito laboral", desc: "Hisopados y testeos rápidos in-company." },
    ],
  },
  {
    cat: "Prevención & Bienestar",
    icon: I_s.shield,
    desc: "Programas que protegen la salud antes de que aparezca el problema.",
    items: [
      { name: "Control de ausentismo", desc: "Auditoría médica de licencias y reducción del ausentismo." },
      { name: "Seguridad e higiene", desc: "Asesoramiento y cumplimiento normativo." },
      { name: "Test psicotécnico", desc: "Evaluación cognitiva y de personalidad para el puesto." },
      { name: "Auditorías nutricionales", desc: "Evaluación, planes y seguimiento alimentario." },
      { name: "Campañas de vacunación", desc: "Operativos de prevención in-company." },
    ],
  },
  {
    cat: "Capacitación",
    icon: I_s.book,
    desc: "Equipos preparados para responder y para cuidarse mejor.",
    items: [
      { name: "RCP y primeros auxilios", desc: "Talleres prácticos certificados." },
      { name: "Tabaquismo", desc: "Programa de cesación tabáquica." },
      { name: "Alimentación saludable", desc: "Hábitos para un equipo más productivo." },
      { name: "Salud ocupacional general", desc: "Capacitación a medida según industria." },
    ],
  },
];

function Servicios() {
  const [active, setActive] = useState_s(0);
  const r = useReveal_s();
  return (
    <section id="servicios" className="servicios">
      <div className="container">
        <div className="section-head">
          <div ref={useReveal_s()} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Servicios</div>
            <h2>
              Un servicio integral, <span className="italic-serif" style={{ color: "var(--green-deep)" }}>en tres ejes.</span>
            </h2>
          </div>
          <div ref={useReveal_s()} className="reveal right">
            Cubrimos todo el ciclo de salud laboral: desde el primer ingreso hasta la
            capacitación continua del equipo. Elegí un eje para ver el detalle.
          </div>
        </div>

        <div className="serv-tabs">
          {SERVICIOS.map((s, i) => (
            <button
              key={s.cat}
              className={`serv-tab ${active === i ? "active" : ""}`}
              onClick={() => setActive(i)}
            >
              <span className="serv-tab-icon">{s.icon}</span>
              <span className="serv-tab-label">
                <strong>{s.cat}</strong>
                <em>{s.items.length} servicios</em>
              </span>
            </button>
          ))}
        </div>

        <div className="serv-panel reveal in" key={active}>
          <div className="serv-panel-head">
            <p className="lead" style={{ maxWidth: "44ch" }}>{SERVICIOS[active].desc}</p>
            <a href="#contacto" className="btn-link">
              Cotizar este eje <span className="arr">{I_s.arrow(14)}</span>
            </a>
          </div>
          <div className="serv-grid">
            {SERVICIOS[active].items.map((it) => (
              <div className="serv-card" key={it.name}>
                <div className="serv-card-check">{I_s.check(14)}</div>
                <div>
                  <strong>{it.name}</strong>
                  <span>{it.desc}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PROCESO ============ */
const PASOS = [
  { n: "01", t: "Diagnóstico", d: "Relevamos puestos, riesgos e historial de salud de tu empresa para definir el alcance." },
  { n: "02", t: "Plan a medida", d: "Diseñamos un programa con los servicios y la frecuencia que tu operación necesita." },
  { n: "03", t: "Ejecución", d: "Coordinamos exámenes, capacitaciones y campañas con el menor impacto operativo." },
  { n: "04", t: "Reporte y mejora", d: "Entregamos métricas claras y proponemos ajustes para reducir el riesgo año a año." },
];

function Proceso() {
  return (
    <section id="proceso" className="proceso">
      <div className="container">
        <div className="section-head">
          <div ref={useReveal_s()} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Cómo trabajamos</div>
            <h2>
              Un proceso <span className="italic-serif" style={{ color: "var(--green-deep)" }}>simple y trazable</span>, de punta a punta.
            </h2>
          </div>
        </div>
        <div className="proc-grid reveal-stagger" ref={useReveal_s()}>
          {PASOS.map((p) => (
            <div className="proc-step" key={p.n}>
              <div className="proc-num">{p.n}</div>
              <h4>{p.t}</h4>
              <p>{p.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ SERVICIOS CORPORATIVOS (CTA-band) ============ */
function ServiciosCorp() {
  return (
    <section className="serv-corp tight" id="corporativo">
      <div className="container">
        <div className="serv-corp-grid reveal" ref={useReveal_s()}>
          <div className="serv-corp-card primary">
            <div className="scc-icon">{I_s.shield}</div>
            <div className="scc-tag">Servicios corporativos</div>
            <h3>Planes especiales <br/>adaptados a cada empresa</h3>
            <p>Diseñamos un programa de salud ocupacional a medida del rubro, la dotación
              y el riesgo de tu operación. Pricing transparente y reportes mensuales.</p>
            <a href="#contacto" className="btn-link" style={{ color: "#fff" }}>
              Diseñar mi plan <span className="arr">{I_s.arrow(14)}</span>
            </a>
          </div>
          <div className="serv-corp-card">
            <div className="scc-icon alt">{I_s.clipboard}</div>
            <div className="scc-tag">Auditorías</div>
            <h3>Auditorías médicas y de ausentismo</h3>
            <p>Control de licencias, auditoría de aptitud y diagnóstico integral del estado
              de salud ocupacional. Reducí costos ocultos con datos accionables.</p>
            <a href="#contacto" className="btn-link">
              Pedir auditoría <span className="arr">{I_s.arrow(14)}</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SLNosotros = Nosotros;
window.SLStats = Stats;
window.SLServicios = Servicios;
window.SLProceso = Proceso;
window.SLServiciosCorp = ServiciosCorp;