// Hero — with dashboard mockup and floating cards
function HeroDashboard() {
  // Mini line/area chart path
  const pts = [10, 22, 16, 28, 24, 36, 30, 42, 38, 50, 44, 56, 64];
  const w = 100, h = 100;
  const max = 70;
  const linePath = pts.map((v,i) => `${i===0?'M':'L'} ${(i/(pts.length-1))*w} ${h - (v/max)*h}`).join(' ');
  const areaPath = linePath + ` L ${w} ${h} L 0 ${h} Z`;

  return (
    <div className="hero-dash">
      <div className="dash-frame">
        <aside className="dash-side">
          <div className="brand-row">
            <div className="brand-mark" style={{width:24, height:24}}><I.Logo size={13}/></div>
            <div style={{fontSize:13, fontWeight:600}}>Clínica Aurora</div>
          </div>
          <div className="side-section">Principal</div>
          <div className="side-item"><I.Chart className="ic"/>Resumen</div>
          <div className="side-item active"><I.Cal className="ic"/>Agenda</div>
          <div className="side-item"><I.Users className="ic"/>Pacientes</div>
          <div className="side-item"><I.Receipt className="ic"/>Facturación</div>
          <div className="side-section">Clínica</div>
          <div className="side-item"><I.Folder className="ic"/>Tratamientos</div>
          <div className="side-item"><I.XRay className="ic"/>Imágenes</div>
          <div className="side-item"><I.Branch className="ic"/>Sucursales</div>
          <div className="side-item" style={{marginTop:'auto'}}><I.Settings className="ic"/>Ajustes</div>
        </aside>
        <main className="dash-main">
          <div className="dash-topbar">
            <div>
              <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.02em'}}>Lunes, 15 de junio</div>
              <div style={{fontSize:12, color:'var(--mute-2)'}}>14 citas · 3 sucursales activas</div>
            </div>
            <div className="right">
              <div className="dash-search">
                <I.Search/> Buscar paciente…
                <span className="kbd mono">⌘K</span>
              </div>
              <button style={{width:34, height:34, borderRadius:9, border:'1px solid var(--line)', background:'#fff', display:'grid', placeItems:'center', color:'var(--mute)'}}>
                <I.Bell/>
              </button>
              <div className="avatar">MR</div>
            </div>
          </div>

          <div className="kpi-row">
            <div className="kpi">
              <div className="label">Ingresos hoy</div>
              <div className="val">€4.280</div>
              <div className="delta up"><I.Up/> 12,4%</div>
            </div>
            <div className="kpi">
              <div className="label">Pacientes nuevos</div>
              <div className="val">23</div>
              <div className="delta up"><I.Up/> 8,1%</div>
            </div>
            <div className="kpi">
              <div className="label">Ocupación</div>
              <div className="val">87%</div>
              <div className="delta up"><I.Up/> 4,3%</div>
            </div>
            <div className="kpi">
              <div className="label">Ausencias</div>
              <div className="val">2,1%</div>
              <div className="delta down"><I.Down/> 38%</div>
            </div>
          </div>

          <div className="dash-grid">
            <div className="panel">
              <div className="panel-head">
                <div>
                  <div className="panel-title">Ingresos · últimos 30 días</div>
                  <div className="panel-sub">Comparado con el mes anterior</div>
                </div>
                <span className="tag green">+18,2%</span>
              </div>
              <div className="chart">
                <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{overflow:'visible'}}>
                  <defs>
                    <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#1E5BFF" stopOpacity="0.28"/>
                      <stop offset="100%" stopColor="#1E5BFF" stopOpacity="0"/>
                    </linearGradient>
                    <linearGradient id="lineGrad" x1="0" y1="0" x2="1" y2="0">
                      <stop offset="0%" stopColor="#1E5BFF"/>
                      <stop offset="100%" stopColor="#14C4D4"/>
                    </linearGradient>
                  </defs>
                  {[20,40,60,80].map((y,i) => (
                    <line key={i} x1="0" y1={y} x2="100" y2={y} stroke="rgba(10,22,40,0.05)" strokeWidth="0.3"/>
                  ))}
                  <path d={areaPath} fill="url(#areaGrad)"/>
                  <path d={linePath} fill="none" stroke="url(#lineGrad)" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" vectorEffect="non-scaling-stroke"/>
                  {pts.map((v,i) => (
                    <circle key={i} cx={(i/(pts.length-1))*100} cy={100 - (v/max)*100} r="0.9" fill="#1E5BFF"/>
                  ))}
                  <g transform={`translate(${(11/12)*100}, ${100 - (64/max)*100})`}>
                    <circle r="2" fill="#fff" stroke="#1E5BFF" strokeWidth="1"/>
                  </g>
                </svg>
              </div>
              <div style={{display:'flex', justifyContent:'space-between', fontSize:10, color:'var(--mute-2)', letterSpacing:'0.04em'}}>
                <span className="mono">01 JUN</span><span className="mono">08 JUN</span><span className="mono">15 JUN</span><span className="mono">22 JUN</span><span className="mono">30 JUN</span>
              </div>
            </div>
            <div className="panel">
              <div className="panel-head">
                <div>
                  <div className="panel-title">Próximas citas</div>
                  <div className="panel-sub">Sala 1 · Dra. Martínez</div>
                </div>
                <span className="tag">Hoy</span>
              </div>
              <div className="sched">
                {[
                  {t:'09:30', n:'Carla Ruiz', tp:'Limpieza · 30 min', c:'#2D5DFF'},
                  {t:'10:15', n:'Marc Soler', tp:'Endodoncia · 60 min', c:'#14C4D4'},
                  {t:'11:30', n:'Lucía Vega', tp:'Revisión · 20 min', c:'#16A571'},
                  {t:'12:00', n:'Iván Costa', tp:'Implante · 90 min', c:'#F25C7A'},
                  {t:'14:30', n:'Nora Pérez', tp:'Ortodoncia · 45 min', c:'#A05BFF'},
                ].map(r => (
                  <div className="sched-row" key={r.t}>
                    <div className="time mono">{r.t}</div>
                    <div>
                      <div className="pname">{r.n}</div>
                      <div className="ptype">{r.tp}</div>
                    </div>
                    <div className="av" style={{background:r.c}}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="hero-bg">
        <div className="mesh"/>
        <div className="grid-bg"/>
      </div>
      <div className="container">
        <div className="hero-content">
          <div style={{display:'flex', justifyContent:'center'}}>
            <div className="eyebrow"><span className="dot"/>Nuevo · Asistente IA para clínicas</div>
          </div>
          <h1 style={{marginTop:22}}>
            La plataforma todo-en-uno<br/>para clínicas dentales <span className="grad">modernas</span>
          </h1>
          <p className="hero-sub">
            Gestiona pacientes, citas, facturación y tratamientos desde un solo lugar. Diseñada para clínicas privadas, ortodoncistas y grupos multi-sede en España.
          </p>
          <div className="hero-ctas">
            <a className="btn btn-grad btn-lg" href="#cta">Solicitar demo <I.Arrow size={14}/></a>
            <a className="btn btn-ghost btn-lg" href="#features">Ver funcionalidades</a>
          </div>
          <div className="hero-trust">
            <div className="item"><span className="check"><I.CheckSm size={9}/></span> +500 clínicas en España</div>
            <div className="item"><span className="check"><I.CheckSm size={9}/></span> 98% satisfacción</div>
            <div className="item"><span className="check"><I.CheckSm size={9}/></span> Soporte en español</div>
          </div>
        </div>

        <div className="hero-dash-wrap reveal">
          <HeroDashboard/>

          <div className="float f1">
            <div style={{fontSize:11, color:'var(--mute-2)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:500, marginBottom:6}}>WhatsApp · Recordatorio</div>
            <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
              <div style={{width:28, height:28, borderRadius:8, background:'linear-gradient(135deg,#25D366,#128C7E)', display:'grid', placeItems:'center', color:'#fff', fontWeight:600, fontSize:11}}>WA</div>
              <div>
                <div style={{fontSize:12, fontWeight:600}}>Carla Ruiz</div>
                <div style={{fontSize:11, color:'var(--mute)', marginTop:2, maxWidth:160}}>Confirmada tu cita mañana 09:30</div>
                <div style={{display:'flex', alignItems:'center', gap:4, marginTop:6, fontSize:10, color:'var(--green)'}}>
                  <I.CheckSm size={9}/> Entregado · leído
                </div>
              </div>
            </div>
          </div>

          <div className="float f2">
            <div style={{fontSize:11, color:'var(--mute-2)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:500, marginBottom:8}}>Pago recibido</div>
            <div style={{display:'flex', alignItems:'center', gap:12}}>
              <div style={{width:36, height:36, borderRadius:10, background:'linear-gradient(135deg,#16A571,#0FC4C4)', display:'grid', placeItems:'center', color:'#fff'}}>
                <I.Check size={18}/>
              </div>
              <div>
                <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.02em'}}>€ 320,00</div>
                <div style={{fontSize:11, color:'var(--mute)'}}>Endodoncia · Marc S.</div>
              </div>
            </div>
          </div>

          <div className="float f3">
            <div style={{fontSize:11, color:'var(--mute-2)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:500, marginBottom:8}}>Ocupación semanal</div>
            <div style={{display:'flex', alignItems:'flex-end', gap:5, height:42}}>
              {[55, 78, 92, 64, 86, 96, 40].map((v,i) => (
                <div key={i} style={{width:8, height:`${v}%`, borderRadius:3, background: i===5 ? 'linear-gradient(180deg,#1E5BFF,#14C4D4)' : 'rgba(10,22,40,0.12)'}}/>
              ))}
            </div>
            <div style={{display:'flex', justifyContent:'space-between', marginTop:5, fontSize:9, color:'var(--mute-2)'}}>
              <span>L</span><span>M</span><span>X</span><span>J</span><span>V</span><span>S</span><span>D</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;