/* clinara — Landing page */

const TWEAKS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "density": "comfortable",
  "accent": "azul",
  "showCarousel": true
} /*EDITMODE-END*/;

const ACCENTS = {
  azul: { primary: "#3B63A8", soft: "#BAD6EB", ink: "#091F5B" },
  navy: { primary: "#091F5B", soft: "#BAD6EB", ink: "#091F5B" },
  cielo: { primary: "#6F96D1", soft: "#BAD6EB", ink: "#091F5B" },
  verde: { primary: "oklch(0.42 0.08 165)", soft: "oklch(0.94 0.025 165)", ink: "oklch(0.30 0.06 165)" }
};

/* ---------------- Nav ---------------- */
const Nav = ({ onOpenDemo, mobileOpen, setMobileOpen, scrolled }) =>
<nav className={`nav ${scrolled ? "nav-scrolled" : "nav-hero"}`}>
    <div className="container nav-inner">
      <a href="#" className="logo">
        <span>clinara</span>
      </a>
      <div className="nav-links">
        <a href="#producto" className="nav-link">Producto</a>
        <a href="#especialidades" className="nav-link">Especialidades</a>
        <a href="#precios" className="nav-link">Precios</a>
        <a href="#seguridad" className="nav-link">Seguridad</a>
        <a href="#recursos" className="nav-link">Recursos</a>
      </div>
      <div className="nav-cta">
        <button className="btn btn-primary hide-mobile" onClick={onOpenDemo}>
          Solicitar demo <Icon name="arrow-right" size={14} />
        </button>
        <button className="mobile-menu-btn" onClick={() => setMobileOpen(true)} aria-label="Menú">
          <Icon name="menu" size={18} />
        </button>
      </div>
    </div>
  </nav>;


const MobileDrawer = ({ open, onClose, onOpenDemo }) =>
<div className={`mobile-drawer ${open ? "open" : ""}`}>
    <div className="mobile-drawer-head">
      <span className="logo">clinara</span>
      <button className="mobile-menu-btn" onClick={onClose}><Icon name="x" size={18} /></button>
    </div>
    <a href="#producto" onClick={onClose}>Producto</a>
    <a href="#especialidades" onClick={onClose}>Especialidades</a>
    <a href="#precios" onClick={onClose}>Precios</a>
    <a href="#seguridad" onClick={onClose}>Seguridad</a>
    <a href="#recursos" onClick={onClose}>Recursos</a>
    <div style={{ marginTop: "auto", display: "flex", gap: 12 }}>
      <button className="btn btn-primary" style={{ flex: 1 }} onClick={() => {onClose();onOpenDemo();}}>
        Demo
      </button>
    </div>
  </div>;


/* ---------------- Hero with mock dashboard ---------------- */
const HeroMock = () => {
  const sparkData = [12, 18, 14, 22, 19, 28, 24, 32, 30, 38, 35, 44];
  return (
    <div className="mock">
      <div className="mock-header">
        <strong>Panel del consultorio</strong>
        <div className="mock-tabs">
          <span className="mock-tab active">Hoy</span>
          <span className="mock-tab">Semana</span>
          <span className="mock-tab">Mes</span>
        </div>
      </div>
      <div className="mock-body">
        <div className="mock-side">
          <div className="item active"><span className="glyph" /> Inicio</div>
          <div className="item"><span className="glyph" /> Pacientes</div>
          <div className="item"><span className="glyph" /> Agenda</div>
          <div className="item"><span className="glyph" /> Expedientes</div>
          <div className="item"><span className="glyph" /> Recetas</div>
          <div className="item"><span className="glyph" /> Reportes</div>
        </div>
        <div className="mock-content">
          <div className="mock-row">
            <div className="mock-stat">
              <div className="label">Citas hoy</div>
              <div className="value">14</div>
              <div className="delta">↑ 2 vs ayer</div>
            </div>
            <div className="mock-stat">
              <div className="label">Pacientes activos</div>
              <div className="value">1,284</div>
              <div className="delta">↑ 38 este mes</div>
            </div>
          </div>
          <div className="mock-chart">
            <span className="label">Consultas — últimas 12 semanas</span>
            <Sparkline values={sparkData} color="var(--primary)" height={96} fill />
          </div>
          <div className="mock-list">
            <div className="mock-list-row">
              <div className="mock-avatar">MR</div>
              <div>
                <div className="name">María Reyes</div>
                <div className="meta">EXP-00482 · 32 a · F</div>
              </div>
              <span className="tag tag-ok">Confirmada</span>
              <span className="meta">10:30</span>
            </div>
            <div className="mock-list-row">
              <div className="mock-avatar">JT</div>
              <div>
                <div className="name">Javier Torres</div>
                <div className="meta">EXP-00921 · 58 a · M</div>
              </div>
              <span className="tag tag-warn">Seguimiento</span>
              <span className="meta">11:15</span>
            </div>
            <div className="mock-list-row">
              <div className="mock-avatar">SO</div>
              <div>
                <div className="name">Sofía Ortega</div>
                <div className="meta">EXP-01034 · 27 a · F</div>
              </div>
              <span className="tag">En espera</span>
              <span className="meta">12:00</span>
            </div>
          </div>
        </div>
      </div>
    </div>);

};

