/* Sucursales — cobertura Tijuana */

const WA = "https://wa.me/526646985015";
const SUC_EMAIL = "atencionaclientes@infectolab.mx";

const SUCURSALES = [
  {
    id: "matriz",
    nombre: "Sucursal Matriz",
    zona: "Col. Empleados Federales",
    badge: null,
    direccion: "Av. Padilla No. 8818, Col. Empleados Federales, Tijuana, B.C., C.P. 22310",
    telefonos: ["+52.663.127.6052", "+52.664.974.8558", "+52.664.974.8538"],
    horario: ["Lunes a Sábado · 7:00 AM – 8:00 PM", "Domingo · 7:00 AM – 3:00 PM"],
    embed: "https://maps.google.com/maps?q=Laboratorio+InfectoLab+Av.+Padilla+8818+Tijuana+BC&output=embed&hl=es",
    link: "https://maps.google.com/?q=Av.+Padilla+8818+Col.+Empleados+Federales+Tijuana+BC",
  },
  {
    id: "express",
    nombre: "Express Plaza",
    zona: "Zona Río Tijuana",
    badge: null,
    direccion: "Blvd. Padre Kino 10857, Zona Urbana Río Tijuana, Tijuana, B.C. 22010",
    telefonos: ["+52.664.906.3415"],
    horario: ["Lunes a Sábado · 7:00 AM – 8:00 PM", "Domingo · Cerrado"],
    embed: "https://maps.google.com/maps?q=Laboratorio+InfectoLab+Blvd+Padre+Kino+10857+Tijuana+BC&output=embed&hl=es",
    link: "https://maps.google.com/?q=Blvd+Padre+Kino+10857+Zona+Rio+Tijuana",
  },
  {
    id: "newcity",
    nombre: "NewCity Medical Plaza",
    zona: "Zona Río Tijuana",
    badge: { type: "vacuna", label: "Centro de Vacunación", icon: "drop" },
    direccion: "Paseo del Centenario #9580, int. 404, Zona Río, Tijuana, B.C. C.P. 22010",
    telefonos: ["+52.664.200.0769", "+52.664.200.0770"],
    horario: ["Lunes a Viernes · 7:00 AM – 8:00 PM", "Sábado · 7:00 AM – 3:00 PM", "Domingo · Cerrado"],
    embed: "https://maps.google.com/maps?q=InfectoLab+NewCity+Medical+Plaza+Paseo+Centenario+9580+Tijuana&output=embed&hl=es",
    link: "https://maps.google.com/?q=Paseo+del+Centenario+9580+int+404+Tijuana+BC",
  },
  {
    id: "florence",
    nombre: "Centro Médico Florence",
    zona: "Col. Madero (Cacho)",
    badge: { type: "h24", label: "Servicio 24 / 7", icon: "clock" },
    direccion: "Av. Gral. Ferreira 2224, Col. Madero (Cacho), Tijuana, B.C. 22040",
    telefonos: ["+52.664.684.8043 Ext. 1012"],
    horario: ["Servicio 24 horas", "Los 7 días de la semana"],
    embed: "https://maps.google.com/maps?q=Hospital+Florence+Av+Ferreira+2224+Col+Madero+Tijuana&output=embed&hl=es",
    link: "https://maps.google.com/?q=Av+Gral+Ferreira+2224+Col+Madero+Tijuana+BC",
  },
  {
    id: "citypoint",
    nombre: "City Point",
    zona: "Río Tijuana 3a. Etapa",
    badge: null,
    direccion: "Río Tijuana 3a. Etapa, 22226 Tijuana, B.C.",
    telefonos: ["+52.664.974.7110"],
    horario: ["Lunes a Sábado · 7:00 AM – 3:00 PM", "Domingo · Cerrado"],
    embed: "https://maps.google.com/maps?q=InfectoLab+City+Point+Rio+Tijuana+3a+Etapa+22226&output=embed&hl=es",
    link: "https://maps.google.com/?q=Rio+Tijuana+3a+Etapa+22226+Tijuana+BC",
  },
  {
    id: "int",
    nombre: "Hospital INT",
    zona: "Zona Urbana Río Tijuana",
    badge: null,
    direccion: "Misión de San Ignacio 4428, Zona Urbana Río Tijuana, 22010 Tijuana, B.C.",
    telefonos: ["+52 664 681 2545"],
    horario: ["Lunes a Sábado · 7:00 AM – 3:00 PM", "Domingo · Cerrado"],
    embed: "https://maps.google.com/maps?q=InfectoLab+Hospital+INT+Mision+San+Ignacio+4428+Tijuana&output=embed&hl=es",
    link: "https://maps.google.com/?q=Mision+de+San+Ignacio+4428+Zona+Rio+Tijuana+BC",
  },
];

