/* global React */
const { useState, useRef, useEffect } = React;

/* ======================================================
   SERVICES DATA — exact content from brief
   ====================================================== */
const CLUSTERS = [
  {
    group: 'core', num: '01', name: 'Strategy', short: 'Strategy',
    desc: 'Definimos a estratégia que orienta marcas, produtos e organizações.',
    items: [
      ['Brand Strategy', 'Estratégia, propósito e posicionamento da marca.'],
      ['Brand Architecture', 'Organização de marcas, produtos e serviços.'],
      ['Naming', 'Criação de nomes para marcas, produtos e iniciativas.'],
      ['Verbal Identity', 'Definição da linguagem e expressão da marca.'],
      ['Brand Positioning', 'Definição dos diferenciais e da percepção desejada.'],
      ['Brand Narrative', 'Construção da narrativa central da marca.'],
      ['Tone of Voice', 'Diretrizes para comunicação verbal.'],
      ['Messaging Framework', 'Estruturação das mensagens-chave da marca.'],
      ['Communication Territories', 'Definição dos temas estratégicos de comunicação.'],
    ],
  },
  {
    group: 'core', num: '02', name: 'Brand Design', short: 'Brand Design',
    desc: 'Criamos identidades e sistemas de marca consistentes, relevantes e preparados para evoluir.',
    items: [
      ['Brand Identity', 'Desenvolvimento da identidade visual da marca.'],
      ['Visual Identity Systems', 'Criação de sistemas visuais flexíveis e escaláveis.'],
      ['Brand Applications', 'Aplicação da marca em diferentes pontos de contato.'],
      ['Motion Identity', 'Princípios visuais de movimento e animação.'],
      ['Packaging Design', 'Design estratégico para embalagens e produtos.'],
      ['Environmental Graphics', 'Comunicação visual aplicada a ambientes físicos.'],
      ['Brand Guidelines', 'Diretrizes para uso consistente da marca.'],
      ['Brand Governance', 'Gestão e manutenção da consistência da marca.'],
    ],
  },
  {
    group: 'core', num: '03', name: 'Editorial & Information Design', short: 'Editorial &\nInformation Design',
    desc: 'Transformamos informação em publicações, relatórios e experiências editoriais claras e significativas.',
    items: [
      ['Editorial Design', 'Desenvolvimento de projetos editoriais impressos e digitais.'],
      ['Graphic Editorial Projects', 'Criação de sistemas gráficos para publicações.'],
      ['Book Design', 'Projeto visual completo para livros.'],
      ['Cover Design', 'Criação de capas para publicações.'],
      ['Book Layout', 'Diagramação e organização de conteúdo editorial.'],
      ['Magazine Design', 'Projeto gráfico para revistas e periódicos.'],
      ['Catalog Design', 'Desenvolvimento de catálogos institucionais e culturais.'],
      ['E-books', 'Publicações desenvolvidas para ambientes digitais.'],
      ['Information Design', 'Organização visual de conteúdos complexos.'],
      ['Data Visualization', 'Representação visual de dados e indicadores.'],
      ['Infographics', 'Síntese visual de informações e narrativas.'],
      ['Annual Reports', 'Relatórios anuais corporativos e institucionais.'],
      ['ESG Reports', 'Relatórios de indicadores ambientais, sociais e de governança.'],
      ['Sustainability Reports', 'Relatórios de sustentabilidade e impacto.'],
      ['Corporate Publications', 'Publicações institucionais e corporativas.'],
      ['Investor Communications', 'Materiais para investidores e stakeholders.'],
    ],
  },
  {
    group: 'core', num: '04', name: 'Culture & Institutional Communication', short: 'Culture &\nInstitutional',
    desc: 'Desenvolvemos sistemas de comunicação para instituições culturais, educacionais e organizações de impacto.',
    items: [
      ['Cultural Branding', 'Estratégia e identidade para projetos e instituições culturais.'],
      ['Cultural Publications', 'Publicações voltadas à difusão cultural e institucional.'],
      ['Exhibition Catalogs', 'Catálogos para exposições, mostras e acervos.'],
      ['Art Books', 'Livros dedicados à arte, cultura e patrimônio.'],
      ['Educational Materials', 'Materiais educativos para projetos e instituições.'],
      ['Memorial Publications', 'Publicações voltadas à memória e ao legado institucional.'],
      ['Exhibition Design', 'Sistemas gráficos para exposições e mostras.'],
      ['Museum Communication Systems', 'Comunicação para museus e espaços culturais.'],
      ['Cultural Programs Communication', 'Estratégias e materiais para programas culturais.'],
      ['Incentive Law Projects Support Materials', 'Materiais para projetos vinculados a leis de incentivo.'],
    ],
  },
  {
    group: 'comp', num: '05', name: 'Digital Experience', short: 'Digital\nExperience',
    desc: 'Projetamos experiências digitais centradas nas pessoas e orientadas a resultados.',
    items: [
      ['UX Design', 'Experiências digitais centradas no usuário.'],
      ['User Journey Architecture', 'Mapeamento e estruturação da jornada do usuário.'],
      ['Information Architecture', 'Organização de conteúdos e funcionalidades.'],
      ['Digital Product Design', 'Design de plataformas e produtos digitais.'],
      ['Landing Pages', 'Páginas focadas em campanhas e geração de leads.'],
      ['Sales Pages', 'Páginas estruturadas para conversão e vendas.'],
      ['Conversion Design', 'Otimização de experiências para resultados.'],
      ['Wireframes & Prototypes', 'Estruturas e protótipos para validação de soluções.'],
      ['User Flows', 'Definição de fluxos e caminhos de navegação.'],
    ],
  },
  {
    group: 'comp', num: '06', name: 'Content & Social Systems', short: 'Content &\nSocial Systems',
    desc: 'Estruturamos sistemas de conteúdo para fortalecer a comunicação das marcas.',
    items: [
      ['Social Media Strategy', 'Estratégia para posicionamento em redes sociais.'],
      ['Editorial Planning', 'Planejamento editorial e calendário de conteúdo.'],
      ['Content Strategy', 'Estratégia para produção e distribuição de conteúdo.'],
      ['Content Design', 'Design aplicado à comunicação e ao conteúdo.'],
      ['Social Identity Systems', 'Sistemas visuais específicos para redes sociais.'],
      ['Visual Systems for Social Media', 'Diretrizes visuais para ambientes digitais.'],
      ['Templates & Toolkits', 'Bibliotecas e modelos para produção escalável.'],
      ['Presentation Design', 'Apresentações institucionais, comerciais e estratégicas.'],
      ['Digital Campaign Assets', 'Peças visuais para campanhas digitais.'],
    ],
  },
  {
    group: 'inno', num: '07', name: 'AI Creative Studio', short: 'AI Creative\nStudio',
    desc: 'Combinamos direção criativa, tecnologia e curadoria humana para ampliar possibilidades de criação e produção.',
    items: [
      ['AI Image Creation', 'Criação de imagens com inteligência artificial.'],
      ['AI Video Production', 'Produção audiovisual assistida por IA.'],
      ['Key Visual Development', 'Desenvolvimento de conceitos visuais para campanhas e marcas.'],
      ['Campaign Visual Concepts', 'Direção visual para campanhas de comunicação.'],
      ['AI Motion Content', 'Conteúdos animados produzidos com IA.'],
      ['Generative Content Systems', 'Sistemas de produção criativa assistidos por IA.'],
      ['Prompt Libraries', 'Bibliotecas de prompts e padrões criativos.'],
      ['AI Creative Workflows', 'Fluxos de trabalho integrando IA e criatividade.'],
      ['AI Creative Consulting', 'Consultoria para adoção estratégica de IA.'],
      ['AI Governance Guidelines', 'Diretrizes para uso responsável da inteligência artificial.'],
    ],
  },
];

