/* TRIUM BPO — top sections: Header, Hero (3 visual variants), NumbersStrip, Pain */

function Header({ onPortal, onMenu, scrolled, menuOpen }) {
  const I = window.TriumIcons;
  const links = [
  ['Serviços', '#servicos'], ['Módulos', '#modulos'], ['Apps', '#telas'], ['Como funciona', '#como-funciona'],
  ['Segmentos', '#segmentos'], ['Equipe', '#equipe'], ['Perguntas', '#faq']];

  return (
    <header className={'hdr' + (scrolled ? ' scrolled' : '')}>
      <div className="wrap-wide nav">
        <a className="logo" href="#topo">
          <window.TriumLogo size={38} />
          <span className="word" style={{ color: "rgb(253, 254, 254)" }}>TRIUM<small>B P O</small></span>
        </a>
        <nav className="nav-links">
          {links.map(([t, h]) => <a key={t} href={h}>{t}</a>)}
          <button className="btn btn-portal" onClick={onPortal}><I.user size={15} sw={2.2} />Portal do Cliente</button>
          <a href="#contato" className="btn btn-primary">Diagnóstico gratuito</a>
        </nav>
        <button className={'burger' + (menuOpen ? ' open' : '')} onClick={onMenu} aria-label="Menu" aria-expanded={menuOpen}><span></span><span></span><span></span></button>
      </div>
      <nav className={'mnav' + (menuOpen ? ' open' : '')}>
        {links.map(([t, h]) => <a key={t} href={h} onClick={onMenu}>{t}</a>)}
        <div className="mnav-ctas">
          <button className="btn btn-portal" onClick={onPortal}><I.user size={15} sw={2.2} />Portal do Cliente</button>
          <a href="#contato" className="btn btn-primary" onClick={onMenu}>Diagnóstico gratuito</a>
        </div>
      </nav>
    </header>);

}

/* ---- Hero product visuals ---- */
function DeviceViz() {
  const I = window.TriumIcons;
  return (
    <div className="devices">
      <div className="float f1">
        <div className="dotok"><I.check size={17} color="#00A87E" /></div>
        <div><b>eSocial enviado</b><br />Todos os eventos no prazo</div>
      </div>
      <div className="tablet">
        <div className="tablet-screen">
          <div className="dash-top">
            <div>
              <h4>Folha de junho</h4>
              <div className="sub">Painel do gestor · 47 colaboradores</div>
            </div>
            <span className="dash-pill">Fechada</span>
          </div>
          <div className="dash-row">
            <div className="dash-card">
              <div className="lbl">Custo de pessoal</div>
              <div className="donut-wrap">
                <div className="donut"></div>
                <div className="donut-val"><b>R$312k</b><span>no mês</span></div>
              </div>
            </div>
            <div className="dash-card">
              <div className="lbl">Encargos · 6 meses</div>
              <div className="bars">
                <i style={{ height: '52%' }}></i><i style={{ height: '68%' }}></i>
                <i style={{ height: '46%' }}></i><i style={{ height: '80%' }}></i>
                <i style={{ height: '62%' }}></i><i style={{ height: '92%' }}></i>
              </div>
            </div>
          </div>
          <div className="dash-list">
            <div className="li"><span>Admissões no mês</span><b>3</b></div>
            <div className="li"><span>eSocial · eventos</span><span className="ok">No prazo</span></div>
            <div className="li"><span>Holerites no portal</span><span className="ok">Publicados</span></div>
          </div>
        </div>
      </div>
      <div className="phone">
        <div className="phone-screen">
          <div className="phone-bar"><span className="av"><I.message size={11} color="#fff" sw={2.4} /></span>TRIUM · App do colaborador</div>
          <div className="phone-body">
            <div className="bubble">Seu holerite de junho já está disponível</div>
            <div className="bubble"><div className="doc"><I.fileText size={13} color="#00A87E" />Holerite_junho.pdf</div></div>
            <div className="bubble me">Recebido, obrigado!</div>
          </div>
        </div>
      </div>
      <div className="float f2">
        <div className="dotok"><I.message size={17} color="#00A87E" sw={2.2} /></div>
        <div><b>Holerite no App</b><br />Colaborador recebe no celular</div>
      </div>
    </div>);

}

