/* Acreditaciones, Trabaja con Nosotros */

function Acreditaciones() {
  const items = [
    { t: "Habilitación municipal", d: "Habilitación vigente del Municipio de Esteban Echeverría para residencias geriátricas y centro de día." },
    { t: "Acreditación PROSANITAS", d: "Adheridos al sistema de evaluación de calidad para servicios de salud, con auditoría externa periódica." },
    { t: "Comité interno de calidad", d: "Reuniones mensuales de revisión de procesos clínicos, asistenciales y de experiencia familiar." },
    { t: "Capacitación continua", d: "Programa permanente de formación de equipos profesionales y de cuidado directo." },
  ];
  return (
    <section id="calidad" data-screen-label="14 Acreditaciones y Calidad" style={{ background: "var(--c-ink)", color: "#fff", overflow: "hidden", position: "relative" }}>
      <div className="wrap">
        <div className="section-head reveal" style={{ marginBottom: 60 }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--c-primary-60)" }}>Calidad y Acreditaciones</span>
            <h2 className="display" style={{ color: "#fff" }}>Comprometidos con la <span className="it" style={{ color: "var(--c-primary-20)" }}>mejora continua.</span></h2>
          </div>
          <p className="lede" style={{ color: "rgba(255,255,255,.7)" }}>
            Trabajamos bajo estándares verificables de calidad asistencial. Auditamos procesos, escuchamos a
            las familias y revisamos cada decisión en comité interdisciplinario.
          </p>
        </div>

        <div className="reveal" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: "clamp(28px, 4vw, 64px)", alignItems: "start" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, borderTop: "1px solid rgba(255,255,255,.18)" }}>
            {items.map((v, i) => (
              <div key={i} style={{
                padding: "28px 24px",
                borderRight: i % 2 === 0 ? "1px solid rgba(255,255,255,.18)" : "none",
                borderBottom: i < 2 ? "1px solid rgba(255,255,255,.18)" : "none",
                minHeight: 200,
              }}>
                <div style={{ fontSize: 12, color: "var(--c-primary-60)", fontWeight: 700, letterSpacing: ".14em", marginBottom: 16 }}>0{i+1}</div>
                <h3 className="display" style={{ fontSize: 24, color: "#fff", margin: "0 0 10px" }}>{v.t}</h3>
                <p style={{ fontSize: 14, color: "rgba(255,255,255,.65)", margin: 0, lineHeight: 1.55 }}>{v.d}</p>
              </div>
            ))}
          </div>

          <div style={{ background: "rgba(255,255,255,.05)", border: "1px solid rgba(255,255,255,.15)", borderRadius: 18, padding: "clamp(24px, 3vw, 36px)" }}>
            <div className="eyebrow" style={{ color: "var(--c-primary-60)" }}>Avalado por</div>
            <h3 className="display" style={{ fontSize: 28, color: "#fff", margin: "10px 0 24px", lineHeight: 1.15 }}>Adherentes y certificaciones</h3>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
              <div style={{ background: "#fff", borderRadius: 12, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 90 }}>
                <img src="assets/prosanitasLogo.png" alt="PROSANITAS" style={{ maxHeight: 56, maxWidth: "100%", objectFit: "contain" }} />
              </div>
              <div style={{ background: "#fff", borderRadius: 12, padding: 16, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 90, fontFamily: "var(--f-display)", fontSize: 14, color: "var(--c-text-soft)", textAlign: "center", fontStyle: "italic" }}>
                Habilitación<br/>Municipal vigente
              </div>
              <div style={{ gridColumn: "span 2", background: "rgba(255,255,255,.04)", borderRadius: 12, padding: 18, fontSize: 13.5, color: "rgba(255,255,255,.75)", lineHeight: 1.55 }}>
                Sumamos auditoría externa, encuesta de satisfacción a familias y reuniones interdisciplinarias semanales como pilares de mejora continua.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Trabajo() {
  const beneficios = [
    "Equipo profesional estable y formación continua",
    "Reuniones interdisciplinarias semanales",
    "Espacios físicos confortables y bien equipados",
    "Salario en blanco, todos los beneficios de ley",
  ];
  const buscamos = [
    { rol: "Enfermería", desc: "Profesionales de enfermería para turnos rotativos. Especialidad en geriatría valorada." },
    { rol: "Cuidadores / Asistentes", desc: "Cuidado directo a residentes con vocación, paciencia y formación específica." },
    { rol: "Equipo de rehabilitación", desc: "Kinesiólogos, T.O. y fonoaudiólogos con disponibilidad part-time o full-time." },
    { rol: "Cocina y operaciones", desc: "Posiciones en cocina, lavadero, mantenimiento y seguridad." },
  ];
  const [form, setForm] = useState({ nombre: "", email: "", tel: "", area: "Enfermería", msg: "" });
  const [sent, setSent] = useState(false);

  return (
    <section id="trabajo" data-screen-label="17 Trabaja con nosotros" style={{ background: "var(--c-bg)", position: "relative", overflow: "hidden" }}>
      <img className="floral" src="assets/png/Flores-09.png" alt="" style={{ top: -40, right: -60, width: 380, opacity: .1 }} />
      <div className="wrap" style={{ position: "relative" }}>
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Trabajá con nosotros</span>
            <h2 className="display">Sumate al <span className="it">equipo</span> Solariega.</h2>
          </div>
          <p className="lede">
            Buscamos personas con vocación de servicio, mirada humana y compromiso profesional. Si querés
            formar parte de un proyecto institucional sólido, dejanos tus datos.
          </p>
        </div>

        <div className="reveal col-2" style={{ alignItems: "stretch", gap: "clamp(28px, 4vw, 56px)" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div style={{ background: "var(--c-paper)", border: "1px solid var(--c-line)", borderRadius: 18, padding: "clamp(24px, 3vw, 36px)" }}>
              <h3 className="display" style={{ fontSize: 26, margin: "0 0 18px", color: "var(--c-ink)" }}>Áreas que solemos buscar</h3>
              <div style={{ display: "grid", gap: 0 }}>
                {buscamos.map((b, i) => (
                  <div key={i} style={{ padding: "16px 0", borderTop: "1px solid var(--c-line-soft)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "baseline" }}>
                    <span style={{ fontFamily: "var(--f-display)", fontStyle: "italic", color: "var(--c-primary)", fontSize: 18, minWidth: 28 }}>·{i+1}</span>
                    <div>
                      <div className="display" style={{ fontSize: 19, color: "var(--c-ink)" }}>{b.rol}</div>
                      <div style={{ fontSize: 14, color: "var(--c-text-soft)", marginTop: 4, lineHeight: 1.5 }}>{b.desc}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: "var(--c-navy)", color: "#fff", borderRadius: 18, padding: "clamp(24px, 3vw, 36px)" }}>
              <h3 className="display" style={{ fontSize: 22, margin: "0 0 16px" }}>Lo que ofrecemos</h3>
              <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                {beneficios.map((b, i) => (
                  <li key={i} style={{ fontSize: 14, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,.18)", display: "flex", gap: 10, alignItems: "flex-start" }}>
                    <svg width="14" height="14" viewBox="0 0 14 14" style={{ marginTop: 5, flexShrink: 0 }}><path d="M2 7l3 3 7-7" stroke="var(--c-primary-60)" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
            style={{ background: "var(--c-paper)", border: "1px solid var(--c-line)", borderRadius: 18, padding: "clamp(28px, 4vw, 44px)", display: "flex", flexDirection: "column" }}>
            {sent ? (
              <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", minHeight: 460 }}>
                <div className="display" style={{ fontSize: 36, color: "var(--c-primary)" }}>Gracias.</div>
                <p style={{ fontSize: 17, color: "var(--c-text)", maxWidth: 420, lineHeight: 1.6 }}>
                  Recibimos tu postulación. La revisaremos y nos pondremos en contacto si tu perfil se ajusta a una búsqueda activa.
                </p>
                <button type="button" onClick={() => setSent(false)} className="btn btn-line" style={{ alignSelf: "flex-start", marginTop: 16 }}>Postular nuevamente</button>
              </div>
            ) : (
              <>
                <div className="eyebrow mark" style={{ marginBottom: 8 }}>Postulación</div>
                <h3 className="display" style={{ fontSize: 28, margin: "0 0 24px", color: "var(--c-ink)" }}>Dejanos tus datos</h3>
                <div style={{ display: "grid", gap: 18 }}>
                  <Field label="Nombre y apellido" v={form.nombre} on={(v) => setForm({...form, nombre: v})} />
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                    <Field label="Email" type="email" v={form.email} on={(v) => setForm({...form, email: v})} />
                    <Field label="Teléfono" v={form.tel} on={(v) => setForm({...form, tel: v})} />
                  </div>
                  <div>
                    <label style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--c-text-soft)" }}>Área de interés</label>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 10 }}>
                      {["Enfermería", "Cuidadores", "Rehabilitación", "Operaciones", "Otro"].map((m, i) => (
                        <button type="button" key={i} onClick={() => setForm({...form, area: m})} style={{
                          fontSize: 13, padding: "8px 14px", borderRadius: 999,
                          border: `1px solid ${form.area === m ? "var(--c-navy)" : "var(--c-line)"}`,
                          background: form.area === m ? "var(--c-navy)" : "transparent",
                          color: form.area === m ? "#fff" : "var(--c-text)",
                          transition: "all .15s ease",
                        }}>{m}</button>
                      ))}
                    </div>
                  </div>
                  <Field label="Contanos brevemente sobre vos" textarea v={form.msg} on={(v) => setForm({...form, msg: v})} />
                  <div style={{ display: "flex", gap: 12, alignItems: "center", flexWrap: "wrap" }}>
                    <button type="submit" className="btn btn-primary">Enviar postulación →</button>
                    <span style={{ fontSize: 12.5, color: "var(--c-text-soft)" }}>O escribinos a <strong style={{ color: "var(--c-ink)" }}>rrhh@solariega.com.ar</strong></span>
                  </div>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Acreditaciones, Trabajo });