/* global React */
const { useState, useMemo } = React;

/* ================================================================
   Tiny inline icon set
   ================================================================ */
const Icon = ({ name, size = 14 }) => {
  const paths = {
    grid: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
    cal: "M3 7h18M7 3v4M17 3v4M5 7h14v14H5z",
    list: "M3 6h18M3 12h18M3 18h18",
    users: "M7 11a4 4 0 100-8 4 4 0 000 8zM1 21v-1a6 6 0 0112 0v1M17 11a4 4 0 100-8 4 4 0 000 8zM15 21v-1a6 6 0 0112 0",
    file: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6",
    chart: "M3 21V3M21 21H3M7 17V9M12 17V5M17 17v-7",
    money: "M3 7h18v10H3zM7 12h.01M12 12h.01M17 12h.01",
    alert: "M12 2L2 21h20L12 2zM12 9v5M12 18h.01",
    bars: "M3 12h18M3 6h18M3 18h18",
    cog: "M12 8a4 4 0 100 8 4 4 0 000-8zM19 12c0 1-.5 2-.5 2l2 3-2 2-3-2s-1 .5-2 .5-2-.5-2-.5l-3 2-2-2 2-3s-.5-1-.5-2 .5-2 .5-2l-2-3 2-2 3 2s1-.5 2-.5 2 .5 2 .5l3-2 2 2-2 3s.5 1 .5 2z",
    shield: "M12 2L4 6v6c0 5 3.5 9 8 10 4.5-1 8-5 8-10V6l-8-4z",
    clock: "M12 2a10 10 0 100 20 10 10 0 000-20zM12 6v6l4 2",
    plus: "M12 5v14M5 12h14",
    eye: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8zM12 9a3 3 0 100 6 3 3 0 000-6z",
    edit: "M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z",
    search: "M11 19a8 8 0 100-16 8 8 0 000 16zM21 21l-4.35-4.35",
    check: "M5 12l5 5 9-11",
    chev_r: "M9 6l6 6-6 6",
    chev_l: "M15 6l-6 6 6 6",
    arrow_r: "M5 12h14M12 5l7 7-7 7",
    spark: "M12 2v6m0 8v6M2 12h6m8 0h6M5 5l4 4m6 6l4 4M5 19l4-4m6-6l4-4",
    lock: "M5 11h14v10H5zM8 11V7a4 4 0 018 0v4",
    flask: "M9 2v6L4 20a2 2 0 002 2h12a2 2 0 002-2L15 8V2zM7 2h10",
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d={paths[name]} />
    </svg>
  );
};

/* ================================================================
   Sidebar shared across product screens
   ================================================================ */
const PRODUCT_NAV = [
  { group: "PRINCIPAL", items: [
    { id: "dashboard", label: "Dashboard", icon: "grid" },
    { id: "agenda", label: "Agenda", icon: "cal" },
    { id: "citas", label: "Citas del día", icon: "list" },
  ]},
  { group: "CLÍNICO", items: [
    { id: "pacientes", label: "Pacientes", icon: "users" },
    { id: "diagnosticos", label: "Diagnósticos", icon: "file" },
    { id: "tests", label: "Tests psicométricos", icon: "chart" },
  ]},
  { group: "ADMINISTRACIÓN", items: [
    { id: "terapeutas", label: "Terapeutas", icon: "users" },
    { id: "facturacion", label: "Facturación", icon: "money" },
    { id: "morosidad", label: "Morosidad", icon: "alert" },
    { id: "reportes", label: "Reportes", icon: "bars" },
  ]},
  { group: "SISTEMA", items: [
    { id: "accesos", label: "Usuarios y accesos", icon: "users" },
    { id: "config", label: "Configuración", icon: "cog" },
    { id: "auditoria", label: "Auditoría", icon: "shield" },
    { id: "tareas", label: "Tareas programadas", icon: "clock" },
  ]},
];

