/* ============================================================
   NEUROMED — Section components
   ============================================================ */
const { useState, useEffect, useRef } = React;

/* ---------- Icons ---------- */
const Icon = {
  Arrow: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M5 12h14M13 6l6 6-6 6" />
    </svg>
  ),
  Plus: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 5v14M5 12h14" />
    </svg>
  ),
  Check: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12l5 5L20 7" />
    </svg>
  ),
  Chev: ({ size = 16, dir = "right" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"
         style={{ transform: dir === "left" ? "rotate(180deg)" : "" }}>
      <path d="M9 6l6 6-6 6" />
    </svg>
  ),
  Wa: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2a10 10 0 00-8.7 14.9L2 22l5.3-1.4A10 10 0 1012 2zm5.5 14.2c-.2.6-1.2 1.2-1.7 1.3-.4.1-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6-2.7-1.2-4.5-3.9-4.6-4.1-.1-.2-1.1-1.4-1.1-2.7s.7-1.9.9-2.1c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4l.8 2c.1.2.1.4 0 .5l-.3.4c-.1.2-.3.3-.4.5-.1.1-.3.3-.1.5.2.3.8 1.4 1.8 2.3 1.3 1.1 2.3 1.5 2.6 1.6.3.1.5.1.7-.1.2-.2.8-.9 1-1.2.2-.3.4-.3.7-.2.3.1 1.8.9 2.1 1 .3.1.5.2.6.4.1.1.1.7-.1 1.4z"/>
    </svg>
  ),
  Instagram: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <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="0.5" fill="currentColor"/>
    </svg>
  ),
};

/* line-style anatomy icons for hero stats */
const MetaIcon = {
  Spine: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <path d="M12 3c-2 0-3 1.2-3 2.4 0 .8.4 1.4 1 1.8M12 3c2 0 3 1.2 3 2.4 0 .8-.4 1.4-1 1.8" />
      <path d="M10 8.2c-1.5.3-2.5 1-2.5 2 0 .9.8 1.5 2 1.8M14 8.2c1.5.3 2.5 1 2.5 2 0 .9-.8 1.5-2 1.8" />
      <path d="M9.5 13c-1.5.3-2.5 1-2.5 2 0 .9.8 1.5 2 1.8M14.5 13c1.5.3 2.5 1 2.5 2 0 .9-.8 1.5-2 1.8" />
      <path d="M10 18c-1 .3-1.8.9-1.8 1.6 0 .7.7 1.2 1.7 1.4M14 18c1 .3 1.8.9 1.8 1.6 0 .7-.7 1.2-1.7 1.4" />
      <line x1="12" y1="6" x2="12" y2="21" />
    </svg>
  ),
  Brain: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5c-1.5-1.5-4-1.5-5.5 0-1.2 1.2-1 2.8-.3 3.7-1 .6-1.5 2-.8 3.3-.8 1-.5 2.6.7 3.3-.2 1.5 1 2.7 2.5 2.7 1 1.5 3.5 1.5 4.4 0V5z" />
      <path d="M12 5c1.5-1.5 4-1.5 5.5 0 1.2 1.2 1 2.8.3 3.7 1 .6 1.5 2 .8 3.3.8 1 .5 2.6-.7 3.3.2 1.5-1 2.7-2.5 2.7-1 1.5-3.5 1.5-4.4 0V5z" />
      <path d="M9.5 9.5c.5 0 1-.3 1.2-.8M14.5 9.5c-.5 0-1-.3-1.2-.8M9 13c.6.3 1.4.3 2-.2M15 13c-.6.3-1.4.3-2-.2" />
    </svg>
  ),
  Clock: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3.5 2" />
    </svg>
  ),
  Pin: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" />
      <circle cx="12" cy="9" r="2.5" />
    </svg>
  ),
  Building: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
      <rect x="4" y="3" width="16" height="18" rx="1" />
      <line x1="8" y1="7" x2="10" y2="7" />
      <line x1="14" y1="7" x2="16" y2="7" />
      <line x1="8" y1="11" x2="10" y2="11" />
      <line x1="14" y1="11" x2="16" y2="11" />
      <line x1="8" y1="15" x2="10" y2="15" />
      <line x1="14" y1="15" x2="16" y2="15" />
      <path d="M10 21v-3h4v3" />
    </svg>
  ),
};

/* ---------- NOVEDADES TICKER ---------- */
const NOVEDADES = [
  { tag: "Hito", text: "Pioneros en Argentina en cirugía del paciente despierto y en fractura sacroilíaca percutánea", href: "#trayectoria" },
  { tag: "Equipo", text: "+4.000 cirugías de columna realizadas con técnicas mínimamente invasivas", href: "#trayectoria" },
  { tag: "Tecnología", text: "Neuronavegación Fiagon 3D incorporada al equipamiento del quirófano", href: "#quirofano" },
  { tag: "Atención", text: "Guardia activa 24/365 con neurocirujano disponible", href: "#guardia" },
  { tag: "Sedes", text: "Atendemos en Clínica Privada Alcorta y Clínica del Buen Pastor · Buenos Aires", href: "#contacto" },
];

