// Realistic inline product mockups for Cliniset.
// Each renders at a designed pixel size; parents scale via CSS transform.
const { motion: M_ } = window.framerMotion || {};

// Stable pseudo-random color per professional name
const profColor = (name) => {
  const palette = ['#0EA5E9', '#10B981', '#F59E0B', '#8B5CF6', '#EC4899', '#06B6D4', '#84CC16', '#F43F5E'];
  let h = 0; for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) >>> 0;
  return palette[h % palette.length];
};

// ============= AGENDA MOCKUP =============
function AgendaMockup({ compact = false }) {
  const profs = [
    { name: 'Dr. Emerson Monteiro', role: 'Otorrino' },
    { name: 'Dra. Camila Reis', role: 'Fono' },
    { name: 'Dr. Pedro Alvim', role: 'Otorrino' },
    { name: 'Dra. Marina Sá', role: 'Fono' },
  ];
  const slots = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00'];
  const events = [
    { col: 0, start: 0, span: 2, title: 'Ana Beatriz Silva', sub: 'Consulta · 50 min', status: 'atendendo' },
    { col: 0, start: 3, span: 1, title: 'Roberto Carlos Lima', sub: 'Retorno · 30 min', status: 'aguardando' },
    { col: 0, start: 5, span: 2, title: 'Helena Souza', sub: 'Avaliação adulto', status: 'confirmado' },
    { col: 1, start: 0, span: 2, title: 'Lucas Mendes (8a)', sub: 'Terapia fono', status: 'check-in' },
    { col: 1, start: 4, span: 2, title: 'Bianca Oliveira', sub: 'Adaptação AASI', status: 'confirmado' },
    { col: 1, start: 7, span: 1, title: 'João Paulo', sub: 'Reavaliação', status: 'atrasado' },
    { col: 2, start: 1, span: 1, title: 'Maria Aparecida', sub: 'Audiometria', status: 'confirmado' },
    { col: 2, start: 2, span: 2, title: 'Carlos Eduardo Tavares', sub: 'Vídeo-laringo', status: 'atendendo' },
    { col: 2, start: 6, span: 2, title: 'Sônia Bezerra', sub: 'Consulta', status: 'confirmado' },
    { col: 3, start: 0, span: 1, title: 'Felipe Araújo', sub: 'Triagem', status: 'no-show' },
    { col: 3, start: 2, span: 3, title: 'Rita de Cássia Nunes', sub: 'Terapia voz · 90 min', status: 'confirmado' },
    { col: 3, start: 6, span: 2, title: 'Igor Santos', sub: 'Reavaliação', status: 'aguardando' },
  ];
  const statusColor = {
    'atendendo':   { bg: 'bg-cyan-500/15 border-cyan-500/40', dot: 'bg-cyan-500', label: 'Atendendo', txt: 'text-cyan-300' },
    'aguardando':  { bg: 'bg-amber-500/12 border-amber-500/30', dot: 'bg-amber-500', label: 'Aguardando', txt: 'text-amber-300' },
    'confirmado':  { bg: 'bg-ink-700/50 border-ink-600',         dot: 'bg-emerald-500', label: 'Confirmado', txt: 'text-ink-200' },
    'check-in':    { bg: 'bg-emerald-500/12 border-emerald-500/30', dot: 'bg-emerald-500', label: 'Check-in', txt: 'text-emerald-300' },
    'atrasado':    { bg: 'bg-rose-500/12 border-rose-500/40', dot: 'bg-rose-500', label: 'Atrasado 12 min', txt: 'text-rose-300' },
    'no-show':     { bg: 'bg-ink-800 border-ink-700 opacity-60', dot: 'bg-ink-500', label: 'No-show', txt: 'text-ink-400' },
  };

  return (
    <div className="bg-ink-900 text-ink-100 font-sans rounded-2xl overflow-hidden border border-ink-700/60" style={{ width: 1080, fontFamily: 'Geist, Inter, sans-serif' }}>
      {/* Top bar */}
      <div className="flex items-center justify-between px-5 h-12 border-b border-ink-700/60 bg-ink-900">
        <div className="flex items-center gap-3">
          <div className="flex items-center gap-2">
            <I.Logo className="w-6 h-6"/>
            <span className="font-semibold text-[15px] tracking-tight">Cliniset</span>
          </div>
          <span className="text-ink-400">/</span>
          <span className="text-[13px] text-ink-300">Agenda</span>
          <span className="text-ink-500 text-[13px]">·</span>
          <span className="text-[13px] text-ink-400">Quarta, 14 de outubro</span>
        </div>
        <div className="flex items-center gap-2">
          {/* Live queue */}
          <div className="flex items-center gap-2 px-3 h-8 rounded-lg bg-cyan-500/10 border border-cyan-500/25 text-[12px]">
            <span className="relative flex w-2 h-2">
              <span className="absolute inset-0 rounded-full bg-cyan-400 animate-ping opacity-60"/>
              <span className="relative w-2 h-2 rounded-full bg-cyan-400"/>
            </span>
            <span className="text-cyan-200">Fila ao vivo</span>
            <span className="text-cyan-100 font-semibold tabular">7</span>
          </div>
          <div className="w-72 h-8 rounded-lg bg-ink-800 border border-ink-700 flex items-center gap-2 px-3 text-[12px] text-ink-400">
            <I.Search className="w-3.5 h-3.5"/> Buscar paciente, CPF ou agendamento
          </div>
          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-500 to-brand-600 flex items-center justify-center text-white text-[11px] font-semibold">EM</div>
        </div>
      </div>

      {/* Filters row */}
      <div className="flex items-center justify-between px-5 h-11 border-b border-ink-800 bg-ink-900/60">
        <div className="flex items-center gap-1.5 text-[12px]">
          {['Hoje', 'Semana', 'Mês', 'Lista'].map((t, i) => (
            <button key={t} className={`px-3 h-7 rounded-md ${i === 0 ? 'bg-ink-700 text-white' : 'text-ink-300 hover:bg-ink-800'}`}>{t}</button>
          ))}
          <span className="mx-2 w-px h-4 bg-ink-700"/>
          <button className="px-3 h-7 rounded-md text-ink-300 hover:bg-ink-800 inline-flex items-center gap-1.5"><I.ChevronDown className="w-3 h-3"/> Todos profissionais</button>
          <button className="px-3 h-7 rounded-md text-ink-300 hover:bg-ink-800 inline-flex items-center gap-1.5"><I.ChevronDown className="w-3 h-3"/> Todos convênios</button>
        </div>
        <div className="flex items-center gap-2">
          <button className="px-3 h-8 rounded-lg bg-ink-800 border border-ink-700 text-[12px] text-ink-200 inline-flex items-center gap-1.5"><I.QR className="w-3.5 h-3.5"/> QR Check-in</button>
          <button className="px-3 h-8 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-white text-[12px] font-medium inline-flex items-center gap-1.5"><I.Plus className="w-3.5 h-3.5"/> Novo agendamento</button>
        </div>
      </div>

      {/* Calendar grid */}
      <div className="grid" style={{ gridTemplateColumns: '64px repeat(4, 1fr)' }}>
        {/* Pro headers */}
        <div className="border-b border-ink-800 bg-ink-900"></div>
        {profs.map((p) => {
          const c = profColor(p.name);
          return (
            <div key={p.name} className="border-b border-l border-ink-800 px-3 py-2.5 bg-ink-900">
              <div className="flex items-center gap-2">
                <span className="w-1.5 h-6 rounded-full" style={{ background: c }}/>
                <div>
                  <div className="text-[12px] font-semibold leading-tight">{p.name}</div>
                  <div className="text-[10px] text-ink-400">{p.role}</div>
                </div>
              </div>
            </div>
          );
        })}

        {/* Time rows */}
        {slots.map((time, i) => (
          <React.Fragment key={time}>
            <div className="border-b border-ink-800 text-[10px] text-ink-400 px-3 py-2 text-right tabular">{time}</div>
            {profs.map((p, ci) => (
              <div key={ci} className="border-b border-l border-ink-800 h-12 relative">
                {events.filter(e => e.col === ci && e.start === i).map((e, idx) => {
                  const s = statusColor[e.status];
                  return (
                    <div key={idx}
                      className={`absolute left-1 right-1 top-0.5 rounded-md border ${s.bg} px-2.5 py-1.5 cursor-pointer hover:scale-[1.01] transition`}
                      style={{ height: e.span * 48 - 4 }}
                    >
                      <div className="flex items-start justify-between gap-2">
                        <div className="text-[11px] font-semibold leading-tight truncate">{e.title}</div>
                        <span className={`w-1.5 h-1.5 rounded-full mt-1.5 ${s.dot}`}/>
                      </div>
                      <div className="text-[10px] text-ink-300 mt-0.5">{e.sub}</div>
                      {e.span > 1 && <div className={`text-[9px] mt-1 ${s.txt} font-medium`}>{s.label}</div>}
                    </div>
                  );
                })}
              </div>
            ))}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

// ============= PRONTUÁRIO + IA MOCKUP =============
function ProntuarioMockup() {
  return (
    <div className="bg-ink-900 text-ink-100 rounded-2xl overflow-hidden border border-ink-700/60" style={{ width: 1080, fontFamily: 'Geist, Inter, sans-serif' }}>
      <div className="flex items-center justify-between px-5 h-12 border-b border-ink-700/60">
        <div className="flex items-center gap-3 text-[13px]">
          <I.Logo className="w-6 h-6"/>
          <span className="text-ink-400">Prontuário</span>
          <span className="text-ink-500">/</span>
          <span className="font-medium">Ana Beatriz Silva</span>
          <span className="text-ink-500 text-[11px]">· 34 anos · CPF 412.***-92</span>
        </div>
        <div className="flex items-center gap-2 text-[12px]">
          <span className="px-2 py-0.5 rounded-md bg-emerald-500/10 text-emerald-300 border border-emerald-500/20">Convênio Unimed</span>
          <button className="px-3 h-8 rounded-lg bg-cyan-500 text-white font-medium inline-flex items-center gap-1.5"><I.Stamp className="w-3.5 h-3.5"/> Assinar ICP-Brasil</button>
        </div>
      </div>

      <div className="grid grid-cols-[220px_1fr_320px]">
        {/* Sidebar tabs */}
        <div className="border-r border-ink-800 p-3 space-y-1 text-[12px]">
          {[
            ['Anamnese', false], ['Evolução', true], ['Audiometria', false],
            ['Imitanciometria', false], ['Receitas', false], ['Atestados', false],
            ['Anexos', false], ['Faturas', false],
          ].map(([t, active]) => (
            <button key={t} className={`w-full text-left px-3 h-8 rounded-md ${active ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 'text-ink-300 hover:bg-ink-800'}`}>{t}</button>
          ))}
        </div>

        {/* Editor */}
        <div className="p-5 border-r border-ink-800">
          <div className="flex items-center gap-2 mb-3 text-[11px] text-ink-400">
            <span className="px-2 py-0.5 rounded bg-ink-800 border border-ink-700 font-mono">14/10/2026 09:42</span>
            <span>·</span>
            <span>Dr. Emerson Monteiro</span>
            <span className="ml-auto inline-flex items-center gap-1 text-emerald-400"><I.CheckCircle className="w-3 h-3"/> Salvo</span>
          </div>
          <div className="space-y-3 text-[13px] leading-relaxed">
            <div>
              <div className="text-[10px] uppercase tracking-wider text-ink-400 mb-1">Queixa principal</div>
              <p>Paciente refere zumbido em orelha direita há 3 semanas, com piora gradual. Nega vertigem ou perda auditiva súbita. Histórico de exposição ocupacional a ruído.</p>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-wider text-ink-400 mb-1">Exame físico</div>
              <p>Otoscopia: meato acústico externo livre bilateralmente. Membrana timpânica íntegra, sem sinais inflamatórios. Reflexo luminoso preservado.</p>
            </div>
            <div>
              <div className="text-[10px] uppercase tracking-wider text-ink-400 mb-1">Hipótese diagnóstica</div>
              <div className="flex items-center gap-1.5 flex-wrap">
                <span className="px-2 py-1 rounded-md bg-brand-600/20 text-brand-200 text-[11px] font-mono border border-brand-500/20">H93.1 · Zumbido subjetivo</span>
                <span className="px-2 py-1 rounded-md bg-cyan-500/15 text-cyan-300 text-[11px] font-mono border border-cyan-500/20 inline-flex items-center gap-1"><I.Sparkles className="w-3 h-3"/> Sugerido por IA</span>
              </div>
            </div>
          </div>
        </div>

        {/* IA panel */}
        <div className="p-4 bg-gradient-to-b from-cyan-500/5 to-transparent">
          <div className="flex items-center gap-2 mb-3">
            <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-cyan-400 to-brand-600 flex items-center justify-center"><I.Sparkles className="w-3.5 h-3.5 text-white"/></div>
            <div>
              <div className="text-[12px] font-semibold">IA Clínica</div>
              <div className="text-[10px] text-ink-400">Powered by Claude</div>
            </div>
          </div>
          <div className="space-y-2.5">
            <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-3">
              <div className="text-[10px] uppercase tracking-wider text-cyan-300 mb-1.5">Sugestão CID-10</div>
              <div className="text-[12px] mb-2">Com base na queixa de zumbido subjetivo unilateral:</div>
              <div className="space-y-1">
                {[['H93.1', 'Zumbido subjetivo', 92], ['H90.3', 'Perda auditiva neurossensorial', 41]].map(([c, n, p]) => (
                  <div key={c} className="flex items-center justify-between text-[11px] py-1 px-2 rounded bg-ink-900/50">
                    <div><span className="font-mono text-cyan-300">{c}</span> <span className="text-ink-300">{n}</span></div>
                    <span className="tabular text-ink-400">{p}%</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-3">
              <div className="text-[10px] uppercase tracking-wider text-cyan-300 mb-1.5">Sugestão de conduta</div>
              <p className="text-[12px] leading-relaxed">Solicitar audiometria tonal limiar e impedanciometria. Considerar avaliação de PEATE caso zumbido persista por mais de 4 semanas.</p>
              <div className="flex gap-1.5 mt-2.5">
                <button className="text-[10px] px-2 h-6 rounded-md bg-cyan-500/20 text-cyan-200 border border-cyan-500/30">Aplicar</button>
                <button className="text-[10px] px-2 h-6 rounded-md text-ink-400 hover:bg-ink-800">Descartar</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============= AUDIOMETRIA MOCKUP =============
function AudiometriaMockup() {
  // Frequencies (Hz) on x-axis, dB on y-axis
  const freqs = [125, 250, 500, 1000, 2000, 4000, 8000];
  const right = [10, 15, 20, 25, 35, 50, 65]; // O symbols, red
  const left  = [5, 10, 15, 20, 30, 45, 55];  // X symbols, blue

  const W = 460, H = 300, padX = 50, padY = 30;
  const fx = (i) => padX + (i / (freqs.length - 1)) * (W - padX - 20);
  const dy = (db) => padY + (db / 110) * (H - padY - 30);

  return (
    <div className="bg-ink-900 text-ink-100 rounded-2xl overflow-hidden border border-ink-700/60 p-5" style={{ width: 540 }}>
      <div className="flex items-center justify-between mb-3">
        <div>
          <div className="text-[11px] text-ink-400">Audiometria tonal limiar</div>
          <div className="text-[14px] font-semibold">Ana Beatriz Silva · 14/out</div>
        </div>
        <div className="flex gap-2 text-[10px]">
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded bg-rose-500/10 text-rose-300 border border-rose-500/20">○ OD</span>
          <span className="inline-flex items-center gap-1 px-2 py-1 rounded bg-cyan-500/10 text-cyan-300 border border-cyan-500/20">✕ OE</span>
        </div>
      </div>
      <svg viewBox={`0 0 ${W} ${H}`} className="w-full">
        {/* grid */}
        <g className="text-ink-600">
          {[0, 20, 40, 60, 80, 100].map(db => (
            <g key={db}>
              <line x1={padX} y1={dy(db)} x2={W - 20} y2={dy(db)} stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
              <text x={padX - 8} y={dy(db) + 3} fontSize="9" fill="#94A3B8" textAnchor="end">{db}</text>
            </g>
          ))}
          {freqs.map((f, i) => (
            <g key={f}>
              <line x1={fx(i)} y1={padY} x2={fx(i)} y2={H - 20} stroke="currentColor" strokeWidth="0.5" opacity="0.3"/>
              <text x={fx(i)} y={H - 8} fontSize="9" fill="#94A3B8" textAnchor="middle">{f >= 1000 ? f/1000 + 'k' : f}</text>
            </g>
          ))}
        </g>
        {/* OD curve */}
        <polyline fill="none" stroke="#F43F5E" strokeWidth="1.5" points={right.map((db, i) => `${fx(i)},${dy(db)}`).join(' ')} />
        {right.map((db, i) => <circle key={i} cx={fx(i)} cy={dy(db)} r="5" fill="none" stroke="#F43F5E" strokeWidth="1.5"/>)}
        {/* OE curve */}
        <polyline fill="none" stroke="#0EA5E9" strokeWidth="1.5" points={left.map((db, i) => `${fx(i)},${dy(db)}`).join(' ')} />
        {left.map((db, i) => (
          <g key={i} stroke="#0EA5E9" strokeWidth="1.5">
            <line x1={fx(i)-4} y1={dy(db)-4} x2={fx(i)+4} y2={dy(db)+4}/>
            <line x1={fx(i)+4} y1={dy(db)-4} x2={fx(i)-4} y2={dy(db)+4}/>
          </g>
        ))}
      </svg>
      <div className="grid grid-cols-3 gap-2 mt-2 text-[11px]">
        <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-2.5">
          <div className="text-[9px] uppercase tracking-wider text-ink-400">Tritonal OD</div>
          <div className="font-semibold tabular text-rose-300">36,7 dB</div>
        </div>
        <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-2.5">
          <div className="text-[9px] uppercase tracking-wider text-ink-400">Tritonal OE</div>
          <div className="font-semibold tabular text-cyan-300">31,7 dB</div>
        </div>
        <div className="rounded-lg bg-ink-800/60 border border-ink-700 p-2.5">
          <div className="text-[9px] uppercase tracking-wider text-ink-400">Classificação</div>
          <div className="font-semibold text-amber-300">Leve bilateral</div>
        </div>
      </div>
    </div>
  );
}

// ============= REPASSE / FINANCEIRO MOCKUP =============
function RepasseMockup() {
  const rows = [
    { date: '14/10', proc: 'Consulta Otorrino · Avaliação adulto', conv: 'Unimed', val: 280.00, pct: 70, rep: 196.00 },
    { date: '14/10', proc: 'Audiometria tonal · 41101010', conv: 'Particular', val: 220.00, pct: 60, rep: 132.00 },
    { date: '13/10', proc: 'Adaptação AASI · Grupo Adaptação', conv: 'Bradesco', val: 480.00, pct: 65, rep: 312.00 },
    { date: '13/10', proc: 'Terapia fonoaudiológica', conv: 'SUS', val: 67.00, pct: 100, rep: 67.00 },
    { date: '12/10', proc: 'Vídeo-laringoscopia', conv: 'Particular', val: 350.00, pct: 60, rep: 210.00 },
  ];
  return (
    <div className="bg-ink-900 text-ink-100 rounded-2xl overflow-hidden border border-ink-700/60" style={{ width: 1080, fontFamily: 'Geist, Inter, sans-serif' }}>
      <div className="flex items-center justify-between px-5 h-12 border-b border-ink-700/60 text-[13px]">
        <div className="flex items-center gap-3">
          <I.Logo className="w-6 h-6"/>
          <span className="text-ink-400">Financeiro</span><span className="text-ink-500">/</span>
          <span className="font-medium">Repasse · Outubro 2026</span>
        </div>
        <div className="flex items-center gap-2 text-[12px]">
          <span className="px-2 py-1 rounded bg-amber-500/10 text-amber-300 border border-amber-500/20 font-mono">EM ABERTO</span>
          <button className="px-3 h-8 rounded-lg bg-cyan-500 text-white font-medium">Fechar mês</button>
        </div>
      </div>

      {/* KPI strip */}
      <div className="grid grid-cols-4 border-b border-ink-800">
        {[
          ['Faturamento bruto', 'R$ 84.320,00', 'text-ink-100'],
          ['Repasse profissionais', 'R$ 51.890,40', 'text-cyan-300'],
          ['Líquido da clínica', 'R$ 32.429,60', 'text-emerald-400'],
          ['Atendimentos', '294', 'text-ink-100'],
        ].map(([l, v, c], i) => (
          <div key={i} className={`px-5 py-4 ${i < 3 ? 'border-r border-ink-800' : ''}`}>
            <div className="text-[10px] uppercase tracking-wider text-ink-400">{l}</div>
            <div className={`text-[18px] font-semibold tabular mt-0.5 ${c}`}>{v}</div>
          </div>
        ))}
      </div>

      <div className="grid grid-cols-[1fr_280px]">
        {/* Table */}
        <div className="border-r border-ink-800">
          <div className="px-5 py-3 flex items-center justify-between border-b border-ink-800">
            <div className="text-[12px] font-medium">Dr. Emerson Monteiro · Otorrino</div>
            <div className="text-[11px] text-ink-400">82 procedimentos · regra prioritária <span className="text-cyan-300">Grupo</span></div>
          </div>
          <table className="w-full text-[11.5px]">
            <thead className="text-[10px] uppercase tracking-wider text-ink-400">
              <tr className="border-b border-ink-800">
                <th className="text-left px-5 py-2 font-medium">Data</th>
                <th className="text-left px-2 py-2 font-medium">Procedimento</th>
                <th className="text-left px-2 py-2 font-medium">Convênio</th>
                <th className="text-right px-2 py-2 font-medium">Valor</th>
                <th className="text-right px-2 py-2 font-medium">%</th>
                <th className="text-right px-5 py-2 font-medium">Repasse</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} className="border-b border-ink-800/60 hover:bg-ink-800/30">
                  <td className="px-5 py-2.5 tabular text-ink-300">{r.date}</td>
                  <td className="px-2 py-2.5">{r.proc}</td>
                  <td className="px-2 py-2.5"><span className="px-2 py-0.5 rounded bg-ink-800 text-[10px]">{r.conv}</span></td>
                  <td className="px-2 py-2.5 text-right tabular">R$ {r.val.toFixed(2).replace('.', ',')}</td>
                  <td className="px-2 py-2.5 text-right tabular text-ink-400">{r.pct}%</td>
                  <td className="px-5 py-2.5 text-right tabular font-semibold text-cyan-300">R$ {r.rep.toFixed(2).replace('.', ',')}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Side: chart */}
        <div className="p-4">
          <div className="text-[11px] text-ink-400 mb-2">Repasse mensal · 6 meses</div>
          <svg viewBox="0 0 240 150" className="w-full">
            {[44, 52, 48, 58, 51, 62].map((h, i) => (
              <g key={i}>
                <rect x={10 + i * 38} y={130 - h * 1.6} width="22" height={h * 1.6} rx="3" fill={i === 5 ? '#0EA5E9' : '#1E293B'}/>
              </g>
            ))}
            {['mai','jun','jul','ago','set','out'].map((m, i) => (
              <text key={m} x={21 + i * 38} y={145} fontSize="8" fill="#64748B" textAnchor="middle">{m}</text>
            ))}
          </svg>
          <div className="mt-3 rounded-lg bg-ink-800/60 border border-ink-700 p-3">
            <div className="text-[10px] uppercase tracking-wider text-ink-400">Próximo fechamento</div>
            <div className="text-[16px] font-semibold tabular mt-1">31 out · 17 dias</div>
            <div className="mt-2 h-1.5 rounded-full bg-ink-700 overflow-hidden">
              <div className="h-full bg-gradient-to-r from-cyan-500 to-emerald-400" style={{ width: '46%' }}/>
            </div>
          </div>
          <div className="mt-3 rounded-lg bg-cyan-500/5 border border-cyan-500/20 p-3 text-[11px]">
            <div className="flex items-center gap-1.5 text-cyan-300 font-medium mb-1"><I.CheckCircle className="w-3.5 h-3.5"/> NFS-e emitida</div>
            <div className="text-ink-300">Última: <span className="font-mono">2026-000412</span> · São Paulo/SP</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============= CHECK-IN QR MOCKUP =============
function CheckinMockup() {
  return (
    <div className="bg-ink-900 text-ink-100 rounded-2xl overflow-hidden border border-ink-700/60 p-5" style={{ width: 480 }}>
      <div className="flex items-center justify-between mb-3 text-[12px]">
        <div className="font-semibold">Check-in · Recepção</div>
        <span className="px-2 py-0.5 rounded-md bg-emerald-500/10 text-emerald-300 border border-emerald-500/20 text-[10px]">Em andamento</span>
      </div>
      <div className="rounded-xl bg-ink-800/40 border border-ink-700 p-4 flex gap-4">
        <div className="w-20 h-20 rounded-lg bg-gradient-to-br from-cyan-500 to-brand-600 flex items-center justify-center text-white text-2xl font-semibold">LM</div>
        <div className="flex-1">
          <div className="text-[14px] font-semibold">Lucas Mendes</div>
          <div className="text-[11px] text-ink-400">8 anos · CPF 123.***-45</div>
          <div className="mt-2 flex flex-wrap gap-1">
            <span className="px-2 py-0.5 rounded bg-ink-800 text-[10px] border border-ink-700">Convênio Bradesco</span>
            <span className="px-2 py-0.5 rounded bg-amber-500/10 text-amber-300 text-[10px] border border-amber-500/20">Pré-cadastro</span>
          </div>
        </div>
      </div>
      <div className="grid grid-cols-3 gap-2 mt-3 text-[10px]">
        {[['QR Code', true], ['CPF', false], ['Recepção', false]].map(([l, a]) => (
          <div key={l} className={`p-2 rounded-lg border text-center ${a ? 'bg-cyan-500/10 border-cyan-500/30 text-cyan-200' : 'bg-ink-800/40 border-ink-700 text-ink-400'}`}>{l}</div>
        ))}
      </div>
      <div className="mt-3 grid grid-cols-[100px_1fr] gap-3 items-center">
        <div className="rounded-lg bg-white p-2">
          <svg viewBox="0 0 60 60" className="w-full">
            {Array.from({length: 144}).map((_, i) => {
              const x = i % 12, y = Math.floor(i / 12);
              const v = ((x*7 + y*11 + (x===0||y===0||x===11||y===11?13:0)) % 7) > 2;
              return v ? <rect key={i} x={x*5} y={y*5} width="5" height="5" fill="#0F172A"/> : null;
            })}
            {[[0,0],[7,0],[0,7]].map(([x,y],i) => (
              <g key={i}><rect x={x*5} y={y*5} width="25" height="25" fill="white"/><rect x={x*5+2} y={y*5+2} width="21" height="21" fill="#0F172A"/><rect x={x*5+6} y={y*5+6} width="13" height="13" fill="white"/><rect x={x*5+8} y={y*5+8} width="9" height="9" fill="#0F172A"/></g>
            ))}
          </svg>
        </div>
        <div>
          <div className="text-[11px] text-ink-300">Aponte a câmera para o QR ou peça ao paciente para escanear no totem.</div>
          <button className="mt-2 px-3 h-8 rounded-lg bg-cyan-500 text-white text-[11px] font-medium inline-flex items-center gap-1.5">Confirmar check-in <I.ArrowRight className="w-3 h-3"/></button>
        </div>
      </div>
    </div>
  );
}

// ============= PAINEL TV MOCKUP =============
function PainelTVMockup() {
  return (
    <div className="bg-gradient-to-br from-brand-700 to-brand-800 text-white rounded-2xl overflow-hidden border border-brand-500/30 p-5 flex flex-col" style={{ width: 460, height: 300 }}>
      <div className="flex items-center justify-between text-[11px] opacity-80 mb-3">
        <div className="flex items-center gap-2"><I.Tv className="w-4 h-4"/> Painel de chamadas</div>
        <div className="tabular">14:32</div>
      </div>
      <div className="flex-1 flex flex-col items-center justify-center text-center">
        <div className="text-[10px] uppercase tracking-[0.2em] opacity-70">Senha</div>
        <div className="font-display font-bold tabular text-cyan-300" style={{ fontSize: 76, lineHeight: 1 }}>P-042</div>
        <div className="mt-2 text-[18px] font-semibold">Ana Beatriz Silva</div>
        <div className="text-[12px] opacity-80">Consultório 03 · Dr. Emerson</div>
      </div>
      <div className="grid grid-cols-3 gap-2 text-[10px]">
        {[['N-038', 'em espera'],['P-041', 'chamada'],['N-039', 'em espera']].map(([n,s], i) => (
          <div key={i} className="rounded-md bg-white/10 border border-white/10 p-1.5 text-center">
            <div className="font-mono font-semibold tabular">{n}</div>
            <div className="opacity-60">{s}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.Mockups = { AgendaMockup, ProntuarioMockup, AudiometriaMockup, RepasseMockup, CheckinMockup, PainelTVMockup };