const AppSidebar = ({ active, onChange }) => (
  <aside className="app-side">
    <div className="app-brand">
      <div className="mk">C</div>
      <div>
        <div className="nm">Clinic</div>
        <div className="sb">Centro de Psicología</div>
      </div>
    </div>
    {PRODUCT_NAV.map((g) => (
      <div key={g.group}>
        <div className="app-section-label">{g.group}</div>
        {g.items.map((it) => (
          <div
            key={it.id}
            className={`app-nav-item ${active === it.id ? "active" : ""}`}
            onClick={() => onChange(it.id)}
          >
            <Icon name={it.icon} />
            <span>{it.label}</span>
          </div>
        ))}
      </div>
    ))}
  </aside>
);

const AppTopbar = ({ title }) => (
  <div className="app-topbar">
    <div className="ttl">{title}</div>
    <div className="user">
      admin@clinic.local
      <div className="avatar">A</div>
    </div>
  </div>
);

/* ================================================================
   Individual screens
   ================================================================ */
const ScreenDashboard = () => (
  <>
    <AppTopbar title="Dashboard ejecutivo" />
    <div className="app-body">
      <div className="dash-tiles">
        <div className="dash-tile">
          <div className="label">Pacientes activos</div>
          <div className="value">20</div>
          <div className="sub">capacidad ≥ 50</div>
        </div>
        <div className="dash-tile">
          <div className="label">Citas hoy</div>
          <div className="value">12</div>
          <div className="sub">82% ocupación</div>
        </div>
        <div className="dash-tile green">
          <div className="label">Ingresos hoy</div>
          <div className="value">₡412k</div>
          <div className="sub">Mes: ₡6.4M</div>
        </div>
        <div className="dash-tile red">
          <div className="label">Alertas clínicas</div>
          <div className="value">3</div>
          <div className="sub">1 críticas · 2 morosos</div>
        </div>
      </div>
      <div className="dash-grid">
        <div className="dash-card">
          <div className="dash-card-h">
            Próximas citas
            <div className="tiny">Hoy · 12 programadas</div>
          </div>
          <table className="app-table">
            <thead>
              <tr><th>Hora</th><th>Paciente</th><th>Terapeuta</th><th>Estado</th></tr>
            </thead>
            <tbody>
              <tr><td className="num">09:00</td><td>Andrés Calderón Mora</td><td>Andrés Castro</td><td><span className="pill cyan">Agendada</span></td></tr>
              <tr><td className="num">10:00</td><td>Ana Chinchilla Ramírez</td><td>Camila Jiménez</td><td><span className="pill cyan">Agendada</span></td></tr>
              <tr><td className="num">11:00</td><td>Sofía Hernández Castro</td><td>Camila Jiménez</td><td><span className="pill green">Confirmada</span></td></tr>
              <tr><td className="num">12:00</td><td>Daniela Brenes Picado</td><td>Evelyn Bogantes</td><td><span className="pill amber">Pendiente</span></td></tr>
              <tr><td className="num">14:00</td><td>Mauricio Espinoza Núñez</td><td>Andrés Castro</td><td><span className="pill cyan">Agendada</span></td></tr>
            </tbody>
          </table>
        </div>
        <div className="dash-card">
          <div className="dash-card-h">
            Pacientes por riesgo
            <div className="tiny">Total: 20</div>
          </div>
          <div className="risk-bars">
            <div className="risk-bar-row">
              <span className="risk-low">Bajo</span>
              <div className="risk-bar"><div className="fill" style={{width: "65%", background: "var(--risk-low)"}}/></div>
              <span className="num">13</span>
            </div>
            <div className="risk-bar-row">
              <span className="risk-mod">Moderado</span>
              <div className="risk-bar"><div className="fill" style={{width: "20%", background: "var(--risk-mod)"}}/></div>
              <span className="num">4</span>
            </div>
            <div className="risk-bar-row">
              <span className="risk-high">Alto</span>
              <div className="risk-bar"><div className="fill" style={{width: "10%", background: "var(--risk-high)"}}/></div>
              <span className="num">2</span>
            </div>
            <div className="risk-bar-row">
              <span className="risk-crit">Crítico</span>
              <div className="risk-bar"><div className="fill" style={{width: "5%", background: "var(--risk-crit)"}}/></div>
              <span className="num">1</span>
            </div>
          </div>
          <div className="dash-card-h" style={{borderTop: "1px solid var(--line-soft)", borderBottom: "none"}}>
            Morosidad
            <div className="tiny">2 cuentas</div>
          </div>
          <div style={{padding: "0 16px 16px", fontSize: 12, color: "var(--ink-2)"}}>
            <div style={{display: "flex", justifyContent: "space-between", padding: "8px 0", borderBottom: "1px dashed var(--line-soft)"}}>
              <span>V. Mejía Castro</span>
              <span className="num" style={{color: "var(--risk-high)", fontWeight: 600}}>₡180,000 · 42d</span>
            </div>
            <div style={{display: "flex", justifyContent: "space-between", padding: "8px 0"}}>
              <span>F. Mata Villalobos</span>
              <span className="num" style={{color: "var(--risk-mod)", fontWeight: 600}}>₡72,400 · 18d</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </>
);

