// Mobile layout — production, fluid width, page scroll

const BMobile = () => {
  const [navOpen, setNavOpen] = React.useState(false);
  const close = () => setNavOpen(false);
  return (
    <div style={{
      width: "100%",
      fontFamily: "'Inter', sans-serif",
      background: B.cream, color: B.ink,
      position: "relative",
    }}>
      {/* HEADER */}
      <div style={{
        position: "sticky", top: 0, zIndex: 30,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        padding: "14px 20px", background: B.cream, borderBottom: `1px solid ${B.ink}`
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <BLogo size={56} />
          <div style={{ ...BSerif, fontSize: 18, color: B.ink, letterSpacing: -0.3, lineHeight: 1 }}>Consultorio<br/>Médico Panamá</div>
        </div>
        <button onClick={() => setNavOpen(!navOpen)} aria-label="Menú" style={{
          width: 40, height: 40, border: `1px solid ${B.ink}`, background: "transparent",
          display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", borderRadius: 0,
        }}>
          <BIcon name={navOpen ? "close" : "menu"} size={16} color={B.ink} />
        </button>
      </div>

      {navOpen && (
        <div style={{ position: "fixed", top: 85, left: 0, right: 0, background: B.ink, color: B.white, zIndex: 40, padding: "16px 20px 20px", animation: "bslidedown 0.3s ease-out" }}>
          <style>{`@keyframes bslidedown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }`}</style>
          {[
            { label: "Inicio", href: "#top" },
            { label: "Nosotros", href: "#nosotros" },
            { label: "Servicios", href: "#servicios" },
            { label: "Promociones", href: "#promos" },
            { label: "Equipo", href: "#equipo" },
            { label: "Horarios", href: "#horarios" },
            { label: "Contacto", href: "#contacto" },
          ].map((l) => (
            <a key={l.label} href={l.href} onClick={close} style={{
              ...BSerif, display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "14px 0", color: B.white, fontSize: 24, textDecoration: "none",
              borderTop: "1px solid rgba(255,255,255,0.15)",
            }}>
              {l.label}
              <BIcon name="arrowUpRight" size={14} color={B.white} />
            </a>
          ))}
        </div>
      )}

      {/* HERO */}
      <section id="top" style={{ background: B.cream, padding: "28px 20px 36px" }}>
        <Reveal delay={0} y={12}>
          <div style={{ fontSize: 10, fontWeight: 700, color: B.red, letterSpacing: 2.5, marginBottom: 18 }}>
            — SALUD FAMILIAR · DESDE 1995
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h1 style={{ ...BSerif, fontSize: 54, color: B.ink, margin: 0, lineHeight: 0.92, letterSpacing: -2 }}>
            Su salud,<br/>
            <span style={{ color: B.red, fontStyle: "italic" }}>nuestro</span><br/>
            compromiso.
          </h1>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: 14, color: B.ink2, marginTop: 20, lineHeight: 1.55, maxWidth: 360 }}>
            Medicina general, laboratorio y odontología en Arraiján Cabecera. Atención profesional y confiable para toda la familia.
          </p>
        </Reveal>

        <Reveal delay={300}>
          <div style={{ marginTop: 24, padding: 20, background: B.navy, color: B.white }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "#93C5FD", letterSpacing: 2, marginBottom: 8 }}>AGENDE AHORA</div>
            <div style={{ ...BSerif, fontSize: 28, marginBottom: 16, letterSpacing: -0.8, lineHeight: 1 }}>Elija su especialidad</div>
            {[
              { key: "medicina", icon: "stethoscope", label: "Medicina General", num: "6017-5845" },
              { key: "odonto", icon: "tooth", label: "Odontología", num: "6054-9254" },
              { key: "lab", icon: "flask", label: "Laboratorio", num: "6772-0078" },
            ].map((s) => (
              <a key={s.key} href={`https://wa.me/${CLINIC.whatsapp[s.key].raw}`} target="_blank" rel="noopener" style={{
                display: "flex", alignItems: "center", gap: 12,
                padding: "14px 0", borderTop: "1px solid rgba(255,255,255,0.2)",
                color: B.white, textDecoration: "none",
              }}>
                <BIcon name={s.icon} size={20} color={B.white} />
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{s.label}</div>
                  <div style={{ fontSize: 11, opacity: 0.7 }}>{s.num}</div>
                </div>
                <BIcon name="arrowUpRight" size={14} color={B.white} />
              </a>
            ))}
          </div>
        </Reveal>

        <Reveal delay={400}>
          <div style={{ display: "flex", gap: 8, marginTop: 24 }}>
            {[
              { n: "31+", l: "Años" },
              { n: "3", l: "Especialidades" },
              { n: "10.6k", l: "En IG" },
            ].map((s) => (
              <div key={s.l} style={{ flex: 1, padding: 14, background: B.white, border: `1px solid ${B.border}` }}>
                <div style={{ ...BSerif, fontSize: 28, color: B.ink, letterSpacing: -1, lineHeight: 1 }}>{s.n}</div>
                <div style={{ fontSize: 9, color: B.ink3, textTransform: "uppercase", letterSpacing: 1, marginTop: 4 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </section>

      {/* MARQUEE */}
      <Marquee items={["Medicina General", "Laboratorio Clínico", "Odontología", "Endodoncias", "Electrocardiograma", "Limpieza de Oídos $15", "Prótesis Dentales"]} speed={35} />

      {/* ABOUT */}
      <section id="nosotros" style={{ padding: "48px 20px", background: B.white, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Sobre nosotros</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: 0, lineHeight: 1, letterSpacing: -1.2 }}>
            Cuidamos de su familia con <span style={{ color: B.red, fontStyle: "italic" }}>honradez</span> y profesionalismo.
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: 14, color: B.ink2, lineHeight: 1.65, marginTop: 20 }}>
            Consultorio médico integral en Arraiján Cabecera con más de 31 años de servicio. Tres especialidades bajo un mismo techo. Atendemos con el rigor profesional y la calidez humana que su familia merece.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ marginTop: 24 }}>
            <BPhotoPh label="foto del consultorio" height={220} src="assets/consultorio.png" />
          </div>
        </Reveal>
      </section>

      {/* FEATURED / PROMOS */}
      <section id="promos" style={{ padding: "48px 20px", background: B.cream, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Destacados</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Servicios <span style={{ fontStyle: "italic", color: B.red }}>destacados</span>.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 14 }}>
          {FEATURED.map((f, i) => (
            <Reveal key={f.key} delay={100 + i * 80}>
              <BFeaturedCard item={f} compact />
            </Reveal>
          ))}
        </div>
      </section>

      {/* SERVICES */}
      <section id="servicios" style={{ padding: "48px 20px", background: B.white, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Servicios</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: "0 0 28px", lineHeight: 1, letterSpacing: -1.2 }}>
            Tres especialidades.
          </h2>
        </Reveal>
        <BServicesAccordion compact />
      </section>

      {/* TEAM */}
      <section id="equipo" style={{ padding: "48px 20px", background: B.ink, color: B.white, borderTop: `1px solid ${B.ink}` }}>
        <Reveal>
          <div style={{ fontSize: 10, fontWeight: 700, color: B.red, letterSpacing: 2.5, marginBottom: 16 }}>— EQUIPO MÉDICO</div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, margin: "0 0 28px", lineHeight: 1, letterSpacing: -1.2 }}>
            Quienes lo <span style={{ fontStyle: "italic", color: "#F87171" }}>atienden</span>.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 16 }}>
          {CLINIC.team.map((m, i) => (
            <Reveal key={i} delay={i * 100}>
              <div style={{ padding: 16, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.15)" }}>
                <div style={{ display: "flex", gap: 14 }}>
                  <div style={{ width: 96, height: 96, background: m.photo ? "#1a1a1a" : `repeating-linear-gradient(-45deg, rgba(255,255,255,0.08), rgba(255,255,255,0.08) 6px, transparent 6px, transparent 12px)`, border: "1px dashed rgba(255,255,255,0.3)", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", color: "rgba(255,255,255,0.5)", fontSize: 9, fontFamily: "ui-monospace, monospace", textAlign: "center", overflow: "hidden" }}>{m.photo ? <img src={m.photo} alt={m.name} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center top", display: "block" }} /> : "[foto]"}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 11, color: B.red, fontWeight: 700, letterSpacing: 1.5, textTransform: "uppercase" }}>{m.role}</div>
                    <div style={{ ...BSerif, fontSize: 22, marginTop: 4, lineHeight: 1.1, letterSpacing: -0.3 }}>{m.name}</div>
                    <div style={{ fontSize: 11, opacity: 0.6, marginTop: 6 }}>{m.years}</div>
                    <div style={{ fontSize: 12, opacity: 0.8, marginTop: 10, lineHeight: 1.5 }}>{m.bio}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* HOURS */}
      <section id="horarios" style={{ padding: "48px 20px", background: B.cream, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Horarios</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Cuándo <span style={{ fontStyle: "italic", color: B.red }}>visitarnos</span>.
          </h2>
        </Reveal>
        {[
          { k: "medicina", label: "Medicina General", icon: "stethoscope" },
          { k: "odonto", label: "Odontología", icon: "tooth" },
          { k: "lab", label: "Laboratorio", icon: "flask" },
        ].map((s, idx) => (
          <Reveal key={s.k} delay={idx * 80}>
            <div style={{ padding: "18px 0", borderBottom: `1px solid ${B.border}` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 10 }}>
                <BIcon name={s.icon} size={18} color={B.red} />
                <div style={{ ...BSerif, fontSize: 22, color: B.ink, letterSpacing: -0.4 }}>{s.label}</div>
              </div>
              {CLINIC.hours[s.k].map((h, i) => (
                <div key={i} style={{ display: "flex", justifyContent: "space-between", padding: "4px 0 4px 30px", fontSize: 13 }}>
                  <span style={{ color: B.ink3 }}>{h.d}</span>
                  <span style={{ color: B.ink, fontWeight: 600 }}>{h.h}</span>
                </div>
              ))}
            </div>
          </Reveal>
        ))}
      </section>

      {/* TESTIMONIALS */}
      <section style={{ padding: "48px 20px", background: B.white, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Pacientes</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Confianza <span style={{ fontStyle: "italic", color: B.red }}>ganada</span>.
          </h2>
        </Reveal>
        <div style={{ display: "grid", gap: 16 }}>
          {TESTIMONIALS.map((t, i) => (
            <Reveal key={i} delay={i * 100}>
              <div style={{ padding: 20, background: B.cream, border: `1px solid ${B.border}` }}>
                <BIcon name="quote" size={20} color={B.red} />
                <p style={{ ...BSerif, fontSize: 20, color: B.ink, lineHeight: 1.3, margin: "12px 0 16px", letterSpacing: -0.3 }}>"{t.text}"</p>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12 }}>
                  <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: "48px 20px", background: B.cream, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Preguntas frecuentes</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 34, color: B.ink, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Dudas <span style={{ fontStyle: "italic", color: B.red }}>comunes</span>.
          </h2>
        </Reveal>
        <BFaq compact />
      </section>

      {/* LOCATION */}
      <section id="ubicacion" style={{ padding: "48px 20px", background: B.navy, color: B.white, borderTop: `1px solid ${B.ink}` }}>
        <Reveal>
          <div style={{ fontSize: 10, fontWeight: 700, color: "#93C5FD", letterSpacing: 2.5, marginBottom: 16 }}>— UBICACIÓN</div>
          <h2 style={{ ...BSerif, fontSize: 36, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Fácil de <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: 220, border: `1px solid rgba(255,255,255,0.2)`, filter: "grayscale(0.3) contrast(1.1)" }}
            title="Ubicación"
          />
          <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
            <BIcon name="pin" size={18} color="#F87171" />
            <div style={{ fontSize: 13, opacity: 0.85, lineHeight: 1.55 }}>{CLINIC.address}</div>
          </div>
          <a href="https://maps.app.goo.gl/ihT4EQjronw1EYd19" target="_blank" rel="noopener" style={{
            display: "inline-flex", alignItems: "center", gap: 6, marginTop: 16,
            color: B.white, fontSize: 12, fontWeight: 600, textDecoration: "none",
            borderBottom: `1px solid ${B.white}`, paddingBottom: 2,
          }}>
            Ver en Google Maps <BIcon name="arrowUpRight" size={12} color={B.white} />
          </a>
        </Reveal>
      </section>

      {/* CONTACT */}
      <section id="contacto" style={{ padding: "48px 20px", background: B.cream, borderTop: `1px solid ${B.ink}` }}>
        <Reveal><BEyebrow>Contacto</BEyebrow></Reveal>
        <Reveal delay={80}>
          <h2 style={{ ...BSerif, fontSize: 36, color: B.ink, margin: "0 0 24px", lineHeight: 1, letterSpacing: -1.2 }}>
            Escríbanos.
          </h2>
        </Reveal>
        <BContactForm />
      </section>

      {/* PAYMENTS */}
      <section style={{ padding: "32px 20px", background: B.white, borderTop: `1px solid ${B.ink}` }}>
        <div style={{ fontSize: 10, fontWeight: 700, color: B.ink3, textTransform: "uppercase", letterSpacing: 2, marginBottom: 14, textAlign: "center" }}>Formas de pago</div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6, justifyContent: "center" }}>
          {PAYMENTS.map((p) => (
            <div key={p} style={{ padding: "6px 12px", background: B.cream, fontSize: 11, fontWeight: 600, color: B.ink2, border: `1px solid ${B.border}` }}>{p}</div>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{ background: B.ink, color: B.white, padding: "36px 20px" }}>
        <BLogo size={72} onDark />
        <div style={{ ...BSerif, fontSize: 28, marginTop: 16, lineHeight: 1, letterSpacing: -0.8 }}>
          Consultorio<br/>Médico Panamá.
        </div>
        <div style={{ fontSize: 12, opacity: 0.75, lineHeight: 1.8, marginTop: 18 }}>
          <div>{CLINIC.phone}</div>
          <div>{CLINIC.email}</div>
          <div>{CLINIC.instagram}</div>
        </div>
        <div style={{ marginTop: 24, paddingTop: 16, borderTop: "1px solid rgba(255,255,255,0.15)", fontSize: 11, opacity: 0.5 }}>
          © 2026. Todos los derechos reservados.
        </div>
      </footer>

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

window.BMobile = BMobile;