/* Centro de Vacunación InfectoLab — Landing de conversión
 * Layout marketing self-contained dentro del SPA:
 *  - Navbar minimalista propia (sin nav links, solo CTA)
 *  - Hero degradado azul oscuro con visual médica
 *  - Embed YouTube del Dr. Samuel
 *  - Grid de vacunas (desde la API)
 *  - Trust strip azul
 *  - Card de especialista
 *  - CTA final degradado
 *  - Footer minimal navy
 */

/* Las vacunas vienen de la API (src/api.js). Antes había aquí un arreglo VAX
 * con 11 vacunas escritas a mano; el centro de vacunación tiene 14 dadas de alta.
 *
 * La API nombra cada vacuna por su marca comercial (Comirnaty, Gardasil 9,
 * Stamaril) y guarda la enfermedad en `cobertura`. Para un paciente lo legible
 * es la enfermedad, así que ésa va de título y la marca de subtítulo.
 *
 * `descripcion` no se pinta: son textos internos, con erratas y saltos de línea
 * de captura. Lo que sí se muestra es el esquema, la vía y si lleva refuerzo. */

const TOP_ACCENTS = ["#3953A4", "#7EB9C7", "#FDC345"];

const WA_URL = "https://wa.me/526646985015";

function VacunacionPage({ navigate, onOpenLead }) {
  const [vacunas, setVacunas] = React.useState([]);
  const [cargando, setCargando] = React.useState(true);

  React.useEffect(() => {
    let vivo = true;
    window.InfectoAPI.getVacunas()
      .then((lista) => { if (vivo) setVacunas(lista); })
      .catch(() => { /* si falla, la landing se muestra sin la grilla */ })
      .finally(() => { if (vivo) setCargando(false); });
    return () => { vivo = false; };
  }, []);

  return (
    <main data-screen-label="08 Vacunación · Landing" className="vac-landing">

      {/* 2. Hero */}
      <section className="vac-hero">
        <div className="vac-hero-bg" aria-hidden="true">
          <MoleculeSwirl color="rgba(255,255,255,.10)" />
        </div>
        <div className="container vac-hero-inner">
          <div className="vac-hero-copy">
            <span className="vac-tag">
              <span className="dot"></span>
              CENTRO DE VACUNACIÓN · TIJUANA
            </span>
            <h1 className="vac-h1">
              Vacunas para adultos<br/>
              <span className="vac-h1-em">con orientación profesional</span>
            </h1>
            <p className="vac-sub">
              Si nos protegemos, ¡nos protegemos todos! El Dr. Samuel Navarro te
              guía para elegir las vacunas correctas según tu perfil clínico.
            </p>
            <div className="vac-cta-row">
              <button className="btn btn-primary btn-lg" onClick={onOpenLead}>
                Agendar mi cita <Icon name="arrow" size={16}/>
              </button>
              <a className="btn btn-outline-white btn-lg" href={WA_URL} target="_blank" rel="noreferrer">
                <Icon name="whatsapp" size={16}/> WhatsApp directo
              </a>
            </div>
            <div className="vac-hero-trust">
              <span><Icon name="shield" size={15}/> ISO 9001:2015</span>
              <span><Icon name="check" size={15}/> PACAL acreditado</span>
              <span><Icon name="pin" size={15}/> NewCity Medical Plaza</span>
            </div>
          </div>

          <div className="vac-hero-art">
            <div className="vac-hero-card">
              <div className="vac-hero-card-pic">
                <SyringeArt />
                <span className="ribbon">Atención presencial · cita previa</span>
              </div>
              <div className="vac-hero-card-body">
                <div className="vac-hero-card-row">
                  <span className="dot" style={{background:"#FDC345"}}></span>
                  <div>
                    <div className="vac-mini-lbl">Director médico</div>
                    <div className="vac-mini-val">Dr. Samuel Navarro Álvarez, MSP</div>
                  </div>
                </div>
                <div className="vac-hero-card-row">
                  <span className="dot" style={{background:"#7EB9C7"}}></span>
                  <div>
                    <div className="vac-mini-lbl">Esquemas</div>
                    <div className="vac-mini-val">
                      {vacunas.length ? `${vacunas.length} vacunas` : "Vacunas"} · adultos y adolescentes
                    </div>
                  </div>
                </div>
                <div className="vac-hero-card-row">
                  <span className="dot" style={{background:"#fff"}}></span>
                  <div>
                    <div className="vac-mini-lbl">Servicio</div>
                    <div className="vac-mini-val">Toma a domicilio disponible</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. Video Dr. Samuel */}
      <section className="vac-video">
        <div className="container" style={{maxWidth: 960, textAlign:"center"}}>
          <div className="vac-eyebrow">Mensaje del director médico</div>
          <h2 className="vac-h2">¿Por qué es importante vacunarse?</h2>
          <p className="vac-lead" style={{margin:"14px auto 0", maxWidth: 560}}>
            El Dr. Samuel Navarro Álvarez explica la importancia de la vacunación y
            detalla cada una de las vacunas disponibles en InfectoLab.
          </p>
          <div className="vac-video-frame">
            <iframe
              src="https://www.youtube.com/embed/I4onCP8ehi4"
              title="Dr. Samuel Navarro Álvarez — InfectoLab"
              loading="lazy"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
          <div className="vac-video-caption">
            Dr. Samuel Navarro Álvarez, MSP · Médico Internista e Infectólogo · Director Médico de InfectoLab
          </div>
        </div>
      </section>

      {/* 4. ¿Por qué vacunarme? */}
      <section className="vac-why">
        <div className="container vac-why-grid">
          <div className="vac-why-copy">
            <span className="vac-rule"></span>
            <h2 className="vac-h2 vac-h2--up">¿Por qué debería vacunarme?</h2>
            <p className="vac-p">
              Desde los individuos hasta las comunidades, hay muchas buenas razones
              para vacunarse. Si tú, tu familia y tu entorno están totalmente vacunados,
              se reduce la probabilidad de epidemias.
            </p>
            <p className="vac-p">
              Al haber menos personas que enferman gracias a la vacunación, hay menos
              probabilidades de que otros estén expuestos a enfermedades prevenibles.
            </p>
            <button className="btn btn-primary btn-lg" style={{marginTop: 24}} onClick={onOpenLead}>
              Haz una cita para vacunarte <Icon name="arrow" size={16}/>
            </button>
          </div>
          <div className="vac-why-art">
            <div className="vac-orb">
              <Icon name="virus" size={120} />
              <span className="vac-orb-pulse"></span>
              <span className="vac-orb-pulse vac-orb-pulse--2"></span>
            </div>
            <div className="vac-why-stats">
              <div><b>+5</b><span>sucursales</span></div>
              <div><b>{vacunas.length || "—"}</b><span>vacunas</span></div>
              <div><b>365</b><span>días/año</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Vacunas disponibles */}
      <section className="vac-list">
        <div className="container" style={{textAlign:"center"}}>
          <h2 className="vac-h2">Vacunas disponibles en InfectoLab</h2>
          <p className="vac-lead" style={{margin:"14px auto 0", maxWidth: 560}}>
            Consulta disponibilidad y precio con nuestro equipo. Esquemas alineados
            a guías nacionales e internacionales.
          </p>
          <div className="vax-grid">
            {vacunas.map((v, i) => {
              const accent = TOP_ACCENTS[i % TOP_ACCENTS.length];
              const conCobertura = v.cobertura !== "Consultar";
              return (
                <div className="vax-card" key={v.id} style={{borderTopColor: accent}}>
                  <div className="vax-ic" style={{background: `${accent}1A`, color: accent}}>
                    <SyringeMini />
                  </div>
                  {/* la enfermedad de título; si no está capturada, la marca */}
                  <h4 className="vax-name">{conCobertura ? v.cobertura : v.titulo}</h4>
                  <span className="vax-dosis">
                    {v.esquema}{v.refuerzo ? " + refuerzo" : ""}
                  </span>
                  <p className="vax-txt">
                    {conCobertura ? `${v.titulo} · ${v.via}` : v.via}
                  </p>
                </div>
              );
            })}
            {cargando && <p style={{gridColumn:"1/-1", color:"var(--ink-500)"}}>Cargando vacunas…</p>}
          </div>
        </div>
      </section>

      {/* 6. Trust strip */}
      <section className="vac-trust">
        <div className="container vac-trust-grid">
          <div><Icon name="shield" size={26}/><div><b>ISO 9001:2015</b><span>Certificados</span></div></div>
          <div><Icon name="check" size={26}/><div><b>PACAL</b><span>Acreditado</span></div></div>
          <div><Icon name="pin" size={26}/><div><b>+5 sucursales</b><span>en Tijuana</span></div></div>
          <div><Icon name="stethoscope" size={26}/><div><b>Dr. Samuel Navarro</b><span>Director Médico</span></div></div>
        </div>
      </section>

      {/* 7. Sobre el especialista */}
      <section className="vac-doc">
        <div className="container" style={{maxWidth: 720, textAlign:"center"}}>
          <div className="vac-doc-avatar">SN</div>
          <h3 className="vac-doc-name">Dr. Samuel Navarro Álvarez, MSP</h3>
          <div className="vac-doc-spec">Médico Internista e Infectólogo · Director Médico de InfectoLab</div>
          <p className="vac-doc-bio">
            Especialista en enfermedades infecciosas con Maestría en Salud Pública (UABC)
            y Sub Especialidad en Infectología (UNAM). Guía a cada paciente en la
            selección personalizada de vacunas según su historial de salud y
            necesidades individuales.
          </p>
          <div className="vac-doc-badges">
            <span>Maestría SP · UABC</span>
            <span>Sub Esp. Infectología · UNAM</span>
            <span>Primer Lugar Nacional SINAVE 2009</span>
          </div>
        </div>
      </section>

      {/* 8. CTA final */}
      <section className="vac-final">
        <div className="vac-final-bg" aria-hidden="true">
          <MoleculeSwirl color="rgba(255,255,255,.08)" />
        </div>
        <div className="container" style={{textAlign:"center", position:"relative", zIndex:1}}>
          <h2 className="vac-h2" style={{color:"#fff", maxWidth: 18+"ch", margin:"0 auto"}}>
            Protege tu salud hoy.
          </h2>
          <p className="vac-lead" style={{margin:"18px auto 0", maxWidth: 540, color:"rgba(255,255,255,.78)"}}>
            Agenda tu cita en el Centro de Vacunación InfectoLab. Atención personalizada
            con el equipo del Dr. Samuel Navarro.
          </p>
          <div className="vac-cta-row" style={{justifyContent:"center", marginTop: 28}}>
            <button className="btn btn-primary btn-lg" onClick={onOpenLead}>
              Agendar mi cita <Icon name="arrow" size={16}/>
            </button>
            <a className="btn btn-outline-white btn-lg" href={WA_URL} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={16}/> Escribir por WhatsApp
            </a>
          </div>
          <div className="vac-final-note">
            <Icon name="pin" size={13}/> NewCity Medical Plaza · Paseo del Centenario · Tijuana, BC
          </div>
        </div>
      </section>

      {/* 9. Footer global del SPA toma el relevo */}
    </main>
  );
}

