// ============================================================================
// Página de Manuais — funções comerciais + operacionais
// ============================================================================

function PageManuais({ open }) {
  const [tab, setTab] = useState('funcoes');
  const list = tab === 'funcoes' ? MANUAIS_FUNCOES : MANUAIS_OPERACIONAIS;
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader
        eyebrow="02 · 03 · Manuais"
        title={<>Passo a passo, do <em style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', color: 'var(--amber)' }}>jeito Ampexx</em>.</>}
        sub="Cada manual segue 11 blocos — do objetivo ao checklist final. Escrito como se você fosse executar a tarefa pela primeira vez."
        cta={[{ label: 'Modelo padrão de manual', kind: 'primary' }]}
      />

      <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '0 0 22px' }}>
        <Segmented value={tab} onChange={setTab} options={[
          { id: 'funcoes',      label: '02 · Funções comerciais', sub: '7 manuais' },
          { id: 'operacionais', label: '03 · Operacionais',       sub: '9 manuais' },
        ]}/>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
          <Chip active>Todos</Chip>
          <Chip>Comercial</Chip>
          <Chip>Operações</Chip>
          <Chip>Engenharia</Chip>
          <Chip>Financeiro</Chip>
        </div>
      </div>

      {/* Tabela densa estilo manual */}
      <Card style={{ overflow: 'hidden' }}>
        <ManualHeader />
        {list.map((m, i) => <ManualRow key={m.id} m={m} idx={i+1} open={open}/>)}
      </Card>

      <ManualStructure />
    </div>
  );
}

function Segmented({ value, onChange, options }) {
  return (
    <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 12, padding: 4, display: 'inline-flex' }}>
      {options.map(o => {
        const active = value === o.id;
        return (
          <button key={o.id} onClick={() => onChange(o.id)} style={{
            padding: '9px 16px', borderRadius: 8, fontSize: 13, fontWeight: 600,
            background: active ? 'var(--navy)' : 'transparent',
            color: active ? '#fff' : 'var(--ink-2)',
            display: 'inline-flex', alignItems: 'center', gap: 8,
          }}>
            {o.label}
            <span style={{ fontSize: 10, fontWeight: 600, background: active ? 'rgba(255,255,255,.15)' : 'var(--bg-2)', padding: '1px 6px', borderRadius: 99 }}>{o.sub}</span>
          </button>
        );
      })}
    </div>
  );
}

function ManualHeader() {
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: '60px 1.6fr 1fr 1fr 1fr 0.8fr 130px',
      padding: '14px 18px', fontSize: 10.5, letterSpacing: '.12em', textTransform: 'uppercase',
      color: 'var(--ink-3)', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)',
      fontWeight: 700,
    }}>
      <div>Cód.</div>
      <div>Manual</div>
      <div>Área</div>
      <div>Ferramentas</div>
      <div>Passos · Tempo</div>
      <div>Atualizado</div>
      <div></div>
    </div>
  );
}

function ManualRow({ m, idx, open }) {
  const [hover, setHover] = useState(false);
  return (
    <div onClick={() => open && open(m)}
         onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
         style={{
            display: 'grid', gridTemplateColumns: '60px 1.6fr 1fr 1fr 1fr 0.8fr 130px',
            alignItems: 'center', padding: '16px 18px',
            borderBottom: '1px solid var(--line)', cursor: 'pointer',
            background: hover ? 'var(--bg-2)' : 'transparent', transition: 'background .12s',
         }}>
      <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--ink-3)' }}>{m.code}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 38, height: 38, borderRadius: 8, background: 'var(--navy)', color: '#fff', display: 'grid', placeItems: 'center' }}>
          <Icon.doc s={16}/>
        </div>
        <div>
          <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '-0.01em' }}>{m.title}</div>
          <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2 }}>11 blocos · objetivo, ferramentas, passo a passo, cuidados, checklist</div>
        </div>
      </div>
      <div style={{ fontSize: 12.5 }}>{m.area}</div>
      <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>{m.tool}</div>
      <div style={{ fontSize: 12.5 }}>
        <span style={{ fontWeight: 600 }}>{m.steps}</span> <span style={{ color: 'var(--ink-3)' }}>passos</span>
        <span style={{ color: 'var(--ink-4)', margin: '0 4px' }}>·</span>
        <span style={{ color: 'var(--ink-3)' }}>{m.time}</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{m.updated}</div>
      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6 }}>
        <button style={{
          padding: '6px 10px', fontSize: 11, fontWeight: 600,
          border: '1px solid var(--line)', borderRadius: 8, background: 'var(--paper)',
        }}>Abrir</button>
        <button style={{ padding: '6px 8px', border: '1px solid var(--line)', borderRadius: 8, background: 'var(--paper)' }}>
          <Icon.bookmark s={13}/>
        </button>
      </div>
    </div>
  );
}

// ---- Estrutura padrão de um manual -----------------------------------------
function ManualStructure() {
  const blocks = [
    { n: '01', t: 'Objetivo do manual' },
    { n: '02', t: 'Quando este processo deve ser usado' },
    { n: '03', t: 'Responsável pelo processo' },
    { n: '04', t: 'Ferramentas utilizadas' },
    { n: '05', t: 'Informações necessárias antes de começar' },
    { n: '06', t: 'Passo a passo do processo' },
    { n: '07', t: 'Padrão de nomenclatura' },
    { n: '08', t: 'Cuidados importantes' },
    { n: '09', t: 'O que fazer em caso de erro' },
    { n: '10', t: 'Checklist final' },
    { n: '11', t: 'Próxima etapa' },
  ];
  return (
    <section style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1.1fr 2fr', gap: 28 }}>
      <div style={{
        background: 'var(--navy)', color: '#fff', borderRadius: 22,
        padding: '28px 28px 32px', position: 'relative', overflow: 'hidden',
      }}>
        <Pill tone="dark" style={{ background: 'rgba(232,155,44,.2)', color: '#F0B656', borderColor: 'rgba(232,155,44,.35)' }}>Padrão Ampexx</Pill>
        <h3 style={{ margin: '12px 0 8px', fontFamily: 'Instrument Serif, serif', fontWeight: 400, fontSize: 32, lineHeight: 1.05 }}>
          Onze blocos. Sempre na mesma ordem.
        </h3>
        <p style={{ fontSize: 13, color: 'rgba(255,255,255,.7)', lineHeight: 1.55, marginTop: 0 }}>
          A consistência é o que torna o portal escalável: qualquer colaborador novo aprende a navegar em qualquer manual após ler o primeiro.
        </p>
        <button style={{ marginTop: 18, padding: '10px 14px', borderRadius: 10, background: 'var(--amber)', color: 'var(--navy)', fontWeight: 700, fontSize: 12.5 }}>
          Baixar modelo em branco
        </button>
        <div style={{ position: 'absolute', right: -40, bottom: -40, width: 180, height: 180, borderRadius: 999, background: 'radial-gradient(circle, rgba(232,155,44,.25), transparent 70%)' }}/>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 10 }}>
        {blocks.map(b => (
          <div key={b.n} style={{
            border: '1px solid var(--line)', borderRadius: 12,
            padding: '14px 16px', background: 'var(--paper)',
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--amber)', letterSpacing: '.08em' }}>{b.n}</div>
            <div style={{ fontSize: 13, fontWeight: 600 }}>{b.t}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { PageManuais, Segmented });