const HeroLaptop = () => {
  const [stage, setStage] = React.useState("before"); // 'before' | 'transition' | 'after'

  const runSequence = React.useCallback(() => {
    setStage("before");
    const t1 = setTimeout(() => setStage("transition"), 2000);
    const t2 = setTimeout(() => setStage("after"), 2900);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  React.useEffect(() => {
    const cleanup = runSequence();
    return cleanup;
  }, [runSequence]);

  const url = stage === "before" ? "papel · expediente manual" : "clinara.mx / dashboard";

  return (
    <div className="laptop">
      <div className="laptop-screen">
        <div className="hero-card-chrome">
          <div className="hero-card-dots"><span /><span /><span /></div>
          <div className="hero-card-url" key={url}>{url}</div>
          <div style={{ width: 30 }} />
        </div>
        <div className="laptop-stage">
          <img
            src="/landing/assets/before-paper.jpg"
            alt="Antes — expediente en papel"
            className={`laptop-image laptop-before ${stage !== "before" ? "is-out" : ""}`}
          />
          <img
            src="/landing/assets/app-dashboard.png"
            alt="Después — dashboard de clinara"
            className={`laptop-image laptop-after ${stage === "after" ? "is-in" : ""}`}
          />
          {stage === "before" && (
            <div className="before-badge">
              <span className="before-dot"/>
              ANTES
            </div>
          )}
          {stage === "after" && (
            <div className="after-badge">
              <span className="after-check">✓</span>
              DESPUÉS
            </div>
          )}
          <button className="laptop-replay" onClick={runSequence} aria-label="Repetir animación">
            <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor"><path d="M0 0 L10 6 L0 12 Z"/></svg>
            Ver de nuevo
          </button>
        </div>
      </div>
      <div className="laptop-base" />
    </div>
  );
};

const Hero = ({ onOpenDemo, onOpenVideo }) =>
<section className="hero hero-bold">
    <div className="hero-bg">
      <div className="hero-orb hero-orb-1" />
      <div className="hero-orb hero-orb-2" />
      <div className="hero-orb hero-orb-3" />
      <div className="hero-grid-pattern" />
    </div>
    <div className="container hero-content">
      <div className="hero-center">
        <h1 className="reveal hero-title-2lines" style={{ animationDelay: "0.1s" }}>
          <span className="hero-line">El expediente médico que tu</span>{" "}
          <span className="hero-line">clínica <em>realmente</em> usa.</span>
        </h1>
        <p className="hero-sub reveal" style={{ animationDelay: "0.2s" }}>
          Software para clínicas y consultorios en México. Expedientes electrónicos, agenda inteligente, recetas digitales y reportes con IA — en una sola plataforma certificada NOM-024.
        </p>
        <div className="hero-actions reveal" style={{ animationDelay: "0.3s" }}>
          <button className="btn btn-primary btn-lg btn-glow" onClick={onOpenDemo}>
            Agendar demo personalizada <Icon name="arrow-right" size={14} />
          </button>
          {/* Botón "Ver producto" oculto temporalmente
          <button type="button" className="btn btn-ghost-light btn-lg" onClick={onOpenVideo}>
            <Icon name="play" size={11} /> Ver producto (1 min)
          </button>
          */}
        </div>
        <div className="hero-meta reveal" style={{ animationDelay: "0.4s" }}>
          <div className="item"><Icon name="check" size={14} /> 14 días de prueba</div>
          <div className="item"><Icon name="check" size={14} /> Sin tarjeta</div>
          <div className="item"><Icon name="check" size={14} /> Migración asistida</div>
        </div>
      </div>

      <div className="hero-visual reveal" style={{ animationDelay: "0.5s" }}>
        <div className="laptop">
          <div className="laptop-screen">
            <div className="hero-card-chrome">
              <div className="hero-card-dots"><span /><span /><span /></div>
              <div className="hero-card-url">clinara.mx / dashboard</div>
              <div style={{ width: 30 }} />
            </div>
            <img src="/landing/assets/app-dashboard.png" alt="Dashboard de clinara" className="laptop-image" />
          </div>
          <div className="laptop-base" />
        </div>
        <div className="float float-1 float-ok floatA">
          <Icon name="check" size={14} /> Receta enviada al paciente
        </div>
        <div className="float float-2 floatB" style={{ fontWeight: "500", height: "40px" }}>
          <Icon name="bell" size={14} stroke={1.8} /> 3 confirmaciones por WhatsApp
        </div>
        <div className="float float-3 floatC">
          <Icon name="activity" size={14} /> +18% pacientes nuevos
        </div>
      </div>
    </div>
  </section>;


/* ---------------- Marquee reviews ---------------- */
const REVIEWS = [
{ q: "Reduje el tiempo de documentación a la mitad. La integración con WhatsApp para confirmar citas cambió mi consultorio.", n: "Dra. María González", r: "Medicina Interna · CDMX", a: "MG", img: "https://i.pravatar.cc/120?img=47" },
{ q: "Por fin un sistema pensado para México. Las recetas con CURP y firma digital me ahorran horas cada semana.", n: "Dr. Carlos Mendoza", r: "Cardiología · Monterrey", a: "CM", img: "https://i.pravatar.cc/120?img=12" },
{ q: "Migramos 14,000 expedientes en papel sin perder un dato. El equipo de soporte estuvo con nosotros cada paso.", n: "Dra. Ana Rodríguez", r: "Pediatría · Guadalajara", a: "AR", img: "https://i.pravatar.cc/120?img=44" },
{ q: "Los reportes me dieron visibilidad real del consultorio. Identifiqué patrones que llevaba años pasando por alto.", n: "Dr. Luis Herrera", r: "Endocrinología · Puebla", a: "LH", img: "https://i.pravatar.cc/120?img=33" },
{ q: "Mis pacientes reciben sus recetas en el celular antes de salir del consultorio. El cambio de percepción fue inmediato.", n: "Dra. Patricia López", r: "Dermatología · Querétaro", a: "PL", img: "https://i.pravatar.cc/120?img=49" },
{ q: "El módulo DICOM nos permite revisar resonancias junto con el paciente sin cambiar de pestaña. Indispensable.", n: "Dr. Roberto Sánchez", r: "Radiología · CDMX", a: "RS", img: "https://i.pravatar.cc/120?img=68" }];


const Marquee = () => {
  const items = [...REVIEWS, ...REVIEWS];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {items.map((r, i) =>
        <div key={i} className="review-card">
            <div className="stars">
              {[...Array(5)].map((_, k) => <Icon key={k} name="star" size={13} />)}
            </div>
            <div className="quote">"{r.q}"</div>
            <div className="who">
              <img src={r.img} alt={r.n} className="av-img" />
              <div>
                <strong>{r.n}</strong>
                <span>{r.r}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>);

};

/* ---------------- Logos ---------------- */
const Logos = () =>
<div className="container">
    <div className="logos">
      <div className="logos-label">Clínicas y consultorios que ya gestionan con clinara</div>
      <div className="logo-item">Hospital del Valle</div>
      <div className="logo-item">Clínica Polanco</div>
      <div className="logo-item">Centro Médico Norte</div>
      <div className="logo-item">Vida Pediátrica</div>
      <div className="logo-item">Dermalia</div>
      <div className="logo-item">Cardio MX</div>
    </div>
  </div>;


/* ---------------- Clinic Showcase (full-bleed image bridge) ---------------- */
const ClinicShowcase = () =>
<section className="clinic-showcase scroll-reveal">
    <div className="clinic-showcase-img">
      <img src="/landing/assets/header-clinic.png" alt="Clínica moderna con clinara" />
      <div className="clinic-showcase-overlay" />
      <div className="clinic-showcase-content container">
        <div className="clinic-showcase-text">
          <span className="eyebrow eyebrow-light">— Pensado para clínicas modernas</span>
          <h2>Tecnología que se siente <em>natural</em> en tu consultorio.</h2>
          <p>Desde la recepción hasta el alta — clinara conecta a todo tu equipo médico en una sola plataforma diseñada para la realidad de México.</p>
          <div className="clinic-showcase-stats">
            <div><strong>1,200+</strong><span>médicos activos</span></div>
            <div><strong>320k</strong><span>consultas anuales</span></div>
            <div><strong>NOM-024</strong><span>certificado</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---------------- Features (interactive split) ---------------- */
const FEATURES = [
{
  title: "Expediente clínico electrónico",
  desc: "Historial completo del paciente — antecedentes, alergias, padecimiento actual, exploración, diagnóstico — en una sola vista. Plantillas por especialidad y campos personalizables.",
  panel: "exp"
},
{
  title: "Agenda y confirmaciones por WhatsApp",
  desc: "Múltiples consultorios y médicos. Recordatorios automáticos por WhatsApp, SMS y correo. Lista de espera inteligente que rellena cancelaciones.",
  panel: "agenda"
},
{
  title: "Recetas digitales con firma electrónica",
  desc: "Recetas válidas con CURP y firma electrónica avanzada. Catálogo de medicamentos con interacciones. Envío directo al paciente y a la farmacia.",
  panel: "rx"
},
{
  title: "Reportes con IA y análisis poblacional",
  desc: "Resumen automático de consultas, alertas de patrones epidemiológicos en tu base, y dashboards de operación clínica y financiera.",
  panel: "insights"
}];


const Panel = ({ id, active }) => {
  if (id === "exp") {
    return (
      <div className={`stage-panel ${active ? "active" : ""}`}>
        <div className="exp-head">
          <div>
            <div className="exp-name">María Reyes Ortiz</div>
            <div className="exp-id">EXP-00482 · F · 32 años · O+</div>
          </div>
          <span className="tag tag-ok">Activa</span>
        </div>
        <div className="exp-tabs">
          <span className="exp-tab active">Resumen</span>
          <span className="exp-tab">Notas</span>
          <span className="exp-tab">Estudios</span>
          <span className="exp-tab">Recetas</span>
        </div>
        <div className="exp-body">
          <div className="exp-vitals">
            <div className="exp-vital"><div className="l">TA</div><div className="v">118/76</div></div>
            <div className="exp-vital"><div className="l">FC</div><div className="v">72</div></div>
            <div className="exp-vital"><div className="l">SatO₂</div><div className="v">98%</div></div>
            <div className="exp-vital"><div className="l">IMC</div><div className="v">22.4</div></div>
          </div>
          <div className="exp-row"><span className="k">ALERGIAS</span><span>Penicilina (anafilaxia)</span></div>
          <div className="exp-row"><span className="k">CRÓNICOS</span><span>Hipotiroidismo en tratamiento (2021)</span></div>
          <div className="exp-row"><span className="k">ÚLT. CITA</span><span>14 abr 2026 · Control trimestral</span></div>
        </div>
      </div>);

  }
  if (id === "agenda") {
    return (
      <div className={`stage-panel ${active ? "active" : ""}`}>
        <div className="panel-screenshot">
          <div className="browser-chrome">
            <span /><span /><span />
            <div className="url">clinara.mx / calendario</div>
          </div>
          <img src="/landing/assets/app-calendario.png" alt="Calendario real de clinara" />
        </div>
      </div>);

  }
  if (id === "agenda-old") {
    return (
      <div className={`stage-panel ${active ? "active" : ""}`}>
        <div className="agenda">
          <div className="agenda-head">
            <div>
              <div className="agenda-day">Jueves 02 mayo</div>
              <div style={{ fontSize: 12, color: "var(--muted)" }}>14 citas · 2 disponibles</div>
            </div>
            <div className="agenda-nav">
              <button><Icon name="chevron-left" size={14} /></button>
              <button><Icon name="chevron-right" size={14} /></button>
            </div>
          </div>
          <div className="slot now">
            <span className="time">10:30</span>
            <div>
              <div className="who">María Reyes</div>
              <div className="why">Control trimestral</div>
            </div>
            <span className="tag tag-ok">En consulta</span>
          </div>
          <div className="slot">
            <span className="time">11:15</span>
            <div>
              <div className="who">Javier Torres</div>
              <div className="why">Seguimiento HTA</div>
            </div>
            <span className="tag">Confirmada</span>
          </div>
          <div className="slot">
            <span className="time">12:00</span>
            <div>
              <div className="who">Sofía Ortega</div>
              <div className="why">Primera vez</div>
            </div>
            <span className="tag tag-warn">Pendiente</span>
          </div>
          <div className="slot">
            <span className="time">12:45</span>
            <div>
              <div className="who">Diego Cano</div>
              <div className="why">Resultados lab</div>
            </div>
            <span className="tag">Confirmada</span>
          </div>
        </div>
      </div>);

  }
  if (id === "rx") {
    return (
      <div className={`stage-panel ${active ? "active" : ""}`}>
        <div className="rx">
          <div className="rx-head">
            <div className="rx-title">Receta médica</div>
            <div className="rx-folio">FOLIO RX-2026-04812</div>
          </div>
          <div style={{ fontSize: 13, color: "var(--muted)" }}>Para: <strong style={{ color: "var(--ink)" }}>María Reyes Ortiz</strong> · CURP: REOM930514MDFYRR04</div>
          <div className="rx-meds">
            <div className="rx-med">
              <span className="name">Levotiroxina sódica</span>
              <span className="dose">100 mcg</span>
              <span className="freq">1 tableta en ayunas, 30 min antes del desayuno · 30 días</span>
            </div>
            <div className="rx-med">
              <span className="name">Vitamina D3</span>
              <span className="dose">2,000 UI</span>
              <span className="freq">1 cápsula al día con la comida · 60 días</span>
            </div>
          </div>
          <div className="rx-foot">
            <span>Firma electrónica avanzada · Dr. F. López</span>
            <span className="tag tag-ok">Enviada al paciente</span>
          </div>
        </div>
      </div>);

  }
  if (id === "insights") {
    return (
      <div className={`stage-panel ${active ? "active" : ""}`}>
        <div className="insights">
          <div style={{ fontSize: 13, fontWeight: 500 }}>Resumen del consultorio · abril 2026</div>
          <div className="insights-grid">
            <div className="ins-card">
              <div className="l">Pacientes nuevos</div>
              <div className="v">128</div>
              <div className="d">↑ 18% vs marzo</div>
            </div>
            <div className="ins-card">
              <div className="l">Tasa de retención</div>
              <div className="v">82<span style={{ fontSize: 18 }}>%</span></div>
              <div className="d">↑ 4 puntos</div>
            </div>
            <div className="ins-card" style={{ gridColumn: "1 / -1" }}>
              <div className="l">Consultas por semana</div>
              <div className="bars">
                {[42, 58, 51, 67, 62, 74, 71, 80, 78, 86, 92, 88].map((h, i) =>
                <span key={i} style={{ height: `${h}%` }} />
                )}
              </div>
            </div>
          </div>
          <div style={{ fontSize: 12, color: "var(--muted)", borderTop: "1px dashed var(--rule)", paddingTop: 10, display: "flex", gap: 8 }}>
            <Icon name="activity" size={13} />
            <span>IA detectó 12 pacientes con criterios para tamizaje cardiovascular.</span>
          </div>
        </div>
      </div>);

  }
  return null;
};

const Features = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="producto" className="section">
      <div className="container">
        <div className="section-head">
          <div className="meta">
            <span className="eyebrow">01 / Producto</span>
          </div>
          <div>
            <h2>Una plataforma completa, no <em>seis</em> herramientas pegadas con cinta.</h2>
            <p>Desde la primera cita hasta el seguimiento post-consulta — todo conectado, sin cambiar de pestaña ni copiar datos a mano.</p>
          </div>
        </div>

        <div className="feature-split">
          <div className="feature-list">
            {FEATURES.map((f, i) =>
            <button
              key={i}
              className={`feature-item ${open === i ? "open" : ""}`}
              onClick={() => setOpen(i)}>
              
                <span className="num">0{i + 1}</span>
                <span>
                  <h3>{f.title}</h3>
                  <p>{f.desc}</p>
                </span>
                <span className="chev"><Icon name="plus" size={14} /></span>
              </button>
            )}
          </div>

          <div className="feature-stage">
            <span className="stage-tag">VISTA · {FEATURES[open].panel.toUpperCase()}</span>
            {FEATURES.map((f, i) =>
            <Panel key={f.panel} id={f.panel} active={open === i} />
            )}
          </div>
        </div>
      </div>
    </section>);

};

/* ---------------- Patients Showcase ---------------- */
const SHOWCASE_SLIDES = [
{ id: "pacientes", url: "clinara.mx / pacientes", img: "/landing/assets/app-pacientes.png", label: "Lista de pacientes" },
{ id: "calendario", url: "clinara.mx / calendario", img: "/landing/assets/app-calendario.png", label: "Calendario integrado" }];


const PatientsShowcase = () => {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setActive((a) => (a + 1) % SHOWCASE_SLIDES.length), 4500);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="section patients-showcase scroll-reveal">
      <div className="container">
        <div className="patients-showcase-grid">
          <div className="patients-showcase-text">
            <span className="eyebrow">02 / Pacientes & agenda</span>
            <h2>Cada paciente, organizado y a la mano.</h2>
            <p>Búsqueda instantánea, filtros por estado, antecedentes y especialidad. Calendario integrado con eventos por color, multi-médico y multi-consultorio. Toda la información clínica en un perfil único.</p>
            <ul className="patients-bullets">
              <li><Icon name="check" size={14} /> Búsqueda con prefijo P# (ID interno) o nombre</li>
              <li><Icon name="check" size={14} /> Calendario con vista mes / semana / día</li>
              <li><Icon name="check" size={14} /> Permisos por rol — recepción ve datos limitados</li>
              <li><Icon name="check" size={14} /> Importa desde Excel, papel o sistema anterior</li>
            </ul>
            <div className="showcase-tabs">
              {SHOWCASE_SLIDES.map((s, i) =>
              <button
                key={s.id}
                className={`showcase-tab ${active === i ? "active" : ""}`}
                onClick={() => setActive(i)}>
                
                  <span className="dot" />
                  {s.label}
                </button>
              )}
            </div>
          </div>
          <div className="patients-showcase-img">
            <div className="browser-chrome">
              <span /><span /><span />
              <div className="url" key={active}>{SHOWCASE_SLIDES[active].url}</div>
            </div>
            <div className="showcase-stack">
              {SHOWCASE_SLIDES.map((s, i) =>
              <img
                key={s.id}
                src={s.img}
                alt={s.label}
                className={`showcase-slide ${active === i ? "active" : ""}`} style={{ width: "756px" }} />

              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

};

/* ---------------- Specialties ---------------- */
const SPECIALTIES = [
{ id: "general", name: "Medicina general", desc: "Plantillas SOAP, recordatorios de control, paquetes de revisión anual.", img: "/landing/assets/spec-medicina-general.jpg" },
{ id: "pediatria", name: "Pediatría", desc: "Curvas de crecimiento OMS, esquema de vacunación CONAVA, percentiles automáticos.", img: "/landing/assets/spec-pediatria.jpg" },
{ id: "ginecologia", name: "Ginecología", desc: "Calendario menstrual, controles obstétricos, plantillas de USG.", img: "/landing/assets/spec-ginecologia.jpg" },
{ id: "cardio", name: "Cardiología", desc: "ECG digital, calculadoras de riesgo (FRS, ASCVD), reportes de holter.", img: "/landing/assets/spec-cardiologia.jpg" },
{ id: "dermato", name: "Dermatología", desc: "Galería fotográfica antes/después, dermatoscopia, mapeo de lesiones.", img: "/landing/assets/spec-dermatologia.jpg" },
{ id: "orto", name: "Ortopedia", desc: "Visor DICOM 2D/3D, plantillas de mediciones, planeación quirúrgica.", img: "/landing/assets/spec-ortopedia.jpg" }];


const Specialties = () => {
  const [active, setActive] = React.useState(SPECIALTIES[0].id);
  const cur = SPECIALTIES.find((s) => s.id === active);
  return (
    <section id="especialidades" className="section">
      <div className="container">
        <div className="section-head">
          <div className="meta"><span className="eyebrow">02 / Especialidades</span></div>
          <div>
            <h2>Configurado para tu <em>especialidad</em>, no para todas a la vez.</h2>
            <p>Plantillas, calculadoras y campos clínicos diseñados con médicos de cada área. Cambia de especialidad sin perder tu información.</p>
          </div>
        </div>

        <div className="spec-tabs">
          {SPECIALTIES.map((s) =>
          <button
            key={s.id}
            className={`spec-tab ${active === s.id ? "active" : ""}`}
            onClick={() => setActive(s.id)}>
            
              {s.name}
            </button>
          )}
        </div>

        <div className="split-img">
          <div>
            <h3 className="spec-detail-title">
              {cur.name}
            </h3>
            <p className="spec-detail-desc">
              {cur.desc}
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
              "Plantillas pre-cargadas y editables",
              "Calculadoras y escalas clínicas integradas",
              "Catálogo de medicamentos por especialidad",
              "Reportes específicos del área"].
              map((t, i) =>
              <li key={i} style={{ fontSize: 14.5, color: "var(--ink-2)", display: "flex", gap: 12, alignItems: "center" }}>
                  <span style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--primary-soft)", color: "var(--primary-ink)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                    <Icon name="check" size={11} />
                  </span>
                  {t}
                </li>
              )}
            </ul>
          </div>

          <div className="spec-image-wrap" style={{ minHeight: 380 }}>
            <img src={cur.img} alt={cur.name} className="spec-image" key={cur.id} />
            <span className="spec-badge">{cur.name}</span>
          </div>
        </div>
      </div>
    </section>);

};

