/* =====================================================================
   ATLAS CORE — Section components
   Exposed on `window` for app.jsx to consume.
   ===================================================================== */

const { useState, useEffect, useRef } = React;

/* ----- Brand mark (inline SVG, matches the logo) ------------------- */
function BrandMark({ size = 32, ringOnly = false, mono = false }) {
  const stroke = mono ? "currentColor" : "var(--text-hi)";
  const planet = mono ? "currentColor" : "var(--text-hi)";
  const node   = mono ? "currentColor" : "var(--accent)";
  return (
    <svg width={size} height={size} viewBox="0 0 200 200" aria-hidden="true">
      <defs>
        <mask id="m-cut">
          <rect x="-200" y="-200" width="400" height="400" fill="white" />
          {/* cut the planet out of the back half of the ring */}
          <circle cx="100" cy="100" r="44" fill="black" />
        </mask>
      </defs>
      {/* Tilted orbital ring; the back half is cut by the planet */}
      <g transform="translate(100 100) rotate(-22)" mask="url(#m-cut)">
        <ellipse cx="0" cy="0" rx="78" ry="26" fill="none" stroke={stroke} strokeWidth="7" />
      </g>
      {/* Front half of the ring drawn on top (so it crosses planet) */}
      <g transform="translate(100 100) rotate(-22)">
        <path d="M -78,0 A 78,26 0 0,1 78,0" fill="none" stroke={stroke} strokeWidth="7" />
      </g>
      {!ringOnly && <circle cx="100" cy="100" r="42" fill={planet} />}
      {/* Accent blue dot riding the ring */}
      <g transform="translate(100 100) rotate(-22)">
        <circle cx="68" cy="-15" r="9" fill={node} />
      </g>
    </svg>
  );
}

/* ----- Header ------------------------------------------------------- */
function SiteHeader() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container">
        <a href="#top" className="brand" aria-label="Atlas Core">
          <span className="mark"><BrandMark size={32} /></span>
          <span className="wordmark">Atlas <span className="core">Core</span></span>
        </a>
        <nav className="nav-links" aria-label="Principal">
          <a href="#sobre">Sobre</a>
          <a href="#solucoes">Soluções</a>
          <a href="#atlas">Atlas</a>
          <a href="#diferenciais">Diferenciais</a>
          <a href="#contato">Contato</a>
        </nav>
        <div className="header-cta">
          <a href="#contato" className="btn btn-ghost btn-sm">Conversar</a>
          <a href="#solucoes" className="btn btn-primary btn-sm">
            Começar <span className="arr">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ----- Hero --------------------------------------------------------- */
