// Dashboard showcase with tabs
function Showcase() {
  const [tab, setTab] = React.useState('agenda');
  const tabs = [
    { id:'agenda', label:'Agenda', ic: <I.Cal size={14}/> },
    { id:'pacientes', label:'Pacientes', ic: <I.Users size={14}/> },
    { id:'finanzas', label:'Finanzas', ic: <I.Receipt size={14}/> },
    { id:'tratamientos', label:'Tratamientos', ic: <I.Folder size={14}/> },
  ];

  return (
    <section id="dashboard" className="showcase">
      <div className="container">
        <div className="section-head">
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="eyebrow"><span className="dot"/>Plataforma</div>
          </div>
          <h2>Una sola plataforma.<br/>Toda tu clínica en orden.</h2>
          <p className="lead">Diseño obsesivo por la velocidad. Cambia de módulo sin esperar. Acciones críticas a un atajo de distancia.</p>
        </div>

        <div style={{display:'flex', justifyContent:'center'}}>
          <div className="tabs-bar">
            {tabs.map(t => (
              <button key={t.id} className={`tab-btn ${tab===t.id?'active':''}`} onClick={() => setTab(t.id)}>
                {t.ic}{t.label}
              </button>
            ))}
          </div>
        </div>

        <div className="showcase-frame">
          <div className="showcase-inner">
            {tab === 'agenda' && <AgendaView/>}
            {tab === 'pacientes' && <PacientesView/>}
            {tab === 'finanzas' && <FinanzasView/>}
            {tab === 'tratamientos' && <TratamientosView/>}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Agenda ----
function AgendaView() {
  const hours = ['09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00'];
  const days = ['Lun 15','Mar 16','Mié 17','Jue 18','Vie 19','Sáb 20'];
  const events = [
    { d:0, h:0, dur:1, name:'Carla R.', t:'Limpieza', c:'blue' },
    { d:0, h:2, dur:2, name:'Marc S.', t:'Endodoncia', c:'teal' },
    { d:0, h:6, dur:1.5, name:'Lucía V.', t:'Revisión', c:'mint' },
    { d:1, h:1, dur:1, name:'Iván C.', t:'Implante', c:'rose' },
    { d:1, h:4, dur:2, name:'Nora P.', t:'Ortodoncia', c:'lilac' },
    { d:2, h:0, dur:1, name:'Ana T.', t:'Blanqueo', c:'blue' },
    { d:2, h:3, dur:1.5, name:'David L.', t:'Empaste', c:'mint' },
    { d:3, h:2, dur:2, name:'Roser G.', t:'Endodoncia', c:'teal' },
    { d:3, h:6, dur:1, name:'Pol B.', t:'Limpieza', c:'blue' },
    { d:4, h:1, dur:1, name:'Mireia O.', t:'Revisión', c:'mint' },
    { d:4, h:4, dur:3, name:'Joan F.', t:'Cirugía', c:'rose' },
    { d:5, h:0, dur:2, name:'Eva M.', t:'Estética', c:'lilac' },
  ];
  const colorMap = {
    blue:   { bg:'linear-gradient(135deg, rgba(45,93,255,0.25), rgba(45,93,255,0.12))', bd:'rgba(91, 140, 255, 0.5)', tx:'#A8C0FF' },
    teal:   { bg:'linear-gradient(135deg, rgba(20,196,212,0.28), rgba(20,196,212,0.14))', bd:'rgba(91, 227, 227, 0.5)', tx:'#9EE9E9' },
    mint:   { bg:'linear-gradient(135deg, rgba(22,165,113,0.25), rgba(22,165,113,0.12))', bd:'rgba(80,200,150,0.45)', tx:'#A5E3C7' },
    rose:   { bg:'linear-gradient(135deg, rgba(242,92,122,0.25), rgba(242,92,122,0.12))', bd:'rgba(242,140,160,0.45)', tx:'#F2B5C2' },
    lilac:  { bg:'linear-gradient(135deg, rgba(160,91,255,0.25), rgba(160,91,255,0.12))', bd:'rgba(180,130,255,0.45)', tx:'#D0BBFF' },
  };
  return (
    <div style={{padding:'18px', display:'flex', flexDirection:'column', gap:14, color:'#fff'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center'}}>
        <div>
          <div style={{fontSize:14, fontWeight:600}}>Semana 24 · Sala 1 — Dra. Martínez</div>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.5)'}}>87% ocupación · 42 citas · 6 confirmaciones pendientes</div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <div style={{padding:'6px 10px', borderRadius:8, border:'1px solid rgba(255,255,255,0.12)', fontSize:12, color:'rgba(255,255,255,0.7)'}}>Semana</div>
          <button style={{padding:'6px 12px', borderRadius:8, background:'linear-gradient(135deg,#2D5DFF,#14C4D4)', color:'#fff', fontSize:12, fontWeight:500, display:'inline-flex', alignItems:'center', gap:5}}>
            <I.Plus size={12}/>Nueva cita
          </button>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'48px repeat(6, 1fr)', gap:1, background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:10, overflow:'hidden'}}>
        <div/>
        {days.map(d => (
          <div key={d} style={{padding:'10px 8px', fontSize:11, fontWeight:600, color:'rgba(255,255,255,0.8)', background:'rgba(255,255,255,0.03)', textAlign:'center'}}>{d}</div>
        ))}
        {hours.map((h, hi) => (
          <React.Fragment key={h}>
            <div className="mono" style={{padding:'8px 4px', fontSize:10, color:'rgba(255,255,255,0.4)', background:'rgba(255,255,255,0.02)', textAlign:'center', borderTop:'1px solid rgba(255,255,255,0.04)'}}>{h}</div>
            {days.map((_, di) => {
              const ev = events.find(e => e.d === di && e.h === hi);
              return (
                <div key={di} style={{padding:3, minHeight:38, background:'rgba(255,255,255,0.015)', borderTop:'1px solid rgba(255,255,255,0.04)', position:'relative'}}>
                  {ev && (() => {
                    const c = colorMap[ev.c];
                    return (
                      <div style={{
                        position:'absolute', left:3, right:3, top:3,
                        height: `calc(${ev.dur * 38}px - 6px)`,
                        background: c.bg,
                        border: `1px solid ${c.bd}`,
                        borderRadius:6, padding:'5px 7px',
                        boxShadow:'0 2px 8px rgba(0,0,0,0.2)'
                      }}>
                        <div style={{fontSize:10, fontWeight:600, color:'#fff'}}>{ev.name}</div>
                        <div style={{fontSize:9, color: c.tx}}>{ev.t}</div>
                      </div>
                    );
                  })()}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ---- Pacientes ----
function PacientesView() {
  const patients = [
    { n:'Carla Ruiz Domínguez', e:'carla.ruiz@email.es', tel:'+34 612 30 45 11', last:'12 jun 2026', state:'Activo', t:'Ortodoncia', c:'#2D5DFF' },
    { n:'Marc Soler Bonet', e:'marc.soler@email.es', tel:'+34 666 89 12 04', last:'10 jun 2026', state:'Tratamiento', t:'Endodoncia', c:'#14C4D4' },
    { n:'Lucía Vega Hernández', e:'lucia.vega@email.es', tel:'+34 614 22 77 39', last:'08 jun 2026', state:'Activo', t:'Revisión', c:'#16A571' },
    { n:'Iván Costa Aragón', e:'ivan.costa@email.es', tel:'+34 678 11 53 21', last:'01 jun 2026', state:'Pendiente', t:'Implante', c:'#F25C7A' },
    { n:'Nora Pérez Català', e:'nora.perez@email.es', tel:'+34 622 90 65 14', last:'28 may 2026', state:'Activo', t:'Ortodoncia', c:'#A05BFF' },
    { n:'Pol Bartomeu Lago', e:'pol.bartomeu@email.es', tel:'+34 698 31 09 87', last:'22 may 2026', state:'Tratamiento', t:'Empaste', c:'#2D5DFF' },
  ];
  return (
    <div style={{padding:'18px', color:'#fff', display:'flex', flexDirection:'column', gap:14}}>
      <div style={{display:'flex', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:14, fontWeight:600}}>1.284 pacientes</div>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.5)'}}>Filtrado: Activos · Últimos 30 días</div>
        </div>
        <div style={{display:'flex', gap:8}}>
          <div style={{display:'flex', alignItems:'center', gap:6, padding:'6px 12px', borderRadius:8, border:'1px solid rgba(255,255,255,0.12)', background:'rgba(255,255,255,0.04)', fontSize:12, color:'rgba(255,255,255,0.7)', minWidth:240}}>
            <I.Search size={12}/> Buscar por nombre, NIF, teléfono…
          </div>
          <button style={{padding:'6px 12px', borderRadius:8, background:'linear-gradient(135deg,#2D5DFF,#14C4D4)', color:'#fff', fontSize:12, fontWeight:500, display:'inline-flex', alignItems:'center', gap:5}}>
            <I.Plus size={12}/>Añadir
          </button>
        </div>
      </div>
      <div style={{border:'1px solid rgba(255,255,255,0.08)', borderRadius:10, overflow:'hidden'}}>
        <div style={{display:'grid', gridTemplateColumns:'2fr 2fr 1.5fr 1.2fr 1fr 1fr 40px', padding:'10px 14px', fontSize:11, color:'rgba(255,255,255,0.5)', fontWeight:600, textTransform:'uppercase', letterSpacing:'0.05em', background:'rgba(255,255,255,0.03)', borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
          <div>Paciente</div><div>Email</div><div>Teléfono</div><div>Última visita</div><div>Tratamiento</div><div>Estado</div><div/>
        </div>
        {patients.map((p,i) => (
          <div key={i} style={{display:'grid', gridTemplateColumns:'2fr 2fr 1.5fr 1.2fr 1fr 1fr 40px', padding:'12px 14px', fontSize:12.5, color:'rgba(255,255,255,0.85)', borderBottom: i < patients.length-1 ? '1px solid rgba(255,255,255,0.04)' : 'none', alignItems:'center'}}>
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <div style={{width:28, height:28, borderRadius:'50%', background: p.c, display:'grid', placeItems:'center', color:'#fff', fontSize:11, fontWeight:600}}>{p.n.split(' ').map(x=>x[0]).slice(0,2).join('')}</div>
              <span style={{fontWeight:500}}>{p.n}</span>
            </div>
            <div style={{color:'rgba(255,255,255,0.6)'}}>{p.e}</div>
            <div className="mono" style={{color:'rgba(255,255,255,0.6)', fontSize:11}}>{p.tel}</div>
            <div style={{color:'rgba(255,255,255,0.6)'}}>{p.last}</div>
            <div style={{color:'rgba(255,255,255,0.8)'}}>{p.t}</div>
            <div>
              <span style={{
                fontSize:10, padding:'3px 8px', borderRadius:999, fontWeight:500,
                background: p.state==='Activo' ? 'rgba(22,165,113,0.15)' : p.state==='Tratamiento' ? 'rgba(20,196,212,0.15)' : 'rgba(244,183,64,0.15)',
                color: p.state==='Activo' ? '#5BE3A0' : p.state==='Tratamiento' ? '#5BE3E3' : '#FFD78A'
              }}>{p.state}</span>
            </div>
            <div style={{textAlign:'right', color:'rgba(255,255,255,0.4)'}}>⋯</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ---- Finanzas ----
function FinanzasView() {
  const cats = [
    {label:'Ortodoncia', val:38400, pct:42, c:'#2D5DFF'},
    {label:'Implantes', val:22100, pct:24, c:'#14C4D4'},
    {label:'Endodoncia', val:14600, pct:16, c:'#16A571'},
    {label:'Estética', val:9800, pct:11, c:'#A05BFF'},
    {label:'Otros', val:6500, pct:7, c:'#F4B740'},
  ];
  const bars = [42, 56, 38, 64, 48, 72, 60, 82, 70, 88, 76, 96];
  return (
    <div style={{padding:'18px', color:'#fff', display:'flex', flexDirection:'column', gap:14}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10}}>
        {[
          {l:'Facturado MTD', v:'€ 91.420', d:'+18,2%', up:true},
          {l:'Pendiente cobro', v:'€ 12.380', d:'-9,4%', up:true},
          {l:'Ticket medio', v:'€ 218', d:'+4,1%', up:true},
          {l:'Tasa cobro', v:'94,2%', d:'+1,8 pts', up:true},
        ].map(k => (
          <div key={k.l} style={{padding:'14px 16px', border:'1px solid rgba(255,255,255,0.08)', borderRadius:11, background:'rgba(255,255,255,0.03)'}}>
            <div style={{fontSize:10, color:'rgba(255,255,255,0.5)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:500}}>{k.l}</div>
            <div style={{fontSize:22, fontWeight:600, letterSpacing:'-0.02em', marginTop:4}}>{k.v}</div>
            <div style={{fontSize:11, color:'#5BE3A0', fontWeight:500, marginTop:2}}>↑ {k.d} vs mes anterior</div>
          </div>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:10}}>
        <div style={{padding:'16px', border:'1px solid rgba(255,255,255,0.08)', borderRadius:11, background:'rgba(255,255,255,0.03)'}}>
          <div style={{display:'flex', justifyContent:'space-between', marginBottom:14}}>
            <div>
              <div style={{fontSize:13, fontWeight:600}}>Ingresos mensuales</div>
              <div style={{fontSize:11, color:'rgba(255,255,255,0.5)'}}>Últimos 12 meses</div>
            </div>
            <span style={{fontSize:11, padding:'3px 8px', borderRadius:999, background:'rgba(91,227,227,0.15)', color:'#5BE3E3'}}>€ 821k YTD</span>
          </div>
          <div style={{display:'flex', alignItems:'flex-end', gap:6, height:160}}>
            {bars.map((v,i) => (
              <div key={i} style={{flex:1, height:`${v}%`, borderRadius:'6px 6px 2px 2px', background: i === bars.length-1 ? 'linear-gradient(180deg, #14C4D4, #2D5DFF)' : 'linear-gradient(180deg, rgba(45,93,255,0.5), rgba(45,93,255,0.15))', position:'relative'}}>
                {i===bars.length-1 && (
                  <div style={{position:'absolute', top:-26, left:'50%', transform:'translateX(-50%)', fontSize:10, padding:'2px 6px', background:'#fff', color:'#0A1628', borderRadius:5, fontWeight:600, whiteSpace:'nowrap'}}>€ 91k</div>
                )}
              </div>
            ))}
          </div>
          <div style={{display:'flex', justifyContent:'space-between', marginTop:8, fontSize:9, color:'rgba(255,255,255,0.4)', letterSpacing:'0.04em'}}>
            <span>JUL</span><span>AGO</span><span>SEP</span><span>OCT</span><span>NOV</span><span>DIC</span><span>ENE</span><span>FEB</span><span>MAR</span><span>ABR</span><span>MAY</span><span>JUN</span>
          </div>
        </div>
        <div style={{padding:'16px', border:'1px solid rgba(255,255,255,0.08)', borderRadius:11, background:'rgba(255,255,255,0.03)'}}>
          <div style={{fontSize:13, fontWeight:600, marginBottom:14}}>Mix de servicios</div>
          <div style={{display:'flex', flexDirection:'column', gap:10}}>
            {cats.map(c => (
              <div key={c.label}>
                <div style={{display:'flex', justifyContent:'space-between', fontSize:11, marginBottom:5}}>
                  <span style={{color:'rgba(255,255,255,0.8)'}}>{c.label}</span>
                  <span className="mono" style={{color:'rgba(255,255,255,0.5)'}}>€ {(c.val/1000).toFixed(1)}k</span>
                </div>
                <div style={{height:5, borderRadius:3, background:'rgba(255,255,255,0.06)', overflow:'hidden'}}>
                  <div style={{width:`${c.pct}%`, height:'100%', background:c.c, borderRadius:3}}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ---- Tratamientos pipeline ----
function TratamientosView() {
  const columns = [
    { id:'proposed', t:'Propuesto', count: 12, total: 18400, items:[
      { n:'Carla Ruiz', tr:'Ortodoncia Invisible', v:'€ 3.200', c:'#2D5DFF' },
      { n:'Marc Soler', tr:'Implante unitario', v:'€ 1.450', c:'#14C4D4' },
      { n:'Lucía Vega', tr:'Carillas (6)', v:'€ 2.880', c:'#16A571' },
    ]},
    { id:'accepted', t:'Aceptado', count: 8, total: 11200, items:[
      { n:'Iván Costa', tr:'Endodoncia + corona', v:'€ 620', c:'#F25C7A' },
      { n:'Nora Pérez', tr:'Blanqueamiento', v:'€ 340', c:'#A05BFF' },
    ]},
    { id:'inprogress', t:'En curso', count: 23, total: 28600, items:[
      { n:'Pol Bartomeu', tr:'Ortodoncia (mes 6/18)', v:'€ 2.100', c:'#2D5DFF', prog:33 },
      { n:'Mireia Ortiz', tr:'Implante 26 (fase 2/3)', v:'€ 1.450', c:'#14C4D4', prog:66 },
      { n:'David Lago', tr:'Endodoncia 36', v:'€ 280', c:'#16A571', prog:80 },
    ]},
    { id:'done', t:'Finalizado', count: 41, total: 38900, items:[
      { n:'Eva Mas', tr:'Estética anterior', v:'€ 1.840', c:'#A05BFF' },
      { n:'Joan Ferrer', tr:'3ª molar extracción', v:'€ 380', c:'#16A571' },
    ]},
  ];
  return (
    <div style={{padding:'18px', color:'#fff', display:'flex', flexDirection:'column', gap:14}}>
      <div style={{display:'flex', justifyContent:'space-between'}}>
        <div>
          <div style={{fontSize:14, fontWeight:600}}>Pipeline de tratamientos</div>
          <div style={{fontSize:12, color:'rgba(255,255,255,0.5)'}}>84 tratamientos activos · €97.100 en pipeline</div>
        </div>
        <div style={{display:'flex', gap:8, fontSize:12}}>
          <div style={{padding:'6px 10px', borderRadius:8, border:'1px solid rgba(255,255,255,0.12)', color:'rgba(255,255,255,0.7)'}}>Mes en curso</div>
          <div style={{padding:'6px 10px', borderRadius:8, border:'1px solid rgba(255,255,255,0.12)', color:'rgba(255,255,255,0.7)'}}>Todos los profesionales</div>
        </div>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:10}}>
        {columns.map(col => (
          <div key={col.id} style={{background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:11, padding:12, display:'flex', flexDirection:'column', gap:8}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', paddingBottom:8, borderBottom:'1px solid rgba(255,255,255,0.06)'}}>
              <div style={{fontSize:12, fontWeight:600}}>{col.t} <span style={{color:'rgba(255,255,255,0.4)', fontWeight:400, marginLeft:4}}>{col.count}</span></div>
              <div className="mono" style={{fontSize:10, color:'rgba(255,255,255,0.5)'}}>€{(col.total/1000).toFixed(1)}k</div>
            </div>
            {col.items.map((it,i) => (
              <div key={i} style={{padding:10, background:'rgba(255,255,255,0.04)', border:'1px solid rgba(255,255,255,0.06)', borderRadius:8}}>
                <div style={{display:'flex', alignItems:'center', gap:8, marginBottom:6}}>
                  <div style={{width:20, height:20, borderRadius:'50%', background:it.c, fontSize:9, fontWeight:600, display:'grid', placeItems:'center'}}>{it.n.split(' ').map(x=>x[0]).slice(0,2).join('')}</div>
                  <div style={{fontSize:11, fontWeight:500}}>{it.n}</div>
                </div>
                <div style={{fontSize:11, color:'rgba(255,255,255,0.7)', marginBottom:6}}>{it.tr}</div>
                {it.prog !== undefined && (
                  <div style={{height:3, borderRadius:2, background:'rgba(255,255,255,0.08)', marginBottom:6}}>
                    <div style={{width:`${it.prog}%`, height:'100%', background:'linear-gradient(90deg,#2D5DFF,#14C4D4)', borderRadius:2}}/>
                  </div>
                )}
                <div className="mono" style={{fontSize:11, color:'#5BE3E3', fontWeight:500}}>{it.v}</div>
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

window.Showcase = Showcase;