// Visual fake-app mockups used in the hero + screenshots section.
// All built with HTML/CSS — no fake images.

const Sparkline = ({ data = [3,5,4,7,6,9,8,11,10,12,11,14], color = '#e27559', height = 36, width = 140 }) => {
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const pts = data.map((v, i) => `${i * step},${height - ((v - min) / range) * (height - 4) - 2}`).join(' ');
  const areaPts = `0,${height} ` + pts + ` ${width},${height}`;
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <defs>
        <linearGradient id="spark-fill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.35"/>
          <stop offset="100%" stopColor={color} stopOpacity="0"/>
        </linearGradient>
      </defs>
      <polygon points={areaPts} fill="url(#spark-fill)"/>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  );
};

const RoomTile = ({ n, status }) => {
  const map = {
    clean:   { bg: 'rgba(80,200,120,0.10)', border: 'rgba(80,200,120,0.35)', dot: '#4ec97a', label: 'Limpia' },
    dirty:   { bg: 'rgba(230,120,90,0.10)',  border: 'rgba(230,120,90,0.35)', dot: '#e67a5a', label: 'Sucia' },
    inprog:  { bg: 'rgba(226,117,89,0.10)',  border: 'rgba(226,117,89,0.40)', dot: '#e27559', label: 'En curso' },
    out:     { bg: 'rgba(255,255,255,0.03)', border: 'rgba(255,255,255,0.08)', dot: '#6b6975', label: 'F. servicio' },
    inspect: { bg: 'rgba(120,160,230,0.10)', border: 'rgba(120,160,230,0.35)', dot: '#7aa0e6', label: 'Revisar' },
  };
  const s = map[status] || map.out;
  return (
    <div className="aspect-[5/4] rounded-md flex flex-col items-start justify-between px-2 py-1.5"
         style={{ background: s.bg, borderColor: s.border, borderWidth: 1, borderStyle: 'solid' }}>
      <div className="text-[11px] font-mono text-white/85">{n}</div>
      <div className="flex items-center gap-1">
        <span className="w-1.5 h-1.5 rounded-full" style={{ background: s.dot }}></span>
        <span className="text-[9px] text-white/55">{s.label}</span>
      </div>
    </div>
  );
};

const AvatarStack = ({ initials = ['LM','JK','RP'], size = 22 }) => (
  <div className="flex -space-x-1.5">
    {initials.map((i, idx) => (
      <div key={idx}
        className="rounded-full grid place-items-center text-[9px] font-medium"
        style={{
          width: size, height: size,
          background: ['#3a2620','#1f2a3a','#2a1f2f','#1f3a2a'][idx % 4],
          border: '1.5px solid #0d0c10',
          color: '#f4c7b5'
        }}>{i}</div>
    ))}
  </div>
);