function Hero({ headlineVariant = "evolucao" }) {
  const headlines = {
    evolucao: (
      <>O núcleo tecnológico<br />para negócios<br />em <span className="ser">evolução.</span></>
    ),
    inteligencia: (
      <>Inteligência <span className="ser">central</span><br />para produtos,<br />dados e tecnologia.</>
    ),
    operacao: (
      <>Da <span className="ser">operação</span> manual<br />ao <span className="accent">produto</span> digital.</>
    ),
  };
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true" />
      <div className="container">
        <div className="hero-inner">
          <div className="hero-copy">
            <div className="eyebrow fade-up"><span className="dot" />Atlas Core · Tech Studio · 2026</div>
            <h1 className="h-display fade-up d1">{headlines[headlineVariant] || headlines.evolucao}</h1>
            <p className="lede fade-up d2">
              A Atlas Core desenvolve <strong style={{color:"var(--text-hi)", fontWeight: 500}}>SaaS próprios</strong> e
              presta <strong style={{color:"var(--text-hi)", fontWeight: 500}}>consultoria de tecnologia</strong> para
              empresas que querem automatizar processos, estruturar dados e transformar tecnologia em vantagem competitiva.
            </p>
            <div className="hero-actions fade-up d3">
              <a href="#solucoes" className="btn btn-primary">
                Construir com a Atlas <span className="arr">→</span>
              </a>
              <a href="#atlas" className="btn btn-ghost">
                Ver capacidades
              </a>
            </div>
            <div className="hero-meta fade-up d4">
              <div className="item">
                <span className="val">SaaS &amp; Plataformas</span>
                <span className="lbl">Pilar 01</span>
              </div>
              <div className="item">
                <span className="val">Consultoria Tech</span>
                <span className="lbl">Pilar 02</span>
              </div>
              <div className="item">
                <span className="val">Dados · Automação · Estratégia</span>
                <span className="lbl">Camadas operacionais</span>
              </div>
            </div>
          </div>
          <div className="hero-visual fade-up d2">
            <OrbitalStage />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Hero orbital visual ----------------------------------------- */
function OrbitalStage() {
  return (
    <div className="orbital-stage" aria-hidden="true">
      <svg viewBox="-260 -260 520 520">
        {/* outer grid rings */}
        <g className="spin-slow">
          <circle className="ring" r="240" />
          <circle className="ring" r="200" />
        </g>
        {/* tilted orbit rings, layered */}
        <g transform="rotate(-22)" className="spin-mid">
          <ellipse className="ring ring-bright" rx="220" ry="78" />
        </g>
        <g transform="rotate(-22)">
          <ellipse className="ring" rx="160" ry="56" />
        </g>
        <g transform="rotate(8)" className="spin-fast">
          <ellipse className="ring" rx="180" ry="52" />
        </g>

        {/* tick marks around */}
        <g>
          {Array.from({ length: 36 }).map((_, i) => {
            const a = (i / 36) * Math.PI * 2;
            const r1 = 244, r2 = 252;
            return (
              <line
                key={i}
                x1={Math.cos(a) * r1} y1={Math.sin(a) * r1}
                x2={Math.cos(a) * r2} y2={Math.sin(a) * r2}
                stroke="var(--line-2)" strokeWidth="1"
                opacity={i % 9 === 0 ? 1 : 0.4}
              />
            );
          })}
        </g>

        {/* drifting nodes on outer ring */}
        <g className="spin-slow">
          <circle cx="240" cy="0" r="3.5" className="node-dot dim" />
          <circle cx="-170" cy="170" r="3.5" className="node-dot dim" />
          <circle cx="60" cy="-232" r="3.5" className="node-dot dim" />
        </g>

        {/* core glow */}
        <circle r="80" className="node-dot core-glow" />

        {/* core (planet) */}
        <g className="pulse-core">
          <circle r="58" className="core" />
        </g>
        <circle r="58" fill="none" stroke="rgba(255,255,255,0.15)" />

        {/* accent node on tilted orbit */}
        <g transform="rotate(-22)" className="spin-mid">
          <g transform="translate(204 -26)">
            <circle r="14" fill="var(--accent)" opacity="0.25" />
            <circle r="8" className="node-dot node-pulse" />
          </g>
        </g>

        {/* small labels */}
        <g>
          <text x="-238" y="-200" className="label-pill">N 41°·24'</text>
          <text x="160"  y="-200" className="label-pill">CORE</text>
          <text x="-238" y="218"  className="label-pill">latitude · 00</text>
          <text x="160"  y="234"  className="label-pill">orbit · 02</text>
        </g>
      </svg>
    </div>
  );
}

/* ----- Trust strip -------------------------------------------------- */
function TrustStrip() {
  return (
    <div className="strip">
      <div className="container strip-inner">
        <span className="label-mono">Núcleo operacional para</span>
        <div className="strip-logos">
          <span>operações <em>logísticas</em></span>
          <span>varejo · D2C</span>
          <span><em>healthtech</em></span>
          <span>fintech</span>
          <span>indústria 4.0</span>
          <span><em>edtech</em></span>
        </div>
      </div>
    </div>
  );
}

/* ----- Sobre / Manifesto ------------------------------------------- */
function About() {
  return (
    <section className="about" id="sobre">
      <div className="container">
        <div className="about-grid">
          <aside className="about-side">
            <div className="eyebrow"><span className="dot" />01 · Sobre</div>
            <h2 className="h-section">A empresa que <span className="ser">opera</span> tecnologia.</h2>
            <p className="lede">Não somos uma agência. Não somos uma fábrica de software. Somos o núcleo onde produto, consultoria e execução se encontram.</p>
          </aside>
          <div className="about-main">
            <p className="body-lg">
              A Atlas Core combina <span className="ser">produto</span>, <span className="ser">consultoria</span> e <span className="ser">execução técnica</span> para transformar problemas complexos em soluções digitais simples, escaláveis e mensuráveis.
              <br /><br />
              <span className="muted">Atuamos onde a estratégia precisa virar sistema, onde o processo precisa virar dado, e onde o dado precisa virar decisão. Construímos SaaS próprios e operamos como time técnico dentro de empresas que querem evoluir o jeito como trabalham.</span>
            </p>

            <div className="pillar-list">
              <div className="pillar">
                <span className="num">Pilar 01 · SaaS</span>
                <h4>Produtos digitais próprios</h4>
                <p>Plataformas escaláveis, automações verticais e ferramentas web criadas para resolver dores reais de mercado — não demos.</p>
              </div>
              <div className="pillar">
                <span className="num">Pilar 02 · Consulting</span>
                <h4>Consultoria de tecnologia</h4>
                <p>Diagnóstico, arquitetura e execução. Times técnicos embarcados que substituem operação manual por sistema vivo.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Solutions ---------------------------------------------------- */
const SOLUTIONS = [
  {
    n: "S/01",
    title: "SaaS Products",
    body: "Produtos digitais próprios, escaláveis e focados em resolver dores específicas de mercado. Da hipótese ao MVP, do MVP ao crescimento.",
    icon: (
      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M7 8h10M7 12h6"/></svg>
    ),
    tag: "Produto",
  },
  {
    n: "S/02",
    title: "Tech Consulting",
    body: "Consultoria estratégica e técnica para empresas que precisam sair do operacional manual e evoluir para processos digitais.",
    icon: (
      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>
    ),
    tag: "Diagnóstico → Execução",
  },
  {
    n: "S/03",
    title: "Automation",
    body: "Automação de rotinas, integrações, fluxos internos e tarefas repetitivas. Tudo que pode ser automatizado, deve ser.",
    icon: (
      <svg viewBox="0 0 24 24"><path d="M4 7h7M4 17h11"/><circle cx="14" cy="7" r="3"/><circle cx="18" cy="17" r="3"/><path d="M11 7l3 0M15 17l3 0"/></svg>
    ),
    tag: "Eficiência operacional",
  },
  {
    n: "S/04",
    title: "Data & Dashboards",
    body: "Estruturação de dados, indicadores acionáveis e dashboards que sustentam decisões — não bonitos, úteis.",
    icon: (
      <svg viewBox="0 0 24 24"><path d="M4 20h16"/><rect x="5" y="11" width="3" height="9"/><rect x="10.5" y="6" width="3" height="14"/><rect x="16" y="14" width="3" height="6"/></svg>
    ),
    tag: "Decisão por dado",
  },
  {
    n: "S/05",
    title: "Web Systems",
    body: "Sistemas web, plataformas internas, portais e ferramentas de gestão sob medida. Construídos para durar e crescer.",
    icon: (
      <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M7 6.5h.01M10 6.5h.01"/></svg>
    ),
    tag: "Engenharia aplicada",
  },
  {
    n: "S/06",
    title: "Business Tech Strategy",
    body: "Apoio estratégico para transformar necessidades de negócio em soluções tecnológicas práticas e mensuráveis.",
    icon: (
      <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4.2 1 6.3L12 17.8 6.5 20.5l1-6.3L3 10l6-1z"/></svg>
    ),
    tag: "Visão de negócio",
  },
];

function Solutions() {
  return (
    <section className="solutions" id="solucoes">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />02 · Soluções</div>
          <h2 className="h-section">Seis frentes para tirar tecnologia <span className="ser">do papel.</span></h2>
          <p className="lede">Da concepção do produto à operação do dia-a-dia: cada frente é construída para resolver um problema específico do negócio.</p>
        </div>

        <div className="solutions-grid">
          {SOLUTIONS.map((s, i) => (
            <article key={s.n} className="sol-card">
              <div className="glyph">{s.icon}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="tag">
                <span>{s.tag}</span>
                <span className="arr">→</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Atlas Visual (concept section) ------------------------------ */
function AtlasVisual() {
  return (
    <section className="atlas-visual" id="atlas">
      <div className="atlas-visual-bg" aria-hidden="true">
        <svg className="latlong" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid slice">
          {/* horizontal lat curves */}
          {[0.15, 0.3, 0.45, 0.5, 0.55, 0.7, 0.85].map((p, i) => (
            <path key={"h"+i}
              d={`M -50 ${600*p} Q 400 ${600*p + (p-0.5)*120} 850 ${600*p}`}
              fill="none" stroke="var(--line)" />
          ))}
          {/* vertical long curves */}
          {[0.1,0.25,0.4,0.5,0.6,0.75,0.9].map((p,i)=>(
            <path key={"v"+i}
              d={`M ${800*p} -30 Q ${800*p + (p-0.5)*180} 300 ${800*p} 630`}
              fill="none" stroke="var(--line)" />
          ))}
        </svg>
        <div className="glow" />
      </div>

      <div className="container">
        <div className="layout">
          <div className="copy">
            <div className="eyebrow"><span className="dot" />03 · Atlas</div>
            <h2 className="h-section">Um <span className="ser">mapa</span> operacional<br />em volta de um núcleo.</h2>
            <p className="lede">Pense na sua empresa como um sistema com camadas: produto, dado, processo e decisão. A Atlas Core orquestra essas camadas a partir de um núcleo único — para que cada movimento puxe o próximo na direção certa.</p>

            <div style={{display:"flex", gap:8, flexWrap:"wrap", marginTop:8}}>
              <span className="tag-pill"><span className="d"/>Produto</span>
              <span className="tag-pill"><span className="d"/>Dados</span>
              <span className="tag-pill"><span className="d"/>Automação</span>
              <span className="tag-pill"><span className="d"/>Estratégia</span>
            </div>

            <div className="stat-row">
              <div className="stat">
                <span className="v">2 <span className="ser">pilares</span></span>
                <span className="l">SaaS · Consultoria</span>
              </div>
              <div className="stat">
                <span className="v">6 frentes</span>
                <span className="l">Tech capabilities</span>
              </div>
              <div className="stat">
                <span className="v">1 <span className="ser">núcleo</span></span>
                <span className="l">Atlas Core</span>
              </div>
            </div>
          </div>

          <div className="diagram-wrap">
            <AtlasDiagram />
          </div>
        </div>
      </div>
    </section>
  );
}

function AtlasDiagram() {
  const labels = [
    { a: -75, t: "SaaS" },
    { a: -25, t: "Consultoria" },
    { a:  25, t: "Automação" },
    { a:  75, t: "Dados" },
    { a: 125, t: "Sistemas" },
    { a: 195, t: "Estratégia" },
  ];
  return (
    <svg viewBox="-260 -260 520 520" aria-hidden="true">
      {/* concentric rings */}
      {[100, 150, 200, 240].map((r, i) => (
        <circle key={r} r={r} cx="0" cy="0" fill="none" stroke="var(--line)" />
      ))}
      <circle r="240" fill="none" stroke="var(--line-2)" strokeDasharray="2 6" />

      {/* radial spokes */}
      {Array.from({ length: 12 }).map((_, i) => {
        const a = (i / 12) * Math.PI * 2;
        return (
          <line key={i}
            x1={Math.cos(a) * 60} y1={Math.sin(a) * 60}
            x2={Math.cos(a) * 240} y2={Math.sin(a) * 240}
            stroke="var(--line)" />
        );
      })}

      {/* outer label nodes */}
      {labels.map((L, i) => {
        const rad = (L.a * Math.PI) / 180;
        const x = Math.cos(rad) * 220;
        const y = Math.sin(rad) * 220;
        return (
          <g key={i}>
            <circle cx={x} cy={y} r="5" fill="var(--accent)" />
            <circle cx={x} cy={y} r="11" fill="none" stroke="var(--accent)" opacity="0.35" />
            <text
              x={x + (Math.cos(rad) > 0 ? 18 : -18)}
              y={y + 4}
              textAnchor={Math.cos(rad) > 0 ? "start" : "end"}
              fontFamily="var(--f-mono)" fontSize="11" letterSpacing="0.14em"
              fill="var(--text-mid)"
              style={{ textTransform: "uppercase" }}>
              {L.t}
            </text>
          </g>
        );
      })}

      {/* core glow + planet */}
      <circle r="100" fill="url(#core-grad)" />
      <defs>
        <radialGradient id="core-grad">
          <stop offset="0%" stopColor="rgba(110,140,255,0.55)" />
          <stop offset="60%" stopColor="rgba(110,140,255,0.10)" />
          <stop offset="100%" stopColor="rgba(110,140,255,0)" />
        </radialGradient>
      </defs>
      <circle r="58" fill="#F6F7FA" />
      <circle r="58" fill="none" stroke="rgba(255,255,255,0.2)" />

      {/* tilted ring crossing core */}
      <g transform="rotate(-22)">
        <ellipse rx="200" ry="68" fill="none" stroke="var(--line-3)" strokeWidth="1.2" />
      </g>
      <g transform="rotate(-22)" className="spin-mid">
        <g transform="translate(186 -30)">
          <circle r="14" fill="var(--accent)" opacity="0.3" />
          <circle r="8" fill="var(--accent)" />
        </g>
      </g>

      {/* center label */}
      <text x="0" y="-78" textAnchor="middle"
        fontFamily="var(--f-mono)" fontSize="10" letterSpacing="0.2em"
        fill="var(--text-lo)" style={{textTransform:"uppercase"}}>core · 00</text>
    </svg>
  );
}

/* ----- Diferenciais / Edge ----------------------------------------- */
const EDGE = [
  { idx: "E/01", title: "Produto + consultoria + execução, no mesmo time",
    body: "Não trocamos cinco fornecedores por um. Trocamos cinco contratos por uma equipe que pensa, decide e entrega — junto." },
  { idx: "E/02", title: "Soluções práticas, não slides bonitos",
    body: "Diagnóstico vira backlog. Backlog vira sistema. Sistema vira métrica. Tudo o que produzimos precisa rodar em produção." },
  { idx: "E/03", title: "Visão de negócio com profundidade técnica",
    body: "Conversamos com diretoria sobre estratégia e com engenharia sobre arquitetura — na mesma reunião, sem perder ninguém." },
  { idx: "E/04", title: "SaaS e sistemas pensados para escalar",
    body: "Construímos com bases sólidas: tipagem, testes, observabilidade e arquitetura que aguenta o próximo crescimento, não o atual." },
  { idx: "E/05", title: "Automação como alavanca de eficiência",
    body: "Cada hora salva em rotina é uma hora investida em decisão. Tratamos automação como um produto contínuo, não um projeto único." },
  { idx: "E/06", title: "Tecnologia aplicada diretamente ao resultado",
    body: "Métrica de sucesso é o número do negócio melhorando — receita, custo, tempo, conversão — não a entrega da feature." },
];

function Edge() {
  return (
    <section className="edge on-paper" id="diferenciais">
      <div className="container">
        <div className="edge-head">
          <div>
            <div className="eyebrow"><span className="dot" />04 · Diferenciais</div>
            <h2 className="h-section" style={{marginTop:16}}>Por que a Atlas Core é <span className="ser">diferente.</span></h2>
          </div>
          <p className="lede">Seis princípios operacionais que separam quem entrega tecnologia de quem entrega resultado.</p>
        </div>

        <div className="edge-grid">
          {EDGE.map((e, i) => (
            <article key={e.idx} className="edge-card">
              <div className="idx">{e.idx}</div>
              <div>
                <span className="accent-bar" />
                <h4>{e.title}</h4>
                <p>{e.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- Process ----------------------------------------------------- */
const PROCESS = [
  { n: "01 · Mapear",   title: "Diagnóstico",
    body: "Entendemos o problema antes de propor solução. Pessoas, processo, dado, sistema. Onde a operação trava." },
  { n: "02 · Desenhar", title: "Arquitetura",
    body: "Definimos a arquitetura técnica e de produto. Decisões irreversíveis com pouco código, decisões reversíveis com muito." },
  { n: "03 · Construir", title: "Execução",
    body: "Squads enxutos, ciclos curtos, releases frequentes. Engenharia que entrega em ritmo de produto, não de projeto." },
  { n: "04 · Operar",    title: "Operação contínua",
    body: "Lançar não é chegar. Monitoramos, medimos e iteramos — para que o sistema continue gerando valor no mês 12." },
];

function Process() {
  return (
    <section className="process">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot" />05 · Operação</div>
          <h2 className="h-section">Como a gente <span className="ser">trabalha.</span></h2>
        </div>
        <div className="process-grid">
          {PROCESS.map((p, i) => (
            <div key={i} className="process-step">
              <span className="step-num">{p.n}</span>
              <h5>{p.title}</h5>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ----- CTA Final --------------------------------------------------- */
function CTAFinal() {
  return (
    <section className="cta-final" id="contato">
      <div className="bg-orbit" aria-hidden="true">
        <svg viewBox="-260 -260 520 520">
          <circle r="240" />
          <circle r="190" />
          <circle r="140" />
          <g transform="rotate(-22)" className="spin-mid">
            <ellipse rx="240" ry="80" fill="none" stroke="var(--line-2)" />
          </g>
          <g transform="rotate(-22)" className="spin-mid">
            <g transform="translate(228 -30)">
              <circle r="14" fill="var(--accent)" opacity="0.3" />
              <circle r="7" fill="var(--accent)" />
            </g>
          </g>
          <circle r="40" fill="#F6F7FA" />
        </svg>
      </div>

      <div className="container">
        <div className="eyebrow center"><span className="dot" />Pronto para mover</div>
        <h2 className="h-display">Construa seu <span className="ser">núcleo</span><br />tecnológico.</h2>
        <p className="lede">Conversamos sobre o problema antes da proposta. Da consultoria pontual ao SaaS sob medida — a Atlas Core entra onde a operação precisa virar produto.</p>
        <div className="hero-actions">
          <a href="mailto:contato@atlascore.app.br" className="btn btn-primary">
            Falar com o time <span className="arr">→</span>
          </a>
          <a href="#sobre" className="btn btn-ghost">
            Conhecer melhor
          </a>
        </div>
      </div>
    </section>
  );
}

/* ----- Footer ------------------------------------------------------- */
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a href="#top" className="brand">
              <span className="mark"><BrandMark size={36} /></span>
              <span className="wordmark" style={{fontSize:19}}>Atlas <span className="core">Core</span></span>
            </a>
            <p>SaaS próprios, consultoria de tecnologia e o núcleo entre produto, dado e decisão.</p>
            <span className="label-mono">Atlascore.app.br</span>
          </div>

          <div className="footer-col">
            <h6>Soluções</h6>
            <ul>
              <li><a href="#solucoes">SaaS Products</a></li>
              <li><a href="#solucoes">Tech Consulting</a></li>
              <li><a href="#solucoes">Automation</a></li>
              <li><a href="#solucoes">Data &amp; Dashboards</a></li>
              <li><a href="#solucoes">Web Systems</a></li>
              <li><a href="#solucoes">Business Tech Strategy</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h6>Empresa</h6>
            <ul>
              <li><a href="#sobre">Sobre</a></li>
              <li><a href="#atlas">Como pensamos</a></li>
              <li><a href="#diferenciais">Diferenciais</a></li>
              <li><a href="#contato">Contato</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h6>Conexão</h6>
            <ul>
              <li><a href="mailto:contato@atlascore.app.br">contato@atlascore.app.br</a></li>
              <li><a href="#contato">Agendar conversa</a></li>
              <li><a href="#contato">LinkedIn</a></li>
              <li><a href="#contato">GitHub</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span className="label-mono">© 2026 Atlas Core · Núcleo tecnológico</span>
          <span className="label-mono">Made with strategy &amp; execution</span>
        </div>
      </div>
    </footer>
  );
}

/* ----- Export to window ------------------------------------------- */
Object.assign(window, {
  SiteHeader, Hero, TrustStrip, About, Solutions, AtlasVisual,
  Edge, Process, CTAFinal, SiteFooter, BrandMark,
});