/* global React, SLCommon */
const { useState: useState_b } = React;
const { useReveal: useReveal_b, I: I_b } = SLCommon;

/* ============ TESTIMONIOS + LOGOS ============ */
const TESTIMONIOS = [
  {
    quote: "Salud Laboral nos ordenó toda la salud ocupacional en menos de 90 días. Los reportes mensuales son tan claros que los miramos en directorio.",
    name: "María Fernanda Ruiz",
    role: "Directora de RRHH",
    company: "Logística Sur",
  },
  {
    quote: "Bajamos un 22% el ausentismo en el primer año. Lo más importante: el equipo siente que la empresa lo cuida.",
    name: "Diego Albornoz",
    role: "Gerente de Operaciones",
    company: "Industria Canning",
  },
  {
    quote: "Coordinan los preocupacionales y la libreta sanitaria sin que tengamos que perseguirlos. Eso ya es oro.",
    name: "Lucía Pereyra",
    role: "Coordinadora de Personal",
    company: "Grupo Gastronómico Ezeiza",
  },
];

const LOGOS = [
  "ALDARA", "MERIDIAN", "CANNING CO.", "VERTEX", "NOVA LOG.", "SUMA RH", "GRUPO ATLAS", "PRISMA",
];

function Empresas() {
  const [active, setActive] = useState_b(0);
  return (
    <section id="empresas" className="empresas">
      <div className="container">
        <div className="section-head">
          <div ref={useReveal_b()} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Empresas que confían</div>
            <h2>
              Acompañamos a equipos <span className="italic-serif" style={{ color: "var(--green-deep)" }}>de todos los rubros.</span>
            </h2>
          </div>
          <div ref={useReveal_b()} className="reveal right">
            Industria, logística, gastronomía, salud, retail. Cada plan se adapta al riesgo y la operación
            del cliente — pero la transparencia es siempre la misma.
          </div>
        </div>

        <div className="testimonials reveal" ref={useReveal_b()}>
          <div className="t-main">
            <svg className="t-quote" viewBox="0 0 32 32" width="44" height="44" fill="currentColor">
              <path d="M0 18.4c0 4.4 2.8 7.6 7 7.6 3.6 0 6.6-2.6 6.6-6.4 0-3.6-2.4-6-5.8-6-.8 0-1.6.2-2 .4 1-3.4 4-6.4 7.4-7.6L11.6 4C5 6.4 0 11.6 0 18.4zm18.4 0c0 4.4 2.8 7.6 7 7.6 3.6 0 6.6-2.6 6.6-6.4 0-3.6-2.4-6-5.8-6-.8 0-1.6.2-2 .4 1-3.4 4-6.4 7.4-7.6L30 4c-6.6 2.4-11.6 7.6-11.6 14.4z" />
            </svg>
            <blockquote>{TESTIMONIOS[active].quote}</blockquote>
            <div className="t-author">
              <div className="t-avatar img-ph" aria-hidden="true">
                <span className="label" style={{ fontSize: 9 }}>RETRATO</span>
              </div>
              <div>
                <strong>{TESTIMONIOS[active].name}</strong>
                <span>{TESTIMONIOS[active].role} · {TESTIMONIOS[active].company}</span>
              </div>
            </div>
          </div>
          <div className="t-list">
            {TESTIMONIOS.map((t, i) => (
              <button key={i} className={`t-item ${active === i ? "active" : ""}`} onClick={() => setActive(i)}>
                <div className="t-item-num">0{i + 1}</div>
                <div>
                  <strong>{t.company}</strong>
                  <span>{t.role}</span>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="logo-strip reveal" ref={useReveal_b()}>
          <div className="logo-strip-label">+200 empresas confían</div>
          <div className="logo-strip-list">
            {LOGOS.map((l) => <span key={l}>{l}</span>)}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
const FAQS = [
  {
    q: "¿Cómo es el proceso para sumar a Salud Laboral como proveedor?",
    a: "Empezamos con una reunión de diagnóstico (30 minutos), relevamos puestos y riesgos, y en 5 a 7 días te enviamos una propuesta cerrada con servicios, frecuencia y precios.",
  },
  {
    q: "¿Atienden empresas fuera de Canning y zona sur?",
    a: "Sí. Tenemos consultorio en Canning y operamos in-company en todo AMBA. Para clientes nacionales coordinamos prestadores asociados con nuestros mismos estándares.",
  },
  {
    q: "¿Qué incluye un examen preocupacional?",
    a: "Examen clínico, laboratorio completo, electrocardiograma, radiografía de tórax, audiometría, espirometría y los estudios complementarios que pida el puesto. Todo con informe digital.",
  },
  {
    q: "¿Cuánto tarda la entrega de resultados?",
    a: "Los exámenes preocupacionales se entregan en 48 a 72 horas hábiles. Los periódicos siguen el cronograma acordado con cada empresa.",
  },
  {
    q: "¿Pueden hacer las capacitaciones en nuestra sede?",
    a: "Sí. RCP, primeros auxilios, alimentación saludable y otras capacitaciones se dictan en la sede del cliente o por videollamada, según prefieras.",
  },
  {
    q: "¿Cómo manejan la confidencialidad de los datos médicos?",
    a: "Cumplimos con la Ley 25.326 de Protección de Datos Personales y con secreto médico. Cada empresa accede solo a la información de aptitud — nunca al detalle clínico de su personal.",
  },
];

function FAQ() {
  const [open, setOpen] = useState_b(0);
  return (
    <section id="faq" className="faq">
      <div className="container">
        <div className="section-head">
          <div ref={useReveal_b()} className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>Preguntas frecuentes</div>
            <h2>
              Lo que <span className="italic-serif" style={{ color: "var(--green-deep)" }}>nos preguntan</span> antes de empezar.
            </h2>
          </div>
          <div ref={useReveal_b()} className="reveal right">
            ¿No encontrás tu respuesta? Escribinos por WhatsApp o por mail —
            te respondemos el mismo día hábil.
          </div>
        </div>

        <div className="faq-list" ref={useReveal_b()}>
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`faq-item ${isOpen ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq-icon">{isOpen ? I_b.minus(18) : I_b.plus(18)}</span>
                </button>
                <div className="faq-a-wrap">
                  <div className="faq-a">{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.SLEmpresas = Empresas;
window.SLFAQ = FAQ;