const { useState, useEffect, useRef } = React;

// ============================================================
//  Dra. Massiel Zenteno Zenteno — Neurocirugía
//  Paleta:  #055695  ·  #6fd2e7  ·  #ffffff (dominante)
// ============================================================

const BRAND = {
  deep: "#055695",
  sky:  "#6fd2e7",
  ink:  "#0a1f33",
};

// Background video — uploaded by Dra. Massiel
const VIDEO_SRC = "videodra.mp4";

// External booking destination (Doctoralia profile)
const BOOKING_URL = "https://www.doctoralia.com.mx/massiel-zenteno-zenteno/neurocirujano/puebla";

// Social profiles
const SOCIAL = {
  facebook: "https://www.facebook.com/profile.php?id=61579190777693",
  instagram: "https://www.instagram.com/neurocirugia_drazenteno",
};

function SocialLinks({ className = "", size = 14 }) {
  return (
    <span className={`social ${className}`.trim()}>
      <a
        className="social__link"
        href={SOCIAL.facebook}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Facebook de la Dra. Massiel Zenteno"
      >
        <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor" aria-hidden="true">
          <path d="M13.5 21.94V13.5h2.83l.42-3.3H13.5V8.08c0-.96.27-1.61 1.64-1.61h1.76V3.52a23.6 23.6 0 0 0-2.56-.13c-2.54 0-4.28 1.55-4.28 4.4v2.41H7.2v3.3h2.86v8.44h3.44z"/>
        </svg>
      </a>
      <a
        className="social__link"
        href={SOCIAL.instagram}
        target="_blank"
        rel="noopener noreferrer"
        aria-label="Instagram de la Dra. Massiel Zenteno"
      >
        <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
          <rect x="3" y="3" width="18" height="18" rx="5"/>
          <circle cx="12" cy="12" r="4"/>
          <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/>
        </svg>
      </a>
    </span>
  );
}

// -----------------------------------------------------------
// SeamlessVideo — adaptive background video.
//   • Desktop: two stacked <video>s crossfade near the loop point
//     so the seam is invisible.
//   • Mobile: a single <video loop> to halve bandwidth + decoder
//     load while keeping full quality.
//   • Both: lazy-mount via IntersectionObserver, preload="metadata",
//     and skip entirely when the user is on save-data / 2g/3g.
// -----------------------------------------------------------
function useIsMobile(query = "(max-width: 720px)") {
  const [is, setIs] = useState(() =>
    typeof window !== "undefined" ? window.matchMedia(query).matches : false
  );
  useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e) => setIs(e.matches);
    mq.addEventListener ? mq.addEventListener("change", handler) : mq.addListener(handler);
    return () =>
      mq.removeEventListener ? mq.removeEventListener("change", handler) : mq.removeListener(handler);
  }, [query]);
  return is;
}

function shouldSkipVideo() {
  if (typeof navigator === "undefined") return false;
  const c = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
  if (!c) return false;
  if (c.saveData) return true;
  if (c.effectiveType && /(^|-)(2g|slow-2g)$/.test(c.effectiveType)) return true;
  return false;
}

function SeamlessVideo({ src, videoClassName, fade = 0.7, poster }) {
  const wrapRef = useRef(null);
  const refA = useRef(null);
  const refB = useRef(null);
  const [active, setActive] = useState("a");
  const [mounted, setMounted] = useState(false);
  const isMobile = useIsMobile();
  const skip = shouldSkipVideo();

  // Lazy-mount: only attach <video> when the wrapper is near the viewport.
  useEffect(() => {
    if (skip) return;
    if (!wrapRef.current) return;
    if (mounted) return;
    const io = new IntersectionObserver(
      (entries) => {
        if (entries.some((e) => e.isIntersecting)) {
          setMounted(true);
          io.disconnect();
        }
      },
      { rootMargin: "300px 0px" }
    );
    io.observe(wrapRef.current);
    return () => io.disconnect();
  }, [skip, mounted]);

  // Desktop crossfade orchestration.
  useEffect(() => {
    if (!mounted || isMobile || skip) return;
    const a = refA.current, b = refB.current;
    if (!a || !b) return;

    a.play().catch(() => {});

    const handler = (cur, other, otherKey) => () => {
      const dur = cur.duration;
      if (!isFinite(dur) || dur < 1) return;
      if (dur - cur.currentTime <= fade && other.paused) {
        try { other.currentTime = 0; } catch (_) {}
        other.play().catch(() => {});
        setActive(otherKey);
      }
    };
    const onEnd = (cur) => () => { try { cur.currentTime = 0; } catch (_) {} };

    const tA = handler(a, b, "b");
    const tB = handler(b, a, "a");
    const eA = onEnd(a);
    const eB = onEnd(b);

    a.addEventListener("timeupdate", tA);
    b.addEventListener("timeupdate", tB);
    a.addEventListener("ended", eA);
    b.addEventListener("ended", eB);

    return () => {
      a.removeEventListener("timeupdate", tA);
      b.removeEventListener("timeupdate", tB);
      a.removeEventListener("ended", eA);
      b.removeEventListener("ended", eB);
    };
  }, [src, fade, mounted, isMobile, skip]);

  if (skip) {
    return <div ref={wrapRef} className="sv-fallback" aria-hidden="true" />;
  }

  if (isMobile) {
    return (
      <div ref={wrapRef} className="sv-layer sv-layer--on">
        {mounted && (
          <video
            src={src}
            muted
            playsInline
            preload="metadata"
            loop
            autoPlay
            poster={poster}
            className={videoClassName}
          />
        )}
      </div>
    );
  }

  return (
    <div ref={wrapRef} style={{ position: "absolute", inset: 0 }}>
      <div className={`sv-layer ${active === "a" ? "sv-layer--on" : ""}`}>
        {mounted && (
          <video ref={refA} src={src} muted playsInline preload="metadata" poster={poster} className={videoClassName} />
        )}
      </div>
      <div className={`sv-layer ${active === "b" ? "sv-layer--on" : ""}`}>
        {mounted && (
          <video ref={refB} src={src} muted playsInline preload="metadata" poster={poster} className={videoClassName} />
        )}
      </div>
    </div>
  );
}

