// Desktop layout — production, max-width 1280 centered, page scroll

const BDesktop = () => {
  const navTo = (e, href) => {
    e.preventDefault();
    const id = href.replace("#", "");
    const target = document.getElementById(id);
    if (!target) return;
    const top = target.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: "smooth" });
  };
  return (
    <div style={{
      width: "100%", maxWidth: 1280, margin: "0 auto", minHeight: 2800,
      fontFamily: "'Inter', sans-serif",
      background: B.cream, color: B.ink,
      position: "relative"
    }}>
      {/* NAV */}
      <nav style={{
        position: "sticky", top: 0, zIndex: 50,
        background: B.cream, borderBottom: `1px solid ${B.ink}`,
        padding: "18px 56px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <BLogo size={72} />
          <div style={{ ...BSerif, fontSize: 22, color: B.ink, letterSpacing: -0.4, lineHeight: 1 }}>
            Consultorio Médico Panamá
          </div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 32 }}>
          {[
          { label: "Nosotros", href: "#d-nosotros" },
          { label: "Servicios", href: "#d-servicios" },
          { label: "Promociones", href: "#d-promos" },
          { label: "Equipo", href: "#d-equipo" },
          { label: "Horarios", href: "#d-horarios" },
          { label: "Ubicación", href: "#d-ubicacion" }].
          map((l) =>
          <a key={l.label} href={l.href}
          onClick={(e) => navTo(e, l.href)}
          onMouseEnter={(e) => {e.currentTarget.style.color = B.red;}}
          onMouseLeave={(e) => {e.currentTarget.style.color = B.ink;}}
          style={{ fontSize: 13, color: B.ink, textDecoration: "none", fontWeight: 500, letterSpacing: 0.2, transition: "color 0.25s ease", cursor: "pointer" }}>{l.label}</a>
          )}
          <a href="#d-contacto"
          onClick={(e) => navTo(e, "#d-contacto")}
          onMouseEnter={(e) => {e.currentTarget.style.background = B.ink;}}
          onMouseLeave={(e) => {e.currentTarget.style.background = B.red;}}
          style={{
            padding: "12px 22px", background: B.red, color: B.white,
            fontSize: 13, fontWeight: 700, textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 8, textTransform: "uppercase", letterSpacing: 1,
            transition: "background 0.25s ease"
          }}>
            Consultas
            <BIcon name="arrowUpRight" size={13} color={B.white} />
          </a>
        </div>
      </nav>

      {/* HERO */}
      <section id="d-top" style={{ background: B.cream, padding: "80px 56px 100px", position: "relative", borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56 }}>
          <div>
            <Reveal delay={0} y={10}>
              <div style={{ fontSize: 12, fontWeight: 700, color: B.red, letterSpacing: 3, marginBottom: 32 }}>— SALUD FAMILIAR · ARRAIJÁN · DESDE 1995</div>
            </Reveal>
            <Reveal delay={100}>
              <h1 style={{ ...BSerif, fontSize: 128, color: B.ink, margin: 0, lineHeight: 0.88, letterSpacing: -5 }}>
                Su salud,<br />
                <span style={{ color: B.red, fontStyle: "italic" }}>nuestro</span><br />
                compromiso.
              </h1>
            </Reveal>
            <Reveal delay={220}>
              <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "flex-end", marginTop: 48 }}>
                <p style={{ fontSize: 17, color: B.ink2, lineHeight: 1.6, margin: 0, maxWidth: 440 }}>Medicina general, laboratorio clínico y odontología bajo un mismo techo. Más de 31 años cuidando la salud de la población de Arraiján.</p>
                <a href="#d-contacto"
                onClick={(e) => navTo(e, "#d-contacto")}
                onMouseEnter={(e) => {e.currentTarget.style.background = B.red;e.currentTarget.style.paddingLeft = "34px";}}
                onMouseLeave={(e) => {e.currentTarget.style.background = B.ink;e.currentTarget.style.paddingLeft = "28px";}}
                style={{
                  padding: "18px 28px", background: B.ink, color: B.white,
                  fontSize: 13, fontWeight: 700, textDecoration: "none", textTransform: "uppercase", letterSpacing: 1.5,
                  display: "inline-flex", alignItems: "center", gap: 12, whiteSpace: "nowrap",
                  transition: "background 0.25s ease, padding-left 0.25s ease"
                }}>
                  ESCRÍBENOS
                  <BIcon name="arrowUpRight" size={14} color={B.white} />
                </a>
              </div>
            </Reveal>
          </div>

          <Reveal delay={340} y={30}>
            <div style={{ background: "rgb(8, 157, 29)", color: B.white, padding: 28 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: "#93C5FD", letterSpacing: 2, marginBottom: 10 }}>WHATSAPP DIRECTO</div>
              <div style={{ ...BSerif, fontSize: 32, lineHeight: 1, letterSpacing: -0.8, marginBottom: 8 }}>
                Elija su <span style={{ fontStyle: "italic" }}>especialidad</span>
              </div>
              <div style={{ fontSize: 13, opacity: 0.75, marginBottom: 24 }}>Le atendemos al momento.</div>
              {[
              { key: "medicina", icon: "stethoscope", label: "Medicina General", num: "6017-5845", raw: "50760175845" },
              { key: "odonto", icon: "tooth", label: "Odontología", num: "6054-9254", raw: "50760549254" },
              { key: "lab", icon: "flask", label: "Laboratorio Clínico", num: "6772-0078", raw: "50767720078" }].
              map((s) =>
              <a key={s.key} href={`https://wa.me/${s.raw}`} target="_blank" rel="noopener"
              onMouseEnter={(e) => {e.currentTarget.style.paddingLeft = "8px";}}
              onMouseLeave={(e) => {e.currentTarget.style.paddingLeft = "0";}}
              style={{
                display: "flex", alignItems: "center", gap: 14,
                padding: "16px 0", borderTop: "1px solid rgba(255,255,255,0.18)",
                color: B.white, textDecoration: "none",
                transition: "padding-left 0.25s ease"
              }}>
                  <BIcon name={s.icon} size={22} color={B.white} />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{s.label}</div>
                    <div style={{ fontSize: 12, opacity: 0.7, marginTop: 2 }}>{s.num}</div>
                  </div>
                  <BIcon name="arrowUpRight" size={16} color={B.white} />
                </a>
              )}
            </div>
            <div style={{ marginTop: 12, padding: "16px 18px", background: B.red, color: B.white, fontSize: 12, fontWeight: 600 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12, paddingBottom: 12, borderBottom: "1px solid rgba(255,255,255,0.25)" }}>
                <span style={{ width: 8, height: 8, background: "#10B981", borderRadius: "50%", animation: "bpulse2 1.5s ease-in-out infinite" }} />
                <style>{`@keyframes bpulse2 { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }`}</style>
                <span style={{ textTransform: "uppercase", letterSpacing: 1.5, fontSize: 11 }}>Abierto hoy · Horarios</span>
              </div>
              {[
              { label: "Medicina General", h: "7:00am – 4:00pm" },
              { label: "Odontología", h: "8:00am – 3:00pm" },
              { label: "Laboratorio", h: "7:00am – 3:00pm" }].
              map((row, i, arr) =>
              <div key={row.label} style={{
                display: "flex", justifyContent: "space-between", alignItems: "center",
                padding: "7px 0",
                borderBottom: i < arr.length - 1 ? "1px solid rgba(255,255,255,0.15)" : "none",
                fontSize: 13
              }}>
                  <span style={{ opacity: 0.92 }}>{row.label}</span>
                  <span style={{ fontWeight: 700 }}>{row.h}</span>
                </div>
              )}
            </div>
          </Reveal>
        </div>

        {/* Stats ticker */}
        <Reveal delay={100}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 80, borderTop: `1px solid ${B.ink}`, borderBottom: `1px solid ${B.ink}` }}>
            {[
            { n: "31+", l: "Años de servicio" },
            { n: "∞", l: "Actualización médica continua" },
            { n: "10.6k", l: "Seguidores en Instagram" },
            { n: "100%", l: "Atención profesional" }].
            map((s, i) =>
            <div key={s.l} style={{ padding: "32px 28px", borderRight: i < 3 ? `1px solid ${B.ink}` : "none" }}>
                <div style={{ ...BSerif, fontSize: 56, color: B.ink, letterSpacing: -2, lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 11, color: B.ink3, textTransform: "uppercase", letterSpacing: 1.5, marginTop: 10 }}>{s.l}</div>
              </div>
            )}
          </div>
        </Reveal>
      </section>

      {/* MARQUEE */}
      <Marquee
        items={["Medicina General", "Laboratorio Clínico", "Odontología", "Endodoncias", "Electrocardiograma $30", "Limpieza de Oídos", "Prótesis Valplast", "Cirugías Menores"]}
        speed={40} border={false} />

      {/* ABOUT */}
      <section id="d-nosotros" style={{ padding: "120px 56px", background: B.white, borderTop: `1px solid ${B.ink}`, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "flex-start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <Reveal><BEyebrow>Sobre nosotros</BEyebrow></Reveal>
            <Reveal delay={100}>
              <h2 style={{ ...BSerif, fontSize: 72, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2.5 }}>
                Honradez y <span style={{ color: B.red, fontStyle: "italic" }}>profesionalismo</span>.
              </h2>
            </Reveal>
          </div>
          <div>
            <Reveal delay={60}>
              <p style={{ fontSize: 19, color: B.ink2, lineHeight: 1.6, margin: 0 }}>Somos un consultorio médico integral ubicado en Arraiján Cabecera, frente a la Policlínica Dr. Blas Gómez Chetro. Desde 1995 ofrecemos atención profesional, cercana y confiable, con las tres especialidades que su familia necesita en un solo lugar, más de 31 años cuidando familias panameñas.</p>
            </Reveal>
            <Reveal delay={140}>
              <p style={{ fontSize: 19, color: B.ink2, lineHeight: 1.6, marginTop: 20 }}>
                Nuestra misión: cuidar de usted y los suyos con la calidez humana y el rigor profesional que merece.
              </p>
            </Reveal>
            <Reveal delay={220}>
              <div style={{ marginTop: 40 }}>
                <BPhotoPh label="foto del consultorio" height={360} src="assets/consultorio.png" />
              </div>
            </Reveal>
            <Reveal delay={280}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 40, borderTop: `1px solid ${B.ink}` }}>
                {[
                { t: "Trato cercano", d: "Lo tratamos como familia, no como paciente." },
                { t: "Laboratorio Clínico", d: "Resultados rápidos y con altos niveles de confiabilidad." },
                { t: "Atención integral", d: "Medicina, laboratorio y odontología juntos." }].
                map((f, i) =>
                <div key={f.t} style={{ padding: "24px 20px 0", borderRight: i < 2 ? `1px solid ${B.border}` : "none" }}>
                    <div style={{ ...BSerif, fontSize: 22, color: B.ink, letterSpacing: -0.4, marginBottom: 8 }}>{f.t}</div>
                    <div style={{ fontSize: 13, color: B.ink3, lineHeight: 1.55 }}>{f.d}</div>
                  </div>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* FEATURED / PROMOS */}
      <section id="d-promos" style={{ padding: "120px 56px", background: B.cream, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <Reveal><BEyebrow>Destacados</BEyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{ ...BSerif, fontSize: 80, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2.8 }}>
                Servicios <span style={{ color: B.red, fontStyle: "italic" }}>destacados</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <div style={{ fontSize: 14, color: B.ink3, maxWidth: 300, lineHeight: 1.6, textAlign: "right" }}>Procedimientos específicos y promociones. Haga clic para consultar por WhatsApp.</div>
          </Reveal>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
          {FEATURED.map((f, i) =>
          <Reveal key={f.key} delay={i * 100} y={30}>
              <BFeaturedCard item={f} />
            </Reveal>
          )}
        </div>
      </section>

      {/* SERVICES */}
      <section id="d-servicios" style={{ padding: "120px 56px", background: B.white, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <Reveal><BEyebrow>Nuestros servicios</BEyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{ ...BSerif, fontSize: 88, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -3 }}>
                Profesionalismo y<br />
                <span style={{ color: B.red, fontStyle: "italic" }}>compromiso</span>.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <div style={{ fontSize: 14, color: B.ink3, maxWidth: 280, lineHeight: 1.6 }}>Haga clic en cada sección para ver el detalle completo de los servicios.</div>
          </Reveal>
        </div>
        <BServicesAccordion />
      </section>

      {/* TEAM */}
      <section id="d-equipo" style={{ padding: "120px 56px", background: B.ink, color: B.white, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64 }}>
          <div>
            <Reveal>
              <div style={{ fontSize: 11, fontWeight: 700, color: B.red, letterSpacing: 3, marginBottom: 16 }}>— EQUIPO MÉDICO</div>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{ ...BSerif, fontSize: 80, margin: 0, lineHeight: 0.95, letterSpacing: -2.5 }}>
                Quienes lo <span style={{ fontStyle: "italic", color: "#F87171" }}>atienden</span>.
              </h2>
            </Reveal>
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {CLINIC.team.map((m, i) =>
          <Reveal key={i} delay={i * 120} y={30}>
              <div
              onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-6px)";e.currentTarget.style.borderColor = "rgba(255,255,255,0.35)";}}
              onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";e.currentTarget.style.borderColor = "rgba(255,255,255,0.15)";}}
              style={{
                background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.15)",
                transition: "transform 0.4s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s ease",
                cursor: "default"
              }}>
                <div style={{ height: 380, background: m.photo ? "#1a1a1a" : `repeating-linear-gradient(-45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px)`, borderBottom: "1px dashed rgba(255,255,255,0.2)", display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.4)", fontSize: 11, fontFamily: "ui-monospace, monospace", overflow: "hidden" }}>
                  {m.photo ? <img src={m.photo} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} /> : "[ foto del doctor ]"}
                </div>
                <div style={{ padding: 24 }}>
                  <div style={{ fontSize: 11, color: B.red, fontWeight: 700, letterSpacing: 2, textTransform: "uppercase", marginBottom: 10 }}>{m.role} · 0{i + 1}</div>
                  <div style={{ ...BSerif, fontSize: 30, lineHeight: 1.05, letterSpacing: -0.6 }}>{m.name}</div>
                  <div style={{ fontSize: 12, opacity: 0.6, marginTop: 8 }}>{m.years}</div>
                  <div style={{ fontSize: 13, opacity: 0.85, marginTop: 16, lineHeight: 1.6 }}>{m.bio}</div>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* HOURS */}
      <section id="d-horarios" style={{ padding: "120px 56px", background: B.cream, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 80 }}>
          <div>
            <Reveal><BEyebrow>Horarios</BEyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{ ...BSerif, fontSize: 72, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2.5 }}>
                Cuándo <span style={{ fontStyle: "italic", color: B.red }}>visitarnos</span>.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontSize: 16, color: B.ink3, marginTop: 24, lineHeight: 1.6, maxWidth: 340 }}>
                Cada servicio tiene su propio horario y se atiende por orden de llegada.
                <br /><br />
                Odontología tiene 14 cupos máximo por día.
                <br /><br />
                Si tienes alguna consulta, no dudes en escribir al WhatsApp de cada servicio.
              </p>
            </Reveal>
          </div>
          <div>
            {[{ k: "medicina", label: "Medicina General", icon: "stethoscope", phone: "6017-5845" }, { k: "odonto", label: "Odontología", icon: "tooth", phone: "6054-9254" }, { k: "lab", label: "Laboratorio", icon: "flask", phone: "6772-0078" }].map((s, i) => <Reveal key={s.k} delay={i * 100}>
                <div style={{ padding: "32px 0", borderTop: `1px solid ${B.ink}`, borderBottom: i === 2 ? `1px solid ${B.ink}` : "none", display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "center" }}>
                  <BIcon name={s.icon} size={32} color={B.red} stroke={1.6} />
                  <div>
                    <div style={{ ...BSerif, fontSize: 32, color: B.ink, letterSpacing: -0.6, lineHeight: 1, marginBottom: 12 }}>{s.label}</div>
                    <div style={{ display: "flex", gap: 32 }}>
                      {CLINIC.hours[s.k].map((h, idx) => <div key={idx} style={{ fontSize: 13 }}>
                          <div style={{ color: B.ink3, marginBottom: 3 }}>{h.d}</div>
                          <div style={{ color: B.ink, fontWeight: 600 }}>{h.h}</div>
                        </div>)}
                    </div>
                  </div>
                  <div style={{ textAlign: "right" }}>
                    <div style={{ fontSize: 10, color: B.ink3, textTransform: "uppercase", letterSpacing: 1.5, marginBottom: 4 }}>WhatsApp</div>
                    <div style={{ ...BSerif, fontSize: 24, color: B.ink, letterSpacing: -0.4 }}>{s.phone}</div>
                  </div>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: "120px 56px", background: B.white, borderBottom: `1px solid ${B.ink}` }}>
        <Reveal>
          <div style={{ textAlign: "center", marginBottom: 64 }}>
            <BEyebrow>Testimonios</BEyebrow>
            <h2 style={{ ...BSerif, fontSize: 80, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2.5 }}>
              Confianza <span style={{ fontStyle: "italic", color: B.red }}>ganada</span>.
            </h2>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: `1px solid ${B.ink}`, borderBottom: `1px solid ${B.ink}` }}>
          {TESTIMONIALS.map((t, i) =>
          <Reveal key={i} delay={i * 100}>
              <div style={{ padding: "40px 32px", borderRight: i < 2 ? `1px solid ${B.border}` : "none" }}>
                <BIcon name="quote" size={28} color={B.red} />
                <p style={{ ...BSerif, fontSize: 26, color: B.ink, lineHeight: 1.25, margin: "20px 0 28px", letterSpacing: -0.5 }}>"{t.text}"</p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13, paddingTop: 16, borderTop: `1px solid ${B.border}` }}>
                  <strong style={{ color: B.ink }}>{t.name}</strong>
                  <span style={{ color: B.ink3 }}>{t.service}</span>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "120px 56px", background: B.cream, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "flex-start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <Reveal><BEyebrow>Preguntas frecuentes</BEyebrow></Reveal>
            <Reveal delay={80}>
              <h2 style={{ ...BSerif, fontSize: 72, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2.5 }}>
                Dudas <span style={{ fontStyle: "italic", color: B.red }}>comunes</span>.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p style={{ fontSize: 15, color: B.ink3, marginTop: 24, lineHeight: 1.6, maxWidth: 320 }}>
                Si tiene otra pregunta, escríbanos por WhatsApp y le responderemos a la brevedad.
              </p>
            </Reveal>
          </div>
          <div>
            <BFaq />
          </div>
        </div>
      </section>

      {/* LOCATION + CONTACT */}
      <section style={{ display: "grid", gridTemplateColumns: "1fr 1fr", borderBottom: `1px solid ${B.ink}` }}>
        <div id="d-ubicacion" style={{ padding: "96px 56px", background: B.navy, color: B.white, borderRight: `1px solid ${B.ink}` }}>
          <Reveal>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#93C5FD", letterSpacing: 3, marginBottom: 16 }}>— UBICACIÓN</div>
            <h2 style={{ ...BSerif, fontSize: 56, margin: 0, lineHeight: 0.95, letterSpacing: -2 }}>
              Fácil de<br /><span style={{ fontStyle: "italic", color: "#F87171" }}>encontrar</span>.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <iframe
              src="https://www.openstreetmap.org/export/embed.html?bbox=-79.68%2C8.94%2C-79.63%2C8.97&layer=mapnik&marker=8.955%2C-79.658"
              style={{ width: "100%", height: 320, border: `1px solid rgba(255,255,255,0.2)`, marginTop: 32, filter: "grayscale(0.2) contrast(1.05)" }}
              title="Ubicación" />
            <div style={{ display: "flex", gap: 14, marginTop: 24 }}>
              <BIcon name="pin" size={22} color="#F87171" />
              <div style={{ fontSize: 15, opacity: 0.9, lineHeight: 1.55, flex: 1 }}>{CLINIC.address}</div>
            </div>
            <a href="https://maps.app.goo.gl/ihT4EQjronw1EYd19" target="_blank" rel="noopener" style={{
              display: "inline-flex", alignItems: "center", gap: 8, marginTop: 20,
              color: B.white, fontSize: 13, fontWeight: 600, textDecoration: "none",
              borderBottom: `1px solid ${B.white}`, paddingBottom: 3
            }}>
              Abrir en Google Maps <BIcon name="arrowUpRight" size={13} color={B.white} />
            </a>
          </Reveal>
        </div>
        <div id="d-contacto" style={{ padding: "96px 56px", background: B.cream }}>
          <Reveal><BEyebrow>Contacto</BEyebrow></Reveal>
          <Reveal delay={80}>
            <h2 style={{ ...BSerif, fontSize: 56, color: B.ink, margin: 0, lineHeight: 0.95, letterSpacing: -2 }}>
              Escríbanos.
            </h2>
          </Reveal>
          <Reveal delay={140}>
            <p style={{ fontSize: 15, color: B.ink3, margin: "20px 0 40px", lineHeight: 1.6 }}>
              Complete el formulario y le responderemos por WhatsApp a la brevedad.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <BContactForm />
          </Reveal>
        </div>
      </section>

      {/* PAYMENTS */}
      <section style={{ padding: "48px 56px", background: B.white, borderBottom: `1px solid ${B.ink}` }}>
        <div style={{ display: "flex", alignItems: "center", gap: 32, justifyContent: "center", flexWrap: "wrap" }}>
          <div style={{ fontSize: 11, fontWeight: 700, color: B.ink3, textTransform: "uppercase", letterSpacing: 2.5 }}>— Formas de pago</div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
            {PAYMENTS.map((p) =>
            <div key={p} style={{ padding: "10px 18px", background: B.cream, fontSize: 13, fontWeight: 600, color: B.ink, border: `1px solid ${B.border}` }}>{p}</div>
            )}
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: B.ink, color: B.white, padding: "80px 56px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr", gap: 56, marginBottom: 64 }}>
          <div>
            <BLogo size={96} onDark />
            <div style={{ ...BSerif, fontSize: 48, marginTop: 20, lineHeight: 0.95, letterSpacing: -1.5 }}>
              Consultorio<br />Médico <span style={{ fontStyle: "italic", color: "#F87171" }}>Panamá</span>.
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: 2, opacity: 0.5, marginBottom: 18 }}>Servicios</div>
            {["Medicina General", "Laboratorio", "Odontología"].map((l) =>
            <a key={l} href="#d-servicios" onClick={(e) => navTo(e, "#d-servicios")} style={{ display: "block", padding: "6px 0", fontSize: 14, color: B.white, opacity: 0.9, textDecoration: "none", cursor: "pointer" }}>{l}</a>
            )}
          </div>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: 2, opacity: 0.5, marginBottom: 18 }}>Contacto</div>
            <div style={{ fontSize: 14, opacity: 0.9, lineHeight: 1.9 }}>
              <div>{CLINIC.phone}</div>
              <div>{CLINIC.email}</div>
              <a href="https://instagram.com/consultoriomedicopanama" target="_blank" rel="noopener" style={{ color: B.white, textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6 }}>
                <BIcon name="instagram" size={12} color={B.white} /> {CLINIC.instagram}
              </a>
            </div>
          </div>
          <div>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: "uppercase", letterSpacing: 2, opacity: 0.5, marginBottom: 18 }}>WhatsApp</div>
            {Object.entries(CLINIC.whatsapp).map(([k, w]) =>
            <a key={k} href={`https://wa.me/${w.raw}`} target="_blank" rel="noopener" style={{ display: "block", padding: "6px 0", fontSize: 14, color: B.white, opacity: 0.9, textDecoration: "none" }}>
                {w.label}<br /><span style={{ opacity: 0.6, fontSize: 12 }}>{w.number}</span>
              </a>
            )}
          </div>
        </div>
        <div style={{ paddingTop: 32, borderTop: "1px solid rgba(255,255,255,0.15)", display: "flex", justifyContent: "space-between", fontSize: 12, opacity: 0.6 }}>
          <div>© 2026 Consultorio Médico Panamá</div>
          <div>Arraiján · República de Panamá 🇵🇦</div>
        </div>
      </footer>

      <BWhatsAppFab />
    </div>);
};

window.BDesktop = BDesktop;