/* ── Inline illustrative SVGs (clean medical style) ── */
function SyringeArt() {
  return (
    <svg viewBox="0 0 320 220" className="vac-syringe" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id="vac-grad" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%"  stopColor="#FDC345"/>
          <stop offset="100%" stopColor="#F4A742"/>
        </linearGradient>
        <linearGradient id="vac-glass" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="rgba(255,255,255,.95)"/>
          <stop offset="100%" stopColor="rgba(255,255,255,.55)"/>
        </linearGradient>
      </defs>
      {/* drop streams */}
      <g opacity=".55">
        <circle cx="252" cy="62" r="4" fill="#7EB9C7"/>
        <circle cx="268" cy="44" r="2.5" fill="#7EB9C7"/>
        <circle cx="276" cy="76" r="3" fill="#7EB9C7"/>
      </g>
      {/* syringe diagonal */}
      <g transform="translate(28 36) rotate(-14 100 60)">
        <rect x="6" y="46" width="180" height="32" rx="6" fill="url(#vac-glass)" stroke="rgba(255,255,255,.8)" strokeWidth="1.5"/>
        {/* liquid */}
        <rect x="14" y="50" width="118" height="24" rx="3" fill="url(#vac-grad)"/>
        {/* scale ticks */}
        <g stroke="rgba(48,71,127,.75)" strokeWidth="1.4">
          <line x1="30"  y1="50" x2="30"  y2="60"/>
          <line x1="56"  y1="50" x2="56"  y2="58"/>
          <line x1="82"  y1="50" x2="82"  y2="60"/>
          <line x1="108" y1="50" x2="108" y2="58"/>
          <line x1="134" y1="50" x2="134" y2="60"/>
        </g>
        {/* plunger */}
        <rect x="180" y="40" width="26" height="44" rx="3" fill="#FFFFFF"/>
        <rect x="204" y="50" width="40" height="24" rx="3" fill="#30477F"/>
        <rect x="244" y="56" width="14" height="12" rx="2" fill="#30477F"/>
        {/* needle */}
        <rect x="-26" y="58" width="32" height="8" rx="2" fill="#30477F"/>
        <rect x="-78" y="60" width="56" height="4" rx="1" fill="rgba(255,255,255,.9)"/>
      </g>
      {/* shield badge */}
      <g transform="translate(212 138)">
        <circle cx="0" cy="0" r="38" fill="rgba(255,255,255,.10)" stroke="rgba(255,255,255,.45)" strokeWidth="1.2"/>
        <path d="M 0 -20 L 18 -12 L 18 6 C 18 18, 8 24, 0 26 C -8 24, -18 18, -18 6 L -18 -12 Z"
              fill="#FDC345"/>
        <path d="M -8 0 L -2 6 L 10 -8" fill="none" stroke="#30477F" strokeWidth="3.4" strokeLinecap="round" strokeLinejoin="round"/>
      </g>
    </svg>
  );
}

function SyringeMini() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M14 4l6 6"/>
      <path d="M16 2l6 6"/>
      <path d="M11 7l6 6"/>
      <path d="M14 10l-9 9-3 1 1-3 9-9"/>
      <path d="M9 12l3 3"/>
    </svg>
  );
}

Object.assign(window, { VacunacionPage });