// -----------------------------------------------------------
// Smooth in-page scroll
// -----------------------------------------------------------
function scrollToId(id) {
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}

// -----------------------------------------------------------
// Reveal-on-scroll hook
// -----------------------------------------------------------
function useReveal() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll(".reveal"));

    // Mark anything already in viewport as visible immediately.
    const markIfVisible = (el) => {
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      if (r.top < vh * 0.95 && r.bottom > 0) {
        el.classList.add("is-visible");
        return true;
      }
      return false;
    };
    els.forEach(markIfVisible);

    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-visible");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -5% 0px" }
    );
    els.forEach((el) => {
      if (!el.classList.contains("is-visible")) io.observe(el);
    });

    // Safety net: anything not revealed within 600ms gets shown.
    const fallback = setTimeout(() => {
      document.querySelectorAll(".reveal:not(.is-visible)").forEach((el) => {
        el.classList.add("is-visible");
      });
    }, 600);

    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
}

// -----------------------------------------------------------
// Per-element text animations. Large texts (h1, h2) and small
// texts (p, li, chips, etc.) get distinct entrance animations
// that re-fire each time the element enters the viewport.
// -----------------------------------------------------------
function useTextAnimations() {
  useEffect(() => {
    const largeSel = "h1, h2, .h2, .hero__title, .hero__meta-num";
    const smallSel =
      "p, .kicker, .hero__lede, .hero__eyebrow, .hero__meta-lbl, " +
      ".chip, blockquote, li, .footer h4";

    const EXCLUDE = ".nav, .wa-fab, .btn, .cond__chip";
    const tagged = [];

    document.querySelectorAll(largeSel).forEach((el) => {
      if (el.closest(EXCLUDE)) return;
      el.classList.add("anim-lg");
      tagged.push(el);
    });
    document.querySelectorAll(smallSel).forEach((el) => {
      if (el.closest(EXCLUDE)) return;
      if (el.classList.contains("anim-lg")) return;
      el.classList.add("anim-sm");
      tagged.push(el);
    });

    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) e.target.classList.add("anim-in");
          else e.target.classList.remove("anim-in");
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -6% 0px" }
    );
    tagged.forEach((el) => io.observe(el));

    return () => io.disconnect();
  }, []);
}

// -----------------------------------------------------------
// WhatsApp floating action button (bottom-right).
// -----------------------------------------------------------
function WhatsAppFab() {
  return (
    <a
      className="btn btn--primary wa-fab"
      href="https://wa.me/522228965203?text=Hola%20Dra.%20Massiel%2C%20me%20gustar%C3%ADa%20agendar%20una%20consulta."
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Contactar por WhatsApp"
    >
      <svg viewBox="0 0 32 32" width="30" height="30" fill="currentColor" aria-hidden="true">
        <path d="M16.004 5.333c-5.892 0-10.667 4.775-10.667 10.667 0 1.876.49 3.708 1.422 5.325L5.333 26.667l5.541-1.388a10.617 10.617 0 0 0 5.13 1.305c5.892 0 10.667-4.775 10.667-10.667S21.896 5.333 16.004 5.333zm0 19.466a8.79 8.79 0 0 1-4.49-1.232l-.32-.19-3.288.823.876-3.21-.21-.33a8.798 8.798 0 0 1-1.357-4.68c0-4.86 3.95-8.81 8.81-8.81 4.86 0 8.81 3.95 8.81 8.81s-3.95 8.819-8.81 8.819zm4.815-6.594c-.264-.132-1.563-.77-1.805-.858-.242-.088-.418-.132-.595.132-.176.264-.682.858-.836 1.034-.154.176-.308.198-.572.066-.264-.132-1.116-.412-2.124-1.31-.785-.7-1.314-1.563-1.468-1.827-.154-.264-.016-.406.116-.538.119-.118.264-.308.396-.462.132-.154.176-.264.264-.44.088-.176.044-.33-.022-.462-.066-.132-.595-1.435-.815-1.964-.215-.515-.434-.445-.595-.453l-.506-.009a.97.97 0 0 0-.704.33c-.242.264-.924.902-.924 2.2 0 1.298.947 2.552 1.079 2.728.132.176 1.866 2.852 4.523 4 .632.273 1.124.435 1.508.557.633.201 1.21.173 1.666.105.508-.076 1.563-.638 1.783-1.255.22-.616.22-1.144.154-1.255-.066-.11-.242-.176-.506-.308z"/>
      </svg>
    </a>
  );
}