/* ---------------- How it works ---------------- */
const Steps = () =>
<section className="section">
    <div className="container">
      <div className="section-head">
        <div className="meta"><span className="eyebrow">03 / Implementación</span></div>
        <div>
          <h2>De papel a digital en <em>siete días</em>, sin parar la clínica.</h2>
          <p>Un proceso de migración asistido por nuestro equipo. Tú sigues atendiendo; nosotros movemos los datos.</p>
        </div>
      </div>

      <div className="steps">
        <div className="step">
          <span className="num">— Día 1</span>
          <h3>Diagnóstico y configuración</h3>
          <p>Mapeamos tu flujo actual, especialidades, plantillas y permisos por rol.</p>
          <div className="step-img">
            <img src="/landing/assets/step-diagnostico.jpg" alt="Diagnóstico y configuración" />
          </div>
        </div>
        <div className="step">
          <span className="num">— Días 2 al 5</span>
          <h3>Migración de expedientes</h3>
          <p>Convertimos tus expedientes en papel, Excel u otro sistema al estándar NOM-024.</p>
          <div className="step-img">
            <img src="/landing/assets/step-migracion.jpg" alt="Migración de expedientes" />
          </div>
        </div>
        <div className="step">
          <span className="num">— Días 6 al 7</span>
          <h3>Capacitación y go-live</h3>
          <p>Entrenamos a tu equipo en sesiones cortas. Acompañamiento en vivo el primer día.</p>
          <div className="step-img">
            <img src="/landing/assets/step-capacitacion.jpg" alt="Capacitación del equipo" />
          </div>
        </div>
      </div>
    </div>
  </section>;