function HoleriteViz() {
  const I = window.TriumIcons;
  return (
    <div className="mock">
      <div className="float f1"><div className="dotok"><I.check size={18} color="#00A87E" /></div><div><b>eSocial enviado</b><br />Todos os eventos no prazo</div></div>
      <div className="holerite">
        <div className="htitle">Folha de junho <span className="pill">Fechada</span></div>
        <div className="hrow"><span>Colaboradores ativos</span><b>47</b></div>
        <div className="hrow"><span>Admissões no mês</span><b>3</b></div>
        <div className="hrow"><span>Férias programadas</span><b>2</b></div>
        <div className="hrow"><span>Encargos calculados</span><b>INSS FGTS IRRF</b></div>
        <div className="hrow"><span>Holerites no portal</span><b style={{ color: '#00A87E' }}>Disponíveis</b></div>
      </div>
      <div className="float f2"><div className="dotok"><I.message size={18} color="#00A87E" sw={2.4} /></div><div><b>Holerite no App</b><br />Colaborador recebe no celular</div></div>
    </div>);

}

function PanelViz() {
  const I = window.TriumIcons;
  const rows = [
  ['Folha de pagamento', 'Fechada'],
  ['eSocial · eventos do mês', 'No prazo'],
  ['FGTS Digital e DCTFWeb', 'Em dia'],
  ['Holerites no portal', 'Publicados']];

  return (
    <div className="heroviz">
      <div className="float f1">
        <div className="dotok"><I.check size={17} color="#00A87E" /></div>
        <div><b>eSocial enviado</b><br />Todos os eventos no prazo</div>
      </div>
      <div className="panelviz">
        <div className="pv-head">
          <span className="pv-ico"><I.shield size={20} color="#00C896" /></span>
          <div className="pv-title"><h4>Status de conformidade</h4><span>Painel do gestor</span></div>
          <span className="pv-month">junho</span>
        </div>
        {rows.map(([a, b]) =>
        <div className="prow" key={a}>
            <span className="chk"><span className="ring"><I.check size={15} color="#00C896" /></span>{a}</span>
            <span className="st">{b}</span>
          </div>
        )}
      </div>
      <div className="float f2">
        <div className="dotok"><I.message size={17} color="#00A87E" sw={2.2} /></div>
        <div><b>Holerite no App</b><br />Colaborador recebe no celular</div>
      </div>
    </div>);

}

function Hero({ heroViz }) {
  const I = window.TriumIcons;
  const points = ['Implantação em até 60 dias', 'Portal e app do colaborador incluídos', 'Motor de folha TOTVS Protheus', 'EVA, assistente de IA, incluída'];
  const Viz = heroViz === 'holerite' ? HoleriteViz : heroViz === 'panel' ? PanelViz : DeviceViz;
  return (
    <section className="hero" id="topo">
      <div className="glow2"></div>
      <div className="wrap-wide hero-grid">
        <div>
          <span className="tag on-navy">BPO de folha e departamento pessoal · plataforma digital incluída</span>
          <h1>Sua folha sem erro, sem multa e <em>sem ocupar o seu dia</em></h1>
          <p className="lead">A TRIUM assume a folha de pagamento e o departamento pessoal com compliance e eSocial sob controle — motor de cálculo em <strong>TOTVS Protheus</strong> — e um portal digital onde o gestor, o colaborador e os módulos opcionais (ponto, benefícios, recrutamento, denúncias, NR-1, PJs) convivem. Você cuida do negócio. A burocracia fica com a gente.</p>
          <div className="hero-ctas">
            <a className="btn btn-primary" href="#contato">Pedir diagnóstico gratuito</a>
            <a className="btn btn-ghost" href="#portal"><I.monitor size={17} />Conhecer a plataforma</a>
          </div>
          <div className="hero-points">
            {points.map((p) => <div key={p}><I.check size={16} color="#00C896" />{p}</div>)}
          </div>
        </div>
        <Viz />
      </div>
    </section>);

}