// -----------------------------------------------------------
// Video Background
// -----------------------------------------------------------
function HlsBackground() {
  return (
    <div className="hero-bg">
      <SeamlessVideo src={VIDEO_SRC} videoClassName="hero-video" />
      <div className="hero-overlay" />
      <div className="hero-grain" />
    </div>
  );
}

// -----------------------------------------------------------
// Glassmorphic Navigation
// -----------------------------------------------------------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Inicio", "inicio"],
    ["Sobre mí", "sobre"],
    ["Servicios", "servicios"],
    ["Consultorio", "consultorio"],
    ["Pacientes", "opiniones"],
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="nav__topbar">
        <div className="nav__topbar-inner">
          <a className="nav__topinfo" href="tel:+522228965203">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            +52 222 896 5203
          </a>
          <span className="nav__topinfo nav__topinfo--addr">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
              <circle cx="12" cy="10" r="3"/>
            </svg>
            Av. Kepler 2143, Hospital Ángeles, Puebla
          </span>
          <span className="nav__topinfo nav__topinfo--hours">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2">
              <circle cx="12" cy="12" r="10"/>
              <path d="M12 6v6l4 2"/>
            </svg>
            Lun – Vie · 9:00 – 18:00
          </span>
          <span className="nav__topinfo nav__topinfo--cert">
            <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>
            </svg>
            Cédula 7894561
          </span>
          <SocialLinks className="social--nav" size={14} />
        </div>
      </div>
      <div className="nav__inner">
        <a className="brand" href="#inicio" onClick={(e) => { e.preventDefault(); scrollToId("inicio"); }}>
          <span className="brand__mark" aria-hidden="true">
            <img src="assets/logo.png" alt=""/>
          </span>
          <span className="brand__text">
            <span className="brand__name">Dra. Massiel Zenteno</span>
            <span className="brand__sub">Neurocirugía · Puebla</span>
          </span>
        </a>

        <nav className="nav__links" aria-label="Principal">
          {links.map(([label, id]) => (
            <a
              key={id}
              href={`#${id}`}
              onClick={(e) => { e.preventDefault(); scrollToId(id); setOpen(false); }}
            >
              {label}
            </a>
          ))}
        </nav>

        <div className="nav__cta">
          <a className="btn btn--ghost" href="tel:+522228965203">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
            Llamar
          </a>
          <a className="btn btn--primary" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">
            Agendar cita
          </a>
        </div>

        <button className="nav__burger" aria-label="Menú" onClick={() => setOpen(!open)}>
          <span/><span/><span/>
        </button>
      </div>

      {open && (
        <div className="nav__drawer">
          {links.map(([label, id]) => (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); scrollToId(id); setOpen(false); }}>
              {label}
            </a>
          ))}
          <a
            className="btn btn--primary"
            href={BOOKING_URL}
            target="_blank"
            rel="noopener noreferrer"
            onClick={() => setOpen(false)}
          >
            Agendar cita
          </a>
        </div>
      )}
    </header>
  );
}

// -----------------------------------------------------------
// Hero (bottom-left)
// -----------------------------------------------------------
function Hero() {
  return (
    <section id="inicio" className="hero" data-screen-label="01 Hero">
      <HlsBackground />

      <div className="hero__top reveal">
        <span className="chip">
          <span className="chip__dot" />
          Atención presencial y en línea
        </span>
      </div>

      <div className="hero__content reveal">
        <div className="hero__eyebrow">
          <span className="line" />
          <span>Neurocirugía · Neurointervención</span>
        </div>
        <h1 className="hero__title">
          Cuidando lo que <em>te hace ser tú</em>:
          <br/>tu cerebro y tu columna.
        </h1>
        <p className="hero__lede">
          Soy la <strong>Dra. Massiel Zenteno Zenteno</strong>, neurocirujana certificada
          en Puebla. Diagnóstico y tratamiento de patologías cerebrales y de columna
          vertebral con un enfoque humano, claro y cercano.
        </p>

        <div className="hero__ctas">
          <a className="btn btn--primary btn--lg" href={BOOKING_URL} target="_blank" rel="noopener noreferrer">
            Agendar consulta
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </a>
          <button className="btn btn--glass btn--lg" onClick={() => scrollToId("especialidades")}>
            Ver especialidades
          </button>
        </div>

        <div className="hero__meta">
          <div>
            <div className="hero__meta-num">+15</div>
            <div className="hero__meta-lbl">años de práctica clínica</div>
          </div>
          <div className="hero__meta-sep" />
          <div>
            <div className="hero__meta-num">4.9<span>★</span></div>
            <div className="hero__meta-lbl">calificación de pacientes</div>
          </div>
          <div className="hero__meta-sep" />
          <div>
            <div className="hero__meta-num">CCNN</div>
            <div className="hero__meta-lbl">Consejo Mexicano certificada</div>
          </div>
        </div>
      </div>

      <button className="hero__scroll" onClick={() => scrollToId("sobre")} aria-label="Bajar">
        <span>Descubrir</span>
        <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
      </button>
    </section>
  );
}