const ScreenAgenda = () => {
  // Build a week grid
  const days = ["lun 18/5","mar 19/5","mié 20/5","jue 21/5","vie 22/5","sáb 23/5","dom 24/5"];
  const hours = Array.from({length: 11}, (_,i)=> 7+i);
  // Events: { day index, hour, dur (h), patient, therapist, accent }
  const events = [
    { d:4, h:9, dur:1, p:"Camila Aguilar", t:"Jiménez", acc:"cyan" },
    { d:4, h:9, dur:1, p:"Iván Bermúdez", t:"Castro", acc:"cyan", off:0.5 },
    { d:5, h:9, dur:1, p:"Andrés Calderón", t:"Castro", acc:"cyan" },
    { d:5, h:10, dur:1, p:"Ana Chinchilla", t:"Jiménez", acc:"green" },
    { d:4, h:12, dur:1, p:"Daniela Brenes", t:"Bogantes", acc:"green" },
    { d:1, h:14, dur:1, p:"Mauricio E.", t:"Castro", acc:"cyan" },
    { d:2, h:10, dur:1, p:"Natalia Fernández", t:"Bogantes", acc:"green" },
    { d:0, h:15, dur:1, p:"Esteban Gómez", t:"Bogantes", acc:"cyan" },
    { d:3, h:11, dur:1, p:"Sofía Hernández", t:"Jiménez", acc:"cyan" },
    { d:5, h:14, dur:1, p:"Patricia Madrigal", t:"Bogantes", acc:"green" },
  ];

  return (
    <>
      <AppTopbar title="Agenda enterprise" />
      <div className="app-body">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
          <div style={{fontSize:14, fontWeight:600}}>Calendario de citas</div>
          <div style={{display:"flex", gap:6}}>
            <span className="kbd">N</span>
            <button className="app-btn green"><Icon name="plus" size={11}/>Nueva cita</button>
          </div>
        </div>
        <div className="cal-shell">
          <div className="cal-h">
            <div style={{display:"flex", gap:6}}>
              <button className="nav-btn"><Icon name="chev_l" size={12}/></button>
              <button className="nav-btn"><Icon name="chev_r" size={12}/></button>
              <button className="app-btn" style={{marginLeft:6}}>Hoy</button>
            </div>
            <div className="range">18 – 24 may 2026</div>
            <div style={{display:"flex", gap:4}}>
              <button className="app-btn">Mes</button>
              <button className="app-btn primary">Semana</button>
              <button className="app-btn">Día</button>
            </div>
          </div>
          <div className="cal-grid">
            <div className="cal-cell cal-head"></div>
            {days.map((d,i)=>(
              <div key={i} className={`cal-cell cal-head ${i===5?"cal-today":""}`}>{d}</div>
            ))}
            {hours.map((h)=> (
              <React.Fragment key={h}>
                <div className="cal-cell cal-time">{h}</div>
                {days.map((_,di)=> {
                  const evs = events.filter(e => e.d===di && e.h===h);
                  return (
                    <div key={di} className={`cal-cell ${di===5?"cal-today":""}`}>
                      {evs.map((e,ei)=>(
                        <div key={ei} className={`cal-event ${e.acc==="green"?"green":""}`}
                          style={{
                            top: 2, height: e.dur*28 - 4,
                            left: e.off ? `${e.off*50}%` : 2,
                            width: e.off ? "48%" : "auto",
                            right: e.off ? "auto" : 2,
                          }}>
                          <b>{h}:00 – {h+e.dur}:00</b>
                          {e.p} · {e.t}
                        </div>
                      ))}
                    </div>
                  );
                })}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

const ScreenCitasDia = () => (
  <>
    <AppTopbar title="Citas del día" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{display:"flex", gap:8, alignItems:"center"}}>
          <input className="login-input" style={{width:160, marginTop:0, height:32}} defaultValue="23/05/2026"/>
          <button className="app-btn primary"><Icon name="cal" size={12}/>Ver</button>
        </div>
        <div style={{display:"flex", gap:6}}>
          <button className="app-btn cyan"><Icon name="cal" size={12}/>Calendario</button>
          <button className="app-btn green"><Icon name="plus" size={11}/>Nueva</button>
        </div>
      </div>
      <table className="app-table" style={{border: "1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr>
          <th>Hora</th><th>Paciente</th><th>Terapeuta</th><th>Sala</th><th>Tipo</th><th>Modalidad</th><th>Estado</th><th></th>
        </tr></thead>
        <tbody>
          <tr><td className="num">09:00 – 10:00</td><td>Andrés Calderón Mora</td><td>Andrés Castro</td><td>Consultorio 1</td><td>Consulta</td><td>Presencial</td><td><span className="pill cyan">Agendada</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">10:00 – 11:00</td><td>Ana Chinchilla Ramírez</td><td>Camila Jiménez</td><td>Consultorio 1</td><td>Consulta</td><td>Presencial</td><td><span className="pill cyan">Agendada</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">11:00 – 12:00</td><td>Sofía Hernández Castro</td><td>Camila Jiménez</td><td>Consultorio 2</td><td>Seguimiento</td><td>Online</td><td><span className="pill green">Confirmada</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">12:00 – 13:00</td><td>Daniela Brenes Picado</td><td>Evelyn Bogantes</td><td>Consultorio 1</td><td>Evaluación</td><td>Presencial</td><td><span className="pill amber">Pendiente</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">14:00 – 15:00</td><td>Mauricio Espinoza Núñez</td><td>Andrés Castro</td><td>Consultorio 2</td><td>Consulta</td><td>Presencial</td><td><span className="pill cyan">Agendada</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">15:00 – 16:00</td><td>Natalia Fernández Arroyo</td><td>Evelyn Bogantes</td><td>Consultorio 1</td><td>Test psicométrico</td><td>Presencial</td><td><span className="pill green">Confirmada</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
          <tr><td className="num">16:00 – 17:00</td><td>Valentina Mejía Castro</td><td>Andrés Castro</td><td>Consultorio 2</td><td>Crisis</td><td>Presencial</td><td><span className="pill red">Urgente</span></td><td><button className="app-btn icon"><Icon name="eye" size={12}/></button></td></tr>
        </tbody>
      </table>
    </div>
  </>
);

const ScreenPacientes = () => (
  <>
    <AppTopbar title="Pacientes" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{display:"flex", gap:8, alignItems:"center"}}>
          <input className="app-search" placeholder="Buscar por nombre, expediente o cédula"/>
          <select className="app-search" style={{width:140}}><option>Solo activos</option></select>
          <button className="app-btn primary"><Icon name="search" size={12}/>Buscar</button>
        </div>
        <button className="app-btn green"><Icon name="plus" size={11}/>Nuevo paciente</button>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr>
          <th>Expediente</th><th>Nombre</th><th>Cédula</th><th>Edad</th><th>Terapeuta</th><th>Riesgo</th><th>Última cita</th><th>Estado</th><th></th>
        </tr></thead>
        <tbody>
          {[
            ["EXP-0010","Camila Aguilar Soto","120340876","23","Camila Jiménez","Alto","high","Activo"],
            ["EXP-0020","Iván Bermúdez Salazar","111450123","40","Andrés Castro","Bajo","low","Activo"],
            ["EXP-0014","Daniela Brenes Picado","116890345","29","Evelyn Bogantes","Bajo","low","Activo"],
            ["EXP-0018","Andrés Calderón Mora","114670328","36","Evelyn Bogantes","Bajo","low","Activo"],
            ["EXP-0011","Ana Chinchilla Ramírez","119450334","27","Evelyn Bogantes","Moderado","mod","Activo"],
            ["EXP-0012","Mauricio Espinoza Núñez","104560123","51","Andrés Castro","Bajo","low","Activo"],
            ["EXP-0009","Natalia Fernández Arroyo","115670344","33","Evelyn Bogantes","Bajo","low","Activo"],
            ["EXP-0008","Esteban Gómez Pereira","114780923","36","Evelyn Bogantes","Bajo","low","Activo"],
            ["EXP-0003","Sofía Hernández Castro","113670923","34","Camila Jiménez","Moderado","mod","Activo"],
            ["EXP-0015","Patricia Madrigal Soto","109670456","44","Evelyn Bogantes","Bajo","low","Activo"],
            ["EXP-0013","Fernando Mata Villalobos","112670489","38","Andrés Castro","Moderado","mod","Activo"],
            ["EXP-0007","Valentina Mejía Castro","118970345","28","Andrés Castro","Crítico","crit","Activo"],
          ].map((r,i)=>(
            <tr key={i}>
              <td><b>{r[0]}</b></td>
              <td>{r[1]}</td>
              <td className="num">{r[2]}</td>
              <td className="num">{r[3]}</td>
              <td>{r[4]}</td>
              <td><span className={`risk-${r[6]}`}>{r[5]}</span></td>
              <td className="num" style={{color:"var(--ink-3)"}}>—</td>
              <td>{r[7]}</td>
              <td><div className="app-actions"><button className="app-btn icon"><Icon name="eye" size={12}/></button><button className="app-btn icon cyan"><Icon name="edit" size={12}/></button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenDiagnosticos = () => (
  <>
    <AppTopbar title="Catálogo DSM-5 / CIE-11" />
    <div className="app-body">
      <div className="diag-bar">
        <input className="app-search" style={{flex:1}} placeholder="Buscar por código, nombre o categoría"/>
        <select className="app-search" style={{width:200}}><option>Todas las clasificaciones</option></select>
        <label style={{fontSize:12, color:"var(--ink-2)", display:"flex", alignItems:"center", gap:6}}>
          <input type="checkbox"/> Incluir inactivos
        </label>
        <button className="app-btn primary"><Icon name="search" size={12}/>Buscar</button>
        <div style={{marginLeft:"auto"}}/>
        <button className="app-btn green"><Icon name="plus" size={11}/>Nuevo diagnóstico</button>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr>
          <th>Código</th><th>Nombre</th><th>Categoría</th><th>Clasificación</th><th>Estado</th><th>Acciones</th>
        </tr></thead>
        <tbody>
          {[
            ["6A02","Trastorno del espectro autista","Neurodesarrollo"],
            ["6A05","TDAH presentación combinada","Neurodesarrollo"],
            ["6A60","Trastorno bipolar tipo I","Bipolar"],
            ["6A70","Trastorno depresivo episodio único","Depresivos"],
            ["6A71","Trastorno depresivo recurrente","Depresivos"],
            ["6B00","Trastorno de ansiedad generalizada","Ansiedad"],
            ["6B01","Trastorno de pánico","Ansiedad"],
            ["6B04","Fobia social","Ansiedad"],
            ["6B20","Trastorno obsesivo-compulsivo","TOC"],
            ["6B40","Trastorno por estrés postraumático","Trauma"],
            ["6B41","TEPT complejo","Trauma"],
          ].map((r,i)=>(
            <tr key={i}>
              <td className="num"><b>{r[0]}</b></td>
              <td>{r[1]}</td>
              <td>{r[2]}</td>
              <td><span className="pill cyan">CIE11</span></td>
              <td><span className="pill green">Activo</span></td>
              <td><div className="app-actions"><button className="app-btn icon cyan"><Icon name="edit" size={12}/></button><button className="app-btn icon" style={{background:"var(--risk-high)", color:"white", borderColor:"var(--risk-high)"}}>×</button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenTests = () => {
  const tests = [
    { code:"ASRS-v1.1", name:"ASRS v1.1 – Tamizaje TDAH adultos", desc:"Auto-reporte TDAH adultos (OMS).", cat:"AtenciónTDAH", q:18, t:"~7 min", age:"18–120"},
    { code:"BDI-II", name:"Inventario de Depresión de Beck", desc:"21 ítems sobre síntomas depresivos últimas 2 semanas.", cat:"Depresión", q:21, t:"~10 min", age:"13–120"},
    { code:"GAD-7", name:"GAD-7 – Generalized Anxiety", desc:"Escala de ansiedad generalizada.", cat:"Ansiedad", q:7, t:"~4 min", age:"13–120"},
    { code:"HAM-D", name:"Escala Hamilton de Depresión", desc:"Heteroaplicada. 17 ítems.", cat:"Depresión", q:17, t:"~20 min", age:"18–120"},
    { code:"MMPI-2", name:"Inventario Multifásico de Personalidad", desc:"Personalidad y psicopatología. 567 ítems.", cat:"Personalidad", q:567, t:"~90 min", age:"18–120"},
    { code:"PHQ-9", name:"Patient Health Questionnaire-9", desc:"Tamizaje y severidad de depresión.", cat:"Depresión", q:9, t:"~5 min", age:"13–120"},
    { code:"WAIS-IV", name:"WAIS-IV – Inteligencia adultos", desc:"Evaluación inteligencia adultos.", cat:"Inteligencia", q:15, t:"~90 min", age:"16–90"},
    { code:"WISC-V", name:"WISC-V – Inteligencia niños", desc:"Evaluación inteligencia 6-16 años.", cat:"Inteligencia", q:15, t:"~80 min", age:"6–16"},
  ];
  return (
    <>
      <AppTopbar title="Tests psicométricos" />
      <div className="app-body">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
          <div style={{fontSize:14, fontWeight:600}}>Catálogo de pruebas psicométricas</div>
          <div style={{display:"flex", gap:8, alignItems:"center"}}>
            <label style={{fontSize:11, color:"var(--ink-2)", display:"flex", alignItems:"center", gap:6}}>
              <input type="checkbox"/> Inactivos
            </label>
            <button className="app-btn green"><Icon name="plus" size={11}/>Nuevo test</button>
          </div>
        </div>
        <div className="test-grid">
          {tests.map((t,i)=>(
            <div className="test-card" key={i}>
              <div className="code">{t.code}</div>
              <h4>{t.name}</h4>
              <div className="desc">{t.desc}</div>
              <div className="meta">
                <span>{t.cat}</span>
                <span>· {t.q} preguntas</span>
                <span>· {t.t}</span>
                <span>· Edad {t.age}</span>
              </div>
              <div style={{display:"flex", gap:6, marginTop:8}}>
                <button className="app-btn cyan" style={{flex:1, justifyContent:"center"}}><Icon name="edit" size={11}/>Editar</button>
                <button className="app-btn icon" style={{background:"var(--risk-high)", color:"white", borderColor:"var(--risk-high)"}}>×</button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </>
  );
};

const ScreenFacturacion = () => (
  <>
    <AppTopbar title="Facturación electrónica" />
    <div className="app-body">
      <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:12}}>
        <div style={{display:"flex", gap:8, alignItems:"center"}}>
          <select className="app-search" style={{width:120}}><option>Todas</option></select>
          <input className="app-search" style={{width:130}} placeholder="dd/mm/aaaa"/>
          <input className="app-search" style={{width:130}} placeholder="dd/mm/aaaa"/>
          <button className="app-btn primary">Filtrar</button>
        </div>
        <button className="app-btn green"><Icon name="plus" size={11}/>Nueva factura</button>
      </div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr>
          <th>Consecutivo</th><th>Fecha</th><th>Cliente</th><th>Total</th><th>Estado</th><th>Hacienda</th><th>Descargas</th>
        </tr></thead>
        <tbody>
          {[
            ["FE-2026-00031","23/05/2026","Aguilar Soto","₡36,400.00","Aceptada","aceptada"],
            ["FE-2026-00030","22/05/2026","Bermúdez Salazar","₡42,000.00","Aceptada","aceptada"],
            ["FE-2026-00029","22/05/2026","Brenes Picado","₡52,800.00","Aceptada","aceptada"],
            ["FE-2026-00028","21/05/2026","Calderón Mora","₡36,400.00","Borrador","pendiente"],
            ["FE-2026-00027","21/05/2026","Chinchilla Ramírez","₡36,400.00","Aceptada","aceptada"],
            ["FE-2026-00026","20/05/2026","Espinoza Núñez","₡42,000.00","Aceptada","aceptada"],
            ["FE-2026-00025","20/05/2026","Hernández Castro","₡96,000.00","Aceptada","aceptada"],
          ].map((r,i)=>(
            <tr key={i}>
              <td className="num"><b>{r[0]}</b></td>
              <td className="num">{r[1]}</td>
              <td>{r[2]}</td>
              <td className="num" style={{fontWeight:600}}>{r[3]}</td>
              <td><span className={`pill ${r[4]==="Aceptada"?"green":"cyan"}`}>{r[4]}</span></td>
              <td><span className={`pill ${r[5]==="aceptada"?"green":"amber"}`}>{r[5]==="aceptada"?"Aceptada":"Pendiente envío"}</span></td>
              <td><div className="app-actions">
                <button className="app-btn">PDF</button>
                <button className="app-btn">XML</button>
                <button className="app-btn">Resp.</button>
              </div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenAccesos = () => (
  <>
    <AppTopbar title="Activar acceso al portal" />
    <div className="app-body">
      <div style={{marginBottom:14, fontSize:13, color:"var(--ink-2)"}}>
        Generá credenciales para que pacientes accedan a su expediente, recetas y citas online.
      </div>
      <div className="portal-card">
        <div className="portal-card-h">
          <div className="h-l"><Icon name="lock" size={14}/>Acceso al portal del paciente</div>
          <span className="pill gray">Sin acceso</span>
        </div>
        <div className="portal-card-b">
          <label>
            Email del paciente (usuario)
            <input defaultValue="camila.aguilar@example.cr"/>
          </label>
          <label>
            Contraseña inicial (opcional)
            <input placeholder="Se genera automáticamente"/>
          </label>
          <button className="app-btn primary" style={{height:34}}><Icon name="lock" size={12}/>Activar acceso</button>
        </div>
        <div className="portal-card-f">
          Al activar, se crea una cuenta con rol <b>Paciente</b>. Si dejás la contraseña vacía, el sistema genera una temporal y el paciente la deberá cambiar al primer ingreso.
        </div>
      </div>
      <div style={{marginTop:18, fontSize:13, fontWeight:600, marginBottom:10}}>Accesos activos</div>
      <table className="app-table" style={{border:"1px solid var(--line)", borderRadius:8, overflow:"hidden"}}>
        <thead><tr>
          <th>Email</th><th>Rol</th><th>Último ingreso</th><th>Estado</th><th>Acciones</th>
        </tr></thead>
        <tbody>
          {[
            ["ivan.bermudez@example.cr","Paciente","Hoy · 10:42","Activo"],
            ["daniela.brenes@example.cr","Paciente","Ayer · 19:08","Activo"],
            ["sofia.hernandez@example.cr","Paciente","18/05 · 14:22","Activo"],
            ["camila.jimenez@clinic.local","Terapeuta","Hoy · 08:01","Activo"],
            ["andres.castro@clinic.local","Terapeuta","Hoy · 07:55","Activo"],
            ["evelyn.bogantes@clinic.local","Terapeuta","Hoy · 09:14","Activo"],
          ].map((r,i)=>(
            <tr key={i}>
              <td className="num" style={{fontSize:11}}>{r[0]}</td>
              <td><span className={`pill ${r[1]==="Paciente"?"cyan":"navy"}`}>{r[1]}</span></td>
              <td className="num" style={{color:"var(--ink-3)"}}>{r[2]}</td>
              <td><span className="pill green">{r[3]}</span></td>
              <td><div className="app-actions"><button className="app-btn">Reset</button><button className="app-btn icon"><Icon name="lock" size={12}/></button></div></td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  </>
);

const ScreenLogin = () => (
  <div className="login-frame">
    <div className="login-left">
      <div className="mk-big">C</div>
      <h2><em>Clinic</em><br/>tu centro de psicología</h2>
      <div className="desc" style={{marginTop:12}}>
        EHR moderno para salud mental. Notas SOAP / DAP / BIRP / EMDR, tests psicométricos y agenda enterprise.
      </div>
      <div className="chips">
        <div className="login-chip">50+<br/><span style={{opacity:0.8, fontSize:9}}>PACIENTES</span></div>
        <div className="login-chip">9<br/><span style={{opacity:0.8, fontSize:9}}>TESTS</span></div>
        <div className="login-chip">DSM-5<br/><span style={{opacity:0.8, fontSize:9}}>CIE-11</span></div>
      </div>
      <div style={{position:"absolute", bottom:18, left:36, fontFamily:"var(--f-mono)", fontSize:10, letterSpacing:".1em", opacity:0.65}}>AES-256 · TLS 1.3 · AUDITORÍA TOTAL</div>
    </div>
    <div className="login-right">
      <div className="ttl">Clinic</div>
      <div className="sb">CENTRO DE PSICOLOGÍA</div>
      <input className="login-input" placeholder="Correo electrónico o usuario" style={{marginTop:22}}/>
      <input className="login-input" placeholder="Contraseña" type="password"/>
      <button className="login-btn">Iniciar sesión</button>
      <label style={{fontSize:12, color:"var(--ink-2)", marginTop:12, display:"flex", alignItems:"center", gap:6}}>
        <input type="checkbox"/> Recordarme
      </label>
      <div style={{borderTop:"1px solid var(--line-soft)", margin:"18px 0"}}/>
      <a style={{fontSize:12, color:"var(--brand-accent)", display:"flex", gap:6, alignItems:"center"}}>
        <Icon name="shield" size={12}/>Iniciar sesión con autenticación corporativa
      </a>
      <a style={{fontSize:12, color:"var(--ink-3)", marginTop:8, textAlign:"center"}}>¿Olvidaste tu contraseña?</a>
    </div>
  </div>
);

/* ================================================================
   Map screen id → component
   ================================================================ */
const SCREENS = {
  dashboard: ScreenDashboard,
  agenda: ScreenAgenda,
  citas: ScreenCitasDia,
  pacientes: ScreenPacientes,
  diagnosticos: ScreenDiagnosticos,
  tests: ScreenTests,
  facturacion: ScreenFacturacion,
  accesos: ScreenAccesos,
  login: ScreenLogin,
};

/* ================================================================
   Preview shell (used in hero + showcase section)
   ================================================================ */
const ProductPreview = ({ initial = "dashboard", showTabs = true }) => {
  const [screen, setScreen] = useState(initial);
  const Comp = SCREENS[screen] || ScreenDashboard;
  const isLogin = screen === "login";

  const TABS = [
    { id: "dashboard", label: "Dashboard" },
    { id: "agenda", label: "Agenda" },
    { id: "citas", label: "Citas del día" },
    { id: "pacientes", label: "Pacientes" },
    { id: "diagnosticos", label: "Diagnósticos" },
    { id: "tests", label: "Tests" },
    { id: "facturacion", label: "Facturación" },
    { id: "accesos", label: "Accesos" },
    { id: "login", label: "Login" },
  ];

  return (
    <>
      {showTabs && (
        <div className="preview-tabs">
          {TABS.map((t)=>(
            <button key={t.id} className={`preview-tab ${screen===t.id?"active":""}`} onClick={()=>setScreen(t.id)}>
              {t.label}
            </button>
          ))}
        </div>
      )}
      <div className="preview-shell">
        <div className="preview-titlebar">
          <div className="dots"><span className="dot"/><span className="dot"/><span className="dot"/></div>
          <div className="url">clinic.local / {screen}</div>
          <div style={{fontFamily:"var(--f-mono)", fontSize:10}}>v3.4.1</div>
        </div>
        <div className="preview-frame" style={isLogin ? {gridTemplateColumns: "1fr"} : {}}>
          {!isLogin && <AppSidebar active={screen} onChange={setScreen}/>}
          <div className="app-main">
            <Comp/>
          </div>
        </div>
      </div>
    </>
  );
};

window.ProductPreview = ProductPreview;
window.Icon = Icon;