// ============================================================================
// Chrome — Sidebar, Topbar, Logo, ícones, util components
// ============================================================================
const { useState, useMemo, useEffect, useRef } = React;

// ---- Logo Ampexx (símbolo original: sol estilizado em traço + wordmark) ----
function AmpexxMark({ size = 28, color = 'var(--ink)', accent = 'var(--amber)' }) {
  // Símbolo: anel solar com raio sólido (referência ao "A" e à energia radiante)
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden>
      <circle cx="16" cy="16" r="6.5" stroke={color} strokeWidth="2" />
      <path d="M16 3.5v3.2M16 25.3v3.2M3.5 16h3.2M25.3 16h3.2M7.1 7.1l2.3 2.3M22.6 22.6l2.3 2.3M24.9 7.1l-2.3 2.3M9.4 22.6l-2.3 2.3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
      <circle cx="16" cy="16" r="2.6" fill={accent} />
    </svg>
  );
}

function AmpexxLogo({ small = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <AmpexxMark size={small ? 22 : 28} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
        <div style={{ fontWeight: 800, letterSpacing: '-0.01em', fontSize: small ? 15 : 18, color: 'var(--ink)' }}>
          ampexx<span style={{ color: 'var(--amber)' }}>.</span>
        </div>
        {!small && <div style={{ fontSize: 10, color: 'var(--ink-3)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 3 }}>Energia renovável</div>}
      </div>
    </div>
  );
}

// ---- Ícones (traços simples, lineares — sem emoji) ----
const Icon = {
  home:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-7H10v7H4a1 1 0 0 1-1-1z"/></svg>,
  book:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h11a3 3 0 0 1 3 3v13H7a3 3 0 0 1-3-3z"/><path d="M18 20a3 3 0 0 1-3-3V4"/></svg>,
  doc:     (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 3h7l4 4v14H7z"/><path d="M14 3v4h4M9 12h7M9 16h7M9 8h2"/></svg>,
  path:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="2.4"/><circle cx="18" cy="18" r="2.4"/><path d="M8.4 6h6A3.6 3.6 0 0 1 18 9.6v6"/><path d="M15.6 18h-6A3.6 3.6 0 0 1 6 14.4v-6" opacity=".5"/></svg>,
  pill:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="9" width="18" height="6" rx="3"/><path d="M12 9v6"/></svg>,
  tool:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 3.5a4 4 0 0 0-5 5L4 14l3 3 5.5-5.5a4 4 0 0 0 5-5z"/><path d="M14 10l6 6"/></svg>,
  tag:     (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12V4h8l10 10-8 8z"/><circle cx="7.5" cy="7.5" r="1.2"/></svg>,
  building:(p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="3" width="16" height="18"/><path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2"/></svg>,
  search:  (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-3.6-3.6"/></svg>,
  bell:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 17h14l-1.5-2V11a5.5 5.5 0 1 0-11 0v4z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>,
  bookmark:(p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M6 3h12v18l-6-4-6 4z"/></svg>,
  bookmarkF:(p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="currentColor"><path d="M6 3h12v18l-6-4-6 4z"/></svg>,
  arrow:   (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  play:    (p) => <svg viewBox="0 0 24 24" width={p.s||16} height={p.s||16} fill="currentColor"><path d="M7 5l12 7-12 7z"/></svg>,
  check:   (p) => <svg viewBox="0 0 24 24" width={p.s||16} height={p.s||16} fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12l5 5 9-11"/></svg>,
  dot:     (p) => <svg viewBox="0 0 8 8" width={p.s||8} height={p.s||8}><circle cx="4" cy="4" r="3" fill="currentColor"/></svg>,
  filter:  (p) => <svg viewBox="0 0 24 24" width={p.s||16} height={p.s||16} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M4 5h16M7 12h10M10 19h4"/></svg>,
  agenda:  (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></svg>,
  shield:  (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l8 3v6c0 4.5-3.5 8-8 9-4.5-1-8-4.5-8-9V6z"/></svg>,
  star:    (p) => <svg viewBox="0 0 24 24" width={p.s||18} height={p.s||18} fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><path d="M12 3l2.7 5.7 6.3.9-4.6 4.4 1.1 6.2L12 17.3l-5.5 2.9 1.1-6.2L3 9.6l6.3-.9z"/></svg>,
};

// ============================================================================
// SIDEBAR
// ============================================================================
function Sidebar({ route, setRoute }) {
  const items = [
    { id: 'home',        label: 'Início',         icon: 'home' },
    { id: 'playbooks',   label: 'Playbooks',      icon: 'book' },
    { id: 'manuais',     label: 'Manuais',        icon: 'doc' },
    { id: 'trilhas',     label: 'Trilhas',        icon: 'path' },
    { id: 'pilulas',     label: 'Pílulas',        icon: 'pill' },
    { id: 'ferramentas', label: 'Ferramentas',    icon: 'tool' },
    { id: 'modelos',     label: 'Modelos',        icon: 'tag' },
  ];
  const secondary = [
    { id: 'politicas',  label: 'Políticas internas', icon: 'shield' },
    { id: 'favoritos',  label: 'Meus favoritos',     icon: 'bookmark' },
    { id: 'agenda',     label: 'Agenda de aulas',    icon: 'agenda' },
  ];
  return (
    <aside style={{
      width: 224, flex: '0 0 224px', borderRight: '1px solid var(--line)',
      background: 'var(--paper)', display: 'flex', flexDirection: 'column',
      position: 'sticky', top: 0, height: '100vh',
    }}>
      <div style={{ padding: '22px 22px 18px' }}>
        <AmpexxLogo />
      </div>

      <div style={{ padding: '0 14px' }}>
        <div style={{
          border: '1px solid var(--line)', borderRadius: 12, padding: '12px 14px',
          background: 'var(--bg)', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{ width: 30, height: 30, borderRadius: 8, background: 'var(--navy)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12 }}>AC</div>
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600 }}>Ana Cardoso</div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Comercial · Closer</div>
          </div>
        </div>
      </div>

      <nav style={{ padding: '18px 10px 10px', display: 'flex', flexDirection: 'column', gap: 2 }}>
        <NavGroupTitle>Portal</NavGroupTitle>
        {items.map(it => (
          <NavItem key={it.id} active={route === it.id} onClick={() => setRoute(it.id)} icon={it.icon} label={it.label} />
        ))}
        <NavGroupTitle style={{ marginTop: 14 }}>Outras seções</NavGroupTitle>
        {secondary.map(it => (
          <NavItem key={it.id} active={route === it.id} onClick={() => setRoute(it.id)} icon={it.icon} label={it.label} />
        ))}
      </nav>

      <div style={{ marginTop: 'auto', padding: 14 }}>
        <div style={{
          border: '1px solid var(--line)', borderRadius: 14, padding: 14, background: 'var(--bg-2)',
        }}>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.1em', textTransform: 'uppercase' }}>Drive</div>
          <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, lineHeight: 1.35 }}>Portal sincronizado com o Google Drive</div>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 6 }}>Última sincronização há 12 min</div>
          <button style={{
            marginTop: 10, fontSize: 11, color: 'var(--navy)', fontWeight: 600,
            background: '#fff', border: '1px solid var(--line)', padding: '7px 10px', borderRadius: 8,
          }}>Abrir no Drive →</button>
        </div>
        <a href="login.html" style={{
          marginTop: 10, display: 'flex', alignItems: 'center', gap: 8,
          padding: '9px 12px', borderRadius: 10,
          fontSize: 12.5, color: 'var(--ink-3)', fontWeight: 600,
        }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-2)'; e.currentTarget.style.color = 'var(--ink)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--ink-3)'; }}
        >
          <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M15 12H4M9 7l-5 5 5 5M14 4h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-5"/></svg>
          Sair do portal
        </a>
      </div>
    </aside>
  );
}

function NavGroupTitle({ children, style }) {
  return <div style={{ fontSize: 10, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--ink-4)', padding: '8px 12px', ...style }}>{children}</div>;
}

function NavItem({ active, onClick, icon, label }) {
  const IconC = Icon[icon];
  return (
    <button onClick={onClick} style={{
      display: 'flex', alignItems: 'center', gap: 12, padding: '9px 12px', borderRadius: 10,
      textAlign: 'left', width: '100%',
      background: active ? 'var(--navy)' : 'transparent',
      color: active ? '#fff' : 'var(--ink-2)',
      fontWeight: active ? 600 : 500, fontSize: 13.5,
      transition: 'background .15s',
    }}
      onMouseEnter={e => { if(!active) e.currentTarget.style.background = 'var(--bg-2)'; }}
      onMouseLeave={e => { if(!active) e.currentTarget.style.background = 'transparent'; }}
    >
      <IconC s={17} />
      <span>{label}</span>
      {active && <span style={{ marginLeft: 'auto', width: 5, height: 5, borderRadius: 99, background: 'var(--amber)' }}/>}
    </button>
  );
}

// ============================================================================
// TOPBAR
// ============================================================================
function Topbar({ route, setRoute, search, setSearch }) {
  const tabs = [
    { id: 'home',        label: 'Início' },
    { id: 'playbooks',   label: 'Playbooks' },
    { id: 'manuais',     label: 'Manuais' },
    { id: 'trilhas',     label: 'Trilhas' },
    { id: 'pilulas',     label: 'Pílulas' },
    { id: 'ferramentas', label: 'Ferramentas' },
    { id: 'modelos',     label: 'Modelos' },
  ];
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'rgba(246,242,234,.86)', backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '14px 28px' }}>
        <div style={{
          flex: '1 1 auto', maxWidth: 520, minWidth: 0, display: 'flex', alignItems: 'center', gap: 10,
          background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 999,
          padding: '10px 16px',
        }}>
          <Icon.search s={16} />
          <input
            value={search} onChange={e => setSearch(e.target.value)}
            placeholder="Buscar playbook, manual, ferramenta ou trilha…"
            style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13.5, color: 'var(--ink)' }}
          />
          <kbd style={{ fontSize: 10, color: 'var(--ink-4)', border: '1px solid var(--line)', padding: '2px 6px', borderRadius: 5, fontFamily: 'JetBrains Mono, monospace' }}>⌘K</kbd>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          <Pill tone="leaf">Sincronizado · há 12 min</Pill>
          <button style={{ width: 36, height: 36, borderRadius: 10, border: '1px solid var(--line)', background: 'var(--paper)', display: 'grid', placeItems: 'center' }}>
            <Icon.bell s={16} />
          </button>
          <div style={{ width: 36, height: 36, borderRadius: 99, background: 'var(--navy)', color: '#fff', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 12 }}>AC</div>
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '0 28px 12px' }}>
        {tabs.map(t => (
          <button key={t.id} onClick={() => setRoute(t.id)} style={{
            padding: '8px 14px', fontSize: 13.5, fontWeight: 600,
            borderRadius: 999, color: route === t.id ? '#fff' : 'var(--ink-2)',
            background: route === t.id ? 'var(--navy)' : 'transparent',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ opacity: .9 }}>{(Icon[tabIcon(t.id)] || Icon.book)({ s: 14 })}</span>
            {t.label}
          </button>
        ))}
      </div>
    </div>
  );
}

function tabIcon(id){
  return { home: 'home', playbooks: 'book', manuais: 'doc', trilhas: 'path', pilulas: 'pill', ferramentas: 'tool', modelos: 'tag' }[id] || 'book';
}

// ============================================================================
// Pill / Section title / etc.
// ============================================================================
function Pill({ children, tone = 'neutral', dark = false, style = {} }) {
  const tones = {
    neutral: { bg: 'var(--bg-2)', fg: 'var(--ink-2)', bd: 'var(--line)' },
    leaf:    { bg: 'var(--leaf-soft)', fg: '#1F4F37', bd: 'rgba(47,107,79,.18)' },
    amber:   { bg: 'var(--amber-soft)', fg: '#8A560A', bd: 'rgba(232,155,44,.25)' },
    rust:    { bg: 'var(--rust-soft)', fg: '#7B341A', bd: 'rgba(184,83,51,.2)' },
    navy:    { bg: 'rgba(14,31,56,.08)', fg: 'var(--navy)', bd: 'rgba(14,31,56,.18)' },
    plum:    { bg: 'var(--plum-soft)', fg: '#4D2A4A', bd: 'rgba(107,58,102,.22)' },
    dark:    { bg: 'rgba(255,255,255,.1)', fg: '#fff', bd: 'rgba(255,255,255,.18)' },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 9px', borderRadius: 999, fontSize: 11, fontWeight: 600,
      background: t.bg, color: t.fg, border: `1px solid ${t.bd}`,
      letterSpacing: '.01em', ...style,
    }}>{children}</span>
  );
}