// -----------------------------------------------------------
// Sobre la Dra.
// -----------------------------------------------------------
function About() {
  const PHOTOS = [
    "assets/carrusel/Hospital.jpg",
    "assets/carrusel/dr1.jpg",
    "assets/carrusel/dr2.jpg",
    "assets/carrusel/dr3.jpg",
    "assets/carrusel/dr4.jpg",
    "assets/carrusel/dr5.jpg",
    "assets/carrusel/dr6.jpg",
    "assets/carrusel/dr7.jpg",
    "assets/carrusel/dr8.jpg",
    "assets/carrusel/dr9.jpg",
  ];
  const [i, setI] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setI((v) => (v + 1) % PHOTOS.length), 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="sobre" className="section section--about" data-screen-label="02 Sobre">
      <div className="container about__grid">
        <div className="about__media reveal">
          <div className="about__photo">
            {PHOTOS.map((src, k) => (
              <img
                key={src}
                src={src}
                alt="Dra. Massiel Zenteno Zenteno"
                className={`about__photo-img ${k === i ? "is-on" : ""}`}
              />
            ))}
            <div className="about__photo-tag">
              <span className="about__photo-tag-dot" />
              Dra. M. Zenteno
            </div>
          </div>
          <div className="about__badge">
            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>
            </svg>
            <div>
              <strong>Cédula 7894561</strong>
              <span>Neurocirugía · UNAM</span>
            </div>
          </div>
        </div>

        <div className="about__copy reveal">
          <span className="kicker">Sobre la Dra.</span>
          <h2 className="h2">
            Una mirada cercana, una mano experta —
            <span className="grad"> medicina con propósito.</span>
          </h2>
          <p>
            Mi vocación es acompañar a cada paciente en uno de los momentos más
            delicados de su vida: cuando algo no anda bien en el cerebro o la columna.
            Combino formación de excelencia con escucha activa, para que cada
            decisión clínica se tome con información clara y confianza.
          </p>
          <ul className="about__creds">
            <li><span className="dot"/><span>Especialidad en Neurocirugía — UNAM</span></li>
            <li><span className="dot"/><span>Alta especialidad en Neurointervencionismo</span></li>
            <li><span className="dot"/><span>Miembro del Consejo Mexicano de Cirugía Neurológica</span></li>
            <li><span className="dot"/><span>Ponente en congresos nacionales e internacionales</span></li>
          </ul>

          <div className="about__values">
            <div className="value">
              <div className="value__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                </svg>
              </div>
              <div>
                <strong>Trato humano</strong>
                <span>Consultas sin prisa, explicaciones claras.</span>
              </div>
            </div>
            <div className="value">
              <div className="value__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M9 12l2 2 4-4M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/>
                </svg>
              </div>
              <div>
                <strong>Evidencia clínica</strong>
                <span>Protocolos actualizados y técnicas mínimamente invasivas.</span>
              </div>
            </div>
            <div className="value">
              <div className="value__icon">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="9"/>
                  <path d="M12 7v5l3 2"/>
                </svg>
              </div>
              <div>
                <strong>Seguimiento</strong>
                <span>Acompañamiento en pre y postoperatorio.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Especialidades
// -----------------------------------------------------------
const SPECIALTIES = [
  {
    title: "Tumores cerebrales",
    body: "Diagnóstico, resección y seguimiento de lesiones intracraneales benignas y malignas.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M12 3c-3 0-5 2-5 4.5 0 .8.2 1.4.5 2C5.6 10.2 4 12 4 14.5 4 17 6 19 8.5 19c1.2 0 2.3-.5 3.1-1.2.8.7 1.9 1.2 3.1 1.2 2.5 0 4.5-2 4.5-4.5 0-2.5-1.6-4.3-3.5-5C16 8.9 16.2 8.3 16.2 7.5 16.2 5 14.2 3 12 3z"/>
        <circle cx="11" cy="12" r="1" fill="currentColor"/>
        <circle cx="14" cy="14" r="1" fill="currentColor"/>
      </svg>
    ),
  },
  {
    title: "Columna vertebral",
    body: "Hernia discal, estenosis lumbar, espondilolistesis y dolor lumbar crónico.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M12 3v18"/>
        <path d="M8 5h8M8 9h8M8 13h8M8 17h8M8 21h8"/>
      </svg>
    ),
  },
  {
    title: "Neurointervencionismo",
    body: "Embolización de aneurismas, MAV y tratamiento endovascular de EVC isquémico.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M4 12c4 0 4-6 8-6s4 12 8 12"/>
        <circle cx="12" cy="9" r="1.5" fill="currentColor"/>
      </svg>
    ),
  },
  {
    title: "Trauma craneoencefálico",
    body: "Manejo agudo de TCE, hematomas y fracturas con cirugía oportuna.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M12 3a8 8 0 0 0-8 8c0 5 4 6 4 9h8c0-3 4-4 4-9a8 8 0 0 0-8-8z"/>
        <path d="M9 14l2 2 4-4"/>
      </svg>
    ),
  },
  {
    title: "Hidrocefalia",
    body: "Colocación y revisión de sistemas valvulares en adultos y adolescentes.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <path d="M12 3c-3 5-6 8-6 12a6 6 0 0 0 12 0c0-4-3-7-6-12z"/>
      </svg>
    ),
  },
  {
    title: "Dolor crónico",
    body: "Bloqueos, radiofrecuencia y abordaje multidisciplinario del dolor neuropático.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
        <circle cx="12" cy="12" r="9"/>
        <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
        <path d="M9 9l1 1M14 9l1 1"/>
      </svg>
    ),
  },
];