/* ---------------- Stats ---------------- */
const Stats = () =>
<section className="section">
    <div className="container">
      <div className="section-head">
        <div className="meta"><span className="eyebrow">04 / Resultados</span></div>
        <div>
          <h2>Números que <em>importan</em>.</h2>
          <p>Datos agregados de más de 1,400 consultorios y clínicas que usan clinara en México y Latinoamérica.</p>
        </div>
      </div>
      <div className="stats-grid">
        <div className="stat">
          <span className="tag">— Eficiencia</span>
          <div className="num"><StatNumber target={94} suffix="%" /></div>
          <div className="label">menos tiempo en documentación clínica.</div>
        </div>
        <div className="stat">
          <span className="tag">— Pacientes</span>
          <div className="num"><StatNumber target={2400000} /></div>
          <div className="label">expedientes gestionados en plataforma.</div>
        </div>
        <div className="stat">
          <span className="tag">— Satisfacción</span>
          <div className="num"><StatNumber target={98} suffix="%" /></div>
          <div className="label">de médicos recomienda clinara a un colega.</div>
        </div>
        <div className="stat">
          <span className="tag">— Tiempo</span>
          <div className="num"><StatNumber target={7} suffix=" d" /></div>
          <div className="label">promedio de implementación, expedientes incluidos.</div>
        </div>
      </div>
    </div>
  </section>;