const GROUPS = [
  { id: 'core', label: 'Core Clusters', intro: 'Os clusters que definem nossa prática e concentram nossa principal especialidade.' },
  { id: 'comp', label: 'Complementary Clusters', intro: 'Competências que ampliam e potencializam nossos projetos principais.' },
  { id: 'inno', label: 'Innovation Cluster', intro: 'Exploramos novas possibilidades criativas por meio da inteligência artificial e de processos de produção assistidos por tecnologia.' },
];

/* ======================================================
   ORBIT — animated capability constellation
   ====================================================== */
function Orbit({ onPick, active }) {
  const [hover, setHover] = useState(null);
  const n = CLUSTERS.length;
  const radius = 39; // % from center
  const nodes = CLUSTERS.map((c, i) => {
    const a = (-90 + i * (360 / n)) * Math.PI / 180;
    return { ...c, i, x: 50 + radius * Math.cos(a), y: 50 + radius * Math.sin(a) };
  });
  const focus = hover != null ? nodes[hover] : null;

  return (
    <div className={'orbit' + (hover != null ? ' is-hover' : '')}>
      <svg className="orbit-lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
        {nodes.map(nd => (
          <line key={nd.i} x1="50" y1="50" x2={nd.x} y2={nd.y}
            className={'oline' + ((hover === nd.i || active === nd.i) ? ' on' : '')}
            vectorEffect="non-scaling-stroke" />
        ))}
        <circle cx="50" cy="50" r={radius} className="oring" vectorEffect="non-scaling-stroke" />
        <circle cx="50" cy="50" r={radius * 0.62} className="oring faint" vectorEffect="non-scaling-stroke" />
      </svg>

      <div className="orbit-core">
        <img src="assets/morse-symbol-white.png" alt="Morse" className="orbit-mark" />
      </div>

      <div className="orbit-rotor">
        {nodes.map(nd => (
          <button key={nd.i} type="button"
            className={'orbit-node' + ((hover === nd.i || active === nd.i) ? ' on' : '')}
            style={{ left: nd.x + '%', top: nd.y + '%' }}
            onMouseEnter={() => setHover(nd.i)}
            onMouseLeave={() => setHover(h => (h === nd.i ? null : h))}
            onClick={() => onPick(nd.i)}
            aria-label={nd.name}>
            <span className="orbit-node-in">
              <span className="on-name">{nd.short}</span>
            </span>
          </button>
        ))}
      </div>

    </div>
  );
}