function NumbersStrip() {
  const items = [
  ['60 dias', 'para implantar sem parar sua operação'],
  ['100%', 'dos eventos do eSocial no prazo'],
  ['a partir de 10', 'colaboradores: nosso foco'],
  ['1 dia útil', 'para responder qualquer demanda']];

  return (
    <div className="strip"><div className="wrap-wide">
      {items.map(([n, t]) => <div className="item" key={n}><b>{n}</b>{t}</div>)}
    </div></div>);

}

function EngineStrip() {
  return (
    <section className="engine-rail" id="motor" aria-label="Motor de folha TOTVS Protheus">
      <div className="wrap-wide engine-rail-inner">
        <div className="engine-rail-label">
          <span className="engine-rail-mark" aria-hidden="true" />
          <div>
            <span className="engine-rail-kicker">Motor de folha</span>
            <p className="engine-rail-title">Cálculo e eSocial no <strong>TOTVS Protheus</strong></p>
          </div>
        </div>

        <div className="engine-rail-logo" role="img" aria-label="TOTVS Protheus">
          <img
            src="trium/brand/totvs-protheus.png"
            alt="TOTVS Protheus"
            width="476"
            height="223"
            loading="lazy"
            decoding="async"
          />
        </div>

        <p className="engine-rail-thesis">
          A TRIUM orquestra portal, prévia e módulos. O <strong>Protheus</strong> calcula a folha, encargos e a trilha de obrigações — engine de mercado, operação boutique.
        </p>
      </div>
    </section>
  );
}

function Pain() {
  const I = window.TriumIcons;
  const cards = [
  [<I.alert color="#D98E1B" />, 'Risco de multa silencioso', 'Prazos de eSocial, FGTS Digital, NR-1 e obrigações mensais mudam o tempo todo. Quando o erro aparece, a multa já é retroativa e o problema virou seu.'],
  [<I.clock color="#D98E1B" />, 'Seu tempo escorrendo pelo ralo', 'Admissão, férias, atestado, rescisão, benefício, ponto. Sem um DP estruturado, tudo isso para na mesa do dono ou de um administrativo sobrecarregado.'],
  [<I.monitor color="#D98E1B" />, 'Zero visibilidade', 'Você recebe a folha pronta, sem prévia para conferir e sem relatório de custo. O colaborador pede holerite por mensagem e espera dias pela resposta.'],
  [<I.flag color="#D98E1B" />, 'Ferramentas soltas demais', 'Ponto num sistema, benefícios e denúncias em planilha, recrutamento em e-mail, PJs em conversas soltas. Cada demanda vira um sistema novo — e ninguém enxerga o quadro inteiro.']];

  return (
    <section className="sec" id="dores"><div className="wrap reveal">
      <div className="sec-head center">
        <span className="tag">O problema</span>
        <h2>A folha da sua empresa merece mais que um anexo de planilha</h2>
        <p>Na maioria das empresas do nosso porte, a folha é um serviço agregado do escritório contábil. Feita no prazo apertado, sem prévia, sem portal e sem ninguém monitorando o que muda na lei — nem o resto da rotina de gente.</p>
      </div>
      <div className="pain-grid pain-grid-4">
        {cards.map(([ic, h, p]) =>
          <div className="pain" key={h}><div className="ico">{ic}</div><h3>{h}</h3><p>{p}</p></div>
          )}
      </div>
    </div></section>);

}

Object.assign(window, { Header, Hero, NumbersStrip, EngineStrip, Pain });