function SectionHead({ eyebrow, title, action, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', margin: '8px 0 18px' }}>
      <div>
        {eyebrow && <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '.16em', textTransform: 'uppercase', marginBottom: 6 }}>{eyebrow}</div>}
        <h2 style={{ margin: 0, fontSize: 22, letterSpacing: '-0.02em', fontWeight: 700 }}>{title}</h2>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {right}
        {action && <button style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>{action} <Icon.arrow s={14} /></button>}
      </div>
    </div>
  );
}

// Pequena escala de progresso visual
function Progress({ value, color = 'var(--amber)' }) {
  return (
    <div style={{ height: 4, background: 'var(--line)', borderRadius: 4, overflow: 'hidden' }}>
      <div style={{ width: `${value}%`, height: '100%', background: color }} />
    </div>
  );
}

// Card padrão (paper)
function Card({ children, style = {}, hoverable = false, onClick }) {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={onClick}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{
           background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 16,
           transition: 'transform .15s, box-shadow .15s, border-color .15s',
           transform: hoverable && hover ? 'translateY(-2px)' : 'none',
           boxShadow: hoverable && hover ? '0 12px 30px -16px rgba(14,31,56,.18)' : 'none',
           borderColor: hoverable && hover ? 'var(--line-2)' : 'var(--line)',
           cursor: hoverable ? 'pointer' : 'default',
           ...style
         }}>
      {children}
    </div>
  );
}

Object.assign(window, { Icon, Sidebar, Topbar, Pill, SectionHead, Progress, Card, AmpexxMark, AmpexxLogo });