function Novedades() {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    const mq = window.matchMedia("(max-width: 760px)");
    const update = () => setIsMobile(mq.matches);
    update();
    mq.addEventListener("change", update);
    return () => mq.removeEventListener("change", update);
  }, []);
  useEffect(() => {
    if (paused || isMobile) return;
    const id = setInterval(() => setI((v) => (v + 1) % NOVEDADES.length), 5000);
    return () => clearInterval(id);
  }, [paused, isMobile]);

  if (isMobile) {
    const loop = [...NOVEDADES, ...NOVEDADES];
    return (
      <div className="novedades novedades-mobile">
        <span className="nov-label mono"><span className="nov-pulse" /> Novedades</span>
        <div className="nov-marquee">
          <div className="nov-track">
            {loop.map((it, idx) => (
              <a href={it.href} className="nov-mq-item" key={idx}>
                <span className="nov-tag mono">{it.tag}</span>
                <span>{it.text}</span>
              </a>
            ))}
          </div>
        </div>
      </div>
    );
  }

  const n = NOVEDADES[i];
  return (
    <div className="novedades" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="container novedades-inner">
        <span className="nov-label mono">
          <span className="nov-pulse" /> Novedades
        </span>
        <a href={n.href} className="nov-item" key={i}>
          <span className="nov-tag mono">{n.tag}</span>
          <span className="nov-text">{n.text}</span>
          <span className="nov-arrow"><Icon.Arrow size={12} /></span>
        </a>
        <div className="nov-dots">
          {NOVEDADES.map((_, idx) => (
            <button key={idx} className={"nov-dot" + (idx === i ? " active" : "")}
                    onClick={() => setI(idx)} aria-label={`Novedad ${idx + 1}`} />
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------- NAV ---------- */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["Trayectoria", "#trayectoria"],
    ["Servicios", "#servicios"],
    ["Enfoque", "#approach"],
    ["Patologías", "#patologias"],
    ["Equipo", "#equipo"],
    ["Turnos", "#turnos"],
  ];
  // Número provisorio — cambiar cuando se defina el oficial
  const waNumber = "5491158136779";
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="container nav-inner">
        <div className="nav-left">
          <button className={"nav-burger" + (menuOpen ? " open" : "")} onClick={() => setMenuOpen((v) => !v)} aria-label="Menú">
            <span></span><span></span><span></span>
          </button>
          <a href="#" className="brand">
            <img src="logo.png" alt="Neuromed" className="brand-logo" />
          </a>
        </div>
        <div className="nav-links">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </div>
        <div className="nav-actions">
          <button className="btn" onClick={onBook}>
            <span className="btn-label-full">Pedir turno</span>
            <span className="btn-label-short">Turnos</span>
            <span className="btn-arrow"><Icon.Arrow /></span>
          </button>
          <a className="btn-wa btn-wa-icon" href={`https://wa.me/${waNumber}`} target="_blank" rel="noreferrer" aria-label="WhatsApp">
            <Icon.Wa size={20} />
          </a>
          <a className="btn-ig btn-wa-icon" href="https://instagram.com/neuromed.ar" target="_blank" rel="noreferrer" aria-label="Instagram">
            <Icon.Instagram size={20} />
          </a>
        </div>
      </div>
      <div className={"nav-drawer" + (menuOpen ? " open" : "")}>
        {links.map(([l, h]) => <a key={h} href={h} onClick={() => setMenuOpen(false)}>{l}</a>)}
      </div>
    </nav>
  );
}

/* ---------- HERO CAROUSEL ---------- */
const CAROUSEL = [
  { src: "img/cirugia-equipo.jpg", caption: "Cirugía neuroquirúrgica · equipo Neuromed", area: "Quirófano", pos: "center 30%" },
  { src: "img/cirugia-columna.jpg", caption: "Cirugía de columna · equipo en quirófano", area: "Columna", pos: "center 35%" },
  { src: "img/neuronavegacion.jpg", caption: "Neuronavegación Fiagon 3D intraoperatoria", area: "Neuronavegación" },
  { src: "img/endoscopia.jpg", caption: "Endoscopia neuroquirúrgica de base de cráneo", area: "Endoscopia" },
  { src: "img/endoscopia-ventricular.jpg", caption: "Endoscopia intraventricular", area: "Endoscopia" },
  { src: "img/aspiracion.jpg", caption: "Aspiración ultrasónica · minimizando riesgos", area: "Tecnología" },
  { src: "img/bloqueo.jpg", caption: "Bloqueo bajo control tomográfico", area: "Dolor" },
  { src: "img/fractura.jpg", caption: "Fractura sacroilíaca percutánea", area: "Columna" },
  { src: "img/microcirugia.jpg", caption: "Microcirugía con instrumental de precisión", area: "Microcirugía" },
];

function HeroCarousel() {
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setI((v) => (v + 1) % CAROUSEL.length), 4500);
    return () => clearInterval(id);
  }, [paused]);
  const go = (d) => setI((v) => (v + d + CAROUSEL.length) % CAROUSEL.length);

  return (
    <div className="carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="carousel-track">
        {CAROUSEL.map((c, idx) => (
          <div key={idx} className={"carousel-slide" + (idx === i ? " active" : "")} aria-hidden={idx !== i}>
            <img src={c.src} alt={c.caption} style={{ objectPosition: c.pos || "center", objectFit: c.fit || "cover" }} />
          </div>
        ))}
      </div>

      <div className="carousel-overlay">
        <div className="carousel-meta">
          <span className="carousel-area mono">{CAROUSEL[i].area}</span>
          <span className="carousel-caption">{CAROUSEL[i].caption}</span>
        </div>
        <div className="carousel-controls">
          <button onClick={() => go(-1)} aria-label="Anterior"><Icon.Chev dir="left" /></button>
          <span className="carousel-count mono">{String(i + 1).padStart(2, "0")} / {String(CAROUSEL.length).padStart(2, "0")}</span>
          <button onClick={() => go(1)} aria-label="Siguiente"><Icon.Chev /></button>
        </div>
      </div>

      <div className="carousel-progress">
        {CAROUSEL.map((_, idx) => (
          <button key={idx} className={"cp-tick" + (idx === i ? " active" : "")}
                  onClick={() => setI(idx)} aria-label={`Imagen ${idx + 1}`}>
            <span className="cp-bar" />
          </button>
        ))}
      </div>
    </div>
  );
}