const METRO = [
  { zona: "Empleados Federales", suc: "Sucursal Matriz", badge: null },
  { zona: "Zona Río Tijuana", suc: "Express Plaza", badge: null },
  { zona: "Zona Río · NewCity", suc: "NewCity Medical Plaza", badge: { type: "vacuna", label: "Vacunación" } },
  { zona: "Col. Madero / Cacho", suc: "Centro Médico Florence", badge: { type: "h24", label: "24 / 7" } },
  { zona: "Río Tijuana 3a. Etapa", suc: "City Point", badge: null },
  { zona: "Zona Río · INT", suc: "Hospital INT", badge: null },
];

function SucBranchCard({ s }) {
  return (
    <article className="suc-card">
      <header className="suc-card-head">
        <h3>{s.nombre}</h3>
        <span className="suc-zona-pill">{s.zona}</span>
      </header>

      <div className="suc-map">
        <iframe
          src={s.embed}
          title={"Mapa " + s.nombre}
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        ></iframe>
      </div>

      <div className="suc-card-body">
        {s.badge && (
          <span className={"suc-badge suc-badge--" + s.badge.type}>
            <Icon name={s.badge.icon} size={14} /> {s.badge.label}
          </span>
        )}

        <ul className="suc-info">
          <li>
            <Icon name="pin" size={15} className="suc-i-pin" />
            <span>{s.direccion}</span>
          </li>
          <li>
            <Icon name="phone" size={15} className="suc-i-phone" />
            <span>{s.telefonos.map((t, i) => (
              <React.Fragment key={t}>
                <a href={"tel:" + t.replace(/[^\d+]/g, "")}>{t}</a>
                {i < s.telefonos.length - 1 && <span className="suc-sep"> · </span>}
              </React.Fragment>
            ))}</span>
          </li>
          <li>
            <Icon name="mail" size={15} className="suc-i-mail" />
            <a href={"mailto:" + SUC_EMAIL}>{SUC_EMAIL}</a>
          </li>
          <li>
            <Icon name="clock" size={15} className="suc-i-clock" />
            <span>{s.horario.map((h, i) => (
              <React.Fragment key={i}>{h}{i < s.horario.length - 1 && <br />}</React.Fragment>
            ))}</span>
          </li>
        </ul>

        <div className="suc-card-actions">
          <a className="btn btn-primary" href={s.link} target="_blank" rel="noreferrer" style={{justifyContent:"center"}}>
            Ver en Google Maps <Icon name="arrow" size={15} />
          </a>
          <a className="btn btn-ghost" href={WA} target="_blank" rel="noreferrer" style={{justifyContent:"center"}}>
            <Icon name="whatsapp" size={15} /> WhatsApp directo
          </a>
        </div>
      </div>
    </article>
  );
}

function SucProximaCard({ nombre, zona, progreso }) {
  return (
    <div className="suc-prox-card">
      <span className="suc-badge suc-badge--prox"><Icon name="pulse" size={13} /> Próximamente 2026</span>
      <h4>{nombre}</h4>
      <p className="suc-prox-zona">{zona}</p>
      <div className="suc-prox-divider"></div>
      <div className="suc-prox-label">Progreso de construcción</div>
      <div className="suc-progress">
        <div className="suc-progress-fill" style={{ width: progreso + "%" }}>
          <span>{progreso}%</span>
        </div>
      </div>
    </div>
  );
}