/* ---------------- Security ---------------- */
const Security = () =>
<section id="seguridad" className="section">
    <div className="container">
      <div className="section-head">
        <div className="meta"><span className="eyebrow">05 / Seguridad y cumplimiento</span></div>
        <div>
          <h2>Construido para los <em>requisitos</em> de la práctica médica.</h2>
          <p>Cifrado de extremo a extremo, respaldos diarios y residencia de datos en México. Diseñado con apego a la NOM-024-SSA3-2012 y la LFPDPPP.</p>
        </div>
      </div>

      <div className="compliance">
        <div className="comp-item"><span className="dot" /> NOM-024-SSA3-2012</div>
        <div className="comp-item"><span className="dot" /> LFPDPPP</div>
        <div className="comp-item"><span className="dot" /> ISO/IEC 27001</div>
        <div className="comp-item"><span className="dot" /> HIPAA-ready</div>
        <div className="comp-item"><span className="dot" /> AES-256</div>
        <div className="comp-item"><span className="dot" /> Datos en MX</div>
        <div className="comp-item"><span className="dot" /> Respaldos 24/7</div>
      </div>

      <div className="split-img" style={{ marginTop: 64 }}>
        <div className="security-image">
          <img src="/landing/assets/security.jpg" alt="Seguridad y cumplimiento" />
          <div className="security-badge"><Icon name="shield" size={18} /> Datos cifrados</div>
        </div>
        <div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 24 }}>
            {[
          { i: "lock", t: "Cifrado AES-256 en reposo", d: "Cada expediente, imagen y receta cifrado individualmente. Llaves rotadas cada 90 días." },
          { i: "shield", t: "Bitácora de auditoría", d: "Cada acceso, edición y exportación queda registrado y disponible para auditorías." },
          { i: "users", t: "Permisos granulares por rol", d: "Define qué ve y qué edita cada miembro del equipo: médicos, recepción, enfermería." },
          { i: "file", t: "Respaldos geo-redundantes", d: "Tres copias en regiones distintas dentro de México. RTO < 4 horas, RPO < 15 minutos." }].
          map((it, k) =>
          <li key={k} style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 16 }}>
                <span style={{ width: 40, height: 40, borderRadius: 12, background: "var(--primary-soft)", color: "var(--primary-ink)", display: "grid", placeItems: "center" }}>
                  <Icon name={it.i} size={18} />
                </span>
                <div>
                  <h4 style={{ margin: "0 0 4px", fontFamily: "Comfortaa, system-ui, sans-serif", fontWeight: 500, fontSize: 18, letterSpacing: "-0.01em" }}>{it.t}</h4>
                  <p style={{ margin: 0, fontSize: 14, color: "var(--ink-2)" }}>{it.d}</p>
                </div>
              </li>
          )}
          </ul>
        </div>
      </div>
    </div>
  </section>;


