/* Services grid + Manifesto interactive */

const ServiceIcon = ({ name }) => {
  const icons = {
    book: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>,
    shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M20 13c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V5l8-3 8 3v8z"/><path d="m9 12 2 2 4-4"/></svg>,
    chart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="m7 14 4-4 4 4 5-6"/></svg>,
    brief: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="14" x="2" y="7" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>,
    users: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>,
    cpu: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><rect width="16" height="16" x="4" y="4" rx="2"/><rect width="6" height="6" x="9" y="9"/><path d="M15 2v2"/><path d="M15 20v2"/><path d="M2 15h2"/><path d="M2 9h2"/><path d="M20 15h2"/><path d="M20 9h2"/><path d="M9 2v2"/><path d="M9 20v2"/></svg>,
  };
  return icons[name];
};

const Services = () => {
  const items = [
    { icon:'book',   title:'Contabilidade Integral',  body:'Escrituração, fiscal, societária e paralegal — integradas à controladoria do seu negócio.' },
    { icon:'shield', title:'Compliance e Auditoria',   body:'Prevenção de perdas, conformidade regulatória e proteção patrimonial irrestrita.' },
    { icon:'chart',  title:'FP&A e BI',                body:'Planejamento, análise financeira e ferramentas avançadas de inteligência de negócios.' },
    { icon:'brief',  title:'M&A, IPO e RJ',            body:'Reestruturação de controles, captação de recursos, fusões, aquisições e recuperação judicial.' },
    { icon:'users',  title:'Recursos Humanos',         body:'Folha, pró-labore, benefícios e contencioso trabalhista. Ampla cobertura para PMEs.' },
    { icon:'brief',  title:'Consultoria Tributária',   body:'Apuração de custos, formação de preços competitivos e contencioso fiscal estratégico.' },
  ];
  return (
    <section className="section" id="servicos">
      <div className="container">
        <div className="section-eyebrow">Nossos Serviços</div>
        <h2 className="section-title">Um hub completo. Um único parceiro.</h2>
        <p className="section-sub">Atendemos de forma ampla as áreas societária, regulatória, fiscal, financeira e estratégica — com expertise em projetos que impactam EBITDA, margem de contribuição e resultado.</p>
        <div className="svc-grid">
          {items.map(it => (
            <div className="svc-card" key={it.title}>
              <div className="svc-icon"><ServiceIcon name={it.icon} /></div>
              <h3 className="svc-title">{it.title}</h3>
              <p className="svc-body">{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const MANIFESTO = [
  { L:'P', word:'Promover',      title:'Progredir com Parceria',              body:'Progredir com Parceria, Prosperidade, Pertencimento e Pluralidade de Pessoas Perspicazes, Presentes, Proativas, Positivas, com Propósito e Prontidão.' },
  { L:'H', word:'Harmonizar',    title:'Habilidades + Humanidade',            body:'Harmonizar as Habilidades Hodiernas com Horizonte Histórico de Heroísmo, Humanidade, Humildade, Honra e Honestidade.' },
  { L:'R', word:'Ressignificar', title:'Reinventar com Resiliência',          body:'Ressignificar Riscos para Renovar e Reinventar com Respeito, Resistência Resoluta e Resiliência.' },
  { L:'I', word:'Interagir',     title:'Integridade, Intuição, Instinto',     body:'Interagir com Integridade, Intuição e Instinto para Impulsionar Integração de Inteligências.' },
  { L:'N', word:'Normalizar',    title:'Acolher o Novo, Preservar a Natureza',body:'Normalizar o Novo e a Normatização Necessária para Nutrir a Notoriedade do Negócio sem Negligenciar sua Natureza.' },
  { L:'E', word:'Enfatizar',     title:'Expertise, Estratégia, Equipe',       body:'Enfatizar Expertise, Estratégia e Entregar em Equipe para Encorajar um Ecossistema com Energia, Esforço, Eficiência, Ética, Empatia e Entusiasmo.' },
  { L:'F', word:'Fortalecer',    title:'Fé, Família, Fraternidade',           body:'Fortalecer a Fé na Família, Fazendo da Fraternidade uma Forte Fonte de Felicidade.' },
  { L:'F', word:'Florescer',     title:'Foco, Força, Futuro',                 body:'Flexibilizar com Foco e Força é Fundamental para Florescer o Futuro com Fartura.' },
  { L:'A', word:'Acelerar',      title:'Ambição, Audácia, Astúcia',           body:'Acelerar com Ambição, Audácia e Astúcia para Avançar, Almejando Ascensão e Abundância no Ambiente Altruístico.' },
  { L:'C', word:'Construir',     title:'Caminhos para o Crescimento',         body:'Construir Caminhos para o Crescimento Contínuo com Coragem Constante, Criatividade, Consistência, Coerência, Consciência.' },
  { L:'C', word:'Conectar',      title:'Conexões Colaborativas',              body:'Criar Conexões Colaborativas com Compromisso, Confiança, Credibilidade, Clareza e Carisma.' },
];

const Manifesto = () => {
  const [active, setActive] = React.useState(3);
  const it = MANIFESTO[active];
  return (
    <section className="section section-dark" id="valores">
      <div className="container">
        <div className="section-eyebrow">Nossos Valores</div>
        <h2 className="section-title">P H R I N E F F A C C</h2>
        <p className="section-sub">Onze letras, onze valores. Cada uma é um pilar do nosso ecossistema — e juntas formam a decisão de existir como hub de inteligência, expertise e proatividade.</p>
        <div className="manifesto-grid">
          {MANIFESTO.map((m, i) => (
            <div key={i} className={'manifesto-tile' + (i === active ? ' active' : '')} onClick={() => setActive(i)}>
              <div className="manifesto-glyph">{m.L}</div>
              <div className="manifesto-word">{m.word}</div>
            </div>
          ))}
        </div>
        <div className="manifesto-detail">
          <h4>{it.L} — {it.title}</h4>
          <p>{it.body}</p>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services, Manifesto });