/* global React, SLCommon */
const { useState: useState_c } = React;
const { useReveal: useReveal_c, I: I_c } = SLCommon;

/* ============ CONTACTO ============ */
function Contacto() {
  const [form, setForm] = useState_c({
    company: "", name: "", role: "", email: "", phone: "",
    employees: "", services: [], message: "",
  });
  const [submitted, setSubmitted] = useState_c(false);

  const update = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const toggleService = (s) => {
    setForm((f) => ({
      ...f,
      services: f.services.includes(s) ? f.services.filter((x) => x !== s) : [...f.services, s],
    }));
  };

  const submit = (e) => { e.preventDefault(); setSubmitted(true); };

  const services = [
    "Exámenes preocupacionales", "Exámenes periódicos", "Libreta sanitaria",
    "Control de ausentismo", "Seguridad e higiene", "Test psicotécnico",
    "Auditorías nutricionales", "Campañas de vacunación",
    "Capacitación RCP / primeros auxilios", "Programa anti-tabaquismo",
  ];

  return (
    <section id="contacto" className="contacto">
      <div className="container">
        <div className="contacto-head reveal" ref={useReveal_c()}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>Solicitar cotización</div>
          <h2>Diseñemos un plan <span className="brand-accent">a medida</span> de tu empresa.</h2>
          <p className="lead" style={{ marginTop: 20 }}>
            Contanos sobre tu equipo y los servicios que te interesan. Te respondemos
            dentro de las 24 horas hábiles con una propuesta inicial.
          </p>
        </div>

        <div className="contacto-grid">
          <div className="contacto-left">
            <div className="contacto-card reveal" ref={useReveal_c()}>
              <h4 className="cc-title">Datos de contacto</h4>
              <div className="cc-list">
                <a className="cc-item" href="mailto:contact.saludlaboral@gmail.com">
                  <span className="cii-icon">{I_c.mail}</span>
                  <div>
                    <em>Email</em>
                    <strong>contact.saludlaboral@gmail.com</strong>
                  </div>
                </a>
                <a className="cc-item" href="https://wa.me/541100000000" target="_blank" rel="noreferrer">
                  <span className="cii-icon">{I_c.whatsapp}</span>
                  <div>
                    <em>WhatsApp</em>
                    <strong>Respuesta inmediata</strong>
                  </div>
                </a>
                <div className="cc-item">
                  <span className="cii-icon">{I_c.pin}</span>
                  <div>
                    <em>Consultorio</em>
                    <strong>Emilio Mitre 1974, Canning</strong>
                  </div>
                </div>
                <div className="cc-item">
                  <span className="cii-icon">{I_c.clock}</span>
                  <div>
                    <em>Horario de atención</em>
                    <strong>Lunes a Viernes · 8:00 – 18:00 h</strong>
                  </div>
                </div>
              </div>
            </div>

            <div className="contacto-cta-card reveal" ref={useReveal_c()}>
              <h4>Atención corporativa</h4>
              <p>Para empresas con +50 colaboradores ofrecemos planes con coordinador asignado y reportes mensuales.</p>
              <a href="#corporativo" className="btn-link" style={{ color: "#fff" }}>
                Ver servicios corporativos <span className="arr">{I_c.arrow(14)}</span>
              </a>
            </div>
          </div>

          <div className="contacto-right reveal" ref={useReveal_c()}>
            {!submitted ? (
              <form className="contacto-form" onSubmit={submit}>
                <div className="form-block">
                  <div className="form-block-head">
                    <span className="fb-num">01</span>
                    <h4>Sobre tu empresa</h4>
                  </div>
                  <div className="form-row">
                    <label>
                      <span>Empresa <em>*</em></span>
                      <input type="text" required value={form.company} onChange={(e) => update("company", e.target.value)} placeholder="Razón social o nombre de fantasía" />
                    </label>
                  </div>
                  <div className="form-row two">
                    <label>
                      <span>Tu nombre <em>*</em></span>
                      <input type="text" required value={form.name} onChange={(e) => update("name", e.target.value)} placeholder="Nombre y apellido" />
                    </label>
                    <label>
                      <span>Cargo</span>
                      <input type="text" value={form.role} onChange={(e) => update("role", e.target.value)} placeholder="Ej. Gerente de RRHH" />
                    </label>
                  </div>
                  <div className="form-row two">
                    <label>
                      <span>Email corporativo <em>*</em></span>
                      <input type="email" required value={form.email} onChange={(e) => update("email", e.target.value)} placeholder="vos@empresa.com" />
                    </label>
                    <label>
                      <span>Teléfono</span>
                      <input type="tel" value={form.phone} onChange={(e) => update("phone", e.target.value)} placeholder="+54 11 ..." />
                    </label>
                  </div>
                  <div className="form-row">
                    <label>
                      <span>Cantidad de colaboradores <em>*</em></span>
                      <select required value={form.employees} onChange={(e) => update("employees", e.target.value)}>
                        <option value="">Seleccionar rango</option>
                        <option>1 a 10</option><option>11 a 50</option>
                        <option>51 a 200</option><option>201 a 500</option><option>+500</option>
                      </select>
                    </label>
                  </div>
                </div>

                <div className="form-block">
                  <div className="form-block-head">
                    <span className="fb-num">02</span>
                    <h4>Servicios de interés</h4>
                  </div>
                  <div className="form-chips">
                    {services.map((s) => (
                      <button type="button" key={s}
                        className={`chip ${form.services.includes(s) ? "active" : ""}`}
                        onClick={() => toggleService(s)}>
                        {form.services.includes(s) && <span className="chip-check">{I_c.check(12)}</span>}
                        {s}
                      </button>
                    ))}
                  </div>
                </div>

                <div className="form-block">
                  <div className="form-block-head">
                    <span className="fb-num">03</span>
                    <h4>Contanos un poco más</h4>
                  </div>
                  <div className="form-row">
                    <label>
                      <textarea rows="4" value={form.message}
                        onChange={(e) => update("message", e.target.value)}
                        placeholder="Industria, sede(s), urgencia, contexto..." />
                    </label>
                  </div>
                </div>

                <div className="form-actions">
                  <small>Te respondemos en 24 hs hábiles. No compartimos tus datos.</small>
                  <button type="submit" className="btn btn-primary">
                    Enviar solicitud <span className="arr">{I_c.arrow(14)}</span>
                  </button>
                </div>
              </form>
            ) : (
              <div className="contacto-success">
                <div className="success-icon">{I_c.check(36)}</div>
                <h3>Recibimos tu solicitud</h3>
                <p>Gracias por contactarte con Salud Laboral. Te respondemos dentro de las 24 horas hábiles a <strong>{form.email}</strong>.</p>
                <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setForm({ company: "", name: "", role: "", email: "", phone: "", employees: "", services: [], message: "" }); }}>
                  Enviar otra consulta
                </button>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="footer-logo">
              <img src="assets/logo-ico.png" alt="" />
              <span>Salud Laboral</span>
            </div>
            <p>Compromiso y transparencia en salud ocupacional. Acompañamos a empresas con un servicio integral basado en la prevención.</p>
          </div>
          <div>
            <h4>Sitio</h4>
            <ul>
              <li><a href="#nosotros">Nosotros</a></li>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#corporativo">Corporativo</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Servicios</h4>
            <ul>
              <li><a href="#servicios">Exámenes médicos</a></li>
              <li><a href="#servicios">Prevención & bienestar</a></li>
              <li><a href="#servicios">Capacitación</a></li>
              <li><a href="#corporativo">Auditorías</a></li>
              <li><a href="#corporativo">Planes corporativos</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li>Emilio Mitre 1974, Canning</li>
              <li><a href="mailto:contact.saludlaboral@gmail.com">contact.saludlaboral@gmail.com</a></li>
              <li>L–V · 8:00 a 18:00 h</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} Salud Laboral. Todos los derechos reservados.</span>
          <span>Medicina ocupacional · Argentina</span>
        </div>
      </div>
    </footer>
  );
}

window.SLContacto = Contacto;
window.SLFooter = Footer;