// ============================================================================
// Páginas: Ferramentas, Modelos, Pílulas, Políticas, Favoritos, Agenda
// ============================================================================

function PageFerramentas() {
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader
        eyebrow="05 · Ferramentas e Sistemas"
        title={<>O <em style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', color: 'var(--amber)' }}>stack</em> oficial da Ampexx.</>}
        sub="Cada ferramenta tem um responsável, um padrão de uso e seus próprios manuais. Se você usa um sistema novo no dia a dia, fale com a coordenação antes de criar conta."
        cta={[{ label: 'Solicitar acesso a uma ferramenta', kind: 'primary' }]}
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
        {FERRAMENTAS.map(t => <ToolCard key={t.id} t={t}/>)}
      </div>

      <section style={{ marginTop: 48 }}>
        <SectionHead eyebrow="Fluxos que cruzam ferramentas" title="Como tudo se conecta"/>
        <Card style={{ padding: 28 }}>
          <FlowDiagram/>
        </Card>
      </section>
    </div>
  );
}

function ToolCard({ t }) {
  return (
    <Card hoverable style={{ padding: 18, display: 'flex', flexDirection: 'column', gap: 14, minHeight: 170 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div style={{ width: 38, height: 38, borderRadius: 10, background: t.color, color: '#fff', display: 'grid', placeItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 15 }}>
          {t.name[0]}
        </div>
        <Pill tone="neutral">{t.cat}</Pill>
      </div>
      <div>
        <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' }}>{t.name}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{t.guides} guias publicados</div>
      </div>
      <div style={{ marginTop: 'auto', display: 'flex', gap: 8 }}>
        <button style={{ padding: '7px 12px', borderRadius: 8, background: 'var(--navy)', color: '#fff', fontSize: 12, fontWeight: 600 }}>Abrir guias</button>
        <button style={{ padding: '7px 10px', borderRadius: 8, background: 'transparent', border: '1px solid var(--line)', fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>Solicitar acesso</button>
      </div>
    </Card>
  );
}

function FlowDiagram() {
  // Fluxo: Lead → PipeRun → Meetime → Wattio → Omie → ClickUp → Drive
  const nodes = [
    { x: 0,   t: 'Lead',     sys: 'Site / Ads',  color: 'var(--ink-3)' },
    { x: 16,  t: 'PipeRun',  sys: 'CRM',         color: '#1F3460' },
    { x: 33,  t: 'Meetime',  sys: 'Pré-vendas',  color: '#2F6B4F' },
    { x: 50,  t: 'Wattio',   sys: 'Proposta',    color: '#E89B2C' },
    { x: 67,  t: 'Omie',     sys: 'Financeiro',  color: '#0E1F38' },
    { x: 83,  t: 'ClickUp',  sys: 'Tarefas',     color: '#6B3A66' },
    { x: 100, t: 'Drive',    sys: 'Documentos',  color: '#B85333' },
  ];
  return (
    <div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)', letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 18 }}>Jornada comercial · principal</div>
      <div style={{ position: 'relative', height: 130 }}>
        <div style={{ position: 'absolute', left: 28, right: 28, top: 32, height: 2, background: 'var(--line-2)' }}/>
        <div style={{ position: 'absolute', left: 0, right: 0, top: 0, height: '100%' }}>
          {nodes.map((n, i) => (
            <div key={i} style={{
              position: 'absolute', left: `${n.x}%`,
              transform: i === 0 ? 'translateX(0)' : i === nodes.length-1 ? 'translateX(-100%)' : 'translateX(-50%)',
              textAlign: 'center', width: 110,
            }}>
              <div style={{ width: 42, height: 42, borderRadius: 12, background: n.color, color: '#fff', margin: '12px auto 0', display: 'grid', placeItems: 'center', fontFamily: 'JetBrains Mono, monospace', fontWeight: 700, fontSize: 14 }}>
                {n.t[0]}
              </div>
              <div style={{ fontSize: 13, fontWeight: 700, marginTop: 8 }}>{n.t}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{n.sys}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 8 }}>
        {[
          { t: 'Sempre atualizar etapa', d: 'A cada interação relevante com o lead, o vendedor atualiza no PipeRun e registra próximo passo.' },
          { t: 'Documentos no Drive', d: 'Toda proposta, contrato e ata vive em pasta padronizada — nunca em pasta pessoal.' },
          { t: 'Tarefa nasce no ClickUp', d: 'Solicitações entre áreas viram tarefa no ClickUp com SLA e responsável definido.' },
        ].map((r, i) => (
          <div key={i} style={{ border: '1px solid var(--line)', borderRadius: 12, padding: '14px 16px', background: 'var(--bg)' }}>
            <div style={{ fontSize: 13, fontWeight: 700 }}>{r.t}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.45 }}>{r.d}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ============================================================================
// MODELOS
// ============================================================================
function PageModelos() {
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader
        eyebrow="06 · Modelos e Templates"
        title={<>Tudo o que a equipe escreve, já <em style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', color: 'var(--amber)' }}>pronto.</em></>}
        sub="Modelos validados pela coordenação. Use sempre a versão do portal — versões antigas em pastas pessoais não são oficiais."
        cta={[{ label: 'Solicitar novo modelo', kind: 'primary' }]}
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {MODELOS.map((m, i) => (
          <Card key={m.id} hoverable style={{ padding: 22, minHeight: 200, display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Pill tone={['amber','leaf','navy','rust','plum','neutral'][i % 6]}>{m.kind}</Pill>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10.5, color: 'var(--ink-4)' }}>MOD·{String(i+1).padStart(2,'0')}</span>
            </div>
            <ModeloThumb idx={i}/>
            <div style={{ marginTop: 'auto' }}>
              <div style={{ fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em' }}>{m.name}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4 }}>{m.ext} · revisado 12·mai</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <button style={{ padding: '8px 12px', borderRadius: 8, background: 'var(--navy)', color: '#fff', fontSize: 12, fontWeight: 600 }}>Usar modelo</button>
              <button style={{ padding: '8px 10px', borderRadius: 8, background: 'transparent', border: '1px solid var(--line)', fontSize: 12, fontWeight: 600 }}>Pré-visualizar</button>
            </div>
          </Card>
        ))}
      </div>
    </div>
  );
}

function ModeloThumb({ idx }) {
  const tones = [
    { bg: 'var(--amber-soft)', fg: 'var(--rust)' },
    { bg: 'var(--leaf-soft)', fg: 'var(--leaf)' },
    { bg: 'var(--bg-2)', fg: 'var(--navy)' },
    { bg: 'var(--rust-soft)', fg: 'var(--rust)' },
    { bg: 'var(--plum-soft)', fg: 'var(--plum)' },
    { bg: 'var(--bg-2)', fg: 'var(--ink-2)' },
  ][idx % 6];
  return (
    <div style={{ background: tones.bg, borderRadius: 12, height: 100, padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
      <div style={{ height: 6, width: '40%', background: tones.fg, opacity: .8, borderRadius: 2 }}/>
      <div style={{ height: 4, width: '90%', background: tones.fg, opacity: .35, borderRadius: 2 }}/>
      <div style={{ height: 4, width: '85%', background: tones.fg, opacity: .35, borderRadius: 2 }}/>
      <div style={{ height: 4, width: '70%', background: tones.fg, opacity: .35, borderRadius: 2 }}/>
      <div style={{ marginTop: 'auto', display: 'flex', gap: 6 }}>
        <div style={{ height: 14, width: 38, borderRadius: 99, background: tones.fg, opacity: .25 }}/>
        <div style={{ height: 14, width: 26, borderRadius: 99, background: tones.fg, opacity: .25 }}/>
      </div>
    </div>
  );
}

// ============================================================================
// PÍLULAS
// ============================================================================
function PagePilulas() {
  const ext = [...PILULAS, ...PILULAS.map(p => ({...p, id: p.id+'-b'}))];
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader
        eyebrow="Pílulas Ampexx"
        title={<>Conteúdo curto, <em style={{ fontFamily: 'Instrument Serif, serif', fontStyle: 'italic', color: 'var(--amber)' }}>direto ao ponto.</em></>}
        sub="Vídeos de 1 a 5 minutos para resolver uma dúvida específica antes de uma reunião, ligação ou atendimento."
      />
      <div style={{ display: 'flex', gap: 8, marginBottom: 20 }}>
        <Chip active>Todas</Chip><Chip>Vendas</Chip><Chip>Atendimento</Chip><Chip>Operações</Chip><Chip>Engenharia</Chip>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
        {ext.map(p => {
          const pal = PRODUCT_PALETTES[p.pal];
          return (
            <Card key={p.id} hoverable style={{
              aspectRatio: '3 / 4.4', overflow: 'hidden', position: 'relative',
              background: pal.bg, color: pal.ink, border: 'none',
            }}>
              <div style={{ position: 'absolute', inset: 0, padding: 16, display: 'flex', flexDirection: 'column' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Pill tone="dark" style={{ background: 'rgba(0,0,0,.16)', color: pal.ink === '#fff' ? '#fff' : 'var(--ink)', borderColor: 'rgba(0,0,0,.1)' }}>{p.area}</Pill>
                  <AmpexxMark size={18} color={pal.ink} accent={pal.accent}/>
                </div>
                <div style={{ marginTop: 'auto' }}>
                  <PilulaShape color={pal.accent} ink={pal.ink}/>
                  <div style={{ marginTop: 14, fontFamily: 'Instrument Serif, serif', fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.01em' }}>{p.t}</div>
                  <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, opacity: .8 }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}><Icon.play s={10}/> assistir</span>
                    <span>{p.d}</span>
                  </div>
                </div>
              </div>
            </Card>
          );
        })}
      </div>
    </div>
  );
}

// ============================================================================
// POLÍTICAS, FAVORITOS, AGENDA — versão enxuta
// ============================================================================
function PagePoliticas() {
  const blocks = [
    { t: 'Padrões de atendimento', d: 'Tom de voz Ampexx, horários, tempo de resposta e regras por canal.' },
    { t: 'Padrões de comunicação', d: 'Como falar com cliente, parceiro e fornecedor.' },
    { t: 'Padrões de registro no CRM', d: 'Campos obrigatórios, atualização de etapa e ritual diário.' },
    { t: 'Padrões de organização de arquivos', d: 'Nomenclatura, hierarquia e propriedade de pastas no Drive.' },
    { t: 'Procedimentos comerciais', d: 'Política de desconto, alçadas e exceções.' },
    { t: 'Procedimentos administrativos', d: 'Solicitações de despesa, viagens e contratações.' },
  ];
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader eyebrow="07 · Políticas e Procedimentos" title="Como a Ampexx opera por dentro." sub="As regras do jogo. Toda exceção precisa de aprovação registrada."/>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {blocks.map((b, i) => (
          <Card key={i} hoverable style={{ padding: 22, minHeight: 160 }}>
            <Pill tone="navy">Política #{String(i+1).padStart(2,'0')}</Pill>
            <div style={{ fontSize: 17, fontWeight: 700, marginTop: 14, letterSpacing: '-0.01em' }}>{b.t}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{b.d}</div>
            <button style={{ marginTop: 14, fontSize: 12, fontWeight: 600, color: 'var(--ink)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Abrir documento <Icon.arrow s={13}/></button>
          </Card>
        ))}
      </div>
    </div>
  );
}

function PageFavoritos() {
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader eyebrow="Meus favoritos" title="Seus conteúdos salvos." sub="Marque um playbook, manual ou pílula como favorito para acessar com 1 clique."/>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {PLAYBOOKS.slice(0, 3).map(p => <PlaybookCard key={p.id} p={p} />)}
      </div>
    </div>
  );
}

function PageAgenda() {
  return (
    <div style={{ padding: '28px 28px 60px' }}>
      <PageHeader eyebrow="Agenda" title="Aulas, reciclagens e roleplays." sub="Sessões ao vivo organizadas pelas áreas. Tudo vira gravação no portal depois."/>
      <Card style={{ padding: 24 }}>
        <TrilhaProxAulas/>
      </Card>
    </div>
  );
}

Object.assign(window, { PageFerramentas, PageModelos, PagePilulas, PagePoliticas, PageFavoritos, PageAgenda });