/* ---------- HERO ---------- */
function Hero({ onBook }) {
  return (
    <header className="hero">
      <div className="container">
        <div className="hero-eyebrow mono">
          <span className="dot" />
          <span>Servicio de Neurocirugía · Buenos Aires · Argentina</span>
          <span style={{ marginLeft: "auto", opacity: 0.7 }}></span>
        </div>

        <h1 className="hero-headline serif">
          Cirugía <em>de precisión</em> para devolverte<br/>
          la <span className="underline-word">calidad de vida</span> que merecés.
        </h1>

        <div className="hero-intro">
          <p className="hero-sub">
            Servicio de neurocirugía dirigido por el <b>Dr. Marcelo Torres</b>, con más de veinte años
            tratando patología quirúrgica del sistema nervioso central y de columna. Operamos con las
            técnicas <b>menos invasivas</b> disponibles hoy — neuronavegación 3D, monitoreo
            intraoperatorio y endoscopia — siempre con el objetivo de devolverle al paciente su
            calidad de vida en el menor tiempo posible. Trabajamos con guardia activa <b>24/365</b>{" "}
            en diferentes instituciones.
          </p>
          <div className="hero-actions">
            <button className="btn" onClick={onBook}>
              Pedir turno <Icon.Arrow />
            </button>
            <a className="btn btn-ghost" href="#servicios">
              Ver servicios
            </a>
          </div>
        </div>

        <div className="hero-stats">
          <div className="hero-stat">
            <span className="hs-icon"><MetaIcon.Spine /></span>
            <span className="hs-k mono">Cirugías de columna</span>
            <span className="hs-v serif">+4.000</span>
          </div>
          <div className="hero-stat">
            <span className="hs-icon"><MetaIcon.Brain /></span>
            <span className="hs-k mono">Tumores cerebrales</span>
            <span className="hs-v serif">+1.500</span>
          </div>
          <div className="hero-stat">
            <span className="hs-icon"><MetaIcon.Clock /></span>
            <span className="hs-k mono">Años de experiencia</span>
            <span className="hs-v serif">+20</span>
          </div>
          <a className="hero-stat" href="https://maps.google.com/?q=Cl%C3%ADnica+Privada+Alcorta+Buenos+Aires" target="_blank" rel="noreferrer">
            <span className="hs-icon"><MetaIcon.Building /></span>
            <span className="hs-k mono">Clínica Privada Alcorta</span>
            <span className="hs-v serif">Sede</span>
            <span className="hs-sublink">Ver en Maps <Icon.Arrow size={10} /></span>
          </a>
          <a className="hero-stat" href="https://maps.google.com/?q=Cl%C3%ADnica+del+Buen+Pastor+Buenos+Aires" target="_blank" rel="noreferrer">
            <span className="hs-icon"><MetaIcon.Building /></span>
            <span className="hs-k mono">Clínica del Buen Pastor</span>
            <span className="hs-v serif">Sede</span>
            <span className="hs-sublink">Ver en Maps <Icon.Arrow size={10} /></span>
          </a>
        </div>

        <div className="hero-strip-wrap">
          <HeroCarousel />
        </div>
      </div>
    </header>
  );
}

/* ---------- SERVICES ---------- */
const SERVICES = [
  {
    n: "01",
    title: "Consulta",
    img: "img/consultorio.jpg",
    alt: "Consulta neuroquirúrgica · lectura de resonancia",
    text: "Evaluación clínica y diagnóstico para patología de columna y patología quirúrgica del sistema nervioso central. Revisión de estudios e interconsulta.",
  },
  {
    n: "02",
    title: "Bloqueos bajo TAC",
    img: "img/bloqueos.jpg",
    alt: "Bloqueo bajo control tomográfico",
    text: "+7.000 bloqueos guiados por tomografía: cervicales, epidurales, neuroradiculares, facetarios, transcoccígeo, sacroilíaco, trocantéreo, plexo solar e hipogástrico.",
  },
  {
    n: "03",
    title: "Tratamiento del Dolor",
    img: "img/dolor.jpg",
    alt: "Procedimiento de tratamiento del dolor",
    text: "Consultorio específico de manejo del dolor. Plan terapéutico individual, seguimiento cercano y técnicas mínimamente invasivas.",
  },
  {
    n: "04",
    title: "Cirugía mínimamente invasiva",
    img: "img/microcirugia.jpg",
    alt: "Microcirugía con microscopio Zeiss",
    text: "Endoscopia, microdiscectomía y técnicas percutáneas. Incisiones más pequeñas, internación más corta, mismos resultados.",
  },
  {
    n: "05",
    title: "Cirugía mayor",
    img: "img/cirugia-columna.jpg",
    alt: "Equipo completo en quirófano",
    text: "Procedimientos de alta complejidad: tumores intracraneales, cirugía endovascular, patología hipofisaria y reconstrucciones de columna.",
  },
];