/* ---------------- Testimonial ---------------- */
const Testimonial = () =>
<section className="container testimonial">
    <div>
      <p className="testimonial-quote">
        Pasamos de revisar expedientes en papel toda la tarde a cerrar el consultorio sin pendientes. clinara nos devolvió las noches a mi equipo.
      </p>
      <div className="testimonial-cite">
        <img src="https://i.pravatar.cc/120?img=52" alt="Dr. Fernando López" className="cite-avatar-img" />
        <div className="cite-info">
          <strong>Dr. Fernando López</strong>
          <span>Director médico · Clínica del Valle (CDMX)</span>
        </div>
      </div>
    </div>
    <div className="testimonial-extras">
      {REVIEWS.slice(0, 4).map((r, i) =>
    <div key={i} className="mini-testimonial">
          <p className="quote">"{r.q.split(".")[0]}."</p>
          <div className="who">
            <img src={r.img} alt={r.n} className="av-img-sm" />
            <div>
              <strong>{r.n}</strong> · <span>{r.r}</span>
            </div>
          </div>
        </div>
    )}
    </div>
  </section>;


/* ---------------- Pricing ---------------- */
const PLANS = [
{
  name: "Solo",
  tag: "Consultorio individual",
  price: 899,
  features: ["1 médico", "Pacientes ilimitados", "Agenda + WhatsApp", "Recetas digitales", "Soporte por correo"],
  cta: "Comenzar prueba",
  featured: false
},
{
  name: "Clínica",
  tag: "Más popular",
  price: 2490,
  features: ["Hasta 8 médicos", "Multi-consultorio", "Reportes con IA", "Visor DICOM", "Capacitación incluida", "Soporte prioritario 24/7"],
  cta: "Solicitar demo",
  featured: true
},
{
  name: "Hospital",
  tag: "Operación a escala",
  price: null,
  features: ["Médicos ilimitados", "API y webhooks", "Integración con LIS/RIS", "SSO y SAML", "SLA dedicado 99.95%", "Customer Success Manager"],
  cta: "Hablar con ventas",
  featured: false
}];


const Pricing = ({ onOpenDemo }) => {
  const [annual, setAnnual] = React.useState(true);
  return (
    <section id="precios" className="section">
      <div className="container">
        <div className="section-head">
          <div className="meta"><span className="eyebrow">06 / Precios</span></div>
          <div>
            <h2>Precios <em>simples</em>, sin letras chiquitas.</h2>
            <p>Sin costo de implementación. Sin contratos forzosos. Cambia o cancela cuando quieras.</p>
          </div>
        </div>

        <div style={{ display: "flex", gap: 8, padding: 6, background: "var(--bg-2)", borderRadius: 999, border: "1px solid var(--rule)", width: "fit-content", marginBottom: 32 }}>
          <button className={`spec-tab ${!annual ? "active" : ""}`} onClick={() => setAnnual(false)}>Mensual</button>
          <button className={`spec-tab ${annual ? "active" : ""}`} onClick={() => setAnnual(true)}>
            Anual <span style={{ marginLeft: 6, opacity: .8 }}>-20%</span>
          </button>
        </div>

        <div className="pricing-grid">
          {PLANS.map((p, i) => {
            const price = p.price ? annual ? Math.round(p.price * 0.8) : p.price : null;
            return (
              <div key={i} className={`plan ${p.featured ? "featured" : ""}`}>
                <span className="plan-tag">{p.tag}</span>
                <div className="plan-name">{p.name}</div>
                {price !== null ?
                <>
                    <div className="plan-price">
                      <span className="cent">$</span>{price.toLocaleString("es-MX")}
                    </div>
                    <div className="plan-period">MXN / mes · facturado {annual ? "anual" : "mensual"}</div>
                  </> :

                <>
                    <div className="plan-price">A medida</div>
                    <div className="plan-period">Cotización personalizada</div>
                  </>
                }
                <div className="plan-divider" />
                <ul className="plan-features">
                  {p.features.map((f, k) => <li key={k}>{f}</li>)}
                </ul>
                <button
                  className={`btn ${p.featured ? "btn-primary" : "btn-ghost"} plan-cta`}
                  onClick={onOpenDemo}>
                  
                  {p.cta} <Icon name="arrow-right" size={13} />
                </button>
              </div>);

          })}
        </div>
      </div>
    </section>);

};

