/* Sucursales — cobertura Tijuana */

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

/* Las sucursales vienen de la API (src/api.js). Lo único que se guarda aquí es
 * presentación que la API no tiene: la etiqueta de zona y los distintivos.
 * Antes había un arreglo SUCURSALES con 6 sucursales escritas a mano. */

const ZONA = {
  "Matriz":                 "Col. Empleados Federales",
  "Express Plaza":          "Zona Río Tijuana",
  "NewCity Medical Plaza":  "Zona Río Tijuana",
  "Centro Médico Florence": "Col. Madero (Cacho)",
  "City Point":             "Río Tijuana 3a. Etapa",
  "Hospital INT":           "Zona Urbana Río Tijuana",
};

/* El distintivo de vacunación no está en los datos; el de 24 horas sí se puede
 * deducir del horario, así que ése no se escribe a mano. */
const DISTINTIVO_VACUNA = { type: "vacuna", label: "Centro de Vacunación", icon: "drop" };
const DISTINTIVO_24H    = { type: "h24",    label: "Servicio 24 / 7",      icon: "clock" };
const CON_VACUNACION = ["NewCity Medical Plaza"];

function decorarSucursal(s) {
  const abre24 = (s.horario || []).some((h) => /24\s*\/?\s*7|24\s*horas/i.test(h));
  return Object.assign({}, s, {
    zona: ZONA[s.nombre] || null,
    badge: CON_VACUNACION.indexOf(s.nombre) !== -1 ? DISTINTIVO_VACUNA
         : abre24 ? DISTINTIVO_24H
         : null,
  });
}

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

      {s.tieneMapa && (
        <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>
          {s.telefonos.length > 0 && (
            <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>
          {s.servicios.length > 0 && (
            <li>
              <Icon name="beaker" size={15} className="suc-i-pin" />
              <span>{s.servicios.join(" · ")}</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 }) {
  const [sucursales, setSucursales] = React.useState([]);
  const [cargando, setCargando] = React.useState(true);

  React.useEffect(() => {
    let vivo = true;
    window.InfectoAPI.getSucursales()
      .then((lista) => {
        if (!vivo) return;
        // las que no tienen dirección real son registros a medio capturar
        setSucursales(lista.filter((s) => s.publicable).map(decorarSucursal));
      })
      .catch(() => { /* si falla, la página se muestra sin el listado */ })
      .finally(() => { if (vivo) setCargando(false); });
    return () => { vivo = false; };
  }, []);

  const total = sucursales.length;
  const con24h = sucursales.filter((s) => s.badge && s.badge.type === "h24").length;

  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.{total ? ` · ${total} 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">
            {total ? `${total} sucursales estratégicas` : "Sucursales estratégicas"}
            {con24h ? ", 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">
              {sucursales.map((s, i) => (
                <div className="suc-node" key={s.nombre}>
                  <div className="suc-node-dot"><Icon name="pin" size={20} /></div>
                  <div className="suc-node-zona">{s.zona || s.nombre}</div>
                  <div className="suc-node-suc">{s.nombre}</div>
                  {s.badge && (
                    <span className={"suc-badge suc-badge--" + s.badge.type + " suc-badge--mini"}>{s.badge.label}</span>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ── MÉTRICAS ── */}
      <section className="suc-stats">
        <div className="container suc-stats-row">
          {[
            [total ? String(total) : "—", "Sucursales activas"],
            [String(con24h), "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">
            {cargando
              ? <p style={{gridColumn:"1/-1", textAlign:"center", color:"var(--ink-500)"}}>Cargando sucursales…</p>
              : sucursales.map(s => <SucBranchCard key={s.nombre} 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 });