// The hero "laptop" dashboard — main showpiece
const DashboardApp = () => {
  const rooms = [
    ['101','clean'],['102','dirty'],['103','inprog'],['104','clean'],['105','inspect'],['106','clean'],['107','dirty'],['108','clean'],
    ['201','clean'],['202','clean'],['203','out'],['204','inprog'],['205','clean'],['206','dirty'],['207','clean'],['208','inspect'],
    ['301','dirty'],['302','clean'],['303','clean'],['304','inprog'],['305','clean'],['306','clean'],['307','out'],['308','clean'],
  ];
  return (
    <div className="w-full h-full text-white/90 flex">
      {/* Sidebar */}
      <aside className="w-[170px] shrink-0 hairline-b" style={{ borderRight: '1px solid rgba(255,255,255,0.06)' }}>
        <div className="px-3.5 py-3 flex items-center gap-2">
          <Logo size={18}/>
          <span className="text-[12px] tracking-wide font-medium">HotelApps</span>
        </div>
        <div className="px-2.5 py-1.5">
          <div className="px-2 py-1 text-[10px] uppercase tracking-[0.14em] text-white/35">Espacio</div>
          <div className="text-[11px] px-2 py-1.5 rounded-md flex items-center justify-between hairline" style={{ background: 'rgba(255,255,255,0.03)' }}>
            <span className="flex items-center gap-1.5"><span className="w-1.5 h-1.5 rounded-full bg-coral-400"></span>Hotel Belvedere</span>
            <IArrowDown size={11} className="text-white/40"/>
          </div>
        </div>
        <nav className="px-1.5 py-2 flex flex-col gap-0.5 text-[11.5px]">
          {[
            ['Resumen', IChart, false],
            ['Limpieza', IBroom, true],
            ['Tareas', IClipboard, false],
            ['Incidencias', IWrench, false],
            ['Desayunos', ICoffee, false],
            ['Horarios', ICalendar, false],
            ['Chat del equipo', IChat, false],
          ].map(([label, I, active], i) => (
            <div key={i} className={`flex items-center gap-2 px-2 py-1.5 rounded-md ${active ? 'text-white' : 'text-white/55'}`}
                 style={{ background: active ? 'rgba(226,117,89,0.10)' : 'transparent', border: active ? '1px solid rgba(226,117,89,0.25)' : '1px solid transparent' }}>
              <I size={13}/><span>{label}</span>
              {label === 'Tareas' && <span className="ml-auto text-[9px] px-1.5 rounded-full bg-white/10">18</span>}
            </div>
          ))}
        </nav>
        <div className="mt-3 px-3 py-2 text-[10px] text-white/35 uppercase tracking-[0.14em]">Equipo conectado</div>
        <div className="px-3 flex flex-col gap-1.5 text-[10.5px] text-white/65">
          {[['Lucía M.','Planta 2'],['Javi K.','Planta 1'],['Rita P.','Recepción'],['Sven R.','Mant.']].map(([n,r], i) => (
            <div key={i} className="flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
              <span className="truncate">{n}</span>
              <span className="ml-auto text-white/30 text-[9.5px]">{r}</span>
            </div>
          ))}
        </div>
      </aside>

      {/* Main */}
      <main className="flex-1 min-w-0">
        {/* Top bar */}
        <div className="h-9 flex items-center px-4 gap-3 hairline-b" style={{ borderBottom: '1px solid rgba(255,255,255,0.06)'}}>
          <div className="text-[11px] text-white/45">Operaciones · Mar, 25 sep</div>
          <div className="flex-1 max-w-[220px] mx-auto flex items-center gap-1.5 px-2 py-1 rounded-md" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)'}}>
            <ISearch size={11} className="text-white/40"/>
            <span className="text-[10.5px] text-white/40">Buscar habitaciones, tareas, equipo…</span>
            <span className="ml-auto text-[9px] text-white/30 font-mono">⌘K</span>
          </div>
          <div className="flex items-center gap-2">
            <span className="text-[10px] text-white/45 flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>En vivo</span>
            <AvatarStack/>
          </div>
        </div>

        <div className="p-4 grid grid-cols-12 gap-3">
          {/* KPI strip */}
          <div className="col-span-12 grid grid-cols-4 gap-3">
            {[
              ['Habitaciones limpias', '42 / 56', [3,5,4,7,6,9,8,11,10,12,13,14], '#e27559'],
              ['Tareas pendientes', '18', [9,8,9,7,7,6,7,5,4,5,4,3], '#7aa0e6'],
              ['Incidencias abiertas', '3', [2,3,2,3,4,3,2,3,2,3,3,3], '#e67a5a'],
              ['Equipo en turno', '12', [10,11,11,12,12,12,12,12,12,12,12,12], '#4ec97a'],
            ].map(([label, val, data, c], i) => (
              <div key={i} className="rounded-lg p-2.5 glass">
                <div className="flex items-center justify-between">
                  <div>
                    <div className="text-[9.5px] uppercase tracking-[0.14em] text-white/45">{label}</div>
                    <div className="text-[18px] font-medium mt-0.5 text-white">{val}</div>
                  </div>
                  <Sparkline data={data} color={c} width={64} height={28}/>
                </div>
              </div>
            ))}
          </div>

          {/* Room grid */}
          <div className="col-span-7 rounded-lg glass p-3">
            <div className="flex items-center justify-between mb-2.5">
              <div>
                <div className="text-[13px] font-medium">Estado de habitaciones</div>
                <div className="text-[10.5px] text-white/45">En vivo · actualiza cada 30 s</div>
              </div>
              <div className="flex gap-1.5 text-[9.5px]">
                {[['Limpia','#4ec97a'],['Sucia','#e67a5a'],['En curso','#e27559'],['Revisar','#7aa0e6'],['F.serv','#6b6975']].map(([l,c]) => (
                  <span key={l} className="flex items-center gap-1 text-white/55">
                    <span className="w-1.5 h-1.5 rounded-full" style={{ background: c }}></span>{l}
                  </span>
                ))}
              </div>
            </div>
            <div className="grid grid-cols-8 gap-1.5">
              {rooms.map(([n, s]) => <RoomTile key={n} n={n} status={s}/>)}
            </div>
          </div>

          {/* Housekeeping assignments */}
          <div className="col-span-5 rounded-lg glass p-3 flex flex-col">
            <div className="flex items-center justify-between mb-2">
              <div className="text-[13px] font-medium">Cola de limpieza</div>
              <span className="text-[9.5px] text-white/45 font-mono">14:32</span>
            </div>
            <div className="flex flex-col gap-1.5">
              {[
                ['Lucía M.', '203 · Suite', 'En curso', '#e27559', 0.6],
                ['Javi K.', '208 · Revisar', 'Esperando QC', '#7aa0e6', 0.95],
                ['Rita P.',  '301 · Estándar', 'En cola', '#6b6975', 0],
                ['Ana B.',   '206 · Estándar', 'En cola', '#6b6975', 0],
                ['Marco S.', '107 · Deluxe', 'En curso', '#e27559', 0.3],
              ].map(([name, r, s, c, p], i) => (
                <div key={i} className="rounded-md p-2 flex items-center gap-2.5" style={{ background: 'rgba(255,255,255,0.025)', border: '1px solid rgba(255,255,255,0.05)'}}>
                  <div className="w-6 h-6 rounded-full grid place-items-center text-[9px] font-medium" style={{ background: '#2a1813', color: '#f4c7b5' }}>
                    {name.split(' ').map(x=>x[0]).join('')}
                  </div>
                  <div className="min-w-0 flex-1">
                    <div className="text-[11px] text-white/85 truncate">{name}</div>
                    <div className="text-[9.5px] text-white/45 truncate">{r}</div>
                  </div>
                  <div className="w-16">
                    <div className="h-1 rounded-full bg-white/8 overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)'}}>
                      <div className="h-full" style={{ width: `${p * 100}%`, background: c }}></div>
                    </div>
                    <div className="text-[9px] text-white/40 mt-0.5">{s}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Tasks */}
          <div className="col-span-7 rounded-lg glass p-3">
            <div className="flex items-center justify-between mb-2">
              <div className="text-[13px] font-medium">Tareas de hoy</div>
              <div className="flex gap-1 text-[10px]">
                <span className="px-1.5 py-0.5 rounded text-white/85 tab-active relative">Todas <span className="text-white/40">18</span></span>
                <span className="px-1.5 py-0.5 rounded text-white/45">Mantenimiento 4</span>
                <span className="px-1.5 py-0.5 rounded text-white/45">Recepción 6</span>
                <span className="px-1.5 py-0.5 rounded text-white/45">F&amp;B 3</span>
              </div>
            </div>
            <div className="flex flex-col gap-1">
              {[
                ['ALTA', 'A/A no enfría — Hab. 412', 'Mantenimiento · Sven', '#e67a5a'],
                ['MED', 'Reponer albornoces — Planta 3', 'Limpieza · Lucía', '#e27559'],
                ['BAJA', 'Reponer minibar — Suite 506', 'F&B · Ana', '#7aa0e6'],
                ['MED', 'Amenity VIP — llegada 16:30', 'Recepción · Rita', '#e27559'],
                ['BAJA', 'Toallas piscina — terraza', 'F&B · Marco', '#7aa0e6'],
              ].map(([pri, title, meta, c], i) => (
                <div key={i} className="rounded-md px-2 py-1.5 flex items-center gap-2.5 hairline" style={{ background: 'rgba(255,255,255,0.02)' }}>
                  <span className="w-4 h-4 rounded border border-white/15 grid place-items-center">
                    <span className="w-1.5 h-1.5 rounded-sm bg-white/0"></span>
                  </span>
                  <span className="text-[9px] font-mono px-1.5 py-0.5 rounded" style={{ background: 'rgba(255,255,255,0.04)', color: c, border: `1px solid ${c}33` }}>{pri}</span>
                  <div className="min-w-0 flex-1">
                    <div className="text-[11px] text-white/85 truncate">{title}</div>
                    <div className="text-[9.5px] text-white/45 truncate">{meta}</div>
                  </div>
                  <IDot size={10} className="text-white/30"/>
                </div>
              ))}
            </div>
          </div>

          {/* Chat panel */}
          <div className="col-span-5 rounded-lg glass p-3 flex flex-col">
            <div className="flex items-center justify-between mb-2">
              <div>
                <div className="text-[13px] font-medium"># operaciones</div>
                <div className="text-[9.5px] text-white/45">12 miembros</div>
              </div>
              <IChat size={13} className="text-white/40"/>
            </div>
            <div className="flex-1 flex flex-col gap-1.5 text-[10.5px]">
              <div className="flex gap-2">
                <div className="w-5 h-5 rounded-full bg-[#2a1f3a] text-[#d0a8e6] grid place-items-center text-[8px] font-medium shrink-0">RP</div>
                <div className="flex-1">
                  <div className="text-white/55 text-[9.5px]">Rita P. · 14:18</div>
                  <div className="text-white/85">Llegada VIP movida a las 16:30 — preparad la suite 506 antes de las 16:00 🌸</div>
                </div>
              </div>
              <div className="flex gap-2">
                <div className="w-5 h-5 rounded-full bg-[#1f3a2a] text-[#a8e6c5] grid place-items-center text-[8px] font-medium shrink-0">LM</div>
                <div className="flex-1">
                  <div className="text-white/55 text-[9.5px]">Lucía M. · 14:24</div>
                  <div className="text-white/85">Vale. 506 lista en 35 min.</div>
                </div>
              </div>
              <div className="flex gap-2">
                <div className="w-5 h-5 rounded-full bg-[#3a2620] text-[#f4c7b5] grid place-items-center text-[8px] font-medium shrink-0">SR</div>
                <div className="flex-1">
                  <div className="text-white/55 text-[9.5px]">Sven R. · 14:31</div>
                  <div className="text-white/85">412 A/A — compresor cambiado. Marco como resuelto ✓</div>
                </div>
              </div>
            </div>
            <div className="mt-2 rounded-md flex items-center gap-2 px-2 py-1.5" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.06)' }}>
              <span className="text-[10px] text-white/35">Mensaje en #operaciones…</span>
              <IBolt size={11} className="ml-auto text-coral-400"/>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

// Laptop frame wrapping the dashboard
const LaptopFrame = ({ children, scale = 1 }) => (
  <div className="relative" style={{ transform: `scale(${scale})`, transformOrigin: 'center top' }}>
    <div className="rounded-[14px] p-[5px]"
      style={{
        background: 'linear-gradient(180deg, #2a2832 0%, #131218 100%)',
        boxShadow: '0 50px 100px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)'
      }}>
      <div className="rounded-[10px] overflow-hidden" style={{ background: '#0c0b10', aspectRatio: '16 / 10' }}>
        <div className="h-5 flex items-center px-3 gap-1.5" style={{ background: '#0a090d', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
          <span className="w-2 h-2 rounded-full bg-[#e67a5a]/70"></span>
          <span className="w-2 h-2 rounded-full bg-[#e27559]/70"></span>
          <span className="w-2 h-2 rounded-full bg-[#4ec97a]/70"></span>
          <span className="ml-auto text-[9px] text-white/30 font-mono">app.hotelapps.es</span>
        </div>
        <div style={{ height: 'calc(100% - 20px)' }}>{children}</div>
      </div>
    </div>
    {/* base */}
    <div className="mx-auto -mt-px h-[10px] rounded-b-[10px]" style={{
      width: '108%', marginLeft: '-4%',
      background: 'linear-gradient(180deg, #1a1922 0%, #0a090d 100%)',
      boxShadow: '0 30px 50px -20px rgba(0,0,0,0.8)'
    }}>
      <div className="mx-auto h-[3px] w-[20%] rounded-b-md" style={{ background: '#08070a' }}></div>
    </div>
  </div>
);

// Tablet — housekeeping mobile-ish view
const TabletApp = () => {
  const rows = [
    ['203', 'Suite · Estancia', 'En curso', '#e27559', 0.6, 'Lucía M.'],
    ['208', 'Deluxe · Salida', 'Esperando QC', '#7aa0e6', 0.95, 'Javi K.'],
    ['301', 'Estándar · Entrada', 'En cola', '#6b6975', 0, 'Rita P.'],
    ['107', 'Deluxe · Estancia', 'En curso', '#e27559', 0.3, 'Marco S.'],
    ['305', 'Estándar · Salida', 'En cola', '#6b6975', 0, 'Ana B.'],
    ['412', 'Suite · Estancia', 'Limpia ✓', '#4ec97a', 1, 'Lucía M.'],
  ];
  return (
    <div className="w-full h-full text-white/90 flex flex-col">
      <div className="px-4 pt-3 pb-2 flex items-center justify-between hairline-b" style={{ borderBottom: '1px solid rgba(255,255,255,0.06)'}}>
        <div>
          <div className="text-[10px] uppercase tracking-[0.18em] text-white/40">Limpieza</div>
          <div className="text-[18px] font-medium">Planta 2 · 28 habitaciones</div>
        </div>
        <div className="flex items-center gap-2">
          <span className="chip text-[10px] px-2 py-1 rounded-full">Hoy</span>
          <span className="chip text-[10px] px-2 py-1 rounded-full">Todo el equipo</span>
        </div>
      </div>
      <div className="px-4 py-3 grid grid-cols-3 gap-2">
        {[['42','Limpias'],['7','En curso'],['9','En cola']].map(([v,l]) => (
          <div key={l} className="glass rounded-lg p-2.5">
            <div className="text-[20px] font-medium text-white">{v}</div>
            <div className="text-[10px] text-white/45 uppercase tracking-[0.12em]">{l}</div>
          </div>
        ))}
      </div>
      <div className="px-4 flex-1 flex flex-col gap-1.5 overflow-hidden">
        {rows.map(([n,t,s,c,p,who],i) => (
          <div key={i} className="rounded-lg p-2.5 flex items-center gap-3 hairline" style={{ background: 'rgba(255,255,255,0.025)'}}>
            <div className="w-9 h-9 rounded-md grid place-items-center font-mono text-[12px]" style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)'}}>{n}</div>
            <div className="flex-1 min-w-0">
              <div className="text-[12px] text-white/90 truncate">{t}</div>
              <div className="text-[10px] text-white/45 truncate">{who}</div>
            </div>
            <div className="w-24">
              <div className="h-1 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)'}}>
                <div className="h-full" style={{ width: `${p*100}%`, background: c }}></div>
              </div>
              <div className="text-[9.5px] text-white/45 mt-1 text-right">{s}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="m-3 mt-1 rounded-lg glass p-2.5 flex items-center gap-2.5">
        <span className="w-7 h-7 rounded-md grid place-items-center" style={{ background: 'rgba(226,117,89,0.15)', border: '1px solid rgba(226,117,89,0.3)'}}><IPlus size={13} className="text-coral-300"/></span>
        <span className="text-[11.5px] text-white/70">Asignar nueva habitación o tarea</span>
        <span className="ml-auto text-[10px] text-white/35 font-mono">⌘ + N</span>
      </div>
    </div>
  );
};

const TabletFrame = ({ children }) => (
  <div className="relative">
    <div className="rounded-[24px] p-[8px]"
      style={{
        background: 'linear-gradient(180deg, #2a2832 0%, #131218 100%)',
        boxShadow: '0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)'
      }}>
      <div className="rounded-[16px] overflow-hidden" style={{ background: '#0c0b10', aspectRatio: '4 / 3', minHeight: 360 }}>
        {children}
      </div>
    </div>
  </div>
);

// Mobile — task notification view
const PhoneApp = () => (
  <div className="w-full h-full text-white/90 flex flex-col">
    <div className="h-7 flex items-center justify-between px-5 text-[10px] font-mono text-white/70">
      <span>9:41</span>
      <span className="flex gap-1 items-center"><span className="w-3 h-1 rounded-sm bg-white/60"></span><span className="w-3 h-1 rounded-sm bg-white/60"></span><span className="w-3 h-1 rounded-sm bg-white/40"></span></span>
    </div>
    <div className="px-4 pt-2 pb-3">
      <div className="text-[10px] uppercase tracking-[0.18em] text-white/40">Hoy</div>
      <div className="text-[20px] font-medium leading-tight mt-0.5">Buenos días, Lucía</div>
      <div className="text-[11px] text-white/55 mt-0.5">7 habitaciones asignadas · Planta 2</div>
    </div>
    <div className="px-4 flex flex-col gap-2">
      <div className="rounded-2xl p-3 relative overflow-hidden" style={{ background: 'linear-gradient(135deg, rgba(226,117,89,0.18), rgba(226,117,89,0.04))', border: '1px solid rgba(226,117,89,0.35)'}}>
        <div className="flex items-center justify-between">
          <span className="text-[9.5px] tracking-[0.14em] uppercase text-coral-300">Prioritaria</span>
          <span className="text-[9.5px] text-white/55 font-mono">hace 2 min</span>
        </div>
        <div className="text-[13px] mt-1.5 text-white">Llegada VIP en suite 506</div>
        <div className="text-[10.5px] text-white/65 mt-0.5">Amenity de bienvenida + apertura de cama antes de las 16:00. Marcada urgente por Rita P.</div>
        <div className="mt-2.5 flex gap-1.5">
          <span className="px-2.5 py-1 rounded-full text-[10px] font-medium" style={{ background: '#e27559', color: '#ffffff'}}>Aceptar</span>
          <span className="px-2.5 py-1 rounded-full text-[10px] text-white/75 chip">Ver detalles</span>
        </div>
      </div>
      {[
        ['Hab. 203', 'Estancia · ropa + amenities', '15 min', '#e27559'],
        ['Hab. 208', 'Lista para QC', 'Ahora', '#7aa0e6'],
        ['Hab. 301', 'Preparar entrada — VIP', '11:00', '#e67a5a'],
        ['Hab. 305', 'Limpieza salida', '13:00', '#6b6975'],
      ].map(([t, s, time, c], i) => (
        <div key={i} className="rounded-xl p-2.5 flex items-center gap-3 hairline" style={{ background: 'rgba(255,255,255,0.025)'}}>
          <div className="w-8 h-8 rounded-md grid place-items-center" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)'}}>
            <IBed size={14} className="text-white/65"/>
          </div>
          <div className="flex-1 min-w-0">
            <div className="text-[12px] text-white/90">{t}</div>
            <div className="text-[10px] text-white/45">{s}</div>
          </div>
          <div className="text-right">
            <div className="text-[10px] font-mono text-white/70">{time}</div>
            <span className="inline-block w-1.5 h-1.5 rounded-full mt-1" style={{ background: c }}></span>
          </div>
        </div>
      ))}
    </div>
  </div>
);

const PhoneFrame = ({ children }) => (
  <div className="relative">
    <div className="rounded-[40px] p-[6px]"
      style={{
        background: 'linear-gradient(180deg, #2a2832 0%, #0d0c10 100%)',
        boxShadow: '0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)'
      }}>
      <div className="rounded-[34px] overflow-hidden relative" style={{ background: '#0c0b10', width: 264, height: 540 }}>
        <div className="absolute top-2 left-1/2 -translate-x-1/2 w-[60px] h-[18px] rounded-full" style={{ background: '#08070a', zIndex: 5 }}></div>
        {children}
      </div>
    </div>
  </div>
);

Object.assign(window, { DashboardApp, LaptopFrame, TabletApp, TabletFrame, PhoneApp, PhoneFrame, Sparkline, AvatarStack });