// Dashboard mockup — modeled on the real MEDUX product (fully dark, coral cards, stats row).
const CATS = [
  { n: '01', name: 'Anamnese e Consulta',         body: 'Roteiros estruturados para coleta de dados e red flags clínicos.', count: '20 prompts',  time: '~10 min', tint: '#FF5B2C', icon: 1 },
  { n: '02', name: 'Evolução e Prontuário',       body: 'Notas SOAP, evoluções ambulatoriais e hospitalares em minutos.',  count: '20 prompts',  time: '~12 min', tint: '#5B7CFF', icon: 2 },
  { n: '03', name: 'Laudos e Relatórios',         body: 'Estrutura de laudos por modalidade, relatórios para convênio.',  count: '20 prompts',  time: '~15 min', tint: '#A06BFF', icon: 3 },
  { n: '04', name: 'Documentos Administrativos',  body: 'Atestados, declarações, receitas e pareceres em conformidade CFM.', count: '20 prompts', time: '~8 min',  tint: '#E0B85C', icon: 4 },
  { n: '05', name: 'Educação ao Paciente',        body: 'Orientações claras e material educativo traduzido do jargão clínico.', count: '20 prompts', time: '~10 min', tint: '#3DB67A', icon: 5 },
  { n: '06', name: 'Mensagens e Follow-up',       body: 'Templates de WhatsApp, e-mails e acompanhamento humanizado.',     count: '20 prompts', time: '~6 min',  tint: '#D8723E', icon: 6 },
  { n: '07', name: 'Pesquisa e Atualização',      body: 'Resumos de artigos, busca clínica e atualização científica.',     count: '20 prompts', time: '~12 min', tint: '#C9A76A', icon: 7 },
  { n: '08', name: 'Decisão Clínica',             body: 'Diagnóstico diferencial, cálculos e raciocínio clínico estruturado.', count: '20 prompts', time: '~15 min', tint: '#E0633D', icon: 8 },
  { n: '09', name: 'Redes Sociais',               body: 'Posts, stories e legendas em conformidade com CFM 2.336/2023.',   count: '20 prompts', time: '~8 min',  tint: '#B16DC6', icon: 9 },
  { n: '10', name: 'Gestão do Consultório',       body: 'Relatórios, planilhas, scripts de equipe e fluxos administrativos.', count: '20 prompts', time: '~10 min', tint: '#6BB5C9', icon: 10 },
];
window.CATS = CATS;

// White-stroke abstract icons matching the dark product aesthetic
const CatIcon = ({ idx, size = 20, color = '#FFF' }) => {
  const sw = 1.6;
  const els = {
    1: <><circle cx="12" cy="9" r="3" stroke={color} strokeWidth={sw}/><path d="M5 20c1-4 4-6 7-6s6 2 7 6" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    2: <><rect x="5" y="4" width="14" height="16" rx="2" stroke={color} strokeWidth={sw}/><path d="M8 9h8M8 13h8M8 17h5" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    3: <><path d="M5 5h10l4 4v10H5z" stroke={color} strokeWidth={sw} strokeLinejoin="round"/><path d="M15 5v4h4M9 13h6M9 17h6" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    4: <><rect x="6" y="3" width="12" height="18" rx="2" stroke={color} strokeWidth={sw}/><path d="M9 8h6M9 12h6M9 16h4" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    5: <><path d="M12 20s-7-4-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 6-7 10-7 10z" stroke={color} strokeWidth={sw} strokeLinejoin="round"/></>,
    6: <><path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4z" stroke={color} strokeWidth={sw} strokeLinejoin="round"/></>,
    7: <><circle cx="11" cy="11" r="6" stroke={color} strokeWidth={sw}/><path d="M16 16l5 5" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    8: <><path d="M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 15.8 7 18.2l1-5.5-4-3.9 5.5-.8z" stroke={color} strokeWidth={sw} strokeLinejoin="round"/></>,
    9: <><circle cx="7" cy="7" r="3" stroke={color} strokeWidth={sw}/><circle cx="17" cy="17" r="3" stroke={color} strokeWidth={sw}/><path d="M10 7h7M7 10v7" stroke={color} strokeWidth={sw} strokeLinecap="round"/></>,
    10: <><path d="M4 9l8-5 8 5v11H4z" stroke={color} strokeWidth={sw} strokeLinejoin="round"/><path d="M9 20v-6h6v6" stroke={color} strokeWidth={sw} strokeLinejoin="round"/></>,
  };
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">{els[idx]}</svg>;
};
window.CatIcon = CatIcon;