/* ======================================================
   CLUSTER ACCORDION ROW
   ====================================================== */
function ClusterRow({ c, open, onToggle, registerRef }) {
  const bodyRef = useRef(null);
  return (
    <div className={'cl' + (open ? ' open' : '')} ref={el => registerRef(c.i, el)}>
      <button type="button" className="cl-head" onClick={onToggle} aria-expanded={open}>
        <span className="cl-num mono">—</span>
        <span className="cl-name">{c.name}</span>
        <span className="cl-desc">{c.desc}</span>
        <span className="cl-toggle" aria-hidden="true"><span className="bar h" /><span className="bar v" /></span>
      </button>
      <div className="cl-body" ref={bodyRef}
        style={{ maxHeight: open ? bodyRef.current ? bodyRef.current.scrollHeight + 'px' : '2000px' : '0px' }}>
        <div className="cl-grid">
          {c.items.map(([name, desc], j) => (
            <div className="cl-item" key={j} tabIndex={0}>
              <span className="ci-name">{name}</span>
              <span className="ci-desc">{desc}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ======================================================
   SERVICES SECTION
   ====================================================== */
function Services() {
  const [open, setOpen] = useState(() => new Set());
  const refs = useRef({});
  const registerRef = (i, el) => { if (el) refs.current[i] = el; };

  const toggle = (i) => setOpen(prev => {
    const next = new Set(prev);
    if (next.has(i)) next.delete(i); else next.add(i);
    return next;
  });

  const pick = (i) => {
    setOpen(prev => { const next = new Set(prev); next.add(i); return next; });
    requestAnimationFrame(() => {
      const el = refs.current[i];
      if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth' });
    });
  };

  return (
    <section id="servicos" className="section wrap">
      <div className="section-head reveal">
        <div className="section-num">/02</div>
        <div>
          <div className="section-label">Our Capabilities</div>
          <h2 className="svc-heading">
            <span className="key">Design estratégico</span> <span className="mute">para marcas,
            publicações e sistemas de comunicação.</span>
          </h2>
        </div>
      </div>

      <div className="orbit-wrap reveal">
        <Orbit onPick={pick} active={null} />
      </div>

      <div className="clusters">
        {GROUPS.map(g => (
          <div className="cl-group reveal" key={g.id}>
            <div className="cl-group-head">
              <div className="section-label">{g.label}</div>
              <span className="cl-group-sep" aria-hidden="true">//</span>
              <p className="cl-group-intro">{g.intro}</p>
            </div>
            <div className="cl-list">
              {CLUSTERS.map((c, i) => c.group === g.id ? (
                <ClusterRow key={i} c={{ ...c, i }} open={open.has(i)}
                  onToggle={() => toggle(i)} registerRef={registerRef} />
              ) : null)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Services = Services;