function Services({ onBook }) {
  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 02</span>
            <span className="label">Servicios</span>
          </div>
          <h2 className="section-title serif">
            Cinco caminos para abordar una misma <em>preocupación</em>.
          </h2>
        </div>

        <div className="services-grid">
          {SERVICES.map((s) => (
            <button key={s.n} className="service" onClick={onBook}>
              <span className="num">{s.n} / 05</span>
              <div className="ph img" style={{padding:0}}>
                <img src={s.img} alt={s.alt} className="service-img" />
              </div>
              <h3 className="serif">{s.title}</h3>
              <p>{s.text}</p>
              <span className="more">
                Reservar turno <span className="arrow"><Icon.Arrow /></span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- APPROACH ---------- */
const VALUES = [
  { n: "I", h: "Mínimamente invasivo", p: "Incisiones más pequeñas, recuperación más corta, mismos resultados." },
  { n: "II", h: "Decisión compartida", p: "Te explicamos cada paso. Vos elegís con información clara." },
  { n: "III", h: "Seguimiento real", p: "Acompañamiento desde el primer estudio hasta el alta definitiva." },
  { n: "IV", h: "Segunda opinión honesta", p: "Si no necesitás operarte, te lo decimos." },
];

function Approach() {
  return (
    <section className="section" id="approach">
      <div className="container">
        <div className="approach">
          <div className="img-wrap">
            <div className="ph" style={{padding:0, height:'100%', width:'100%'}}>
              <img src="img/cirugia-equipo.jpg" alt="Equipo Neuromed en cirugía" className="approach-img" />
            </div>
            <div className="img-tag mono">
              <span className="pulse" /> Equipo Neuromed · Cirugía deliberada
            </div>
          </div>
          <div className="approach-text">
            <div className="section-num" style={{ marginBottom: 24 }}>
              <span className="index mono">§ 03</span>
              <span className="label mono">Nuestro enfoque</span>
            </div>
            <h3 className="serif">
              Operamos cuando es necesario. <em>No antes, no después.</em>
            </h3>
            <p>
              La neurocirugía es una decisión que cambia vidas. Por eso dedicamos el tiempo
              que haga falta a explicar tu diagnóstico, las opciones reales y los riesgos
              honestos de cada camino.
            </p>
            <p>
              Trabajamos con la última generación de microscopios quirúrgicos, neuronavegación
              intraoperatoria y técnicas endoscópicas que reducen el tiempo de internación
              a un mínimo absoluto.
            </p>

            <div className="values">
              {VALUES.map((v) => (
                <div className="value" key={v.n}>
                  <span className="n">{v.n}</span>
                  <div>
                    <h4 className="serif">{v.h}</h4>
                    <p>{v.p}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PATOLOGIAS ---------- */
const PATHOLOGIES = [
  { id: "hernia", area: "Columna", h: "Hernia de disco lumbar y cervical", n: 1, t: "12 min",
    p: "Microdiscectomía mínimamente invasiva para liberar la raíz nerviosa comprimida. La mayoría vuelve a casa en menos de 48 horas." },
  { id: "estenosis", area: "Columna", h: "Estenosis del canal espinal", n: 2, t: "10 min",
    p: "Descompresión neural y artrodesis vertebral con tornillos de titanio según el caso." },
  { id: "tumor", area: "Cerebro", h: "Tumores intracraneales", n: 3, t: "11 min",
    p: "Exéresis tumoral con microscopio, neuronavegación y monitoreo intraoperatorio." },
  { id: "hidrocefalia", area: "Cerebro", h: "Hidrocefalia", n: 4, t: "9 min",
    p: "Derivación ventrículo-peritoneal o tercer ventriculostomía endoscópica." },
  { id: "trigemino", area: "Funcional", h: "Neuralgia del trigémino", n: 5, t: "9 min",
    p: "Radiofrecuencia percutánea o descompresión microvascular según indicación." },
  { id: "tce", area: "Trauma", h: "Traumatismo craneoencefálico", n: 6, t: "8 min",
    p: "Sensor de presión intracraneal, drenaje ventricular y craniectomía descompresiva." },
  { id: "fractura", area: "Columna", h: "Fractura sacra", n: 7, t: "6 min",
    p: "Fijación percutánea con tornillo transsacro, mínimamente invasiva." },
  { id: "craneoplastia", area: "Cerebro", h: "Craneoplastia", n: 8, t: "6 min",
    p: "Reconstrucción del defecto óseo craneal con implante biocompatible a medida." },
  { id: "dolor", area: "Dolor", h: "Dolor crónico vertebral y radicular", n: 9, t: "7 min",
    p: "Bloqueos neurorradiculares guiados por imágenes y termolesión por radiofrecuencia." },
  { id: "aneurisma", area: "Vascular", h: "Aneurisma cerebral", n: 10, t: "8 min",
    p: "Clipado microquirúrgico o embolización endovascular según el caso." },
];

function Patologias({ onOpen }) {
  return (
    <section className="section" id="patologias">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 04</span>
            <span className="label">Patologías</span>
          </div>
          <h2 className="section-title serif">
            Lo que tratamos, en <em>palabras simples</em>.
          </h2>
        </div>

        <div className="patho-list">
          {PATHOLOGIES.map((p, i) => (
            <button key={i} className="patho" onClick={() => onOpen(p.id)}>
              <span className="pn">P/{String(p.n).padStart(2, "0")}</span>
              <div className="patho-body">
                <h4 className="serif">{p.h}</h4>
                <p className="patho-prev">{p.p}</p>
              </div>
              <div className="meta">
                <span className="tag">{p.area}</span>
                <span className="patho-time">{p.t} de lectura</span>
                <span className="patho-cta">Leer <Icon.Arrow size={13} /></span>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PATOLOGIA MODAL ---------- */
function PatologiaModal({ id, onClose }) {
  if (!id) return null;
  const d = window.PATHO_DETAIL[id];
  if (!d) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="patho-modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Cerrar">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>

        <div className="pm-header">
          <span className="pm-tag mono">{d.area}{d.procedure ? " · " + d.procedure : ""}</span>
          <h3 className="pm-title serif">{d.title}</h3>
          <p className="pm-lead">{d.lead}</p>
        </div>

        <div className="pm-body">
          {d.sections.map((s, i) => (
            <div className="pm-section" key={i}>
              <h4 className="pm-h serif">{s.h}</h4>
              {s.p && <p className="pm-p">{s.p}</p>}
              {s.list && (
                <ul className="pm-list">
                  {s.list.map((it, j) => <li key={j}>{it}</li>)}
                </ul>
              )}
              {s.steps && (
                <ol className="pm-steps">
                  {s.steps.map((st, j) => (
                    <li key={j}>
                      <span className="pm-step-n mono">{String(j + 1).padStart(2, "0")}</span>
                      <span className="pm-step-body"><b>{st[0]}.</b> {st[1]}</span>
                    </li>
                  ))}
                </ol>
              )}
            </div>
          ))}
        </div>

        <div className="pm-footer">
          <p className="pm-disclaimer">Esta información es orientativa para pacientes y no reemplaza la consulta médica. El equipo evalúa cada caso de forma individual.</p>
        </div>
      </div>
    </div>
  );
}

/* ---------- EQUIPO ---------- */
const TEAM = [
  { name: "Dr. Marcelo Torres", role: "Director médico · Neurocirujano",
    photo: "img/torres.jpg",
    credits: ["MP 55.407", "AANC · CANC", "Estudio del Dolor"] },
  { name: "Dr. Juan G. Klikailo", role: "Subdirector médico · Neurocirujano",
    photo: "img/klikailo.jpg",
    credits: ["MP 59.354", "Columna"] },
  { name: "Dr. Pablo Kuchlewski", role: "Neurocirujano",
    photo: "img/kuchlewski.jpg",
    credits: ["MP 455.087", "Mínima invasión"] },
  { name: "Dra. Gianina Lupone", role: "Neurocirujana",
    photo: "img/lupone.jpg",
    credits: ["MP 551.451", "Columna"] },
  { name: "Dra. Giuliana Vranjican Pace", role: "Neurocirujana",
    photo: "img/giuliana.jpg",
    credits: ["Neurocirugía"] },
  { name: "Dr. Eddy Gutiérrez Rojas", role: "Neurocirujano",
    photo: "img/eddy.jpg",
    credits: ["Neurocirugía"] },
  { name: "Dra. Jimena Figoni", role: "Neurocirujana",
    photo: "img/figoni.jpg",
    credits: ["Neurocirugía"] },
  { name: "Dr. Félix Morón", role: "Neurocirujano",
    photo: "img/moron.jpg",
    credits: ["MP 58.512", "Cerebro"] },
  { name: "Dr. Diego Vega", role: "Neurofisiólogo",
    photo: "img/vega.jpg",
    credits: ["MP 448.227", "Monitoreo intraoperatorio"] },
  { name: "Lic. Daniela Andreotti", role: "Neuropsicóloga",
    photo: "img/andreotti.jpg",
    credits: ["Evaluación cognitiva", "Paciente despierto"] },
];

const STAFF = [
  { name: "Lic. Nelida “Pachi” Duarte", role: "Coordinación general · Turnos",
    photo: "img/pachi.jpg",
    credits: [],
    featured: true,
    bio: "Coordina la agenda quirúrgica, los turnos, las obras sociales y el contacto con cada paciente desde la primera consulta hasta el alta." },
  { name: "Lic. Ariel Orrego", role: "Instrumentador quirúrgico",
    photo: "img/ariel.jpg",
    credits: ["Especializado en neurocirugía"] },
  { name: "Lic. Rocío Valdez", role: "Instrumentadora quirúrgica",
    photo: "img/rocio.jpg",
    credits: ["Especializada en neurocirugía"] },
  { name: "Romina", role: "Secretaría",
    photo: "img/romina.jpg",
    credits: ["Clínica Privada Alcorta"] },
  { name: "Florencia", role: "Secretaría",
    photo: "img/florencia.jpg",
    credits: ["Clínica del Buen Pastor"] },
];

function Equipo() {
  return (
    <section className="section" id="equipo">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 07</span>
            <span className="label">Equipo médico</span>
          </div>
          <h2 className="section-title serif">
            Las manos que <em>te van a operar</em>, antes que el bisturí.
          </h2>
        </div>

        <div className="team-grid team-grid-3">
          {TEAM.map((d) => (
            <div className={"doc" + (d.incomplete ? " doc-incomplete" : "")} key={d.name}>
              <div className="ph photo" style={{padding:0}}>
                <img src={d.photo} alt={d.name} className="doc-img" />
                {d.incomplete && <span className="incomplete-badge mono">Por completar</span>}
              </div>
              <h4 className="name serif">{d.name}</h4>
              <p className="role">{d.role}</p>
            </div>
          ))}
        </div>

        <div className="staff-head mono">
          <span>· Equipo técnico-administrativo</span>
          <span style={{ color: "var(--muted)" }}>Te acompañamos antes, durante y después</span>
        </div>
        <div className="staff-grid">
          {STAFF.filter((s) => s.featured).map((s) => (
            <div className="staff staff-featured" key={s.name}>
              <div className="ph staff-photo" style={{padding:0}}>
                <img src={s.photo} alt={s.name} className="doc-img" />
              </div>
              <div className="staff-info">
                <h4 className="name serif">{s.name}</h4>
                <p className="role">{s.role}</p>
                {s.bio && <p className="staff-bio">{s.bio}</p>}
                <div className="credits">
                  {s.credits.map((c) => <span key={c}>{c}</span>)}
                </div>
              </div>
            </div>
          ))}

          <div className="staff-rest">
            {STAFF.filter((s) => !s.featured).map((s) => (
              <div className={"staff staff-card" + (s.incomplete ? " staff-incomplete" : "")} key={s.name}>
                {s.photo ? (
                  <div className="ph staff-photo" style={{padding:0}}>
                    <img src={s.photo} alt={s.name} className="doc-img" />
                  </div>
                ) : (
                  <div className="ph staff-photo staff-photo-empty">
                    <span className="mono">Foto pendiente</span>
                  </div>
                )}
                <div className="staff-info">
                  <h4 className="name serif">{s.name}</h4>
                  <p className="role">{s.role}</p>
                  <div className="credits">
                    {s.credits.map((c) => <span key={c}>{c}</span>)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIO ---------- */
const TESTIMONIOS = [
  {
    q: "Recuperé mi calidad de vida después de mi cirugía de columna. Excelentes profesionales, trato cercano.",
    name: "María C.", meta: "Paciente · 2024 · Microdiscectomía L4–L5"
  },
  {
    q: "Me explicaron con palabras sencillas lo que otros médicos me habían dicho en jeroglíficos. Eso me dio tranquilidad.",
    name: "Jorge R.", meta: "Paciente · 2023 · Neuralgia del trigémino"
  },
  {
    q: "Sufría para mantenerme en pie, y hoy puedo hacer una vida normal. Pero lo que más valoro es la honestidad del equipo.",
    name: "Laura B.", meta: "Paciente · 2024 · Descompresión cervical"
  },
];

function Testimonio() {
  const [i, setI] = useState(0);
  const t = TESTIMONIOS[i];
  return (
    <section className="testimonio" id="testimonios">
      <div className="container">
        <div className="mono" style={{ color: "rgba(255,255,255,0.5)" }}>§ 08 · Voces de pacientes</div>
        <q className="serif">{t.q}</q>
        <div className="who">
          <div className="ph photo avatar" data-label="" style={{ borderColor: "rgba(255,255,255,0.2)" }} />
          <div>
            <p className="who-name">{t.name}</p>
            <p className="who-meta mono">{t.meta}</p>
          </div>
        </div>
        <div className="testimonio-controls">
          <button onClick={() => setI((i - 1 + TESTIMONIOS.length) % TESTIMONIOS.length)} aria-label="Anterior">
            <Icon.Chev dir="left" />
          </button>
          <button onClick={() => setI((i + 1) % TESTIMONIOS.length)} aria-label="Siguiente">
            <Icon.Chev />
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- FAQ ---------- */
const FAQS = [
  { q: "¿Atienden por obra social o prepaga?",
    a: "Trabajamos con las principales prepagas (OSDE, Swiss Medical, Galeno, Medicus) y por reintegro con la mayoría de las obras sociales, incluyendo IOMA y OSRJA. Confirmamos cobertura al pedir el turno." },
  { q: "¿Cuánto se tarda en conseguir una primera consulta?",
    a: "Habitualmente entre 48 y 72 horas hábiles. Para urgencias derivadas por médico, ofrecemos un canal prioritario por WhatsApp." },
  { q: "¿Qué estudios tengo que llevar a la consulta?",
    a: "Resonancia magnética y/o tomografía recientes con los discos originales, informes anteriores y el listado de medicación actual. Si no los tenés, los pedimos en la consulta." },
  { q: "¿Operan a pacientes derivados de otras provincias o países?",
    a: "Sí. Coordinamos la consulta inicial por videollamada y planificamos estudios y cirugía de forma centralizada para reducir viajes." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 10</span>
            <span className="label">Preguntas</span>
          </div>
          <h2 className="section-title serif">
            Lo que <em>casi todos</em> nos preguntan.
          </h2>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq-item" + (open === i ? " open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-icon"><Icon.Plus /></span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA BAND ---------- */
function CtaBand({ onBook }) {
  return (
    <section className="cta-band">
      <div className="container">
        <h2 className="serif">
          Hablemos antes de <em>cualquier decisión</em>.
        </h2>
        <div className="cta-actions">
          <button className="btn" onClick={onBook}>Pedir turno <Icon.Arrow /></button>
          <a className="btn btn-ghost" href="https://wa.me/5491158136779" target="_blank" rel="noreferrer">
            <Icon.Wa /> WhatsApp directo
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer" id="contacto">
      <div className="container">
        <div className="footer-grid">
          <div>
            <img src="logo-white.png" alt="Neuromed" style={{ height: 60, width: "auto", display: "block", marginBottom: 14 }} />
            <p className="mono" style={{ color: "rgba(255,255,255,0.5)", marginTop: 12 }}>
              Servicio de neurocirugía · guardia 24/365
            </p>
            <div className="footer-affiliations">
              <img src="img/logos/aanc.png" alt="Asociación Argentina de Neurocirugía" />
              <img src="img/logos/canc.png" alt="Colegio Argentino de Neurocirujanos" />
              <img src="img/logos/aaed.png" alt="AAED" />
            </div>
          </div>
          <div>
            <h5>Dirección médica</h5>
            <ul>
              <li>Dr. Marcelo Torres</li>
              <li><a href="mailto:drtorres@neuromed.ar">drtorres@neuromed.ar</a></li>
              <li style={{ marginTop: 12, opacity: 0.7, lineHeight: 1.45, fontSize: 12 }}>Miembro titular de la Asociación Argentina de Neurocirugía</li>
              <li style={{ opacity: 0.7, lineHeight: 1.45, fontSize: 12 }}>Miembro titular del Colegio Argentino de Neurocirujanos</li>
              <li style={{ opacity: 0.7, lineHeight: 1.45, fontSize: 12 }}>Miembro titular de la Asociación Argentina para el Estudio del Dolor</li>
            </ul>
          </div>
          <div>
            <h5>Coordinación / Turnos</h5>
            <ul>
              <li>Lic. Nelida “Pachi” Duarte</li>
              <li><a href="mailto:pachi@neuromed.ar">pachi@neuromed.ar</a></li>
              <li style={{ marginTop: 12 }}>Florencia · Secretaría</li>
              <li><a href="mailto:flor@neuromed.ar">flor@neuromed.ar</a></li>
              <li style={{ marginTop: 12 }}>Romina · Secretaría</li>
              <li><a href="mailto:romi@neuromed.ar">romi@neuromed.ar</a></li>
            </ul>
          </div>
          <div>
            <h5>Sedes</h5>
            <ul>
              <li>Clínica Privada Alcorta<br/>Buenos Aires</li>
              <li style={{ marginTop: 12 }}>Clínica del Buen Pastor<br/>Buenos Aires</li>
              <li style={{ marginTop: 18 }}>
                <div className="footer-social">
                  <a href="https://instagram.com/neuromed.ar" target="_blank" rel="noreferrer" className="fsoc fsoc-ig" aria-label="Instagram">
                    <Icon.Instagram size={22} />
                    <span>@neuromed.ar</span>
                  </a>
                  <a href="https://wa.me/5491158136779" target="_blank" rel="noreferrer" className="fsoc fsoc-wa" aria-label="WhatsApp">
                    <Icon.Wa size={22} />
                    <span>WhatsApp</span>
                  </a>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Neuromed</span>
          <span>+20 años de experiencia</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- TRACK RECORD (bento) ---------- */
const STATS = [
  { n: "+4.000", k: "Cirugías de columna", size: "feature", img: "img/cirugia-columna.jpg" },
  { n: "+7.000", k: "Bloqueos bajo control tomográfico", size: "wide", img: "img/bloqueo-tac.jpg",
    sub: "cervicales, epidurales, neuroradiculares, facetarios, transcoccígeo, sacroilíaco, trocantéreo, plexo solar e hipogástrico." },
  { n: "+1.500", k: "Tumores cerebrales", size: "feature", img: "img/neuronavegacion.jpg" },
  { n: "+2.000", k: "Cirugías mínimamente invasivas", size: "sm", img: "img/microcirugia.jpg" },
  { n: "+2.000", k: "Procedimientos vasculares cerebrales", size: "sm", img: "img/cirugia-equipo.jpg" },
  { n: "+700", k: "Cirugías de hipófisis", size: "sm", img: "img/endoscopia.jpg" },
  { n: "·", k: "Pioneros en Argentina en cirugía del paciente despierto y en fractura sacroilíaca percutánea", size: "pioneer", pioneer: true, img: "img/cirugia-anestesia.jpg" },
];

function TrackRecord() {
  return (
    <section className="section track" id="trayectoria">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 01</span>
            <span className="label">Trayectoria</span>
          </div>
          <h2 className="section-title serif">
            Más de <em>veinte años</em> de experiencia que te respaldan.
          </h2>
        </div>

        <div className="track-grid">
          {STATS.map((s, i) => (
            <div key={i} className={`stat stat-${s.size}` + (s.pioneer ? " stat-pioneer" : "")}
                 style={{ "--stat-img": `url(${s.img})` }}>
              <div className="stat-bg" />
              <div className="stat-inner">
                <div className="stat-n serif">{s.n}</div>
                <div className="stat-k">
                  {s.sub ? (
                    <>
                      {s.k}
                      <span className="stat-sub-block">({s.sub})</span>
                    </>
                  ) : s.k}
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="track-clients">
          <a href="#" className="cl-link"><img src="img/logos/alcorta.png" alt="Clínica Privada Alcorta" className="cl-logo" /></a>
          <a href="#" className="cl-link"><img src="img/logos/buenpastor.png" alt="Clínica Privada Del Buen Pastor" className="cl-logo" /></a>
          <a href="#" className="cl-link"><img src="img/logos/imca.png" alt="Instituto Médico de Alta Complejidad" className="cl-logo" /></a>
          <a href="#" className="cl-link"><img src="img/logos/santaisabel.png" alt="Clínica Santa Isabel" className="cl-logo" /></a>
          <a href="#" className="cl-link"><img src="img/logos/dosuba.png" alt="DOSUBA" className="cl-logo" /></a>
          <a href="#" className="cl-link"><img src="img/logos/iart.png" alt="IART" className="cl-logo" /></a>
        </div>
      </div>
    </section>
  );
}

/* ---------- GUARDIA 24/365 ---------- */
function Guardia() {
  return (
    <section className="section guardia">
      <div className="container guardia-inner">
        <div className="guardia-display">
          <span className="serif n1">24</span>
          <span className="slash" />
          <span className="serif n2">365</span>
        </div>
        <div className="guardia-text">
          <div className="section-num">
            <span className="index">§ 06</span>
            <span className="label">Guardia permanente</span>
          </div>
          <h3 className="serif">
            Una guardia activa, <em>todos los días del año</em>.
          </h3>
          <p>
            La asistencia por consultorios externos se acompaña, de manera permanente, por
            una administrativa y un instrumentador quirúrgico. Así el paciente conoce al equipo
            antes de la cirugía, durante el procedimiento y en cada control posterior.
          </p>
          <p>
            Seguridad y excelencia asistencial — desde la primera consulta hasta el alta
            definitiva, sin intermediarios.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ---------- QUIROFANO GALLERY ---------- */
const GALLERY = [
  { src: "img/cirugia-columna.jpg", caption: "Cirugía de columna · equipo completo", area: "a" },
  { src: "img/cirugia-mayor.jpg", caption: "Cirugía mayor de columna", area: "b" },
  { src: "img/neuronavegacion.jpg", caption: "Neuronavegación Fiagon · sistema 3D", area: "c" },
  { src: "img/endoscopia.jpg", caption: "Endoscopia neuroquirúrgica", area: "d" },
  { src: "img/cirugia-anestesia.jpg", caption: "Equipo ampliado en procedimiento", area: "e" },
];

function Quirofano() {
  return (
    <section className="section quirofano" id="quirofano">
      <div className="container">
        <div className="section-head">
          <div className="section-num">
            <span className="index">§ 05</span>
            <span className="label">En el quirófano</span>
          </div>
          <h2 className="section-title serif">
            Lo que pasa <em>cuando se cierra la puerta</em>.
          </h2>
        </div>

        <div className="gallery">
          {GALLERY.map((g, i) => (
            <figure key={i} className={`gal gal-${g.area}`}>
              <img src={g.src} alt={g.caption} />
              <figcaption className="mono">{g.caption}</figcaption>
            </figure>
          ))}
        </div>

        <div className="quirofano-foot">
          <div className="qf-stat">
            <span className="serif n">Neuronavegación</span>
            <span className="mono k">Sistema Fiagon 3D · cirugía guiada por imágenes</span>
          </div>
          <div className="qf-stat">
            <span className="serif n">Monitoreo intraoperatorio</span>
            <span className="mono k">Neurofisiólogo en sala durante cada procedimiento</span>
          </div>
          <div className="qf-stat">
            <span className="serif n">Endoscopia</span>
            <span className="mono k">Abordajes mínimamente invasivos para columna y base de cráneo</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Icon, MetaIcon, Nav, Hero, Services, Approach, Patologias, PatologiaModal, Equipo, Testimonio, FAQ, CtaBand, Footer,
  TrackRecord, Guardia, Quirofano, Novedades, HeroCarousel,
});