const dashStyles = {
  shell: {
    width: '100%',
    maxWidth: 1180,
    margin: '0 auto',
    aspectRatio: '16 / 10',
    minHeight: 560,
    borderRadius: 18,
    overflow: 'hidden',
    border: '1px solid rgba(245,242,238,0.10)',
    boxShadow: '0 60px 120px -40px rgba(0,0,0,0.7), 0 0 80px -20px rgba(255,91,44,0.25)',
    display: 'grid',
    gridTemplateColumns: '218px 1fr',
    background: '#0B0908',
    position: 'relative',
  },
  sidebar: {
    background: '#0B0908',
    color: '#F5F2EE',
    padding: '22px 18px',
    borderRight: '1px solid rgba(245,242,238,0.06)',
    display: 'flex',
    flexDirection: 'column',
    gap: 22,
  },
  main: {
    background: '#16130F',
    color: '#F5F2EE',
    padding: '28px 36px',
    overflow: 'hidden',
    position: 'relative',
  },
};

function DashboardMock() {
  const NavItem = ({ label, active, icon }) => (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      padding: '9px 11px',
      borderRadius: 9,
      fontSize: 13,
      color: active ? '#fff' : 'rgba(245,242,238,0.6)',
      background: active ? 'rgba(255,91,44,0.16)' : 'transparent',
      border: active ? '1px solid rgba(255,91,44,0.4)' : '1px solid transparent',
      fontWeight: active ? 500 : 400,
    }}>
      <span style={{
        width: 14, height: 14, display: 'grid', placeItems: 'center',
        color: active ? '#FF5B2C' : 'rgba(245,242,238,0.4)',
      }}>
        {icon}
      </span>
      {label}
    </div>
  );

  // Coral category card matching product (subtle gradient, dark border, white text + icon)
  const CatCard = ({ c }) => (
    <div style={{
      borderRadius: 12,
      padding: '16px 16px 14px',
      minHeight: 132,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      background: `linear-gradient(155deg, ${c.tint}1F 0%, ${c.tint}0A 60%, rgba(255,255,255,0.02) 100%)`,
      border: `1px solid ${c.tint}33`,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(120% 80% at 100% 0%, ${c.tint}26, transparent 55%)`,
        pointerEvents: 'none',
      }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
        <div style={{
          width: 28, height: 28, borderRadius: 7,
          background: `${c.tint}26`,
          border: `1px solid ${c.tint}40`,
          display: 'grid', placeItems: 'center',
          color: c.tint,
        }}>
          <CatIcon idx={c.icon} size={15} color={c.tint} />
        </div>
        <span className="mono" style={{ fontSize: 9.5, color: 'rgba(245,242,238,0.5)', letterSpacing: '0.1em' }}>{c.n}/10</span>
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.2, color: '#F5F2EE' }}>{c.name}</div>
        <div style={{ fontSize: 10.5, color: 'rgba(245,242,238,0.55)', marginTop: 4, lineHeight: 1.4 }}>{c.body.slice(0, 56)}…</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginTop: 10 }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: '#fff' }}>20 <span style={{ fontSize: 10, color: 'rgba(245,242,238,0.5)', fontWeight: 400 }}>prompts</span></span>
          <span className="mono" style={{ fontSize: 10, color: 'rgba(245,242,238,0.5)' }}>{c.time}</span>
        </div>
      </div>
    </div>
  );

  return (
    <div className="dash-shell" style={dashStyles.shell}>
      {/* Sidebar */}
      <aside className="dash-sidebar" style={dashStyles.sidebar}>
        <div className="dash-brand" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 6px' }}>
          <img src="assets/medux-logo.png" alt="Medux" style={{ height: 22, width: 'auto', display: 'block' }} />
        </div>

        <div className="dash-nav-section">
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: 'rgba(245,242,238,0.32)', padding: '0 11px 8px' }}>NAVEGAÇÃO</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <NavItem label="Home" active icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M4 11l8-7 8 7v9H4z" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/></svg>} />
            <NavItem label="Guia" icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 8v4l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>} />
            <NavItem label="Favoritos" icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M12 4l2.5 5 5.5.8-4 3.9 1 5.5L12 16.8 7 19.2l1-5.5-4-3.9 5.5-.8z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>} />
          </div>
        </div>

        <div className="dash-lib-section">
          <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.18em', color: 'rgba(245,242,238,0.32)', padding: '0 11px 8px' }}>BIBLIOTECA</div>
          <div style={{ padding: '0 11px', fontSize: 11, color: 'rgba(245,242,238,0.4)', lineHeight: 1.5 }}>
            Suas categorias aparecerão aqui conforme você usa.
          </div>
        </div>

        <div className="dash-user-footer" style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10, padding: '10px', borderTop: '1px solid rgba(245,242,238,0.06)' }}>
          <div style={{
            width: 28, height: 28, borderRadius: 50,
            background: 'linear-gradient(135deg,#FF7A4D,#E8431A)',
            display: 'grid', placeItems: 'center',
            fontSize: 11, fontWeight: 600, color: '#fff',
            flexShrink: 0,
          }}>JR</div>
          <div className="dash-user-name" style={{ fontSize: 12, fontWeight: 500 }}>Dra. Juliana Romanato</div>
        </div>
      </aside>

      {/* Main */}
      <main className="dash-main" style={dashStyles.main}>
        <div className="dash-header-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'rgba(245,242,238,0.5)' }}>HOME</span>
          <div className="dash-search" style={{
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '6px 11px', borderRadius: 999,
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(245,242,238,0.1)',
            fontSize: 11.5, color: 'rgba(245,242,238,0.55)',
          }}>
            <span style={{ width: 10, height: 10, borderRadius: 2, background: 'rgba(245,242,238,0.18)' }} />
            Buscar
            <span className="mono" style={{ marginLeft: 14, fontSize: 9.5, color: 'rgba(245,242,238,0.4)' }}>⌘K</span>
          </div>
        </div>

        <h3 className="dash-greeting" style={{ fontSize: 'clamp(22px, 2.4vw, 30px)', letterSpacing: '-0.03em', margin: '14px 0 4px', fontWeight: 600 }}>
          Boa tarde, Dra. Juliana Romanato
        </h3>
        <p style={{ color: 'rgba(245,242,238,0.55)', margin: 0, fontSize: 13.5 }}>
          200 prompts prontos para o seu consultório.
        </p>

        {/* Stats row */}
        <div className="dash-stats" style={{ display: 'flex', gap: 32, marginTop: 22, paddingBottom: 18, borderBottom: '1px solid rgba(245,242,238,0.06)' }}>
          {[
            { big: '200', label: 'PROMPTS' },
            { big: '0',   label: 'FAVORITOS' },
            { big: '—',   label: 'TEMPO MÉDIO' },
          ].map(s => (
            <div key={s.label} style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em' }}>{s.big}</span>
              <span className="mono" style={{ fontSize: 9.5, letterSpacing: '0.16em', color: 'rgba(245,242,238,0.45)' }}>{s.label}</span>
            </div>
          ))}
        </div>

        <div className="dash-section-head" style={{ marginTop: 18, display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 12 }}>
          <h4 style={{ margin: 0, fontSize: 16, fontWeight: 600, letterSpacing: '-0.02em' }}>Kit IA para Médicos</h4>
          <span className="mono dash-section-meta" style={{ fontSize: 10, color: 'rgba(245,242,238,0.4)', letterSpacing: '0.1em' }}>10 categorias · 200 prompts</span>
        </div>

        <div className="dash-cats-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 12,
          marginTop: 14,
        }}>
          {CATS.slice(0, 6).map(c => <CatCard key={c.n} c={c} />)}
        </div>
      </main>
    </div>
  );
}

window.DashboardMock = DashboardMock;