function Specialties() {
  return (
    <section id="especialidades" className="section section--specialties" data-screen-label="03 Especialidades">
      <div className="container">
        <div className="section__head reveal">
          <span className="kicker">Especialidades</span>
          <h2 className="h2">Áreas de atención <span className="grad">cerebro & columna</span></h2>
          <p className="lede">
            Atención integral desde el diagnóstico hasta el tratamiento quirúrgico
            y la rehabilitación, con técnicas mínimamente invasivas cuando es posible.
          </p>
        </div>

        <div className="cards">
          {SPECIALTIES.map((s, i) => (
            <article key={s.title} className="card reveal" style={{ "--d": `${i * 70}ms` }}>
              <div className="card__icon">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Enfermedades tratadas — basadas en perfil Doctoralia.
// -----------------------------------------------------------
const CONDITIONS = [
  "Aneurisma cerebral",
  "Accidente cerebrovascular hemorrágico",
  "Hemorragia subaracnoidea",
  "Hemorragia intracerebral",
  "Hematoma subdural",
  "Hematoma epidural",
  "Malformación arteriovenosa cerebral",
  "Enfermedad cerebrovascular",
  "Derrame cerebral",
  "Traumatismo craneoencefálico",
  "Tumor cerebral en adultos",
  "Tumor cerebral metastásico",
  "Meningioma",
  "Glioblastoma multiforme",
  "Astrocitoma",
  "Oligodendroglioma",
  "Ependimoma",
  "Meduloblastoma",
  "Neuroma acústico",
  "Adenoma de hipófisis",
  "Apoplejía hipofisaria",
  "Quiste aracnoideo",
  "Pseudotumor cerebral",
  "Hidrocefalia",
  "Hidrocefalia obstructiva",
  "Hernia de disco",
  "Hernia discal cervical",
  "Canal estrecho lumbar",
  "Canal estrecho cervical",
  "Estenosis raquídea",
  "Compresión de la médula espinal",
  "Fractura de columna",
  "Tumor de columna y médula espinal",
  "Lesión medular",
  "Mielomeningocele",
  "Siringomielia",
  "Ciática",
  "Dolor lumbar crónico",
  "Dolor neuropático",
  "Neuralgia",
  "Cefalea cervicogénica",
  "Cefalea en racimo",
  "Epilepsia",
  "Trastorno convulsivo",
  "Síndrome de herniación",
  "Hipertensión intracraneal",
  "Absceso cerebral",
  "Absceso de la médula espinal",
  "Absceso epidural",
  "Craneosinostosis",
  "Hemiplejía",
];

function Conditions() {
  const [expanded, setExpanded] = useState(false);
  const INITIAL = 18;
  const visible = expanded ? CONDITIONS : CONDITIONS.slice(0, INITIAL);

  return (
    <section id="enfermedades" className="section section--conditions" data-screen-label="04 Enfermedades">
      <div className="container">
        <div className="section__head reveal">
          <span className="kicker">Enfermedades tratadas</span>
          <h2 className="h2">
            Atiendo padecimientos del <span className="grad">cerebro, médula y columna</span>
          </h2>
          <p className="lede">
            Estos son los principales diagnósticos que trato en consulta, con
            un plan personalizado según cada caso.
          </p>
        </div>

        <ul className="cond__grid reveal" aria-label="Lista de enfermedades tratadas">
          {visible.map((c, k) => (
            <li
              key={c}
              className="cond__chip"
              style={{ animationDelay: `${Math.min(k, 24) * 28}ms` }}
            >
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true">
                <path d="M20 6L9 17l-5-5"/>
              </svg>
              <span>{c}</span>
            </li>
          ))}
        </ul>

        {CONDITIONS.length > INITIAL && (
          <div className="cond__more">
            <button
              type="button"
              className="btn btn--ghost"
              onClick={() => setExpanded((v) => !v)}
              aria-expanded={expanded}
            >
              {expanded ? "Ver menos" : `Ver todas (${CONDITIONS.length})`}
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" style={{ transform: expanded ? "rotate(180deg)" : "none", transition: "transform .25s var(--ease, ease)" }}>
                <path d="M6 9l6 6 6-6"/>
              </svg>
            </button>
          </div>
        )}
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Servicios (proceso)
// -----------------------------------------------------------
const STEPS = [
  { n: "01", t: "Primera consulta", d: "Historia clínica detallada, exploración neurológica y revisión de estudios previos." },
  { n: "02", t: "Diagnóstico preciso", d: "Solicitud e interpretación de RM, TAC, angiografía o electromiografía cuando es necesario." },
  { n: "03", t: "Plan terapéutico", d: "Te explico todas las opciones —médicas, intervencionistas o quirúrgicas— para decidir juntos." },
  { n: "04", t: "Tratamiento", d: "Procedimiento quirúrgico o endovascular en hospitales certificados de Puebla." },
  { n: "05", t: "Seguimiento", d: "Revisiones programadas, telemedicina y enlace con rehabilitación y especialistas." },
];

function Services() {
  return (
    <section id="servicios" className="section section--services" data-screen-label="04 Servicios">
      <div className="services-bg" aria-hidden="true">
        <SeamlessVideo src="videodraneuro.mp4" videoClassName="services-bg__video" />
        <div className="services-bg__overlay" />
      </div>

      <div className="container">
        <div className="section__head reveal">
          <span className="kicker">Cómo trabajo</span>
          <h2 className="h2">Un proceso claro, sin sorpresas.</h2>
          <p className="lede">
            Cinco etapas para que sepas en todo momento qué sigue y por qué.
          </p>
        </div>

        <ol className="steps">
          {STEPS.map((s, i) => (
            <li key={s.n} className="step reveal" style={{ "--d": `${i * 80}ms` }}>
              <span className="step__n">{s.n}</span>
              <div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Consultorio
// -----------------------------------------------------------
const OFFICE_PHOTOS = [
  "consultorio/1.png",
  "consultorio/2.png",
  "consultorio/3.png",
  "consultorio/4.png",
  "consultorio/5.png",
];

function OfficeCarousel() {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = OFFICE_PHOTOS.length;

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setI((v) => (v + 1) % n), 4500);
    return () => clearInterval(id);
  }, [paused, n]);

  const go = (k) => setI(((k % n) + n) % n);

  return (
    <div
      className="office__carousel reveal"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="office__carousel-stage">
        {OFFICE_PHOTOS.map((src, k) => (
          <img
            key={src}
            src={src}
            alt={`Consultorio · vista ${k + 1}`}
            loading={k === 0 ? "eager" : "lazy"}
            decoding="async"
            fetchpriority={k === 0 ? "high" : "low"}
            className={`office__carousel-img ${k === i ? "is-on" : ""}`}
          />
        ))}
        <div className="office__carousel-overlay" />
        <span className="office__carousel-counter">
          {i + 1} / {n}
        </span>
      </div>

      <button
        type="button"
        className="office__carousel-arrow office__carousel-arrow--prev"
        onClick={() => go(i - 1)}
        aria-label="Foto anterior"
      >
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M15 18l-6-6 6-6"/>
        </svg>
      </button>
      <button
        type="button"
        className="office__carousel-arrow office__carousel-arrow--next"
        onClick={() => go(i + 1)}
        aria-label="Foto siguiente"
      >
        <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M9 6l6 6-6 6"/>
        </svg>
      </button>

      <div className="office__carousel-dots" role="tablist" aria-label="Fotos del consultorio">
        {OFFICE_PHOTOS.map((_, k) => (
          <button
            key={k}
            type="button"
            role="tab"
            aria-selected={k === i}
            aria-label={`Ir a la foto ${k + 1}`}
            className={`office__carousel-dot ${k === i ? "is-on" : ""}`}
            onClick={() => go(k)}
          />
        ))}
      </div>
    </div>
  );
}

function Office() {
  return (
    <section id="consultorio" className="section section--office" data-screen-label="05 Consultorio">
      <div className="container">
        <OfficeCarousel />
      </div>
      <div className="container office__grid">
        <div className="office__copy reveal">
          <span className="kicker">Consultorio</span>
          <h2 className="h2">Te atiendo en el corazón de Puebla.</h2>
          <p>
            Espacio cómodo, equipado y privado, dentro de un hospital con
            certificación que permite atender urgencias y programar
            procedimientos quirúrgicos de manera ágil.
          </p>

          <div className="office__cards">
            <div className="office__card">
              <div className="office__card-icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </svg>
              </div>
              <div className="office__card-text">
                <strong>Hospital Ángeles Puebla</strong>
                <span>Av. Kepler 2143, Reserva Territorial Atlixcáyotl, 72190 Puebla, Pue.</span>
              </div>
            </div>
            <div className="office__card">
              <div className="office__card-icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="10"/>
                  <path d="M12 6v6l4 2"/>
                </svg>
              </div>
              <div className="office__card-text">
                <strong>Horario</strong>
                <span>Lun–Vie 9:00 – 19:00 · Sáb 9:00 – 14:00</span>
              </div>
            </div>
            <div className="office__card">
              <div className="office__card-icon">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
                </svg>
              </div>
              <div className="office__card-text">
                <strong>Teléfono</strong>
                <span>+52 222 896 5203 · WhatsApp 24/7</span>
              </div>
            </div>
          </div>
        </div>

        <div className="office__map reveal">
          <div className="map">
            <iframe
              title="Ubicación — Hospital Ángeles Puebla"
              src="https://www.google.com/maps?q=Hospital+%C3%81ngeles+Puebla,+Calle+Kepler+2143,+Reserva+Territorial+Atlixc%C3%A1yotl,+72190+Puebla,+Pue.&hl=es&z=16&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            />
            <a
              className="map__chip"
              href="https://maps.google.com/?q=Hospital+%C3%81ngeles+Puebla,+Calle+Kepler+2143,+Reserva+Territorial+Atlixc%C3%A1yotl,+72190+Puebla,+Pue.&ll=19.021485,-98.234464"
              target="_blank"
              rel="noreferrer"
            >
              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                <circle cx="12" cy="10" r="3"/>
              </svg>
              Cómo llegar
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M7 17L17 7M9 7h8v8"/>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Testimonios
// -----------------------------------------------------------
const REVIEWS = [
  {
    name: "Laura M.",
    when: "Hace 2 semanas",
    body: "Excelente trato. La doctora me explicó cada paso de mi cirugía de hernia discal y el postoperatorio fue mucho más rápido de lo que esperaba.",
    rating: 5,
    motivo: "Hernia discal",
  },
  {
    name: "Roberto P.",
    when: "Hace 1 mes",
    body: "Profesional, clara y muy humana. Me sentí escuchado desde la primera consulta. La recomiendo sin dudarlo.",
    rating: 5,
    motivo: "Primera consulta",
  },
  {
    name: "Adriana G.",
    when: "Hace 2 meses",
    body: "Mi mamá tenía hidrocefalia y la Dra. Massiel coordinó todo de manera impecable. Hoy está estable y agradecida.",
    rating: 5,
    motivo: "Hidrocefalia",
  },
  {
    name: "Carlos R.",
    when: "Hace 3 semanas",
    body: "Llevaba meses con dolor lumbar y nadie daba con el diagnóstico. En una sola consulta me orientó y hoy estoy recuperándome.",
    rating: 5,
    motivo: "Dolor lumbar crónico",
  },
  {
    name: "Sofía N.",
    when: "Hace 1 semana",
    body: "Atenta, paciente y muy preparada. Resolvió todas mis dudas antes y después del procedimiento endovascular.",
    rating: 5,
    motivo: "Aneurisma cerebral",
  },
  {
    name: "Miguel A.",
    when: "Hace 1 mes",
    body: "Una segunda opinión que me cambió el rumbo. Evité una cirugía mayor gracias a su criterio clínico.",
    rating: 5,
    motivo: "Segunda opinión",
  },
  {
    name: "Patricia H.",
    when: "Hace 5 días",
    body: "Llegué con migraña incapacitante y la doctora encontró la causa. Por primera vez en años duermo bien.",
    rating: 5,
    motivo: "Cefalea crónica",
  },
  {
    name: "Diego V.",
    when: "Hace 6 semanas",
    body: "Confianza absoluta. Operación de columna sin complicaciones y un seguimiento muy cercano en todo momento.",
    rating: 5,
    motivo: "Estenosis lumbar",
  },
];

function ReviewCard({ r }) {
  return (
    <article className="rcard">
      <div className="rcard__stars" aria-label={`${r.rating} de 5`}>
        {Array.from({ length: 5 }).map((_, k) => (
          <svg key={k} viewBox="0 0 24 24" width="14" height="14" fill={k < r.rating ? "currentColor" : "none"} stroke="currentColor" strokeWidth="1.4">
            <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z"/>
          </svg>
        ))}
      </div>
      <p className="rcard__body">{r.body}</p>
      <div className="rcard__foot">
        <div className="rcard__avatar" aria-hidden="true">{r.name.charAt(0)}</div>
        <div className="rcard__who">
          <strong>{r.name}</strong>
          <span>{r.motivo} · {r.when}</span>
        </div>
      </div>
    </article>
  );
}

function Reviews() {
  // Duplicate the list so the marquee can loop seamlessly.
  const loopA = [...REVIEWS, ...REVIEWS];
  const loopB = [...REVIEWS.slice().reverse(), ...REVIEWS.slice().reverse()];

  return (
    <section id="opiniones" className="section section--reviews" data-screen-label="06 Opiniones">
      <div className="container">
        <div className="reviews__head reveal">
          <div>
            <span className="kicker">Opiniones</span>
            <h2 className="h2">
              4.9 / 5 — la confianza
              <span className="grad"> de mis pacientes.</span>
            </h2>
            <p className="lede">
              Más de 200 reseñas verificadas de pacientes atendidos en
              Puebla, México y en consulta de telemedicina.
            </p>
          </div>
          <div className="reviews__stats">
            <div><strong>4.9</strong><span>★ promedio</span></div>
            <div className="reviews__stats-sep"/>
            <div><strong>200+</strong><span>reseñas</span></div>
            <div className="reviews__stats-sep"/>
            <div><strong>98%</strong><span>recomendaría</span></div>
          </div>
        </div>
      </div>

      <div className="marquee reveal" role="region" aria-label="Carrusel de opiniones">
        <div className="marquee__row marquee__row--a">
          {loopA.map((r, i) => <ReviewCard key={`a-${i}`} r={r} />)}
        </div>
        <div className="marquee__row marquee__row--b">
          {loopB.map((r, i) => <ReviewCard key={`b-${i}`} r={r} />)}
        </div>
        <div className="marquee__fade marquee__fade--l" aria-hidden="true"/>
        <div className="marquee__fade marquee__fade--r" aria-hidden="true"/>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Contacto / Agendar
// -----------------------------------------------------------
function Contact() {
  return (
    <section id="contacto" className="section section--contact" data-screen-label="07 Contacto">
      <div className="contact-bg" aria-hidden="true">
        <SeamlessVideo src="videoneuronas.mp4" videoClassName="contact-bg__video" />
        <div className="contact-bg__overlay" />
      </div>

      <div className="container contact__grid">
        <div className="contact__copy reveal">
          <span className="kicker kicker--light">Agenda tu cita</span>
          <h2 className="h2 h2--light">
            Estoy aquí para
            <br/>escucharte.
          </h2>
          <p className="lede lede--light">
            Reserva tu consulta con la{" "}
            <strong>Dra. Massiel Zenteno Zenteno</strong> por WhatsApp o
            directamente en línea desde Doctoralia.
          </p>

          <div className="contact__channels">
            <a className="channel" href="tel:+522228965203">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>
              </svg>
              <div><strong>Llámame</strong><span>+52 222 896 5203</span></div>
            </a>
            <a className="channel" href="https://wa.me/522228965203" target="_blank" rel="noreferrer">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 11.5a8.5 8.5 0 1 1-3.6-6.95L21 4l-1.05 3.5A8.46 8.46 0 0 1 21 11.5z"/>
              </svg>
              <div><strong>WhatsApp</strong><span>Respuesta rápida</span></div>
            </a>
            <a className="channel" href="mailto:zenteno.massiel.md@gmail.com">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                <path d="M22 6L12 13 2 6"/>
              </svg>
              <div><strong>Email</strong><span>zenteno.massiel.md@gmail.com</span></div>
            </a>
          </div>
        </div>

        <aside className="contact__card reveal">
          <header className="contact__card-head">
            <span className="contact__card-avatar" aria-hidden="true">
              <img src="assets/logo.png" alt=""/>
            </span>
            <div>
              <strong>Dra. Massiel Zenteno Zenteno</strong>
              <span>Neurocirujana certificada · Puebla</span>
            </div>
          </header>

          <h3 className="contact__card-title">Tipos de cita</h3>
          <ul className="contact__types">
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Primera visita de Neurocirugía</span>
              <em>$1,100</em>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Visitas sucesivas de Neurocirugía</span>
              <em>$1,100</em>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Consulta de seguimiento</span>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Segunda opinión</span>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Telemedicina</span>
            </li>
            <li>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
              <span>Urgencias neuroquirúrgicas</span>
            </li>
          </ul>

          <p className="contact__card-note">
            Agenda vía{" "}
            <a href="https://wa.me/522228965203" target="_blank" rel="noreferrer">WhatsApp</a>{" "}
            o en{" "}
            <a href={BOOKING_URL} target="_blank" rel="noopener noreferrer">Doctoralia</a>{" "}
            dando clic en el botón.
          </p>

          <a
            className="btn btn--primary btn--lg contact__card-cta"
            href={BOOKING_URL}
            target="_blank"
            rel="noopener noreferrer"
          >
            Agendar cita
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M5 12h14M13 5l7 7-7 7"/>
            </svg>
          </a>
        </aside>
      </div>
    </section>
  );
}

// -----------------------------------------------------------
// Footer
// -----------------------------------------------------------
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer__grid">
        <div>
          <div className="brand brand--footer">
            <span className="brand__mark brand__mark--lg"><img src="assets/logo.png" alt=""/></span>
            <span className="brand__text">
              <span className="brand__name">Dra. Massiel Zenteno</span>
              <span className="brand__sub">Neurocirugía · Puebla</span>
            </span>
          </div>
          <p className="footer__about">
            Atención neuroquirúrgica integral con un enfoque humano,
            cercano y basado en la mejor evidencia disponible.
          </p>
        </div>
        <div>
          <h4>Navegación</h4>
          <a href="#sobre" onClick={(e) => { e.preventDefault(); scrollToId("sobre"); }}>Sobre mí</a>
          <a href="#servicios" onClick={(e) => { e.preventDefault(); scrollToId("servicios"); }}>Servicios</a>
          <a href="#consultorio" onClick={(e) => { e.preventDefault(); scrollToId("consultorio"); }}>Consultorio</a>
          <a href="#opiniones" onClick={(e) => { e.preventDefault(); scrollToId("opiniones"); }}>Pacientes</a>
        </div>
        <div>
          <h4>Contacto</h4>
          <a href="tel:+522228965203">+52 222 896 5203</a>
          <a href="mailto:zenteno.massiel.md@gmail.com">zenteno.massiel.md@gmail.com</a>
          <span>Av. Kepler 2143, Hospital Ángeles, Puebla.</span>
        </div>
        <div>
          <h4>Legal</h4>
          <a href="#">Aviso de privacidad</a>
          <a href="#">Términos del servicio</a>
          <a href="#">Cédula 7894561</a>
        </div>
      </div>
      <div className="container footer__socials">
        <SocialLinks className="social--footer" size={18} />
      </div>
      <div className="footer__bottom">
        <span>© 2026 Dra. Massiel Zenteno Zenteno. Todos los derechos reservados.</span>
        <span>Hecho con cuidado en Puebla, México.</span>
        <span>Desarrollado por <a href="https://heronova.net" target="_blank" rel="noopener noreferrer">HeroNova</a></span>
      </div>
    </footer>
  );
}

// -----------------------------------------------------------
// App
// -----------------------------------------------------------
function App() {
  useReveal();
  useTextAnimations();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <About />
        <Specialties />
        <Conditions />
        <Services />
        <Office />
        <Reviews />
        <Contact />
      </main>
      <Footer />
      <WhatsAppFab />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);