/* ---------------- FAQ ---------------- */
const FAQS = [
{ q: "¿Cumple con la NOM-024-SSA3-2012?", a: "Sí. clinara está construido sobre los lineamientos de la NOM-024 para expediente clínico electrónico, incluyendo estructura de datos, interoperabilidad y bitácora de eventos." },
{ q: "¿Puedo migrar mis expedientes en papel?", a: "Sí. Nuestro equipo te acompaña en la migración: digitalización, OCR, validación humana y carga al sistema. Sin costo adicional en planes Clínica y Hospital." },
{ q: "¿Funciona offline?", a: "Sí. La app de iPad y la versión web tienen modo offline para consultas. Los cambios se sincronizan automáticamente al recuperar conexión." },
{ q: "¿Cómo recibo soporte si tengo dudas?", a: "Respondemos en menos de 4 horas hábiles vía soporte@clinara.mx o WhatsApp al +52 811 827 7967. Los planes Clínica y Hospital incluyen soporte prioritario 24/7 y un Customer Success Manager dedicado." },
{ q: "¿Qué pasa con mis datos si dejo el servicio?", a: "Tus datos son tuyos. Exportamos todos tus expedientes en formato HL7-CDA y PDF firmados. Sin penalizaciones, sin trampas." },
{ q: "¿Puedo integrar mi laboratorio o equipo de imagen?", a: "Sí. Integraciones nativas con los principales LIS/RIS de México y conectores HL7/FHIR para laboratorios y equipos DICOM." }];