function SucursalesPage({ navigate, onOpenLead }) {
  return (
    <main data-screen-label="11 Sucursales">
      {/* ── HERO ── */}
      <section className="suc-hero" data-screen-label="Sucursales · Hero">
        <MoleculeSwirl color="rgba(255,255,255,.5)" />
        <div className="container suc-hero-inner">
          <span className="suc-eyebrow-pill">
            <Icon name="pin" size={13} /> Tijuana, B.C. · 6 sucursales activas
          </span>
          <h1 className="text-balance">
            Donde estés en Tijuana,<br /><em className="serif">InfectoLab está cerca.</em>
          </h1>
          <p className="suc-hero-sub text-pretty">
            Seis sucursales estratégicas, una disponible las 24 horas. Encuentra la más
            cercana y agenda tu prueba hoy mismo.
          </p>
          <div className="suc-hero-ctas">
            <a className="btn btn-primary btn-lg" href={WA} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={18} /> WhatsApp · Agendar cita
            </a>
            <button className="btn btn-light btn-lg" onClick={() => {
              const el = document.getElementById("suc-grid");
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: "smooth" });
            }}>
              Ver todas las sucursales <Icon name="arrowDown" size={16} />
            </button>
          </div>
        </div>
      </section>

      {/* ── METRO LINE ── */}
      <section className="suc-metro-section">
        <div className="container">
          <div className="suc-metro-title">Zonas con cobertura InfectoLab</div>
          <div className="suc-metro">
            <div className="suc-metro-track">
              {METRO.map((m, i) => (
                <div className="suc-node" key={i}>
                  <div className="suc-node-dot"><Icon name="pin" size={20} /></div>
                  <div className="suc-node-zona">{m.zona}</div>
                  <div className="suc-node-suc">{m.suc}</div>
                  {m.badge && (
                    <span className={"suc-badge suc-badge--" + m.badge.type + " suc-badge--mini"}>{m.badge.label}</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── MÉTRICAS ── */}
      <section className="suc-stats">
        <div className="container suc-stats-row">
          {[
            ["6", "Sucursales activas"],
            ["1", "Disponible 24/7"],
            ["2", "Abriendo en 2026"],
            ["15+", "Años cuidando Tijuana"],
          ].map(([n, l]) => (
            <div className="suc-stat" key={l}>
              <b>{n}</b>
              <span>{l}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ── SUCURSALES ACTIVAS ── */}
      <section className="section" style={{ background: "var(--ink-50)" }} id="suc-grid">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 48px" }}>
            <div className="eyebrow" style={{ justifyContent: "center" }}>Nuestra red</div>
            <h2 className="text-balance" style={{ marginTop: 14 }}>Nuestras sucursales</h2>
            <p className="lead text-pretty" style={{ marginTop: 14, marginInline: "auto" }}>
              Toca cualquier sucursal para ver su ubicación exacta, horarios y contacto directo.
            </p>
          </div>
          <div className="suc-grid">
            {SUCURSALES.map(s => <SucBranchCard key={s.id} s={s} />)}
          </div>
        </div>
      </section>

      {/* ── DOMICILIO ── */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="suc-domicilio">
            <div className="suc-domicilio-ic"><Icon name="home" size={40} /></div>
            <div>
              <h3>¿No puedes venir? Vamos nosotros.</h3>
              <p>
                Nuestro equipo especializado realiza toma de muestras a domicilio en toda
                Tijuana. Agenda por WhatsApp con anticipación y nosotros llegamos a ti.
              </p>
            </div>
            <a className="btn btn-light btn-lg suc-domicilio-cta" href={WA} target="_blank" rel="noreferrer">
              Solicitar toma a domicilio <Icon name="arrow" size={16} />
            </a>
          </div>
        </div>
      </section>

      {/* ── PRÓXIMAMENTE ── */}
      <section className="suc-prox">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto 44px" }}>
            <div className="suc-prox-eyebrow">En construcción · 2026</div>
            <h2 className="text-balance" style={{ color: "#fff", marginTop: 14 }}>InfectoLab sigue creciendo</h2>
            <p className="text-pretty" style={{ color: "rgba(255,255,255,.65)", marginTop: 14 }}>
              Dos nuevas sucursales llegan a Tijuana este año para acercar el diagnóstico a más colonias.
            </p>
          </div>
          <div className="suc-prox-grid">
            <SucProximaCard nombre="The Park · Agua Caliente" zona="Agua Caliente, Tijuana, B.C." progreso={85} />
            <SucProximaCard nombre="Paragon Tower · Playas de Tijuana" zona="Playas de Tijuana, B.C." progreso={83} />
          </div>
        </div>
      </section>

      {/* ── CTA FINAL ── */}
      <section className="section">
        <div className="container" style={{ maxWidth: 640, textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center" }}>¿Aún tienes dudas?</div>
          <h2 className="text-balance" style={{ marginTop: 14 }}>
            ¿No sabes cuál sucursal visitar?
          </h2>
          <p className="lead text-pretty" style={{ marginTop: 14, marginInline: "auto" }}>
            Escríbenos y te ayudamos a encontrar la más cercana o a agendar la prueba
            correcta según tus síntomas.
          </p>
          <div style={{ display: "flex", justifyContent: "center", marginTop: 28 }}>
            <a className="btn btn-primary btn-lg" href={WA} target="_blank" rel="noreferrer">
              <Icon name="whatsapp" size={18} /> Escribir por WhatsApp
            </a>
          </div>
          <p className="muted" style={{ marginTop: 16, fontSize: 13 }}>
            Tiempo de respuesta: menos de 10 minutos en horario de atención.
          </p>
        </div>
      </section>

      <style>{`
        /* ── Hero ── */
        .suc-hero {
          position: relative; overflow: hidden;
          background: linear-gradient(165deg, #1a2a5e 0%, #2e4488 55%, #3953a4 100%);
          padding: 92px 0 104px;
          text-align: center;
        }
        .suc-hero .molecule { opacity: .12; }
        .suc-hero-inner { position: relative; z-index: 1; max-width: 720px; }
        .suc-eyebrow-pill {
          display: inline-flex; align-items: center; gap: 8px;
          background: var(--brand-yellow); color: var(--brand-deep);
          font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
          padding: 8px 16px; border-radius: 999px; white-space: nowrap;
          max-width: 100%;
        }
        .suc-hero h1 { color: #fff; margin-top: 26px; font-size: clamp(38px, 5vw, 60px); }
        .suc-hero h1 em { color: var(--brand-yellow); font-style: italic; }
        .suc-hero-sub {
          margin: 22px auto 0; max-width: 540px;
          color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.55;
        }
        .suc-hero-ctas {
          display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px;
        }

        /* ── Metro line ── */
        .suc-metro-section { background: #fff; padding: 52px 0; }
        .suc-metro-title {
          text-align: center; font-size: 12px; font-weight: 700;
          letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500);
          margin-bottom: 40px;
        }
        .suc-metro { overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; }
        .suc-metro-track {
          position: relative;
          display: flex; justify-content: space-between; gap: 16px;
          min-width: 760px; padding: 0 20px;
        }
        .suc-metro-track::before {
          content: ""; position: absolute;
          left: 60px; right: 60px; top: 23px; height: 4px;
          background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
          border-radius: 999px; z-index: 0;
        }
        .suc-node {
          position: relative; z-index: 1;
          flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
          gap: 8px;
        }
        .suc-node-dot {
          width: 48px; height: 48px; border-radius: 999px;
          background: var(--brand-primary); color: #fff;
          display: flex; align-items: center; justify-content: center;
          box-shadow: 0 8px 18px -8px rgba(57,83,164,.7), 0 0 0 5px #fff;
        }
        .suc-node-zona { font-size: 13px; font-weight: 700; color: var(--ink-900); line-height: 1.25; }
        .suc-node-suc { font-size: 11.5px; color: var(--ink-500); line-height: 1.3; }

        /* ── Stats strip ── */
        .suc-stats { background: var(--brand-primary); padding: 32px 0; }
        .suc-stats-row { display: flex; align-items: stretch; justify-content: center; }
        .suc-stat {
          flex: 1; text-align: center;
          padding: 6px 12px;
          border-right: 1px solid rgba(255,255,255,.22);
        }
        .suc-stat:last-child { border-right: none; }
        .suc-stat b { display: block; font-size: 42px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; }
        .suc-stat span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); }

        /* ── Branch cards ── */
        .suc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .suc-card {
          display: flex; flex-direction: column;
          background: #fff; border: 1px solid var(--ink-200);
          border-radius: 16px; overflow: hidden;
          box-shadow: 0 2px 16px rgba(57,83,164,.06);
          transition: transform .18s, box-shadow .18s;
        }
        .suc-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
        .suc-card-head {
          padding: 16px 20px; background: #1a2a5e;
          display: flex; align-items: center; justify-content: space-between; gap: 12px;
        }
        .suc-card-head h3 { font-size: 16px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
        .suc-zona-pill {
          flex: 0 0 auto;
          font-size: 11px; font-weight: 600; color: #fff;
          background: var(--brand-primary); padding: 4px 10px; border-radius: 999px;
          white-space: nowrap;
        }
        .suc-map { height: 200px; background: var(--brand-cyan-50); }
        .suc-map iframe { width: 100%; height: 100%; border: 0; display: block; }
        .suc-card-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

        .suc-badge {
          display: inline-flex; align-items: center; gap: 7px;
          align-self: flex-start;
          font-size: 12px; font-weight: 700; white-space: nowrap;
          padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
        }
        .suc-badge--mini { margin-bottom: 0; font-size: 10.5px; padding: 3px 9px; gap: 5px; white-space: nowrap; }
        .suc-badge--vacuna { background: var(--brand-cyan); color: #12303a; }
        .suc-badge--h24 { background: #F04F4C; color: #fff; }
        .suc-badge--prox { background: #F04F4C; color: #fff; }

        .suc-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
        .suc-info li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; font-size: 13px; color: var(--ink-600); line-height: 1.5; }
        .suc-info li svg { margin-top: 2px; }
        .suc-info a { color: var(--ink-700); transition: color .15s; }
        .suc-info a:hover { color: var(--brand-primary); }
        .suc-i-pin { color: var(--brand-primary); }
        .suc-i-phone { color: #2c8a4a; }
        .suc-i-mail { color: var(--brand-primary); }
        .suc-i-clock { color: var(--brand-yellow-600); }
        .suc-sep { color: var(--ink-300); }

        .suc-card-actions {
          margin-top: 18px; padding-top: 18px;
          border-top: 1px solid var(--ink-200);
          display: flex; flex-direction: column; gap: 8px;
        }
        .suc-card-actions .btn { width: 100%; }

        /* ── Domicilio banner ── */
        .suc-domicilio {
          display: grid; grid-template-columns: 72px 1fr auto; gap: 26px; align-items: center;
          background: linear-gradient(125deg, #5fa3b4 0%, #3953a4 100%);
          border-radius: var(--radius-xl);
          padding: 40px 44px; color: #fff;
        }
        .suc-domicilio-ic {
          width: 72px; height: 72px; border-radius: 18px;
          background: rgba(255,255,255,.15);
          display: flex; align-items: center; justify-content: center; color: #fff;
        }
        .suc-domicilio h3 { font-size: 23px; font-weight: 800; color: #fff; }
        .suc-domicilio p { margin-top: 8px; color: rgba(255,255,255,.82); font-size: 15px; max-width: 52ch; }
        .suc-domicilio-cta { flex: 0 0 auto; white-space: nowrap; }

        /* ── Próximamente ── */
        .suc-prox { background: #1a2a5e; padding: 80px 0; position: relative; }
        .suc-prox-eyebrow {
          display: inline-block;
          font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
          color: var(--brand-yellow);
        }
        .suc-prox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
        .suc-prox-card {
          background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
          border-radius: 16px; padding: 28px;
        }
        .suc-prox-card h4 { font-size: 20px; font-weight: 800; color: #fff; margin-top: 14px; letter-spacing: -.01em; }
        .suc-prox-zona { color: rgba(255,255,255,.6); font-size: 13.5px; margin-top: 4px; }
        .suc-prox-divider { height: 1px; background: rgba(255,255,255,.15); margin: 22px 0; }
        .suc-prox-label { font-size: 13px; color: rgba(255,255,255,.8); font-weight: 600; margin-bottom: 10px; }
        .suc-progress {
          height: 28px; border-radius: 999px; overflow: hidden;
          background: rgba(255,255,255,.15);
        }
        .suc-progress-fill {
          height: 100%; border-radius: 999px;
          display: flex; align-items: center; justify-content: flex-end;
          padding-right: 14px;
          background-color: var(--brand-yellow);
          background-image: linear-gradient(90deg, #fdc345, #f0ab10),
            repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 10px, transparent 10px 20px);
          background-blend-mode: overlay;
        }
        .suc-progress-fill span { font-size: 13px; font-weight: 800; color: var(--brand-deep); }

        /* ── Responsive ── */
        @media (max-width: 960px) {
          .suc-grid { grid-template-columns: repeat(2, 1fr); }
          .suc-domicilio { grid-template-columns: 1fr; gap: 20px; padding: 32px 28px; }
          .suc-domicilio-cta { width: 100%; justify-content: center; }
          .suc-prox-grid { grid-template-columns: 1fr; }
        }
        @media (max-width: 640px) {
          .suc-grid { grid-template-columns: 1fr; }
          .suc-stats-row { flex-wrap: wrap; }
          .suc-stat { flex: 0 0 50%; border-right: none; padding: 14px 12px; }
          .suc-stat b { font-size: 34px; }
        }
      `}</style>
    </main>
  );
}

Object.assign(window, { SucursalesPage });