const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="meta"><span className="eyebrow">07 / Preguntas frecuentes</span></div>
          <div>
            <h2>Lo que más nos <em>preguntan</em>.</h2>
            <p>¿No encuentras lo que buscas? Habla con nuestro equipo — respondemos en menos de 4 horas hábiles.</p>
          </div>
        </div>

        <div className="faq-list">
          {FAQS.map((f, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span>{f.q}</span>
                <span className="faq-toggle"><Icon name="plus" size={14} /></span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

/* ---------------- CTA ---------------- */
const CTA = ({ onOpenDemo }) =>
<section className="cta">
    <div className="container">
      <h2>¿Listo para <em>transformar</em><br />tu práctica médica?</h2>
      <p>Demo personalizada de 30 minutos con un especialista clínico. Sin presiones, sin guion enlatado.</p>
      <div className="cta-actions">
        <button className="btn btn-primary btn-lg" onClick={onOpenDemo}>
          Agendar demo <Icon name="arrow-right" size={14} />
        </button>
        <a href="#precios" className="btn btn-ghost btn-lg">Ver precios</a>
      </div>
    </div>
  </section>;


/* ---------------- Footer ---------------- */
const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="footer-bottom">
        <span>© 2026 Clinara Tecnologías Médicas, S.A. de C.V. · CDMX, México</span>
        <span>Hecho con cuidado por médicos e ingenieros · v4.2</span>
      </div>
    </div>
  </footer>;


/* ---------------- Demo modal ---------------- */
const DemoModal = ({ open, onClose }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");
  const [form, setForm] = React.useState({ nombre: "", correo: "", telefono: "", clinica: "", tamano: "1-3" });
  React.useEffect(() => {
    if (!open) {
      setTimeout(() => { setSubmitted(false); setErrorMsg(""); }, 300);
    }
  }, [open]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    setErrorMsg("");

    const csrfMeta = document.querySelector('meta[name="csrf-token"]');
    const token = csrfMeta ? csrfMeta.content : "";

    try {
      const res = await fetch("/demo_requests", {
        method: "POST",
        credentials: "same-origin",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json",
          "X-CSRF-Token": token
        },
        body: JSON.stringify(form)
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSubmitted(true);
      } else {
        setErrorMsg(data.error || "No pudimos enviar tu solicitud. Intenta de nuevo.");
      }
    } catch (err) {
      setErrorMsg("Error de conexión. Verifica tu internet e intenta de nuevo.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className={`modal-bg ${open ? "open" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        {!submitted ?
        <>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start", marginBottom: 12 }}>
              <div>
                <h3>Agenda tu demo</h3>
                <p>30 min con un especialista. Te mostramos cómo funcionaría con tu flujo.</p>
              </div>
              <button onClick={onClose} className="mobile-menu-btn"><Icon name="x" size={16} /></button>
            </div>
            {errorMsg &&
              <div style={{ padding: "10px 12px", marginBottom: 10, borderRadius: 10, background: "#fef2f2", border: "1px solid #fecaca", color: "#991b1b", fontSize: 13 }}>
                {errorMsg}
              </div>
            }
            <form onSubmit={handleSubmit}>
              <div className="field">
                <label>Nombre</label>
                <input required value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} placeholder="Dra. Ana Rivera" />
              </div>
              <div className="field">
                <label>Correo profesional</label>
                <input type="email" required value={form.correo} onChange={(e) => setForm({ ...form, correo: e.target.value })} placeholder="ana@clinica.mx" />
              </div>
              <div className="field">
                <label>Número de teléfono</label>
                <input type="tel" required value={form.telefono} onChange={(e) => setForm({ ...form, telefono: e.target.value })} placeholder="+52 81 1234 5678" autoComplete="tel" pattern="[0-9+\s\-()]{8,}" />
              </div>
              <div className="field">
                <label>Clínica o consultorio</label>
                <input required value={form.clinica} onChange={(e) => setForm({ ...form, clinica: e.target.value })} placeholder="Clínica del Valle" />
              </div>
              <div className="field">
                <label>Médicos en el equipo</label>
                <select value={form.tamano} onChange={(e) => setForm({ ...form, tamano: e.target.value })}>
                  <option value="1-3">1 a 3</option>
                  <option value="4-10">4 a 10</option>
                  <option value="11-50">11 a 50</option>
                  <option value="50+">Más de 50</option>
                </select>
              </div>
              <button type="submit" className="btn btn-primary" disabled={submitting} style={{ width: "100%", justifyContent: "center", marginTop: 12, opacity: submitting ? 0.7 : 1 }}>
                {submitting ? "Enviando..." : <>Solicitar demo <Icon name="arrow-right" size={14} /></>}
              </button>
            </form>
          </> :

        <div className="modal-success">
            <div className="check"><Icon name="check" size={28} /></div>
            <h3>¡Recibimos tu solicitud!</h3>
            <p>Te contactamos en menos de 4 horas hábiles para coordinar tu demo. Revisa tu correo.</p>
            <button className="btn btn-ghost" onClick={onClose} style={{ marginTop: 8 }}>Cerrar</button>
          </div>
        }
      </div>
    </div>);

};

/* ---------------- WhatsApp floating ---------------- */
const WhatsAppFloat = () =>
<a
  href="https://wa.me/528118277967?text=Hola%20clinara%2C%20me%20interesa%20conocer%20m%C3%A1s"
  target="_blank"
  rel="noreferrer"
  className="wa-float"
  aria-label="Contactar por WhatsApp">
  
    <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2 3 4.8 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3C3.9 14.8 3.5 13.4 3.5 12c0-4.7 3.8-8.5 8.5-8.5s8.5 3.8 8.5 8.5-3.8 8.5-8.5 8.5z" />
    </svg>
    <span className="wa-tooltip">¿Hablamos por WhatsApp?</span>
  </a>;

const Tweaks = ({ tweaks, setTweak }) =>
<TweaksPanel title="Tweaks">
    <TweakSection title="Apariencia">
      <TweakRadio
      label="Tema"
      value={tweaks.theme}
      onChange={(v) => setTweak("theme", v)}
      options={[{ value: "light", label: "Claro" }, { value: "dark", label: "Oscuro" }]} />
    
      <TweakSelect
      label="Color de marca"
      value={tweaks.accent}
      onChange={(v) => setTweak("accent", v)}
      options={[
      { value: "azul", label: "Azul Clinara" },
      { value: "navy", label: "Navy" },
      { value: "cielo", label: "Cielo" },
      { value: "verde", label: "Verde clínico" }]
      } />
    
      <TweakRadio
      label="Densidad"
      value={tweaks.density}
      onChange={(v) => setTweak("density", v)}
      options={[{ value: "comfortable", label: "Cómodo" }, { value: "cozy", label: "Compacto" }]} />
    
    </TweakSection>
    <TweakSection title="Contenido">
      <TweakToggle
      label="Mostrar carrusel de testimonios"
      value={tweaks.showCarousel}
      onChange={(v) => setTweak("showCarousel", v)} />
    
    </TweakSection>
  </TweaksPanel>;


/* ---------------- Video modal ---------------- */
const VideoModal = ({ open, onClose }) => {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    if (!open && videoRef.current) {
      videoRef.current.pause();
      videoRef.current.currentTime = 0;
    }
    if (open) {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }
  }, [open, onClose]);

  return (
    <div
      className={`modal-bg ${open ? "open" : ""}`}
      onClick={onClose}
      style={{ background: "rgba(8,15,40,0.85)" }}>
      <div
        className="video-modal"
        onClick={(e) => e.stopPropagation()}
        style={{
          position: "relative",
          width: "min(960px, 92vw)",
          background: "#000",
          borderRadius: 18,
          overflow: "hidden",
          boxShadow: "0 30px 80px -20px rgba(0,0,0,0.6)"
        }}>
        <button
          onClick={onClose}
          aria-label="Cerrar"
          style={{
            position: "absolute", top: 14, right: 14, zIndex: 2,
            width: 38, height: 38, borderRadius: "50%",
            background: "rgba(255,255,255,0.92)", color: "#0b1736",
            border: 0, cursor: "pointer",
            display: "grid", placeItems: "center"
          }}>
          <Icon name="x" size={18} />
        </button>
        <video
          ref={videoRef}
          src="/landing/assets/software_clinara.mp4"
          controls
          autoPlay
          playsInline
          preload="metadata"
          style={{ width: "100%", height: "auto", display: "block", background: "#000" }}>
        </video>
      </div>
    </div>);
};

/* ---------------- App ---------------- */
const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAKS);
  const [demoOpen, setDemoOpen] = React.useState(false);
  const [videoOpen, setVideoOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    const a = ACCENTS[tweaks.accent] || ACCENTS.azul;
    document.documentElement.style.setProperty("--primary", a.primary);
    document.documentElement.style.setProperty("--primary-soft", a.soft);
    document.documentElement.style.setProperty("--primary-ink", a.ink);
  }, [tweaks]);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.12 });
    document.querySelectorAll(".scroll-reveal").forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  return (
    <>
      <Nav onOpenDemo={() => setDemoOpen(true)} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} scrolled={scrolled} />
      <MobileDrawer open={mobileOpen} onClose={() => setMobileOpen(false)} onOpenDemo={() => setDemoOpen(true)} />
      <Hero onOpenDemo={() => setDemoOpen(true)} onOpenVideo={() => setVideoOpen(true)} />
      {tweaks.showCarousel && <Marquee />}
      <Logos />
      <ClinicShowcase />
      <Features />
      <PatientsShowcase />
      <Specialties />
      <Steps />
      <Stats />
      <Security />
      <Testimonial />
      <Pricing onOpenDemo={() => setDemoOpen(true)} />
      <FAQ />
      <CTA onOpenDemo={() => setDemoOpen(true)} />
      <Footer />
      <DemoModal open={demoOpen} onClose={() => setDemoOpen(false)} />
      <VideoModal open={videoOpen} onClose={() => setVideoOpen(false)} />
      <WhatsAppFloat />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </>);

};

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