// sections.jsx — Deepstrat landing sections (monochromatic + brand highlights)

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// ─────────── Icon physics for the BrandSpinBand background ───────────
// Animates the Odoo module icons floating behind the lockup with Brownian
// drift, mouse-cursor repulsion, a spring force pulling them back to their
// base position, and friction. Runs as a single global rAF loop — NOT tied
// to React's effect lifecycle, so a hydration error elsewhere (e.g. inside
// Spotlight) can't cancel it. Idempotent: a flag prevents double-starts.
function installIconPhysics() {
  if (typeof window === 'undefined' || window.__bsbIconsBooted) return;

  const PUSH_RADIUS     = 130;   // smaller halo
  const PUSH_STRENGTH   = 900;   // gentler shove (~38% of previous)
  const DRIFT_STRENGTH  = 140;
  const RETURN_STRENGTH = 2.2;
  const DAMPING_PER_S   = 0.10;

  let mouseX = -1e6, mouseY = -1e6;
  window.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; }, { passive: true });
  document.addEventListener('mouseleave', () => { mouseX = -1e6; mouseY = -1e6; });

  let imgs = [];
  let states = [];
  let last = performance.now();

  const findIcons = () => {
    // Lazy: pick up the icons whenever they exist in the DOM. This lets the
    // loop survive React hydration churn — even if BrandSpinBand unmounts
    // and remounts, the SSR'd <img> elements are stable in the DOM.
    const layer = document.querySelector('[data-bsb-icons]');
    if (!layer) { imgs = []; return; }
    const next = Array.from(layer.querySelectorAll('img'));
    if (next.length !== imgs.length) {
      imgs = next;
      states = imgs.map(() => ({ x: 0, y: 0, vx: 0, vy: 0 }));
    } else {
      imgs = next;
    }
  };

  const tick = () => {
    findIcons();
    const now = performance.now();
    const dt = Math.min(0.05, (now - last) / 1000);
    last = now;
    const dampFactor = Math.pow(DAMPING_PER_S, dt);

    for (let i = 0; i < imgs.length; i++) {
      const img = imgs[i];
      const s = states[i];
      const rect = img.getBoundingClientRect();
      if (!rect.width) continue;
      const cx = rect.left + rect.width  / 2;
      const cy = rect.top  + rect.height / 2;

      const dx = cx - mouseX;
      const dy = cy - mouseY;
      const d2 = dx * dx + dy * dy;
      if (d2 < PUSH_RADIUS * PUSH_RADIUS && d2 > 1) {
        const d = Math.sqrt(d2);
        const f = (1 - d / PUSH_RADIUS) * PUSH_STRENGTH;
        s.vx += (dx / d) * f * dt;
        s.vy += (dy / d) * f * dt;
      }

      s.vx += (Math.random() - 0.5) * DRIFT_STRENGTH * dt;
      s.vy += (Math.random() - 0.5) * DRIFT_STRENGTH * dt;
      s.vx -= s.x * RETURN_STRENGTH * dt;
      s.vy -= s.y * RETURN_STRENGTH * dt;
      s.vx *= dampFactor;
      s.vy *= dampFactor;
      s.x += s.vx * dt;
      s.y += s.vy * dt;

      img.style.transform =
        'translate(calc(-50% + ' + s.x.toFixed(2) + 'px), calc(-50% + ' + s.y.toFixed(2) + 'px))';
    }
    requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);

  window.__bsbIconsBooted = true;
}

// ───────────────────────── NAV ─────────────────────────
function Nav() {
  const [scrolled, setScrolled] = useStateS(false);
  const [open, setOpen] = useStateS(false);
  useEffectS(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffectS(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {document.body.style.overflow = '';};
  }, [open]);

  const sections = [
  { href: '#odoo', label: 'Odoo' },
  { href: '#ia', label: 'IA' },
  { href: '#modulos', label: 'Módulos' },
  { href: '#implementacao', label: 'Implementação' },
  { href: '#comparativo', label: 'Comparativo' },
  { href: '#blog', label: 'Blog' }];


  return (
    <header className="fixed top-0 inset-x-0 z-40 transition-all sticky-nav-bg">
      <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-10 h-16 sm:h-18 lg:h-20 flex items-center justify-between gap-4">
        <a href="#top" className="flex items-center shrink-0" onClick={() => setOpen(false)}>
          <span className="block lg:hidden"><DSWordmark height={36} /></span>
          <span className="hidden lg:block"><DSWordmark height={56} /></span>
        </a>

        <nav className="hidden md:flex items-center gap-6 lg:gap-8 text-[13.5px] lg:text-[14px] text-ink-700">
          {sections.map((s) =>
          <a key={s.href} href={s.href} className="hover:text-ink-900 whitespace-nowrap">{s.label}</a>
          )}
        </nav>

        <div className="flex items-center gap-2 shrink-0">
          <SquareBtn href="#agendar" {...CAL_TRIGGER_ATTRS} size="sm" className="hidden sm:inline-flex">
            Agendar demo <Icon.arrow width="13" height="13" />
          </SquareBtn>

          <button
            type="button"
            aria-label={open ? 'Fechar menu' : 'Abrir menu'}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
            className="md:hidden w-10 h-10 -mr-2 rounded-full border border-ink-200 text-ink-900 flex items-center justify-center hover:bg-ink-50 transition">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              {open ?
              <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" /> :

              <>
                  <path d="M4 7h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                  <path d="M4 12h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                  <path d="M4 17h16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
                </>
              }
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      <div
        className={`md:hidden overflow-hidden border-t border-ink-100 bg-white transition-[max-height,opacity] duration-300
          ${open ? 'max-h-[80vh] opacity-100' : 'max-h-0 opacity-0'}`}
        aria-hidden={!open}>
        <div className="px-5 py-5 flex flex-col gap-1">
          {sections.map((s) =>
          <a
            key={s.href}
            href={s.href}
            onClick={() => setOpen(false)}
            className="py-3 text-[16px] text-ink-900 font-medium border-b border-ink-100 last:border-b-0 flex items-center justify-between group">
              {s.label}
              <span className="text-ink-300 group-hover:text-ink-900 transition">→</span>
            </a>
          )}
          <SquareBtn
            href="#agendar"
            {...CAL_TRIGGER_ATTRS}
            onClick={() => setOpen(false)}
            className="mt-4 justify-center">
            Agendar demonstração <Icon.arrow width="14" height="14" />
          </SquareBtn>
        </div>
      </div>
    </header>);

}

// ───────────────────────── HERO ─────────────────────────
function Hero({ headline = 'O primeiro ERP que você opera conversando', showPartnerBadge = true, highlight = 'conversando' }) {
  // Apply highlight to a single word/phrase in the headline if present.
  function renderHeadline(text) {
    if (!highlight) return text;
    const idx = text.toLowerCase().indexOf(highlight.toLowerCase());
    if (idx < 0) return text;
    return (
      <>
        {text.slice(0, idx)}
        <span className="hl">{text.slice(idx, idx + highlight.length)}</span>
        {text.slice(idx + highlight.length)}
      </>);

  }

  return (
    <section id="top" className="snap-section relative pt-20 sm:pt-24 lg:pt-28 pb-12 lg:pb-16 overflow-hidden min-h-[100svh] flex items-center">
      {/* Floating Odoo apps backdrop */}
      <img src="assets/hero-banner.webp" alt="" aria-hidden="true" className="hero-banner" />
      <div className="hero-glow"></div>

      {/* Palantir-style subtle gridline */}
      <div className="hero-tech-grid" aria-hidden="true"></div>

      <div className="relative z-10 w-full max-w-7xl mx-auto px-5 sm:px-6 lg:px-10">
        <div className="grid lg:grid-cols-[1.05fr_.95fr] gap-14 sm:gap-16 lg:gap-8 xl:gap-10 items-center">
          {/* left column */}
          <div className="fade-up">
            {showPartnerBadge &&
              <div className="mb-6 sm:mb-7 inline-flex items-center gap-2.5 text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500">
                <DSSymbol size={12} className="text-ink-900" />
                <span className="font-mono normal-case text-ink-400">//</span>
                Parceira Oficial Odoo · Brasil
              </div>
            }

            <h1 className="h-display text-[40px] sm:text-[56px] md:text-[68px] lg:text-[76px] leading-[1.02] font-semibold text-ink-900 max-w-[15ch]">
              {renderHeadline(headline)}
            </h1>

            <p className="mt-6 sm:mt-7 text-[16px] sm:text-[18px] md:text-[19px] text-ink-600 max-w-xl leading-[1.55]">
              Reconstruímos a metodologia de implantação do <strong className="text-ink-900 font-semibold">Odoo</strong> em torno de IA.
              Sua equipe controla pedidos, financeiro, RH e estoque <span className="hl-underline">pelo ChatGPT, Claude ou Gemini</span>, sem precisar aprender uma tela nova.
            </p>

            <div className="mt-8 sm:mt-9">
              <SquareBtn href="#agendar" {...CAL_TRIGGER_ATTRS}>
                Agendar demonstração <Icon.arrow width="14" height="14" />
              </SquareBtn>
            </div>
          </div>

          {/* right column — phone mock */}
          <HeroMock />
        </div>
      </div>
    </section>);

}

// Official Odoo Partner stamp logo — used in Modules section and Footer.
// The PNG lives at assets/odoo_partner_logo_stamp.png (horizontal lockup).
function OdooPartnerStamp({ height = 44 }) {
  return (
    <img
      src="assets/odoo_partner_logo_stamp.png"
      alt="Odoo Ready Partner, parceira oficial"
      style={{ height, width: 'auto', display: 'block', opacity: 0.88 }}
    />);
}
function HeroMock() {
  return (
    <div className="fade-up relative flex justify-center lg:justify-end" style={{ transitionDelay: '120ms' }}>
      <PhoneChat style={{ transform: 'rotate(2deg)' }} />
    </div>);

}

// Three conversation scenarios — cycles between Vendas/CRM, Financeiro, RH.
// Plain Portuguese, no API jargon.
const PHONE_SCENARIOS = [
{
  tag: 'Vendas',
  bubbles: [
  { who: 'me', text: 'Olá, pode lançar mais um pedido para o meu cliente Lumen? Ele quer 12 unidades da peça com código A-204. Pode parcelar em 30/60/90.' },
  { who: 'ai', text: 'Claro! ✅ Criei o pedido SO-1042 para a Lumen, R$ 28.440 em 3x, ainda como rascunho aguardando sua confirmação. Já mando a cobrança por e-mail?' },
  { who: 'me', text: 'Manda sim' },
  { who: 'ai', text: 'Cobrança enviada 📨 Aproveitei pra olhar a margem dessa venda: 31%, acima da média dos últimos 90 dias.' },
  { who: 'ai', chart: 'sales-margin' }]

},
{
  tag: 'Financeiro',
  bubbles: [
  { who: 'me', text: 'Como foi nosso faturamento em outubro? Queria comparar com setembro.' },
  { who: 'ai', text: 'Em outubro fechamos R$ 1.247.300 📊 cerca de 18% acima de setembro. Maior cliente do mês foi a Lumen, com R$ 184k em compras.' },
  { who: 'me', text: 'E tem alguém com pagamento atrasado há mais de 30 dias?' },
  { who: 'ai', text: 'Sim, 3 clientes ⚠️ totalizando R$ 47.200 em aberto. Quer que eu reenvie os boletos por e-mail e aplique juros de mora?' },
  { who: 'ai', chart: 'finance-aging' }]

},
{
  tag: 'RH',
  bubbles: [
  { who: 'me', text: 'Pode marcar as férias do Bruno do dia 15 a 30 de janeiro, por favor?' },
  { who: 'ai', text: 'Marcado! 🗓️ O Bruno tem 22 dias acumulados e vai usar 15 nessas férias. Já avisei o gestor dele por e-mail.' },
  { who: 'me', text: 'Quantas pessoas entram esse mês?' },
  { who: 'ai', text: 'Duas pessoas começam em novembro 👥 Marina (Comercial) no dia 06 e Pedro (TI) no dia 18. Quer que eu prepare o onboarding delas?' },
  { who: 'ai', chart: 'hr-hires' }]

}];


// Small inline charts that the AI "sends" as the last message in each scenario.
// Designed to fit in ~200px width inside the phone bubble.
function ChatChart({ kind }) {
  if (kind === 'sales-margin') {
    const bars = [22, 28, 24, 30, 26, 31];
    const max = 36;
    const avg = 26;
    return (
      <div className="w-full">
        <div className="flex items-center justify-between mb-2">
          <div className="text-[8.5px] font-mono uppercase tracking-wider text-ink-500">
            Margem · últimas 6 vendas
          </div>
          <div className="text-[8.5px] font-mono text-ink-500 tabular-nums">
            méd {avg}%
          </div>
        </div>
        <div className="relative flex items-end gap-1.5 h-20 pt-3">
          {/* Average reference line */}
          <div
            className="absolute left-0 right-0 border-t border-dashed border-ink-400/70"
            style={{ bottom: `${avg / max * 100}%` }}>
          </div>
          {bars.map((v, i) => {
            const isLatest = i === bars.length - 1;
            return (
              <div key={i} className="flex-1 flex flex-col items-center justify-end gap-1 h-full relative z-10">
                <div className={`text-[9px] tabular-nums leading-none ${isLatest ? 'text-ink-900 font-bold' : 'text-ink-500'}`}>
                  {v}%
                </div>
                <div
                  className={`w-full rounded-t-sm ${isLatest ? 'bg-ink-900' : 'bg-ink-300'}`}
                  style={{ height: `${v / max * 100}%` }}>
                </div>
              </div>);
          })}
        </div>
        <div className="mt-1.5 flex justify-between text-[8px] text-ink-400 tabular-nums px-0.5">
          <span>#1037</span>
          <span>#1038</span>
          <span>#1039</span>
          <span>#1040</span>
          <span>#1041</span>
          <span className="text-ink-900 font-semibold">#1042</span>
        </div>
      </div>);

  }
  if (kind === 'finance-aging') {
    const clients = [
    { n: 'Acme', v: 18500 },
    { n: 'Vértice', v: 16200 },
    { n: 'Nexo', v: 12500 }];

    const max = 20000;
    return (
      <div className="w-full">
        <div className="text-[8.5px] font-mono uppercase tracking-wider text-ink-500 mb-2">
          Inadimplência {'>'} 30 dias
        </div>
        <div className="space-y-1.5">
          {clients.map((c, i) =>
          <div key={i} className="flex items-center gap-2 text-[9.5px]">
              <span className="w-12 text-ink-700 truncate">{c.n}</span>
              <div className="flex-1 bg-ink-200 rounded-sm h-2 overflow-hidden">
                <div className="bg-ink-900 h-full rounded-sm" style={{ width: `${c.v / max * 100}%` }} />
              </div>
              <span className="text-ink-800 tabular-nums font-medium">R${(c.v / 1000).toFixed(1)}k</span>
            </div>
          )}
        </div>
      </div>);

  }
  if (kind === 'hr-hires') {
    return (
      <div className="w-full">
        <div className="flex items-center justify-between mb-3">
          <div className="text-[8.5px] font-mono uppercase tracking-wider text-ink-500">
            Contratações · Novembro
          </div>
          <div className="text-[8.5px] font-mono text-ink-500 tabular-nums">
            2 novas
          </div>
        </div>
        {/* Timeline */}
        <div className="relative h-3 mb-1">
          <div className="absolute left-0 right-0 top-1/2 h-px bg-ink-300"></div>
          {[1, 8, 15, 22, 29].map((d) =>
          <div key={d} className="absolute top-1/2 -translate-y-1/2 w-px h-1.5 bg-ink-300" style={{ left: `${d / 30 * 100}%` }}></div>
          )}
          <div
            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-2.5 h-2.5 rounded-full bg-ink-900"
            style={{ left: `${6 / 30 * 100}%`, boxShadow: '0 0 0 2px #fff' }}>
          </div>
          <div
            className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-2.5 h-2.5 rounded-full bg-ink-900"
            style={{ left: `${18 / 30 * 100}%`, boxShadow: '0 0 0 2px #fff' }}>
          </div>
        </div>
        <div className="relative h-3 text-[8px] text-ink-400 tabular-nums">
          <span className="absolute left-0">01</span>
          <span className="absolute left-1/2 -translate-x-1/2">15</span>
          <span className="absolute right-0">30</span>
        </div>
        {/* Hire cards */}
        <div className="mt-3 space-y-1.5">
          <div className="flex items-center justify-between gap-2 px-2.5 py-1.5 bg-white border border-ink-200 rounded-md">
            <div className="flex items-center gap-2 min-w-0">
              <span className="text-[9px] font-mono text-ink-500 tabular-nums shrink-0">06/11</span>
              <span className="text-[10.5px] font-semibold text-ink-900 truncate">Marina</span>
            </div>
            <span className="text-[9px] text-ink-500 shrink-0">Comercial</span>
          </div>
          <div className="flex items-center justify-between gap-2 px-2.5 py-1.5 bg-white border border-ink-200 rounded-md">
            <div className="flex items-center gap-2 min-w-0">
              <span className="text-[9px] font-mono text-ink-500 tabular-nums shrink-0">18/11</span>
              <span className="text-[10.5px] font-semibold text-ink-900 truncate">Pedro</span>
            </div>
            <span className="text-[9px] text-ink-500 shrink-0">TI</span>
          </div>
        </div>
      </div>);

  }
  return null;
}

function PhoneChat({ className = '', style }) {
  const [idx, setIdx] = useStateS(0);
  const [visible, setVisible] = useStateS(true);
  const bubblesRef = React.useRef(null);
  const SCENARIO_MS = 13000;

  // Auto-advance — each scenario stays ~13s so users can actually read it.
  useEffectS(() => {
    const t1 = setTimeout(() => setVisible(false), SCENARIO_MS - 600);
    const t2 = setTimeout(() => {
      setIdx((i) => (i + 1) % PHONE_SCENARIOS.length);
      setVisible(true);
    }, SCENARIO_MS - 300);
    return () => {clearTimeout(t1);clearTimeout(t2);};
  }, [idx]);

  // Keep the latest bubble (incl. the chart) in view as they animate in.
  useEffectS(() => {
    const el = bubblesRef.current;
    if (!el) return;
    const bubbleCount = PHONE_SCENARIOS[idx].bubbles.length;
    const lastBubbleTime = 0.15 + (bubbleCount - 1) * 0.45;
    const scrollers = [];
    for (let i = 0; i < bubbleCount; i++) {
      const t = (0.15 + i * 0.45 + 0.4) * 1000;
      scrollers.push(setTimeout(() => {
        el.scrollTo({ top: el.scrollHeight, behavior: 'smooth' });
      }, t));
    }
    return () => scrollers.forEach(clearTimeout);
  }, [idx]);

  const scenario = PHONE_SCENARIOS[idx];

  return (
    <div className={`phone-shell ${className}`} style={style}>
      <div className="phone-notch"></div>
      <div className="phone-screen">
        {/* Status bar */}
        <div className="flex items-center justify-between px-6 pt-3.5 pb-1 text-[10.5px] font-medium text-ink-800">
          <span>9:41</span>
          <span className="flex items-center gap-1">
            <svg width="14" height="9" viewBox="0 0 14 9" fill="currentColor"><rect x="0" y="6" width="2" height="3" rx=".5" /><rect x="4" y="4" width="2" height="5" rx=".5" /><rect x="8" y="2" width="2" height="7" rx=".5" /><rect x="12" y="0" width="2" height="9" rx=".5" /></svg>
            <svg width="14" height="9" viewBox="0 0 14 9" fill="none"><rect x="0" y="0" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1" /><rect x="2" y="2" width="8" height="5" rx=".5" fill="currentColor" /><rect x="12.5" y="3" width="1" height="3" rx=".5" fill="currentColor" /></svg>
          </span>
        </div>
        {/* App header — with scenario tag */}
        <div className="px-4 pt-3 pb-2 border-b border-ink-100 flex items-center gap-2.5">
          <span className="w-7 h-7 rounded-full bg-ink-900 flex items-center justify-center">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm-3 7v6m6-6v6m-3-9v12" stroke="#fff" strokeWidth="1.6" strokeLinecap="round" /></svg>
          </span>
          <div className="flex-1 min-w-0">
            <div className="text-[12.5px] font-semibold text-ink-900 truncate">ChatGPT</div>
            <div className="text-[10px] text-ink-500 truncate">conversando com Odoo · {scenario.tag}</div>
          </div>
        </div>
        {/* Scenario tabs — clearly clickable */}
        <div className="px-3 pt-2 pb-1.5 flex items-center gap-1.5">
          {PHONE_SCENARIOS.map((s, i) =>
          <button
            key={s.tag}
            onClick={() => {setIdx(i);setVisible(true);}}
            className={`text-[9.5px] uppercase tracking-wider font-medium px-2.5 py-1 rounded-full transition border ${
            i === idx ?
            'bg-ink-900 text-white border-ink-900' :
            'text-ink-500 border-ink-200 hover:text-ink-900 hover:border-ink-400'}`
            }>

              {s.tag}
            </button>
          )}
          <span className="ml-auto text-[9px] text-ink-400 hidden sm:inline">toque</span>
        </div>
        {/* Progress bar — fills over the scenario duration */}
        <div className="h-0.5 bg-ink-100 mx-3 mb-1 rounded-full overflow-hidden">
          <div
            key={`pg-${idx}`}
            className="h-full bg-ink-900"
            style={{ animation: `phoneProgress ${SCENARIO_MS}ms linear forwards` }}>
          </div>
        </div>
        {/* Bubbles */}
        <div
          ref={bubblesRef}
          className="flex-1 px-3 py-1.5 lg:py-2 space-y-1 lg:space-y-2 overflow-y-auto phone-bubbles-scroll transition-opacity duration-300"
          style={{ opacity: visible ? 1 : 0 }}>

          {scenario.bubbles.map((b, i) =>
          <div key={`${idx}-${i}`}
          className={`bubble flex ${b.who === 'me' ? 'justify-end' : 'justify-start'}`}
          style={{ animationDelay: `${0.15 + i * 0.45}s` }}>
              <div className={`text-[10.5px] lg:text-[12px] leading-[1.3] lg:leading-snug ${
            b.who === 'me' ?
            'max-w-[84%] px-2.5 py-1.5 lg:px-3 lg:py-2 rounded-2xl rounded-br-md bg-ink-900 text-white' :
            b.chart ?
            'w-[94%] p-2 lg:p-3 rounded-2xl rounded-bl-md bg-ink-100 text-ink-900' :
            'max-w-[84%] px-2.5 py-1.5 lg:px-3 lg:py-2 rounded-2xl rounded-bl-md bg-ink-100 text-ink-900'}`
            }>
                {b.chart ? <ChatChart kind={b.chart} /> : b.text}
              </div>
            </div>
          )}
        </div>
        {/* Composer */}
        <div className="px-3 py-2.5 border-t border-ink-100 flex items-center gap-2">
          <div className="flex-1 rounded-full bg-ink-50 border border-ink-100 px-3 py-1.5 text-[11px] text-ink-400">
            Pergunte qualquer coisa…
          </div>
          <span className="w-7 h-7 rounded-full bg-ink-900 text-white flex items-center justify-center">
            <Icon.mic width="12" height="12" />
          </span>
        </div>
        {/* Home indicator */}
        <div className="flex justify-center pb-1.5"><div className="w-24 h-1 rounded-full bg-ink-900"></div></div>
      </div>
    </div>);

}

// ───────────────────────── PAIN ─────────────────────────
function Pain() {
  const items = [
  { tag: 'planilhas',
    t: 'Planilhas que não escalam',
    d: 'Você cresceu mais rápido que o Excel. Reconciliação manual, retrabalho, números que ninguém confia.',
    icon: <Icon.sheet width="20" height="20" /> },
  { tag: 'erp simples',
    t: 'ERPs simples que travam no crescimento',
    d: 'Sistemas baratos resolvem até certo ponto. Depois disso, você está integrando vários softwares na mão, com retrabalho e dado divergente em cada um.',
    icon: <Icon.box width="20" height="20" /> },
  { tag: 'enterprise pesado',
    t: 'Plataformas enterprise pesadas',
    d: 'Cotação em centenas de milhares, projeto que se arrasta por mais de um ano, customização que depende de consultor especializado pra qualquer coisa.',
    icon: <Icon.brick width="20" height="20" /> }];

  return (
    <section id="dor" className="snap-section relative min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] py-20 sm:py-24 lg:py-28 bg-ink-950 text-white overflow-hidden flex items-center">
      {/* Background video — local grok-style clips that cycle in a loop.
          Stays muted, plays inline, behind a dark overlay so text is legible. */}
      <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
        <PainBackgroundVideo />
        {/* Vignette + darken overlay for legibility */}
        <div className="absolute inset-0"
             style={{ background: 'linear-gradient(to bottom, rgba(10,10,11,.78) 0%, rgba(10,10,11,.62) 40%, rgba(10,10,11,.82) 100%)' }}>
        </div>
        <div className="absolute inset-0 dot-grid opacity-25"></div>
      </div>

      {/* Coordinate labels on section edges — matches Why/Spotlight pattern */}
      <div className="absolute top-6 left-6 coord hidden md:block">{`> diagnose(pme.br)  # 3 estágios · 1 travamento`}</div>
      <div className="absolute top-6 right-6 coord text-right hidden md:block">{`stage=stuck  ·  layer=middle`}</div>

      <div className="relative w-full max-w-7xl mx-auto px-6 lg:px-10">
        <div className="fade-up max-w-3xl mb-6 lg:mb-8">
          <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-white">
            Você sabe <span className="hl-solid">onde está travado</span>
          </h2>
        </div>

        <div className="fade-up flex items-center gap-4 mb-4 lg:mb-5">
          <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55 flex items-center gap-2.5 shrink-0">
            <DSSymbol size={12} className="text-white" />
            A dor que resolvemos
          </div>
          <span className="flex-1 h-px bg-white/15"></span>
        </div>

        <div className="grid md:grid-cols-3 gap-4 md:gap-5 lg:gap-6">
          {items.map((it, i) =>
          <div key={it.t}
          className="fade-up relative overflow-hidden brackets border bg-white/[.02] border-white/10 p-6 lg:p-8 flex flex-col gap-5 hover:border-white/25 transition-colors"
          style={{ transitionDelay: `${i * 120}ms` }}>
              <span className="br-tr"></span>
              <span className="br-br"></span>

              <div className="w-10 h-10 rounded-md border border-white/15 text-white/85 flex items-center justify-center">
                {it.icon}
              </div>

              <h3 className="text-[22px] sm:text-[24px] md:text-[28px] lg:text-[30px] font-semibold leading-[1.15] h-display text-white">
                {it.t}
              </h3>
              <p className="text-[13.5px] md:text-[14px] text-white/60 leading-[1.6]">
                {it.d}
              </p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// Background video crossfader — renders all clips stacked, looping
// independently. Only one is visible at a time; switching crossfades via
// opacity transition so there's no black frame between clips.
function PainBackgroundVideo() {
  const clips = ['assets/grok-video-1.mp4', 'assets/grok-video-2.mp4', 'assets/grok-video-4.mp4'];
  const [idx, setIdx] = useStateS(0);
  const SWITCH_MS = 5000;

  useEffectS(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % clips.length), SWITCH_MS);
    return () => clearInterval(t);
  }, []);

  return (
    <>
      {clips.map((src, i) => (
        <video
          key={src}
          autoPlay
          muted
          loop
          playsInline
          preload="auto"
          className="absolute inset-0 w-full h-full object-cover"
          style={{
            opacity: i === idx ? 0.45 : 0,
            transition: 'opacity 1.4s ease-in-out',
          }}>
          <source src={src} type="video/mp4" />
        </video>
      ))}
    </>);

}

// ───────────────────────── MODULES ─────────────────────────
function OdooModuleIcon({ id, name }) {
  return (
    <div className="w-10 h-10 rounded-lg overflow-hidden flex-shrink-0 shadow-sm">
      <img
        src={`https://download.odoocdn.com/icons/${id}/static/description/icon_hi.png`}
        alt={name}
        width="40" height="40"
        className="w-full h-full object-cover"
        loading="lazy" />
    </div>);
}

function Modules() {
  const mods = [
  { n: 'Vendas',      odoo: 'sale' },
  { n: 'CRM',         odoo: 'crm' },
  { n: 'Compras',     odoo: 'purchase' },
  { n: 'Estoque',     odoo: 'stock' },
  { n: 'Contábil',    odoo: 'account' },
  { n: 'RH',          odoo: 'hr' },
  { n: 'Manufatura',  odoo: 'mrp' },
  { n: 'Projetos',    odoo: 'project' },
  { n: 'E-commerce',  odoo: 'website_sale' },
  { n: 'Marketing',   odoo: 'mass_mailing' },
  { n: 'Helpdesk',    odoo: 'helpdesk' },
  { n: 'Documentos',  odoo: 'documents' }];

  return (
    <section id="odoo" className="snap-section min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] py-16 sm:py-20 lg:py-20 flex items-center">
      <div className="w-full max-w-7xl mx-auto px-6 lg:px-10">
        <div className="grid lg:grid-cols-[1fr_.9fr] gap-10 lg:gap-14 items-center">
          {/* LEFT: bold typographic statement + body + CTAs */}
          <div className="fade-up">
            <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500 mb-5 flex items-center gap-2.5">
              <DSSymbol size={12} className="text-ink-900" />
              O que o Odoo entrega
            </div>
            <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-ink-900">
              O seu negócio inteiro<br />
              em uma <span className="hl">plataforma</span>
            </h2>
            <div className="mt-5 space-y-3 text-[15px] md:text-[16px] text-ink-600 leading-[1.55] max-w-xl">
              <p>
                Cada sistema separado é mais uma mensalidade, mais um login,
                mais uma integração que pode quebrar. Com o Odoo, sua operação
                inteira roda em <strong className="text-ink-900 font-semibold">uma plataforma só</strong>: vendas,
                finanças, estoque, RH, projetos, e-commerce.
              </p>
            </div>

            <div className="mt-6 flex flex-wrap items-center gap-3">
              <SquareBtn href="#agendar" {...CAL_TRIGGER_ATTRS}>
                Agendar demonstração <Icon.arrow width="14" height="14" />
              </SquareBtn>
            </div>
          </div>

          {/* RIGHT: dramatic dark feature card with overlay seal */}
          <ModulesFeatureCard />
        </div>

        {/* Module tile grid */}
        <div className="mt-8 lg:mt-10 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 lg:gap-2.5">
          {mods.map((m, i) =>
          <div key={m.n}
          className="module-tile fade-up rounded-xl bg-white border border-ink-100 px-3 py-2.5 flex items-center gap-2.5"
          style={{ transitionDelay: `${i * 25}ms` }}>
              <OdooModuleIcon id={m.odoo} name={m.n} />
              <div className="text-[13px] font-medium text-ink-900">{m.n}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// Photo feature card — full-bleed photo of people working with computers
// (Odoo / ERP in action). Subtle dark overlay at the bottom carries a small
// brand caption so the card still feels intentional, not stock.
function ModulesFeatureCard() {
  // Real photo loaded from Unsplash CDN. Replace the URL anytime with your own
  // hosted photo (same aspect ratio works best).
  const photoUrl =
  'https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=1200&q=80';

  return (
    <div className="fade-up relative rounded-2xl overflow-hidden bg-ink-950 text-white aspect-[5/6] sm:aspect-[6/5] lg:aspect-[5/4] shadow-lift">
      {/* Photo */}
      <img
        src={photoUrl}
        alt="Equipe trabalhando com o ERP Odoo"
        className="absolute inset-0 w-full h-full object-cover"
        loading="lazy" />
      

      {/* Gradient overlay — darkens the bottom for caption legibility */}
      <div className="absolute inset-0 pointer-events-none"
      style={{ background: 'linear-gradient(to top, rgba(10,10,11,.85) 0%, rgba(10,10,11,.25) 35%, transparent 60%)' }} />

      {/* Corner brackets — technical frame, consistent with rest of design */}
      <span className="absolute top-3 left-3 w-5 h-5 border-l border-t border-white/35"></span>
      <span className="absolute top-3 right-3 w-5 h-5 border-r border-t border-white/35"></span>
      <span className="absolute bottom-3 left-3 w-5 h-5 border-l border-b border-white/35"></span>
      <span className="absolute bottom-3 right-3 w-5 h-5 border-r border-b border-white/35"></span>

      {/* Bottom caption */}
      <div className="absolute bottom-0 inset-x-0 p-5 sm:p-6 lg:p-7">
        <div className="text-[10px] font-mono uppercase tracking-[0.22em] text-white/60 mb-2">
          Uma fonte da verdade
        </div>
        <div className="text-[18px] sm:text-[20px] lg:text-[22px] font-semibold text-white leading-snug max-w-[26ch]">Sua operação toda no mesmo lugar, visível pra quem precisa, e em tempo real.

        </div>
      </div>
    </div>);

}

// ───────────────────────── SPOTLIGHT (rotating module carousel) ─────────────────────────
// Auto-rotating spotlight: each slide highlights a different ERP module with
// concrete features. Arrows + progress bar + dot indicators make navigation obvious.
const SPOTLIGHT_SLIDES = [
{
  id: 'vendas',
  odooIds: [{ id: 'sale', name: 'Sales' }, { id: 'crm', name: 'CRM' }],
  iconLabel: 'Vendas',
  chip: 'CRM e Vendas',
  headline: 'Do primeiro contato',
  headlineDim: 'ao pedido fechado',
  cols: [
  { label: 'Pipeline visual', body: 'acompanhe cada oportunidade por etapa, com previsão de receita e probabilidade de fechamento em tempo real' },
  { label: 'Propostas e cotações', body: 'gere orçamentos profissionais em minutos, com aprovação eletrônica e conversão automática em pedido de venda' },
  { label: 'Histórico unificado', body: 'e-mails, ligações, reuniões e documentos centralizados na ficha. Nada se perde quando o vendedor sai' }],

  illust: 'pipeline'
},
{
  id: 'financeiro',
  odooIds: [{ id: 'account', name: 'Accounting' }],
  iconLabel: 'Financeiro',
  chip: 'Financeiro e Contabilidade',
  headline: 'Gestão financeira integrada,',
  headlineDim: 'com visibilidade em tempo real.',
  cols: [
  { label: 'Contas a pagar e receber', body: 'boletos, PIX, conciliação bancária e gestão de inadimplência sem planilhas paralelas' },
  { label: 'Conciliação automática', body: 'importação OFX e sugestão inteligente de match com lançamentos. Fechamento em horas, não em dias' },
  { label: 'Relatórios gerenciais', body: 'DRE, fluxo de caixa e balanço gerados a partir dos mesmos lançamentos operacionais' }],

  illust: 'cash'
},
{
  id: 'estoque',
  odooIds: [{ id: 'stock', name: 'Inventory' }, { id: 'purchase', name: 'Purchase' }],
  iconLabel: 'Inventário',
  chip: 'Estoque e Logística',
  headline: 'Saber o que tem,',
  headlineDim: 'onde tem e para onde vai.',
  cols: [
  { label: 'Múltiplos armazéns', body: 'controle inventário em filiais, lojas e centros de distribuição com rastreabilidade ponta a ponta' },
  { label: 'Lotes e validades', body: 'rastreie cada item da entrada à saída. Essencial para alimentos, farma, eletrônicos e industriais' },
  { label: 'Inventário em tempo real', body: 'saldos atualizados a cada movimentação, com aplicativo de coletor de dados integrado' }],

  illust: 'warehouse'
},
{
  id: 'contabil',
  odooIds: [{ id: 'account', name: 'Accounting' }, { id: 'l10n_br', name: 'Brazil' }],
  iconLabel: 'Fiscal',
  chip: 'Faturamento Fiscal Brasil',
  headline: 'Conformidade fiscal',
  headlineDim: 'sem dor de cabeça.',
  cols: [
  { label: 'Cálculo automático de impostos', body: 'ICMS, IPI, PIS, COFINS e ISS calculados em tempo real conforme NCM, CFOP e regime tributário da operação' },
  { label: 'Emissão de NF-e e NFS-e', body: 'notas fiscais de mercadorias e serviços emitidas direto do sistema, com transmissão e validação junto à SEFAZ e prefeituras' },
  { label: 'Regras fiscais por operação', body: 'o sistema reconhece o tipo de operação e aplica a tributação certa automaticamente, evitando erros que geram multa' }],

  illust: 'docs'
},
{
  id: 'manufatura',
  odooIds: [{ id: 'mrp', name: 'Manufacturing' }],
  iconLabel: 'Manufatura',
  chip: 'Fabricação',
  headline: 'Da ordem de produção',
  headlineDim: 'ao produto pronto.',
  cols: [
  { label: 'Listas técnicas e roteiros', body: 'defina insumos, etapas e centros de trabalho. O sistema calcula custo e tempo de produção' },
  { label: 'Ordens de produção', body: 'apontamento de chão de fábrica em tablets, com status, paradas e produtividade em tempo real' },
  { label: 'MRP integrado', body: 'planejamento de necessidades cruza vendas, estoque e compras para nunca faltar matéria-prima' }],

  illust: 'factory'
},
{
  id: 'rh',
  odooIds: [{ id: 'hr', name: 'Employees' }, { id: 'hr_recruitment', name: 'Recruitment' }],
  iconLabel: 'RH',
  chip: 'Recursos Humanos',
  headline: 'Pessoas no centro',
  headlineDim: 'da operação.',
  cols: [
  { label: 'Cadastro e ciclo de vida', body: 'admissão, férias, ausências e desligamento documentados, com fluxos de aprovação configuráveis' },
  { label: 'Recrutamento e seleção', body: 'vagas publicadas no site, candidatos rastreados no pipeline e entrevistas agendadas direto no sistema' },
  { label: 'Avaliações e desenvolvimento', body: 'feedbacks 360°, metas e planos de carreira ligados aos resultados da operação' }],

  illust: 'people'
},
{
  id: 'compras',
  odooIds: [{ id: 'purchase', name: 'Purchase' }],
  iconLabel: 'Compras',
  chip: 'Compras e Fornecedores',
  headline: 'Comprar melhor,',
  headlineDim: 'com previsibilidade.',
  cols: [
  { label: 'Requisições e cotações', body: 'solicite preços a múltiplos fornecedores e compare propostas lado a lado antes de aprovar' },
  { label: 'Reposição automática', body: 'regras de estoque mínimo disparam pedidos de compra sozinhas, evitando ruptura e excesso de capital parado' },
  { label: 'Avaliação de fornecedores', body: 'histórico de prazos, preços e qualidade ajuda a decidir com quem vale a pena seguir comprando' }],

  illust: 'purchase'
},
{
  id: 'projetos',
  odooIds: [{ id: 'project', name: 'Project' }, { id: 'hr_timesheet', name: 'Timesheets' }],
  iconLabel: 'Projetos',
  chip: 'Projetos e Serviços',
  headline: 'Entregar no prazo,',
  headlineDim: 'no escopo e no orçamento.',
  cols: [
  { label: 'Tarefas e Kanban', body: 'organize entregas por sprint, cliente ou equipe, com responsáveis, prazos e dependências claros' },
  { label: 'Apontamento de horas', body: 'time-sheet integrado ao faturamento: horas trabalhadas viram fatura sem retrabalho' },
  { label: 'Rentabilidade por projeto', body: 'custos, horas e receitas consolidados em um único painel. Você sabe quais clientes dão lucro' }],

  illust: 'projects'
},
{
  id: 'marketing',
  odooIds: [{ id: 'website', name: 'Website' }, { id: 'mass_mailing', name: 'Marketing' }],
  iconLabel: 'Marketing',
  chip: 'Marketing, Site e E-commerce',
  headline: 'Crescer',
  headlineDim: 'com a casa em ordem.',
  cols: [
  { label: 'Site e loja virtual', body: 'construa páginas e produtos com drag-and-drop, totalmente integrados ao estoque e ao CRM' },
  { label: 'Automação de marketing', body: 'e-mail, SMS e WhatsApp disparados por jornadas baseadas no comportamento do cliente' },
  { label: 'SEO e analytics nativos', body: 'métricas de tráfego, conversão e ROI por campanha em painéis prontos para uso' }],

  illust: 'marketing'
},
{
  id: 'posvenda',
  odooIds: [{ id: 'helpdesk', name: 'Helpdesk' }, { id: 'sale_subscription', name: 'Subscriptions' }],
  iconLabel: 'Help Desk',
  chip: 'Pós-venda e Atendimento',
  headline: 'Excelência no atendimento',
  headlineDim: 'com pós-venda profissionalizado.',
  cols: [
  { label: 'Helpdesk e SLA', body: 'tickets organizados por equipe, prioridade e prazo, com base de conhecimento integrada' },
  { label: 'Assinaturas e recorrência', body: 'cobrança automática, gestão de contratos e renovações para modelos SaaS e de serviço continuado' },
  { label: 'Pesquisas de satisfação', body: 'NPS e CSAT aplicados em pontos-chave da jornada, com dashboards de evolução' }],

  illust: 'helpdesk'
}];


function Spotlight() {
  const [idx, setIdx] = useStateS(0);
  const [prev, setPrev] = useStateS(0);
  const [dir, setDir] = useStateS(1); // 1 = forward, -1 = back
  const [paused, setPaused] = useStateS(false);
  const [userInteracted, setUserInteracted] = useStateS(false);
  const [inView, setInView] = useStateS(false);
  const sectionRef = useRefS(null);
  const ROTATE_MS = 4500;

  // Helper that wraps setIdx with direction tracking.
  // Pass fromUser=true on any click handler to permanently stop the auto rotation.
  const goTo = (next, fromUser = false) => {
    if (fromUser) setUserInteracted(true);
    setIdx((cur) => {
      const n = (next % SPOTLIGHT_SLIDES.length + SPOTLIGHT_SLIDES.length) % SPOTLIGHT_SLIDES.length;
      setPrev(cur);
      setDir(n > cur || cur === SPOTLIGHT_SLIDES.length - 1 && n === 0 ? 1 : -1);
      return n;
    });
  };

  // Start rotating once the section enters the viewport — IntersectionObserver
  // is the primary trigger, with a fallback timer so the carousel still starts
  // in headless / non-IO environments.
  useEffectS(() => {
    if (!sectionRef.current) return;
    let stopped = false;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting && !stopped) {
            stopped = true;
            setInView(true);
            io.disconnect();
          }
        });
      },
      { threshold: 0.25 }
    );
    io.observe(sectionRef.current);
    // Fallback: kick off after 2s if IO hasn't triggered (some headless envs
    // never fire IO; in the real browser this is a no-op because IO wins).
    const fallback = setTimeout(() => {
      if (!stopped) { stopped = true; setInView(true); io.disconnect(); }
    }, 2000);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);

  useEffectS(() => {
    if (paused || userInteracted || !inView) return;
    const t = setInterval(() => goTo(idx + 1), ROTATE_MS);
    return () => clearInterval(t);
  }, [paused, userInteracted, inView, idx]);

  const cur = SPOTLIGHT_SLIDES[idx];

  return (
    <section id="modulos" className="snap-section relative min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] py-10 lg:py-12 bg-paper-soft flex items-center">
      <div className="w-full max-w-7xl mx-auto px-6 lg:px-10">
        {/* Section header — concise */}
        <div className="fade-up mb-6 lg:mb-8 max-w-3xl">
          <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-ink-500 mb-3 flex items-center gap-2.5">
            <DSSymbol size={12} className="text-ink-900" />
            Os módulos em ação
          </div>
          <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-ink-900">
            Cada módulo, <span className="hl">na prática</span>
          </h2>
        </div>

        <div
          ref={sectionRef}
          className="fade-up relative bg-ink-950 text-white p-5 md:p-8 lg:p-12 overflow-hidden"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}>
          {/* Slide progress bar — accent color, more visible */}
          <div className="absolute top-0 left-0 right-0 h-[2px] bg-white/[.06]">
            <div
              key={idx + '-' + paused + '-' + inView}
              className="h-full"
              style={{
                width: '100%',
                transformOrigin: 'left',
                background: 'var(--accent)',
                animation: paused || userInteracted || !inView ? 'none' : `slideProgress ${ROTATE_MS}ms linear forwards`
              }} />

          </div>
          {/* Inline keyframes for the progress bar AND slide transitions */}
          <style>{`
            @keyframes slideProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
            @keyframes ringFill { from { stroke-dashoffset: 62.832; } to { stroke-dashoffset: 0; } }
            /* Directional slide-in (forward & back) with subtle scale + blur clean-up */
            @keyframes slIdInRight {
              0%   { opacity: 0; transform: translateX(40px) scale(.985); filter: blur(2px); }
              60%  { opacity: 1; filter: blur(0); }
              100% { opacity: 1; transform: none; filter: blur(0); }
            }
            @keyframes slIdInLeft {
              0%   { opacity: 0; transform: translateX(-40px) scale(.985); filter: blur(2px); }
              60%  { opacity: 1; filter: blur(0); }
              100% { opacity: 1; transform: none; filter: blur(0); }
            }
            @keyframes slIdRiseUp {
              0%   { opacity: 0; transform: translateY(18px); }
              100% { opacity: 1; transform: none; }
            }
            .sl-text   { animation: var(--sl-in) .7s cubic-bezier(.2,.7,.2,1) both; }
            .sl-illust { animation: var(--sl-in) .75s cubic-bezier(.2,.7,.2,1) both; animation-delay: .08s; }
            .sl-col    { animation: slIdRiseUp .55s cubic-bezier(.2,.7,.2,1) both; }
          `}</style>

          {/* Top row: label card + wireframe illustration */}
          <div className="grid lg:grid-cols-[380px_1fr] gap-4 lg:gap-10 items-center"
          style={{ '--sl-in': dir > 0 ? 'slIdInRight' : 'slIdInLeft' }}>
            {/* Label card — animated re-mount per slide */}
            <div key={cur.id + '-text'} className="relative sl-text">
              <div className="bg-white/[.04] border border-white/10 p-5 lg:p-7 max-w-md flex flex-col relative overflow-hidden">
                {/* Subtle accent corner */}
                <span className="absolute top-0 left-0 w-12 h-px" style={{ background: 'var(--accent)' }}></span>
                <span className="absolute top-0 left-0 h-12 w-px" style={{ background: 'var(--accent)' }}></span>

                <div className="text-[10.5px] font-mono tracking-[0.22em] uppercase mb-3 lg:mb-4" style={{ color: 'var(--accent)' }}>
                  {cur.chip}
                </div>
                <h3 className="text-[22px] sm:text-[24px] md:text-[28px] lg:text-[30px] font-semibold leading-[1.15] h-display text-white">
                  {cur.headline}
                  <br />
                  <span className="text-white/55">{cur.headlineDim}</span>
                </h3>
              </div>
            </div>

            {/* Wireframe illustration */}
            <div key={cur.id + '-illust'} className="sl-illust">
              <SpotlightIllustration kind={cur.illust} />
            </div>
          </div>

          {/* Unified nav row: prev arrow + icons + next arrow + counter */}
          <div className="mt-4 lg:mt-9 flex items-center gap-3 lg:gap-5">
            <button
              type="button"
              onClick={() => goTo(idx - 1, true)}
              aria-label="Módulo anterior"
              className="shrink-0 w-9 h-9 lg:w-10 lg:h-10 rounded-full border border-white/25 hover:border-white hover:bg-white hover:text-ink-950 text-white flex items-center justify-center transition cursor-pointer">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M14 6l-6 6 6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>

            <div className="flex-1 min-w-0 flex items-center justify-center gap-3 sm:gap-4 lg:gap-6 flex-wrap">
              {SPOTLIGHT_SLIDES.map((s, i) => {
                const primary = s.odooIds[0];
                const active = i === idx;
                return (
                  <button
                    key={s.id}
                    type="button"
                    onClick={() => goTo(i, true)}
                    aria-label={`Ir para ${s.chip}`}
                    title={s.chip}
                    className="group relative flex flex-col items-center gap-1.5 cursor-pointer transition pb-2">
                    <span
                      className={`relative inline-flex items-center justify-center p-1.5 rounded-2xl transition-all duration-300 ${active ? '-translate-y-0.5' : ''}`}
                      style={active ? {
                        boxShadow: '0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 26px -6px color-mix(in srgb, var(--accent) 65%, transparent)'
                      } : {}}>
                      <img
                        src={`https://download.odoocdn.com/icons/${primary.id}/static/description/icon_hi.png`}
                        alt={primary.name}
                        width="36" height="36"
                        className={`w-9 h-9 lg:w-10 lg:h-10 rounded-xl bg-white/5 transition duration-300 ${active ? 'opacity-100' : 'opacity-45 saturate-[.85] group-hover:opacity-90 group-hover:saturate-100'}`}
                        loading="lazy" />
                    </span>
                    <span className={`hidden sm:inline text-[10px] font-mono uppercase tracking-[0.14em] transition duration-300 ${active ? 'text-white' : 'text-white/40 group-hover:text-white/70'}`}>
                      {s.iconLabel || s.chip}
                    </span>
                    {/* Subtle accent underline — animated active indicator */}
                    <span
                      aria-hidden="true"
                      className="absolute bottom-0 left-1/2 -translate-x-1/2 h-[2px] rounded-full transition-all duration-300 ease-out"
                      style={{
                        width: active ? 18 : 0,
                        opacity: active ? 1 : 0,
                        background: 'var(--accent)',
                        boxShadow: active ? '0 0 8px color-mix(in srgb, var(--accent) 70%, transparent)' : 'none'
                      }} />
                  </button>
                );
              })}
            </div>

            <button
              type="button"
              onClick={() => goTo(idx + 1, true)}
              aria-label="Próximo módulo"
              className="shrink-0 w-9 h-9 lg:w-10 lg:h-10 rounded-full border border-white/25 hover:border-white hover:bg-white hover:text-ink-950 text-white flex items-center justify-center transition cursor-pointer">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M10 6l6 6-6 6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </button>
          </div>

          {/* Counter + ring + status — single thin line below nav */}
          <div className="mt-3 lg:mt-4 flex items-center justify-end gap-3">
            <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-white/55">
              {String(idx + 1).padStart(2, '0')} / {String(SPOTLIGHT_SLIDES.length).padStart(2, '0')}
            </span>
            <svg width="20" height="20" viewBox="0 0 24 24" style={{ transform: 'rotate(-90deg)' }}>
              <circle cx="12" cy="12" r="10" fill="none" stroke="rgba(255,255,255,.12)" strokeWidth="1.5" />
              <circle
                key={idx + '-ring-' + paused + '-' + inView + '-' + userInteracted}
                cx="12" cy="12" r="10" fill="none"
                stroke="var(--accent)" strokeWidth="1.5"
                strokeLinecap="round"
                strokeDasharray="62.832"
                style={{
                  strokeDashoffset: paused || userInteracted || !inView ? 62.832 : 0,
                  animation: paused || userInteracted || !inView ? 'none' : `ringFill ${ROTATE_MS}ms linear forwards`
                }} />
            </svg>
            <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-white/45 flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-white/70 led-pulse"></span>
              {!inView ? 'aguardando' : userInteracted ? 'manual' : paused ? 'pausado' : 'auto'}
            </span>
          </div>

          {/* Thin horizontal rule — hidden on mobile to save space */}
          <div className="hidden lg:block mt-5 h-px bg-white/15"></div>

          {/* Three info columns — stagger in from the bottom on slide change */}
          <div key={cur.id + '-cols'} className="mt-3 lg:mt-7 grid md:grid-cols-3 gap-3 lg:gap-8">
            {cur.cols.map((c, i) =>
            <div key={i} className="sl-col" style={{ animationDelay: `${0.18 + i * 0.08}s` }}>
                <div className="text-[10.5px] font-mono tracking-[0.18em] uppercase mb-1 lg:mb-1.5" style={{ color: 'var(--accent)' }}>→ {c.label}</div>
                <div className="text-[12.5px] lg:text-[13.5px] text-white/85 leading-[1.45] lg:leading-[1.5]">{c.body}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// Module-specific wireframe illustrations. Pure line drawings.
function SpotlightIllustration({ kind }) {
  const stroke = "rgba(255,255,255,.85)";
  const wrap = (children) =>
  <div className="relative min-h-[100px] lg:min-h-[300px]">
      <svg viewBox="0 0 700 360" className="absolute inset-0 w-full h-full overflow-visible"
    fill="none" stroke={stroke} strokeWidth="1.2"
    strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        {children}
      </svg>
    </div>;


  if (kind === 'pipeline') {
    // Kanban — 3 colunas sem moldura externa (mais limpo, sem sobreposição)
    return wrap(<g>
      {/* 3 columns laid out horizontally */}
      {[0, 1, 2].map((c) => {
        const x = 240 + c * 150;
        return (
          <g key={c} transform={`translate(${x}, 80)`}>
            {/* column header underline */}
            <line x1="0" y1="-2" x2="130" y2="-2" opacity="0.55" />
            <text x="0" y="-12" fill="rgba(255,255,255,.6)" fontFamily="JetBrains Mono,monospace" fontSize="9" letterSpacing="1.5" stroke="none">{['LEAD', 'QUALIFICADO', 'FECHADO'][c]}</text>
            {/* card count badge */}
            <text x="130" y="-12" textAnchor="end" fill="rgba(255,255,255,.4)" fontFamily="JetBrains Mono,monospace" fontSize="9" stroke="none">{3 - c}</text>
            {/* cards */}
            {Array.from({ length: 3 - c }, (_, r) =>
              <g key={r}>
                <rect x="0" y={8 + r * 60} width="130" height="48" />
                <line x1="12" y1={24 + r * 60} x2="116" y2={24 + r * 60} opacity="0.5" />
                <line x1="12" y1={36 + r * 60} x2="92" y2={36 + r * 60} opacity="0.3" />
                {/* tiny status tag */}
                <rect x="12" y={44 + r * 60} width="22" height="4" opacity="0.55" />
              </g>
            )}
          </g>
        );
      })}
      {/* Labels */}
      <line x1="135" y1="80" x2="240" y2="80" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="78" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Pipeline visual</text>
      <line x1="135" y1="180" x2="240" y2="180" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="178" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Cards drag-and-drop</text>
      <line x1="135" y1="290" x2="240" y2="290" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="288" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Automação por etapa</text>
    </g>);
  }

  if (kind === 'warehouse') {
    // Warehouse shelves with boxes
    return wrap(<g>
      <g transform="translate(310, 30)">
        {/* Shelves */}
        {[0, 1, 2].map((r) =>
        <g key={r} transform={`translate(0, ${r * 100})`}>
            <line x1="0" y1="80" x2="360" y2="80" />
            <line x1="0" y1="0" x2="0" y2="80" />
            <line x1="360" y1="0" x2="360" y2="80" />
            {/* Boxes */}
            {[0, 1, 2, 3, 4].map((b) =>
          <g key={b} transform={`translate(${15 + b * 70}, ${15 + b % 2 * 8})`}>
                <rect x="0" y="0" width="50" height={60 - b % 2 * 8} />
                <line x1="10" y1="15" x2="40" y2="15" opacity="0.4" />
                <line x1="10" y1="25" x2="35" y2="25" opacity="0.3" />
              </g>
          )}
          </g>
        )}
        {/* Floor */}
        <line x1="0" y1="300" x2="360" y2="300" />
      </g>
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Depósito A</text>
      <line x1="135" y1="160" x2="310" y2="160" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="158" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Depósito B</text>
      <line x1="135" y1="260" x2="310" y2="260" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="258" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Em trânsito</text>
    </g>);
  }

  if (kind === 'docs') {
    // Stack of fiscal documents + calculator
    return wrap(<g>
      {/* Doc stack */}
      <g transform="translate(310, 20)">
        {[0, 1, 2].map((d) =>
        <g key={d} transform={`translate(${d * 10}, ${d * 10})`}>
            <rect x="0" y="0" width="200" height="260" />
            <line x1="20" y1="30" x2="180" y2="30" />
            <line x1="20" y1="50" x2="120" y2="50" opacity="0.4" />
            <line x1="20" y1="80" x2="180" y2="80" opacity="0.4" />
            <line x1="20" y1="100" x2="160" y2="100" opacity="0.4" />
            <line x1="20" y1="120" x2="180" y2="120" opacity="0.4" />
            <line x1="20" y1="140" x2="140" y2="140" opacity="0.4" />
            <rect x="20" y="170" width="160" height="70" opacity="0.4" />
            <text x="100" y="190" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="10" stroke="none">NFe</text>
            <line x1="60" y1="200" x2="140" y2="200" opacity="0.3" />
            <line x1="60" y1="215" x2="140" y2="215" opacity="0.3" />
          </g>
        )}
      </g>
      {/* Calculator */}
      <g transform="translate(560, 200)">
        <rect x="0" y="0" width="100" height="130" />
        <rect x="10" y="10" width="80" height="25" />
        {[0, 1, 2].map((r) => [0, 1, 2].map((c) =>
        <rect key={`${r}-${c}`} x={10 + c * 28} y={42 + r * 28} width="22" height="22" />
        ))}
      </g>
      <line x1="135" y1="40" x2="310" y2="40" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="38" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">NFe / NFSe</text>
      <line x1="135" y1="160" x2="310" y2="160" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="158" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Conciliação</text>
      <line x1="135" y1="260" x2="560" y2="260" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="258" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">DRE em tempo real</text>
    </g>);
  }

  if (kind === 'factory') {
    // Production line: BOM tree + assembly conveyor
    return wrap(<g>
      {/* BOM tree top */}
      <g transform="translate(360, 20)">
        <rect x="120" y="0" width="80" height="34" />
        <text x="160" y="22" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="11" stroke="none">Produto</text>
        <line x1="160" y1="34" x2="160" y2="54" />
        <line x1="60" y1="54" x2="260" y2="54" />
        <line x1="60" y1="54" x2="60" y2="74" />
        <line x1="160" y1="54" x2="160" y2="74" />
        <line x1="260" y1="54" x2="260" y2="74" />
        {[60, 160, 260].map((x, i) =>
        <g key={i}>
            <rect x={x - 36} y="74" width="72" height="28" />
            <text x={x} y="93" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="10" stroke="none">Comp {i + 1}</text>
          </g>
        )}
      </g>
      {/* Conveyor */}
      <g transform="translate(310, 200)">
        <line x1="0" y1="80" x2="380" y2="80" />
        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) =>
        <circle key={i} cx={20 + i * 40} cy="92" r="8" />
        )}
        {[0, 1, 2, 3].map((i) =>
        <rect key={i} x={30 + i * 90} y="40" width="40" height="40" />
        )}
      </g>
      <line x1="135" y1="40" x2="380" y2="40" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="38" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">BOM multinível</text>
      <line x1="135" y1="230" x2="310" y2="230" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="228" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Linha de produção</text>
      <line x1="135" y1="290" x2="310" y2="290" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="288" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Rastreabilidade</text>
    </g>);
  }

  if (kind === 'cash') {
    // Cash flow: bar chart + bills + line trend
    return wrap(<g>
      {/* Trend chart container */}
      <g transform="translate(310, 30)">
        <rect x="0" y="0" width="380" height="180" />
        {/* gridlines */}
        {[0, 1, 2, 3].map((i) =>
        <line key={i} x1="10" y1={36 + i * 36} x2="370" y2={36 + i * 36} opacity="0.18" />
        )}
        {/* bars */}
        {[110, 80, 130, 95, 145, 70, 160, 100, 175, 90, 185].map((h, i) =>
        <rect key={i} x={20 + i * 32} y={180 - h} width="20" height={h} />
        )}
        {/* trend line */}
        <path d="M30 110 L62 130 L94 90 L126 115 L158 70 L190 140 L222 60 L254 100 L286 45 L318 105 L350 35"
        opacity="0.6" />
        <text x="190" y="-8" textAnchor="middle" fill="rgba(255,255,255,.55)" fontFamily="Inter,system-ui" fontSize="11" stroke="none">Fluxo de caixa · 11 meses</text>
      </g>

      {/* Bills stack */}
      <g transform="translate(370, 240)">
        {[0, 1, 2].map((b) =>
        <g key={b} transform={`translate(${b * 8}, ${-b * 5})`}>
            <rect x="0" y="0" width="180" height="80" rx="2" />
            <circle cx="40" cy="40" r="18" />
            <text x="40" y="44" textAnchor="middle" fill="rgba(255,255,255,.85)" fontFamily="Inter,system-ui" fontSize="14" fontWeight="600" stroke="none">R$</text>
            <line x1="80" y1="30" x2="160" y2="30" opacity="0.5" />
            <line x1="80" y1="44" x2="140" y2="44" opacity="0.3" />
            <line x1="80" y1="56" x2="150" y2="56" opacity="0.3" />
          </g>
        )}
      </g>

      {/* Labels with leader lines */}
      <line x1="135" y1="50" x2="310" y2="50" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="48" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Previsto x realizado</text>
      <line x1="135" y1="170" x2="310" y2="170" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="168" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Boletos · pix · ted</text>
      <line x1="135" y1="290" x2="370" y2="290" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="288" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Conciliação bancária</text>
    </g>);
  }

  if (kind === 'people') {
    // People grid (RH directory)
    return wrap(<g>
      <g transform="translate(310, 30)">
        {[0, 1, 2].map((r) => [0, 1, 2, 3].map((c) => {
          const x = c * 92;
          const y = r * 92;
          return (
            <g key={`${r}-${c}`} transform={`translate(${x}, ${y})`}>
              <rect x="0" y="0" width="80" height="80" />
              {/* head */}
              <circle cx="40" cy="32" r="12" />
              {/* body */}
              <path d="M22 64 Q40 50 58 64 L58 76 L22 76 Z" />
              {/* name line */}
              <line x1="10" y1="84" x2="60" y2="84" opacity="0" />
            </g>);

        }))}
      </g>
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Colaboradores</text>
      <line x1="135" y1="160" x2="310" y2="160" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="158" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Departamentos</text>
      <line x1="135" y1="260" x2="310" y2="260" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="258" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Folha + ponto</text>
    </g>);
  }

  if (kind === 'purchase') {
    // Supplier RFQ comparison → selected card → generated purchase order
    return wrap(<g>
      {/* 3 supplier cards */}
      {[
        { price: '1.240', label: 'Forn. A' },
        { price: '980',   label: 'Forn. B' },
        { price: '1.115', label: 'Forn. C' }
      ].map((s, i) =>
      <g key={i} transform={`translate(${310 + i * 130}, 30)`}>
          <rect x="0" y="0" width="110" height="220" />
          {/* logo placeholder */}
          <rect x="12" y="14" width="38" height="38" rx="3" opacity="0.4" />
          <text x="58" y="32" fill={stroke} fontFamily="Inter,system-ui" fontSize="11" stroke="none">{s.label}</text>
          <line x1="58" y1="42" x2="100" y2="42" opacity="0.35" />
          {/* price */}
          <text x="55" y="98" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" fontWeight="600" stroke="none">R$ {s.price}</text>
          {/* detail rows */}
          <line x1="14" y1="120" x2="96" y2="120" opacity="0.3" />
          <line x1="14" y1="135" x2="86" y2="135" opacity="0.25" />
          <line x1="14" y1="150" x2="96" y2="150" opacity="0.25" />
          <line x1="14" y1="165" x2="80" y2="165" opacity="0.25" />
          {/* selected check (only forn B) */}
          {i === 1 &&
          <g transform="translate(82, 8)">
              <circle cx="14" cy="14" r="11" fill={stroke} stroke="none" />
              <path d="M9 14 L13 18 L20 11" stroke="#0a0a0b" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
            </g>
          }
        </g>
      )}
      {/* Down arrow → PO */}
      <g transform="translate(425, 258)">
        <line x1="0" y1="0" x2="0" y2="24" opacity="0.7" />
        <path d="M-5 19 L0 24 L5 19" opacity="0.7" />
      </g>
      {/* Generated PO bar */}
      <rect x="310" y="298" width="370" height="30" />
      <text x="495" y="318" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="11" stroke="none">Pedido de compra · #PO-0421</text>
      {/* Labels on the left */}
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Cotações em paralelo</text>
      <line x1="135" y1="160" x2="310" y2="160" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="158" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Melhor proposta</text>
      <line x1="135" y1="313" x2="310" y2="313" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="311" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Pedido gerado</text>
    </g>);
  }

  if (kind === 'projects') {
    // Gantt timeline + tasks + hours timer
    return wrap(<g>
      {/* Gantt panel */}
      <g transform="translate(310, 30)">
        <rect x="0" y="0" width="380" height="170" />
        {/* week dividers */}
        {[0, 1, 2, 3, 4, 5, 6].map((i) =>
        <line key={i} x1={50 + i * 47} y1="0" x2={50 + i * 47} y2="170" opacity="0.12" />
        )}
        {/* week labels */}
        {[1, 2, 3, 4, 5, 6, 7].map((w, i) =>
        <text key={i} x={73 + i * 47} y="-6" textAnchor="middle" fill="rgba(255,255,255,.45)" fontFamily="Inter,system-ui" fontSize="9" stroke="none">W{w}</text>
        )}
        {/* task labels on the inside-left */}
        {['Descoberta', 'Config', 'Migração', 'Testes', 'Go-live'].map((t, i) =>
        <text key={i} x="6" y={24 + i * 28} fill="rgba(255,255,255,.55)" fontFamily="Inter,system-ui" fontSize="9" stroke="none">{t}</text>
        )}
        {/* task bars */}
        <rect x="50"  y="14" width="100" height="14" />
        <rect x="120" y="42" width="140" height="14" />
        <rect x="200" y="70" width="100" height="14" />
        <rect x="260" y="98" width="80"  height="14" />
        <rect x="290" y="126" width="60" height="14" />
        {/* today marker */}
        <line x1="200" y1="0" x2="200" y2="170" strokeDasharray="3 4" opacity="0.65" stroke={stroke} />
        <text x="200" y="166" textAnchor="middle" fill={stroke} fontFamily="JetBrains Mono,monospace" fontSize="8" stroke="none">today</text>
      </g>
      {/* Hours timer card */}
      <g transform="translate(560, 220)">
        <rect x="0" y="0" width="130" height="100" />
        <text x="65" y="22" textAnchor="middle" fill="rgba(255,255,255,.45)" fontFamily="JetBrains Mono,monospace" fontSize="9" letterSpacing="1.5" stroke="none">HORAS · HOJE</text>
        <line x1="14" y1="32" x2="116" y2="32" opacity="0.2" />
        <text x="65" y="64" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="22" fontWeight="600" stroke="none">04:42</text>
        {/* running dot */}
        <circle cx="22" cy="84" r="4" />
        <text x="32" y="87" fill="rgba(255,255,255,.5)" fontFamily="Inter,system-ui" fontSize="9" stroke="none">rodando</text>
      </g>
      {/* Labels */}
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Cronograma do projeto</text>
      <line x1="135" y1="170" x2="310" y2="170" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="168" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Tarefas por sprint</text>
      <line x1="135" y1="270" x2="560" y2="270" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="268" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Apontamento de horas</text>
    </g>);
  }

  if (kind === 'marketing') {
    // Website mockup + email funnel + analytics bars
    return wrap(<g>
      {/* Browser/site mockup */}
      <g transform="translate(310, 30)">
        <rect x="0" y="0" width="240" height="170" />
        {/* browser chrome */}
        <line x1="0" y1="18" x2="240" y2="18" opacity="0.35" />
        <circle cx="11" cy="9" r="2.5" />
        <circle cx="22" cy="9" r="2.5" />
        <circle cx="33" cy="9" r="2.5" />
        <rect x="50" y="4" width="180" height="10" opacity="0.2" />
        {/* hero image + text */}
        <rect x="14" y="30" width="100" height="58" opacity="0.45" />
        <line x1="124" y1="38" x2="222" y2="38" opacity="0.5" />
        <line x1="124" y1="52" x2="200" y2="52" opacity="0.3" />
        <line x1="124" y1="66" x2="212" y2="66" opacity="0.3" />
        <rect x="124" y="76" width="50" height="14" opacity="0.55" />
        {/* product grid */}
        {[0, 1, 2].map((i) =>
        <g key={i} transform={`translate(${14 + i * 75}, 102)`}>
            <rect x="0" y="0" width="65" height="55" />
            <rect x="6" y="6" width="53" height="32" opacity="0.35" />
            <line x1="6" y1="44" x2="50" y2="44" opacity="0.3" />
          </g>
        )}
      </g>
      {/* Email sequence */}
      <g transform="translate(580, 30)">
        {[0, 1, 2].map((i) =>
        <g key={i} transform={`translate(0, ${i * 56})`}>
            <rect x="0" y="0" width="100" height="42" />
            <path d="M0 0 L50 28 L100 0" opacity="0.5" />
            <line x1="14" y1="22" x2="86" y2="22" opacity="0.25" />
            <line x1="14" y1="32" x2="70" y2="32" opacity="0.25" />
          </g>
        )}
        {[0, 1].map((i) =>
        <g key={i} transform={`translate(50, ${42 + i * 56})`}>
            <line x1="0" y1="0" x2="0" y2="12" opacity="0.5" />
            <path d="M-3 9 L0 12 L3 9" opacity="0.5" />
          </g>
        )}
      </g>
      {/* Analytics bars */}
      <g transform="translate(310, 230)">
        <rect x="0" y="0" width="240" height="100" />
        <text x="12" y="14" fill="rgba(255,255,255,.45)" fontFamily="JetBrains Mono,monospace" fontSize="9" stroke="none">// CONVERSÃO</text>
        {[36, 52, 28, 64, 44, 72, 56, 80].map((h, i) =>
        <rect key={i} x={14 + i * 28} y={92 - h} width="20" height={h} opacity="0.6" />
        )}
        {/* trend line */}
        <path d="M24 60 L52 47 L80 67 L108 33 L136 49 L164 23 L192 35 L220 16" opacity="0.7" />
      </g>
      {/* Labels */}
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Site / e-commerce</text>
      <line x1="135" y1="140" x2="580" y2="140" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="138" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">E-mail + automação</text>
      <line x1="135" y1="280" x2="310" y2="280" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="278" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Analytics nativos</text>
    </g>);
  }

  if (kind === 'helpdesk') {
    // Ticket list + SLA ring + chat bubble
    return wrap(<g>
      {/* Ticket list */}
      <g transform="translate(310, 30)">
        <rect x="0" y="0" width="290" height="290" />
        <text x="14" y="20" fill="rgba(255,255,255,.45)" fontFamily="JetBrains Mono,monospace" fontSize="10" letterSpacing="1.5" stroke="none">// CHAMADOS</text>
        <line x1="0" y1="30" x2="290" y2="30" opacity="0.18" />
        {[
        { t: '#1042 · Importação NFe', m: 'urgente · novo', emph: true },
        { t: '#1041 · Configurar SLA', m: 'alta · andamento' },
        { t: '#1039 · Layout fatura', m: 'média · andamento' },
        { t: '#1038 · Treinamento', m: 'média · aguardando' },
        { t: '#1035 · Relatório custom', m: 'baixa · fechado' }].
        map((r, i) =>
        <g key={i} transform={`translate(0, ${44 + i * 48})`}>
            <circle cx="18" cy="14" r="4" opacity={r.emph ? 1 : 0.45} />
            <text x="32" y="11" fill={stroke} fontFamily="Inter,system-ui" fontSize="11" stroke="none">{r.t}</text>
            <text x="32" y="26" fill="rgba(255,255,255,.4)" fontFamily="Inter,system-ui" fontSize="9" stroke="none">{r.m}</text>
            {i < 4 && <line x1="0" y1="40" x2="290" y2="40" opacity="0.1" />}
          </g>
        )}
      </g>
      {/* SLA ring */}
      <g transform="translate(615, 40)">
        <circle cx="36" cy="36" r="32" opacity="0.25" />
        <circle cx="36" cy="36" r="32" strokeDasharray="135 201" transform="rotate(-90 36 36)" />
        <text x="36" y="34" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="13" fontWeight="600" stroke="none">2h14</text>
        <text x="36" y="48" textAnchor="middle" fill="rgba(255,255,255,.45)" fontFamily="JetBrains Mono,monospace" fontSize="8" letterSpacing="1.5" stroke="none">SLA</text>
      </g>
      {/* Chat bubble */}
      <g transform="translate(610, 150)">
        <rect x="0" y="0" width="80" height="58" />
        <path d="M14 58 L20 70 L26 58" />
        <line x1="10" y1="14" x2="70" y2="14" opacity="0.45" />
        <line x1="10" y1="26" x2="58" y2="26" opacity="0.3" />
        <line x1="10" y1="38" x2="68" y2="38" opacity="0.3" />
        <line x1="10" y1="48" x2="40" y2="48" opacity="0.3" />
      </g>
      {/* CSAT mini */}
      <g transform="translate(610, 240)">
        <rect x="0" y="0" width="80" height="76" />
        <text x="40" y="20" textAnchor="middle" fill="rgba(255,255,255,.45)" fontFamily="JetBrains Mono,monospace" fontSize="9" letterSpacing="1.5" stroke="none">NPS</text>
        <text x="40" y="50" textAnchor="middle" fill={stroke} fontFamily="Inter,system-ui" fontSize="20" fontWeight="600" stroke="none">+72</text>
        <line x1="14" y1="62" x2="66" y2="62" opacity="0.2" />
      </g>
      {/* Labels */}
      <line x1="135" y1="60" x2="310" y2="60" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="58" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Tickets priorizados</text>
      <line x1="135" y1="170" x2="610" y2="170" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="168" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">Conversa + SLA</text>
      <line x1="135" y1="275" x2="610" y2="275" strokeDasharray="2 3" opacity="0.7" />
      <text x="0" y="273" fill={stroke} fontFamily="Inter,system-ui" fontSize="14" stroke="none">NPS · CSAT</text>
    </g>);
  }

  if (kind === 'placeholder') {
    // Fallback (no longer used by any slide but kept for safety)
    return wrap(<g>
      <rect x="170" y="40" width="510" height="280" strokeDasharray="4 6" opacity="0.45" />
      <line x1="170" y1="40" x2="680" y2="320" strokeDasharray="2 6" opacity="0.18" />
      <line x1="680" y1="40" x2="170" y2="320" strokeDasharray="2 6" opacity="0.18" />
      <text x="425" y="178" textAnchor="middle" fill="rgba(255,255,255,.55)" fontFamily="JetBrains Mono,monospace" fontSize="11" letterSpacing="2" stroke="none">// ILLUSTRATION_PENDING</text>
      <text x="425" y="200" textAnchor="middle" fill="rgba(255,255,255,.3)" fontFamily="Inter,system-ui" fontSize="11" stroke="none">placeholder</text>
    </g>);
  }

  return wrap(null);
}

// ───────────────────────── WHY DEEPSTRAT ─────────────────────────
// Palantir-influenced: full dark, technical grid, bracket corners,
// coordinate labels, animated bars, word-by-word reveal of headline.

function RevealText({ children, delay = 0, className = '' }) {
  // Word-by-word reveal driven by IntersectionObserver via .fade-up handler.
  // We split into words and stagger their `.in` class.
  const ref = useRefS(null);
  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const ws = el.querySelectorAll('.reveal-w');
          ws.forEach((w, i) => {
            setTimeout(() => w.classList.add('in'), delay + i * 55);
          });
          io.disconnect();
        }
      });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);

  const text = typeof children === 'string' ? children : '';
  return (
    <span ref={ref} className={className}>
      {text.split(' ').map((w, i) =>
      <span key={i} className="reveal-w" style={{ marginRight: '0.25em' }}>{w}</span>
      )}
    </span>);

}

function CornerCoords({ tl, tr, bl, br }) {
  return (
    <>
      {tl && <div className="absolute top-3 left-4 coord">{tl}</div>}
      {tr && <div className="absolute top-3 right-4 coord text-right">{tr}</div>}
      {bl && <div className="absolute bottom-3 left-4 coord">{bl}</div>}
      {br && <div className="absolute bottom-3 right-4 coord text-right">{br}</div>}
    </>);

}

// FlowCards — three responsive cards showing the architecture:
// 01 You ask · 02 Deepstrat translates · 03 ERP executes.
// Each card has a small animated visual that loops while visible.
// BrandColorBand — subtle atmospheric divider between sections.
// Just a purple/blue aurora + faint grain. Strong top/bottom fades so the band
// melts into the surrounding ink-950 sections, creating a soft overlap.
// The spinning Deepstrat symbol is layered on top (handled by parent section).
function BrandColorBand() {
  // Vertical mask that fades ALL band content (background + aurora + grid +
  // grain) gradually at top and bottom. The middle 30% is fully opaque, then
  // long gradual fades on each side. Because we mask the *content* (not overlay
  // darkness on top), the band can sit over other sections without dimming them.
  const verticalFade = 'linear-gradient(to bottom, transparent 0%, #000 10%, #000 85%, transparent 100%)';
  const maskStyle = { maskImage: verticalFade, WebkitMaskImage: verticalFade };
  return (
    <div className="relative w-full h-[480px] sm:h-[520px] lg:h-[560px] overflow-hidden"
         style={maskStyle}>
      {/* Solid dark base — gives the band depth so aurora reads as glow,
          not just colored haze. Masked along with everything else. */}
      <div className="absolute inset-0 bg-ink-950" />

      {/* Soft aurora — purple + blue, muted */}
      <div className="absolute inset-0 pointer-events-none" style={{ filter: 'blur(70px)', opacity: .35 }}>
        <div className="absolute rounded-full"
             style={{
               width: '60%', height: '180%',
               left: '0%', top: '-40%',
               background: 'radial-gradient(circle, #814dde 0%, transparent 60%)',
               animation: 'auroraDrift1 32s ease-in-out infinite',
             }} />
        <div className="absolute rounded-full"
             style={{
               width: '55%', height: '170%',
               left: '45%', top: '-35%',
               background: 'radial-gradient(circle, #2470db 0%, transparent 60%)',
               animation: 'auroraDrift2 36s ease-in-out infinite',
             }} />
      </div>

      {/* Very faint grid — barely there, just enough texture */}
      <div className="absolute inset-0 pointer-events-none opacity-15"
           style={{
             backgroundImage:
               'linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),' +
               'linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px)',
             backgroundSize: '80px 80px',
             maskImage: 'radial-gradient(ellipse 60% 50% at 50% 50%, #000 20%, transparent 80%)',
             WebkitMaskImage: 'radial-gradient(ellipse 60% 50% at 50% 50%, #000 20%, transparent 80%)',
           }} />

      {/* Subtle grain texture */}
      <svg className="absolute inset-0 w-full h-full opacity-[.10] mix-blend-overlay pointer-events-none"
           aria-hidden="true">
        <filter id="brandGrain">
          <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
          <feColorMatrix type="saturate" values="0"/>
          <feComponentTransfer><feFuncA type="linear" slope="0.4"/></feComponentTransfer>
        </filter>
        <rect width="100%" height="100%" filter="url(#brandGrain)"/>
      </svg>

      <style>{`
        @keyframes auroraDrift1 {
          0%,100% { transform: translate(0,0) scale(1); }
          50%     { transform: translate(12%,4%) scale(1.12); }
        }
        @keyframes auroraDrift2 {
          0%,100% { transform: translate(0,0) scale(1); }
          50%     { transform: translate(-10%,-3%) scale(1.08); }
        }
      `}</style>
    </div>
  );
}

function FlowCards() {
  const stages = [
  {
    n: '01',
    tag: 'entrada',
    title: 'Você pergunta',
    body: 'Use ChatGPT, Claude ou Gemini em português, do celular ou do desktop. Sem decorar menu, sem trocar de ferramenta.',
    illust: 'chat',
    accent: false
  },
  {
    n: '02',
    tag: 'orquestração',
    title: 'Deepstrat traduz',
    body: 'A camada que entende o seu pedido em linguagem natural e converte em chamadas reais no Odoo, com permissões, log e auditoria.',
    illust: 'orchestrate',
    accent: true
  },
  {
    n: '03',
    tag: 'execução',
    title: 'Tudo acontece no ERP',
    body: 'Pedido lançado, NFe emitida, férias agendadas, caixa atualizado. Resultado real no mesmo Odoo que sua equipe já opera.',
    illust: 'modules',
    accent: false
  }];


  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5 lg:gap-6 relative">
      {stages.map((s, i) =>
      <React.Fragment key={s.n}>
          <FlowCard stage={s} index={i} />
          {/* Connector arrow — visible between cards on desktop; vertical chevron on mobile.
              Black bg + accent border + glow para destacar o fluxo entre os estagios. */}
          {i < stages.length - 1 &&
        <div className="hidden md:flex absolute top-1/2 -translate-y-1/2 items-center justify-center pointer-events-none z-20"
        style={{ left: `calc(${(i + 1) * (100 / stages.length)}% - 22px)`, width: '44px' }}>
              <div className="w-11 h-11 rounded-full bg-ink-950 flex items-center justify-center text-white text-[18px] font-medium"
                style={{
                  border: '2px solid var(--accent)',
                  boxShadow: '0 0 0 4px rgba(252,184,101,.12), 0 6px 14px rgba(0,0,0,.4)'
                }}>
                →
              </div>
            </div>
        }
          {i < stages.length - 1 &&
        <div className="md:hidden flex justify-center my-1" aria-hidden="true">
              <div className="w-10 h-10 rounded-full bg-ink-950 flex items-center justify-center text-white text-[16px] font-medium"
                style={{
                  border: '2px solid var(--accent)',
                  boxShadow: '0 0 0 3px rgba(252,184,101,.12)'
                }}>
                ↓
              </div>
            </div>
        }
        </React.Fragment>
      )}
    </div>);

}

function FlowCard({ stage, index }) {
  const ref = useRefS(null);
  const [armed, setArmed] = useStateS(false);

  useEffectS(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => {
        if (e.isIntersecting) {setArmed(true);io.disconnect();}
      });
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <div
      ref={ref}
      className={`fade-up flow-card relative overflow-hidden brackets border p-6 lg:p-8 flex flex-col gap-5 transition-colors
        ${armed ? 'is-armed' : ''}
        ${stage.accent ? 'is-light bg-white text-ink-950 border-ink-200 hover:border-ink-300' : 'is-dark bg-white/[.02] text-white border-white/10 hover:border-white/25'}`}
      style={{ transitionDelay: `${index * 120}ms` }}>
      <span className="br-tr"></span>
      <span className="br-br"></span>
      <span className="flow-sweep" aria-hidden="true"></span>

      <div className="flex items-baseline justify-between gap-3">
        <span className={`text-[11px] font-mono tracking-[0.2em] uppercase ${stage.accent ? 'text-ink-500' : 'text-white/45'}`}>
          {stage.n} · {stage.tag}
        </span>
        <span className={`text-[10px] font-mono ${stage.accent ? 'text-ink-400' : 'text-white/30'}`}>
          {armed ? 'ativo' : '...'}
        </span>
      </div>

      <h3 className={`text-[22px] sm:text-[24px] md:text-[28px] lg:text-[30px] font-semibold leading-[1.15] h-display
        ${stage.accent ? 'text-ink-950' : 'text-white'}`}>
        {stage.title}
      </h3>

      <p className={`text-[13.5px] md:text-[14px] leading-[1.55]
        ${stage.accent ? 'text-ink-600' : 'text-white/60'}`}>
        {stage.body}
      </p>

      {/* Animated illustration block */}
      <div className={`mt-1 rounded-md border h-[160px] md:h-[180px] relative overflow-hidden
        ${stage.accent ? 'bg-transparent border-ink-100' : 'bg-black/30 border-white/8'}`}>
        {stage.illust === 'chat' && <ChatIllust armed={armed} accent={stage.accent} />}
        {stage.illust === 'orchestrate' && <OrchestrateIllust armed={armed} accent={stage.accent} />}
        {stage.illust === 'modules' && <ModulesIllust armed={armed} accent={stage.accent} />}
      </div>
    </div>);

}

// — Illustration 1: chat scenarios cycling through different departments —
function ChatIllust({ armed, accent }) {
  const scenarios = [
  {
    dept: 'vendas',
    bubbles: [
    { who: 'you', text: 'cria pedido pra Loja Vila Madá: 80 camisetas P pretas, prazo 30 dias' },
    { who: 'ai', text: 'pronto · #1042 · R$ 2.880. confirmação por e-mail?' },
    { who: 'you', text: 'manda' }]

  },
  {
    dept: 'financeiro',
    bubbles: [
    { who: 'you', text: 'como tá o caixa essa semana?' },
    { who: 'ai', text: 'entradas R$ 12.4k · saídas R$ 8.2k · saldo +R$ 4.2k' },
    { who: 'ai', text: '⚠︎ 3 boletos vencendo amanhã (R$ 2.180)' }]

  },
  {
    dept: 'estoque',
    bubbles: [
    { who: 'you', text: 'tô com pouca camiseta P preta?' },
    { who: 'ai', text: 'sim · 42 un · mínimo 100. gero ordem de compra?' },
    { who: 'you', text: 'sim, 200 unidades' }]

  },
  {
    dept: 'rh',
    bubbles: [
    { who: 'you', text: 'marca férias da Mariana em janeiro' },
    { who: 'ai', text: '30 dias acumulados. sugiro 15 a 30/01. confirma?' },
    { who: 'you', text: 'isso · gestor avisado' }]

  },
  {
    dept: 'compras',
    bubbles: [
    { who: 'you', text: 'compra 200m malha branca · melhor fornecedor' },
    { who: 'ai', text: 'Têxtil ABC · R$ 8/m · prazo 5 dias · histórico ok' },
    { who: 'you', text: 'manda pedido' }]

  }];


  const [idx, setIdx] = useStateS(0);
  useEffectS(() => {
    if (!armed) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % scenarios.length), 6500);
    return () => clearInterval(t);
  }, [armed]);

  const cur = scenarios[idx];

  return (
    <div className="absolute inset-0 p-3 flex flex-col gap-1.5 justify-end">
      <style>{`
        @keyframes bubbleSlide {
          0%   { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: none; }
        }
        .bubble-slide { animation: bubbleSlide .45s ease-out both; }
      `}</style>

      {/* Department label (top-left) — animates with each scenario change */}
      <div className={`absolute top-2 left-3 text-[9.5px] font-mono uppercase tracking-[0.18em] ${accent ? 'text-ink-400' : 'text-white/35'}`}
      key={`dept-${idx}`}
      style={{ animation: 'bubbleSlide .45s ease-out both' }}>
        {cur.dept}
      </div>

      {/* Live indicator (top-right) */}
      <div className={`absolute top-2 right-3 text-[9.5px] font-mono ${accent ? 'text-ink-400' : 'text-white/35'} flex items-center gap-1`}>
        <span className={`w-1.5 h-1.5 rounded-full ${accent ? 'bg-ink-900' : 'bg-white/70'} led-pulse`}></span>
        ao vivo
      </div>

      {/* Bubbles — re-mounted on every scenario change so they re-animate */}
      {cur.bubbles.map((b, i) =>
      <div key={`${idx}-${i}`}
      className={`bubble-slide flex ${b.who === 'you' ? 'justify-end' : 'justify-start'}`}
      style={{ animationDelay: `${i * 0.35 + 0.1}s` }}>
          <div className={`max-w-[82%] px-3 py-1.5 rounded-2xl text-[11.5px] leading-snug
            ${b.who === 'you' ?
        accent ? 'bg-ink-950 text-white rounded-br-md' : 'bg-white text-ink-950 rounded-br-md' :
        accent ? 'bg-ink-100 text-ink-900 rounded-bl-md' : 'bg-white/10 text-white rounded-bl-md'}`}>
            {b.text}
          </div>
        </div>
      )}
    </div>);

}

// — Illustration 2: Big spinning Deepstrat symbol — pulses, glows, with
//   counter-rotating dashed ring, concentric pulse rings, and background
//   data waves flowing entrada → ação behind it.
function OrchestrateIllust({ armed, accent }) {
  const waveStroke = accent ? 'rgba(10,10,11,.32)' : 'rgba(255,255,255,.32)';
  const waveStrokeSoft = accent ? 'rgba(10,10,11,.18)' : 'rgba(255,255,255,.20)';

  // Two sine waves, each 8 full cycles across viewBox 0–400. SVG renders at
  // 200% width and translates by -50% → wraps seamlessly (integer wavelengths).
  const cycles = 16; // half-cycles
  const upperWave = 'M 0 20 Q 12.5 4, 25 20 ' +
    Array.from({ length: cycles - 1 }, (_, i) => `T ${(i + 2) * 25} 20`).join(' ');
  const lowerWave = 'M 0 20 Q 12.5 36, 25 20 ' +
    Array.from({ length: cycles - 1 }, (_, i) => `T ${(i + 2) * 25} 20`).join(' ');

  return (
    <div className="absolute inset-0 flex items-center justify-center">
      <style>{`
        @keyframes orchRingExpand {
          0%   { transform: scale(.45); opacity: .55; }
          100% { transform: scale(2.6);  opacity: 0; }
        }
      `}</style>

      {/* Background data waves — flow entrada → ação behind the logo.
          Two layers at different speeds give a sense of multiple streams
          orchestrated in parallel. Edges fade via orch-wave-mask. */}
      <div className="absolute inset-0 orch-wave-mask pointer-events-none overflow-hidden">
        <svg
          className="absolute left-0"
          style={{
            top: 'calc(50% - 26px)',
            width: '200%', height: '32px',
            animation: armed ? 'orchWaveScroll 11s linear infinite' : 'none',
            willChange: 'transform'
          }}
          viewBox="0 0 400 40" preserveAspectRatio="none" aria-hidden="true">
          <path d={upperWave} stroke={waveStrokeSoft} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
        </svg>
        <svg
          className="absolute left-0"
          style={{
            top: 'calc(50% + 4px)',
            width: '200%', height: '36px',
            animation: armed ? 'orchWaveScroll 7s linear infinite' : 'none',
            willChange: 'transform'
          }}
          viewBox="0 0 400 40" preserveAspectRatio="none" aria-hidden="true">
          <path d={lowerWave} stroke={waveStroke} strokeWidth="1" fill="none" vectorEffect="non-scaling-stroke" />
        </svg>
      </div>

      {/* Pulsing concentric rings — expand out from behind the logo */}
      {[0, 1, 2].map((i) =>
      <span key={i}
      className="absolute w-[120px] h-[120px] rounded-full border pointer-events-none"
      style={{
        borderColor: accent ? 'rgba(10,10,11,.45)' : 'rgba(255,255,255,.45)',
        animation: armed ? `orchRingExpand 3.2s cubic-bezier(.2,.7,.2,1) infinite` : 'none',
        animationDelay: `${i * 1.05}s`
      }} />
      )}

      {/* Outer dashed ring — slowly counter-rotates */}
      <span className="absolute w-[150px] h-[150px] rounded-full pointer-events-none"
        style={{
          border: '1px dashed',
          borderColor: accent ? 'rgba(10,10,11,.30)' : 'rgba(255,255,255,.28)',
          animation: armed ? 'orchSpinReverse 28s linear infinite' : 'none'
        }} />

      {/* The symbol — large, spinning, with a soft pulse glow */}
      <div
        className={`relative z-10 ${accent ? 'text-ink-950' : 'text-white'}`}
        style={{
          '--orch-glow': accent ? 'rgba(10,10,11,.50)' : 'rgba(255,255,255,.45)',
          animation: armed ? 'orchPulseGlow 3.6s ease-in-out infinite' : 'none'
        }}>
        <div style={{ animation: armed ? 'orchSpin 22s linear infinite' : 'none', willChange: 'transform' }}>
          <DSSymbol size={112} />
        </div>
      </div>

      {/* Mini flow labels at top/bottom edges */}
      <div className={`absolute top-2 left-3 text-[9.5px] font-mono uppercase tracking-[0.18em] ${accent ? 'text-ink-400' : 'text-white/35'}`}>
        entrada →
      </div>
      <div className={`absolute bottom-2 right-3 text-[9.5px] font-mono uppercase tracking-[0.18em] ${accent ? 'text-ink-400' : 'text-white/35'}`}>
        → ação
      </div>
    </div>);

}

// — Illustration 3: live "ops log" — actions ticking off across modules,
//   like a system showing what's actually executing. Loops continuously.
function ModulesIllust({ armed, accent }) {
  const ops = [
  { mod: 'Vendas', text: 'pedido #1042 · R$ 2.880' },
  { mod: 'Estoque', text: '−80 camisetas P · saldo 42' },
  { mod: 'Contábil', text: 'NFe 0218 emitida' },
  { mod: 'Financeiro', text: 'cobrança enviada · 30 dias' },
  { mod: 'RH', text: 'férias · Mariana · 15→30 jan' }];


  return (
    <div className="absolute inset-0 px-3 py-2.5 flex flex-col">
      <style>{`
        @keyframes opRow {
          0%, 4%   { opacity: 0; transform: translateY(8px); }
          10%, 80% { opacity: 1; transform: none; }
          88%, 100%{ opacity: .25; transform: translateY(-2px); }
        }
        @keyframes checkDraw {
          0%, 8%  { stroke-dashoffset: 14; opacity: 0; }
          12%, 100%{ stroke-dashoffset: 0; opacity: 1; }
        }
      `}</style>

      {/* Header — like a log title */}
      <div className={`flex items-center justify-between mb-2 text-[9.5px] font-mono uppercase tracking-[0.18em] ${accent ? 'text-ink-400' : 'text-white/35'}`}>
        <div className="flex items-center gap-1.5">
          <span className={`w-1.5 h-1.5 rounded-full ${accent ? 'bg-ink-900' : 'bg-white/70'} led-pulse`}></span>
          ops · ao vivo
        </div>
        <span>+5 ações</span>
      </div>

      {/* Rows */}
      <div className="flex-1 flex flex-col justify-around gap-0.5">
        {ops.map((op, i) => {
          const delay = i * 0.7;
          return (
            <div key={i}
            className="flex items-center gap-2 text-[11px] leading-tight"
            style={{
              animation: armed ? `opRow ${ops.length * 0.7 + 1.4}s ease-in-out infinite` : 'none',
              animationDelay: `${delay}s`
            }}>
              {/* Checkmark — animated stroke */}
              <span className={`w-3.5 h-3.5 rounded-full flex items-center justify-center shrink-0
                ${accent ? 'bg-ink-950' : 'bg-white/85'}`}>
                <svg width="8" height="8" viewBox="0 0 12 12" fill="none">
                  <path d="M2 6 L5 9 L10 3"
                  stroke={accent ? '#fff' : '#0a0a0b'}
                  strokeWidth="1.8"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeDasharray="14"
                  style={{
                    animation: armed ? `checkDraw ${ops.length * 0.7 + 1.4}s ease-in-out infinite` : 'none',
                    animationDelay: `${delay}s`
                  }} />
                </svg>
              </span>

              <span className={`text-[9.5px] font-mono uppercase tracking-[0.12em] shrink-0 min-w-[56px]
                ${accent ? 'text-ink-500' : 'text-white/45'}`}>
                {op.mod}
              </span>

              <span className={`truncate ${accent ? 'text-ink-900' : 'text-white/90'}`}>
                {op.text}
              </span>
            </div>);

        })}
      </div>
    </div>);

}

function Why() {
  return (
    <section id="ia" className="snap-section relative z-30 min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] flex items-center pt-20 pb-16 lg:pt-20 lg:pb-20 text-white overflow-hidden">
        {/* Solid ink-950 background. */}
        <div className="absolute inset-0 bg-ink-950 pointer-events-none" />
        {/* Multi-layer tech background */}
        <div className="absolute inset-0 tech-grid-fine scan-mask opacity-60 pointer-events-none"></div>
        <div className="absolute inset-0 tech-grid scan-mask pointer-events-none"></div>

        {/* Coordinate label on section edges */}
        <div className="absolute top-6 left-6 coord hidden md:block">{`> from deepstrat import orchestrator  # mcp · v0.4`}</div>
        <div className="absolute top-6 right-6 coord text-right hidden md:block">{`runtime=prod  ·  llm=*  ·  stream=on`}</div>

        <div className="relative w-full max-w-7xl mx-auto px-6 lg:px-10">
          <div>
            <div className="fade-up max-w-3xl mb-6 lg:mb-8">
              <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55 mb-4 flex items-center gap-2.5">
                <DSSymbol size={12} className="text-white" />
                Por que Deepstrat
              </div>
              <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-white">
                A camada que <span className="hl-solid">conecta IA ao seu ERP</span>
              </h2>
            </div>

            <div className="fade-up flex items-baseline gap-4 mb-4 lg:mb-5">
              <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/55">
                {'// 00 · arquitetura'}
              </span>
              <span className="flex-1 h-px bg-white/15"></span>
              <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] text-white/40 hidden sm:inline">
                3 camadas · 1 ERP
              </span>
            </div>
            <FlowCards />
          </div>
        </div>
      </section>);

}

function ImplementationCarousel() {
  const slides = [
    { Comp: WhyAI,     label: 'Implementação' },
    { Comp: WhyMCP,    label: 'Operação' },
    { Comp: WhyMethod, label: 'Metodologia' },
  ];
  const total = slides.length;
  const [idx, setIdx] = useStateS(0);
  const go = (i) => setIdx(((i % total) + total) % total);

  useEffectS(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft')  go(idx - 1);
      if (e.key === 'ArrowRight') go(idx + 1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [idx]);

  // Touch swipe
  const touchX = useRefS(0);
  const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; };
  const onTouchEnd   = (e) => {
    const dx = e.changedTouches[0].clientX - touchX.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? idx + 1 : idx - 1);
  };

  return (
    <section
      id="implementacao"
      className="snap-section relative md:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] bg-ink-950 text-white overflow-hidden flex flex-col md:justify-center py-16 md:py-4 lg:py-6">
      <div className="absolute inset-0 tech-grid-fine scan-mask opacity-60 pointer-events-none"></div>
      <div className="absolute inset-0 tech-grid scan-mask pointer-events-none"></div>

      {/* Header — Title + Subtitle */}
      <div className="relative flex-shrink-0 w-full max-w-7xl mx-auto px-6 lg:px-10">
        <div className="fade-up">
          <div className="flex items-baseline gap-4 mb-2">
            <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/55">
              {'// 01 · como entregamos'}
            </span>
            <span className="flex-1 h-px bg-white/15"></span>
            <span className="text-[10.5px] font-mono uppercase tracking-[0.18em] hidden md:inline" style={{ color: 'var(--accent)' }}>
              {String(idx + 1).padStart(2, '0')} / {String(total).padStart(2, '0')} · {slides[idx].label}
            </span>
          </div>
          <h3 className="h-display text-[22px] sm:text-[24px] md:text-[28px] lg:text-[30px] font-semibold text-white leading-[1.15] max-w-3xl">
            Por dentro da <span className="text-white/50">implementação</span>
          </h3>
        </div>
      </div>

      {/* Mobile stack — all 3 cards sequentially, no carousel */}
      <div className="md:hidden relative w-full max-w-7xl mx-auto px-6 mt-8 space-y-5">
        {slides.map(({ Comp }, i) => (
          <div key={i}>
            <Comp />
          </div>
        ))}
      </div>

      {/* Carousel viewport — desktop only, fixed standard card height */}
      <div className="hidden md:block relative flex-shrink-0 w-full max-w-7xl mx-auto px-6 lg:px-10 mt-4 lg:mt-5 h-[clamp(360px,calc(100svh-300px),540px)]">
        {/* Arrows */}
        <button
          type="button"
          onClick={() => go(idx - 1)}
          aria-label="Slide anterior"
          className="nav-ctrl hidden md:flex absolute left-1 lg:-left-3 top-1/2 -translate-y-1/2 z-20 w-11 h-11 rounded-full border border-[color:var(--accent)]/40 bg-ink-950/85 backdrop-blur items-center justify-center transition"
          style={{ color: 'var(--accent)' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M15 6l-6 6 6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>
        <button
          type="button"
          onClick={() => go(idx + 1)}
          aria-label="Próximo slide"
          className="nav-ctrl hidden md:flex absolute right-1 lg:-right-3 top-1/2 -translate-y-1/2 z-20 w-11 h-11 rounded-full border border-[color:var(--accent)]/40 bg-ink-950/85 backdrop-blur items-center justify-center transition"
          style={{ color: 'var(--accent)' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <path d="M9 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </button>

        {/* Slides track — all slides same width/height */}
        <div className="relative h-full overflow-hidden"
             onTouchStart={onTouchStart}
             onTouchEnd={onTouchEnd}>
          <div
            className="flex h-full transition-transform duration-500 ease-out"
            style={{ transform: `translateX(-${idx * 100}%)` }}>
            {slides.map(({ Comp }, i) => (
              <div key={i} className="w-full h-full flex-shrink-0 overflow-hidden" aria-hidden={i !== idx}>
                <Comp />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Navigation strip — desktop only */}
      <div className="hidden md:flex relative flex-shrink-0 w-full max-w-7xl mx-auto px-6 lg:px-10 py-3 lg:py-4 items-center justify-between gap-4">
        <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-white/40">
          <span style={{ color: 'var(--accent)' }}>← / →</span> · arraste · clique
        </span>

        <div className="flex items-center gap-2 sm:gap-3">
          {slides.map((s, i) => (
            <button
              key={i}
              type="button"
              onClick={() => go(i)}
              aria-label={`Ir para ${s.label}`}
              aria-current={i === idx}
              className="group flex items-center gap-2 transition focus:outline-none">
              <span
                className={`block h-[3px] transition-all duration-300 ${i === idx ? 'w-10' : 'w-5 bg-white/25 group-hover:bg-white/50'}`}
                style={i === idx ? { backgroundColor: 'var(--accent)', boxShadow: '0 0 12px var(--accent)' } : undefined}></span>
              <span
                className={`text-[10px] font-mono uppercase tracking-[0.16em] transition ${i === idx ? '' : 'text-white/40 group-hover:text-white/75'}`}
                style={i === idx ? { color: 'var(--accent)' } : undefined}>
                {String(i + 1).padStart(2, '0')} · {s.label}
              </span>
            </button>
          ))}
        </div>

        <span className="text-[10px] font-mono uppercase tracking-[0.18em] text-white/40 tabular-nums">
          <span style={{ color: 'var(--accent)' }}>{String(idx + 1).padStart(2, '0')}</span> / {String(total).padStart(2, '0')}
        </span>
      </div>

      <style>{`
        .nav-ctrl:hover {
          background-color: var(--accent);
          color: #0a0a0b !important;
          transform: translateY(-50%) scale(1.06);
          border-color: var(--accent);
        }
      `}</style>
    </section>);

}

function TechBlockShell({ number, label, title, children, accent = false }) {
  return (
    <div className={`fade-up brackets relative p-5 md:p-7 lg:p-9 border h-full flex flex-col ${
    accent ? 'border-white/20 bg-white/[.03]' : 'border-white/10 bg-white/[.015]'}`
    }>
      <span className="br-tr"></span>
      <span className="br-br"></span>
      {/* Header strip */}
      <div className="flex items-center gap-4 mb-5">
        <span className="text-[11px] font-mono tracking-[0.18em] text-white/45">{number}</span>
        <span className="h-px flex-1 bg-white/15 rule-sweep" style={{ animationDelay: '.2s' }}></span>
        <span className="text-[10.5px] font-mono tracking-[0.18em] uppercase text-white/60">{label}</span>
      </div>
      {/* Heading */}
      <h3 className="text-[22px] sm:text-[24px] md:text-[28px] lg:text-[30px] font-semibold leading-[1.15] h-display text-white max-w-3xl">
        {title}
      </h3>
      {/* Body */}
      <div className="mt-6 lg:mt-8 flex-1 min-h-0">{children}</div>
    </div>);

}

function WhyAI() {
  return (
    <TechBlockShell
      number="// 01"
      label="Implementação"
      title={<><span className="text-white/60">IA não é um diferencial.</span> É a <span className="hl-solid">fundação da nossa metodologia.</span></>}>

      <div className="grid lg:grid-cols-[1fr_1fr] gap-10 lg:gap-16 items-center">
        <div className="space-y-5 max-w-xl">
          <p className="text-[15px] md:text-[16px] lg:text-[17px] text-white/80 leading-[1.65] font-medium">
            Reconstruímos cada etapa do projeto em torno de IA: requisitos, mapeamento,
            configuração, migração, testes e treinamento.
          </p>
          <p className="text-[13.5px] md:text-[14px] text-white/55 leading-[1.65]">
            O consultor passa de execução para supervisão, e implementações que
            tradicionalmente levavam mais de um ano são{' '}
            <strong className="text-white font-semibold">entregues em semanas, com custo proporcional</strong>.
          </p>
        </div>

        <ImplementationSteps />
      </div>
    </TechBlockShell>);
}

function ImplementationSteps() {
  const steps = [
    'Levantamento de requisitos',
    'Mapeamento de processos',
    'Configuração e workflows',
    'Migração de dados',
    'Testes e treinamento',
  ];

  return (
    <div className="relative">
      {/* Vertical connector */}
      <div className="absolute left-[14px] top-5 bottom-5 w-px bg-white/10 pointer-events-none" />

      <div className="space-y-1">
        {steps.map((label, i) => (
          <div key={i} className="flex items-center gap-4 py-2.5">
            {/* Step dot */}
            <div className="relative z-10 w-[28px] h-[28px] rounded-full border border-white/20 bg-ink-950
                            flex items-center justify-center flex-shrink-0">
              <span className="text-[9px] font-mono text-white/45">{String(i + 1).padStart(2, '0')}</span>
            </div>
            {/* Label + IA badge */}
            <div className="flex-1 flex items-center justify-between gap-3 border-b border-white/8 pb-2.5">
              <span className="text-[13.5px] text-white/75 font-medium">{label}</span>
              <span className="text-[9px] font-mono tracking-widest text-white/35 border border-white/12 rounded px-2 py-0.5 flex-shrink-0">
                IA
              </span>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-4 ml-[44px] flex items-center gap-2 text-[10px] font-mono text-white/30">
        <span className="w-1.5 h-1.5 rounded-full bg-white/40 led-pulse flex-shrink-0" />
        execução assistida por IA · supervisão humana
      </div>
    </div>
  );
}

function WhyMCP() {
  // Clients that can drive the ERP. User clicks a tab → mock UI of that app
  // operating Odoo appears in the right column.
  const clients = [
    { id: 'chatgpt',  label: 'ChatGPT' },
    { id: 'claude',   label: 'Claude' },
    { id: 'gemini',   label: 'Gemini' },
    { id: 'openclaw', label: 'OpenClaw' },
  ];
  const [active, setActive] = useStateS('chatgpt');

  return (
    <TechBlockShell
      number="// 02"
      label="Operação"
      accent
      title={<>Após o go-live, a operação acontece em <span className="hl-solid">linguagem natural.</span></>}>

      <div className="grid lg:grid-cols-[1fr_1fr] gap-10 lg:gap-16 items-center">
        <div className="space-y-5 max-w-xl">
          <p className="text-[15px] md:text-[16px] lg:text-[17px] text-white/80 leading-[1.65] font-medium">
            O ERP é entregue conectado às plataformas de IA já adotadas pela sua equipe
            (ChatGPT, Claude, Gemini, Telegram).
          </p>
          <p className="text-[13.5px] md:text-[14px] text-white/55 leading-[1.65]">
            Pedidos, consultas, propostas e alertas são executados em linguagem natural
            via uma única instrução, e a operação{' '}
            <strong className="text-white font-semibold">escala sem ampliação proporcional de equipe</strong>.
          </p>
          <div className="pt-2 flex flex-wrap gap-1.5 text-[10.5px] font-mono">
            {clients.map((c) => (
              <button
                key={c.id}
                type="button"
                onClick={() => setActive(c.id)}
                className={`px-2.5 py-1 border transition uppercase tracking-wider
                  ${active === c.id
                    ? 'bg-white text-ink-950 border-white font-semibold'
                    : 'border-white/15 text-white/70 hover:border-white/40 hover:text-white'}`}>
                {c.label}
              </button>
            ))}
          </div>
          <p className="text-[11.5px] font-mono uppercase tracking-[0.16em] text-white/35">
            ↑ selecione para visualizar a interface
          </p>
        </div>

        {/* Right column — interactive client preview */}
        <ClientPreview kind={active} />
      </div>
    </TechBlockShell>);

}

// ClientPreview — renders a small mock interface of one of the supported
// AI clients operating the ERP. Each preview is just-enough detail to be
// recognizable without copying the actual product UI.
function ClientPreview({ kind }) {
  return (
    <div key={kind} className="relative bg-black/40 border border-white/10 p-3 md:p-4 brackets animate-[clientFade_.4s_ease_both]">
      <span className="br-tr"></span>
      <span className="br-br"></span>
      <style>{`@keyframes clientFade { from { opacity:0; transform: translateY(8px); } }`}</style>
      {kind === 'chatgpt'  && <ChatGPTPreview/>}
      {kind === 'claude'   && <ClaudePreview/>}
      {kind === 'gemini'   && <GeminiPreview/>}
      {kind === 'openclaw' && <OpenClawTelegramPreview/>}
    </div>);

}

function ChatGPTPreview() {
  return (
    <div className="rounded-lg bg-[#212121] text-[#ececec] overflow-hidden border border-white/[.06]">
      {/* App bar */}
      <div className="px-3 py-2 border-b border-white/[.06] flex items-center gap-2">
        <span className="w-6 h-6 rounded-full bg-[#10a37f] text-white flex items-center justify-center text-[11px] font-bold">●</span>
        <div className="flex-1 text-[12px] font-medium">ChatGPT</div>
        <div className="text-[10px] font-mono text-white/40">deepstrat-mcp</div>
      </div>
      {/* Messages */}
      <div className="p-3 space-y-3 text-[12.5px] leading-snug">
        <div className="flex justify-end">
          <div className="max-w-[82%] px-3 py-2 rounded-2xl rounded-br-md bg-[#2f2f2f]">
            qual foi nosso faturamento de outubro?
          </div>
        </div>
        <div className="flex gap-2">
          <span className="w-6 h-6 rounded-full bg-[#10a37f] shrink-0 flex items-center justify-center text-white text-[10px] font-bold">G</span>
          <div className="flex-1 space-y-1">
            <div className="text-[#ececec]">R$ 1.247.300 em outubro. 18% acima de setembro.</div>
            <div className="text-white/55 text-[11.5px]">Maior cliente: Lumen com R$ 184k.</div>
            <div className="text-white/55 text-[11.5px]">Quer que eu detalhe por cliente?</div>
          </div>
        </div>
      </div>
      {/* Composer */}
      <div className="p-3 border-t border-white/[.06]">
        <div className="flex items-center gap-2 bg-[#2f2f2f] rounded-full px-3 py-2 text-[11.5px] text-white/45">
          <span className="flex-1">Pergunte qualquer coisa…</span>
          <span className="w-6 h-6 rounded-full bg-white text-ink-950 flex items-center justify-center text-[12px]">↑</span>
        </div>
      </div>
    </div>);

}

function ClaudePreview() {
  return (
    <div className="rounded-lg bg-[#f7f4ee] text-[#1d1c1a] overflow-hidden border border-black/[.06]">
      {/* App bar */}
      <div className="px-3 py-2 border-b border-black/[.06] flex items-center gap-2">
        <span className="w-6 h-6 rounded-full bg-[#d97757] text-white flex items-center justify-center text-[11px]">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"/></svg>
        </span>
        <div className="flex-1 text-[12px] font-medium">Claude</div>
        <div className="text-[10px] font-mono text-black/40">deepstrat-mcp</div>
      </div>
      {/* Messages */}
      <div className="p-3 space-y-3 text-[12.5px] leading-snug">
        <div className="flex justify-end">
          <div className="max-w-[82%] px-3 py-2 rounded-2xl rounded-br-md bg-[#1d1c1a] text-[#f7f4ee]">
            crie uma proposta pra Acme nos termos padrão
          </div>
        </div>
        <div className="flex gap-2">
          <span className="w-6 h-6 rounded-full bg-[#d97757] shrink-0 flex items-center justify-center text-white text-[10px]">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"/></svg>
          </span>
          <div className="flex-1 space-y-1">
            <div>Proposta P-217 montada e anexada no e-mail deles.</div>
            <div className="text-black/55 text-[11.5px]">Inclui os 3 itens que você costuma cotar com a Acme.</div>
            <div className="text-black/55 text-[11.5px]">Validade: 30 dias. Posso ajustar?</div>
          </div>
        </div>
      </div>
      {/* Composer */}
      <div className="p-3 border-t border-black/[.06]">
        <div className="flex items-center gap-2 bg-white rounded-2xl px-3 py-2 text-[11.5px] text-black/45 border border-black/10">
          <span className="flex-1">Replique a Claude…</span>
          <span className="w-6 h-6 rounded-full bg-[#d97757] text-white flex items-center justify-center text-[12px]">↑</span>
        </div>
      </div>
    </div>);

}

function GeminiPreview() {
  return (
    <div className="rounded-lg bg-[#1e1f20] text-[#e3e3e3] overflow-hidden border border-white/[.06]">
      {/* App bar */}
      <div className="px-3 py-2 border-b border-white/[.06] flex items-center gap-2">
        <span className="w-6 h-6 rounded-full flex items-center justify-center text-white text-[11px]"
              style={{ background: 'linear-gradient(135deg, #4285f4, #9b72cb, #d96570)' }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2 L13 9 L20 12 L13 15 L12 22 L11 15 L4 12 L11 9 Z"/>
          </svg>
        </span>
        <div className="flex-1 text-[12px] font-medium">Gemini</div>
        <div className="text-[10px] font-mono text-white/40">deepstrat-mcp</div>
      </div>
      {/* Messages */}
      <div className="p-3 space-y-3 text-[12.5px] leading-snug">
        <div className="flex justify-end">
          <div className="max-w-[82%] px-3 py-2 rounded-2xl rounded-br-md bg-[#2a2b2d] border border-white/[.06]">
            me avisa se algum cliente passar de 60 dias em atraso
          </div>
        </div>
        <div className="flex gap-2">
          <span className="w-6 h-6 rounded-full shrink-0 flex items-center justify-center text-white text-[10px]"
                style={{ background: 'linear-gradient(135deg, #4285f4, #9b72cb, #d96570)' }}>
            <svg width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2 L13 9 L20 12 L13 15 L12 22 L11 15 L4 12 L11 9 Z"/>
            </svg>
          </span>
          <div className="flex-1 space-y-1">
            <div>Combinado.</div>
            <div className="text-white/55 text-[11.5px]">Vou monitorar o módulo financeiro e te avisar aqui assim que acontecer.</div>
            <div className="mt-1 inline-flex items-center gap-1.5 text-[10.5px] text-white/45 bg-white/[.04] border border-white/10 px-2 py-1 rounded-full">
              <span className="w-1 h-1 rounded-full bg-[#4285f4]"></span>
              alerta criado
            </div>
          </div>
        </div>
      </div>
      {/* Composer */}
      <div className="p-3 border-t border-white/[.06]">
        <div className="flex items-center gap-2 bg-[#2a2b2d] rounded-full px-3 py-2 text-[11.5px] text-white/45 border border-white/10">
          <span className="flex-1">Pergunte ao Gemini…</span>
          <span className="w-6 h-6 rounded-full flex items-center justify-center text-white text-[12px]"
                style={{ background: 'linear-gradient(135deg, #4285f4, #9b72cb)' }}>↑</span>
        </div>
      </div>
    </div>);

}

function OpenClawTelegramPreview() {
  return (
    <div className="rounded-lg bg-[#17212b] text-[#e8eaed] overflow-hidden border border-white/[.06]">
      {/* App bar — Telegram-style */}
      <div className="px-3 py-2 border-b border-white/[.06] flex items-center gap-2 bg-[#1a2734]">
        <span className="w-7 h-7 rounded-full bg-gradient-to-br from-[#2aabee] to-[#0088cc] text-white flex items-center justify-center text-[11px] font-bold">OC</span>
        <div className="flex-1">
          <div className="text-[12px] font-medium text-white">OpenClaw · ERP bot</div>
          <div className="text-[10px] text-[#7d96aa]">online · conectado ao Odoo</div>
        </div>
        <div className="text-[10px] font-mono text-white/40">via Telegram</div>
      </div>
      {/* Messages */}
      <div className="p-3 space-y-2.5 text-[12.5px] leading-snug bg-[#0e1621]"
           style={{
             backgroundImage:
               'radial-gradient(circle at 25% 30%, rgba(255,255,255,.025) 1px, transparent 1px),' +
               'radial-gradient(circle at 75% 70%, rgba(255,255,255,.02) 1px, transparent 1px)',
             backgroundSize: '60px 60px',
           }}>
        <div className="flex justify-end">
          <div className="max-w-[82%] px-3 py-1.5 rounded-2xl rounded-br-md bg-[#2b5278] text-white relative">
            qual o estoque de camiseta P preta?
            <div className="text-[9.5px] text-[#7faecb] text-right mt-0.5">14:32 ✓✓</div>
          </div>
        </div>
        <div className="flex justify-start">
          <div className="max-w-[88%] px-3 py-1.5 rounded-2xl rounded-bl-md bg-[#182533] border border-white/[.04]">
            <div>📦 <strong className="text-white">42 unidades</strong></div>
            <div className="text-white/55 text-[11.5px] mt-0.5">⚠️ abaixo do mínimo (100)</div>
            <div className="text-white/55 text-[11.5px]">Gerar ordem de compra?</div>
            <div className="text-[9.5px] text-white/40 text-right mt-1">14:32</div>
          </div>
        </div>
        <div className="flex justify-end">
          <div className="max-w-[82%] px-3 py-1.5 rounded-2xl rounded-br-md bg-[#2b5278] text-white">
            sim, 200 unidades
            <div className="text-[9.5px] text-[#7faecb] text-right mt-0.5">14:33 ✓✓</div>
          </div>
        </div>
      </div>
      {/* Composer */}
      <div className="px-3 py-2 border-t border-white/[.06] bg-[#17212b] flex items-center gap-2">
        <span className="text-white/45 text-[14px]">📎</span>
        <div className="flex-1 text-[11.5px] text-white/45">Mensagem</div>
        <span className="w-7 h-7 rounded-full bg-[#2aabee] text-white flex items-center justify-center text-[12px]">➤</span>
      </div>
    </div>);

}

function WhyMethod() {
  const phases = [
  { n: '01', t: 'Diagnóstico', tag: 'Fase de descoberta',
    lead: 'Imersão estruturada na operação do cliente: mapeamento de processos, dados, integrações e lacunas técnicas.',
    detail: 'A entrega contempla plano executivo, escopo consolidado e estimativa de custo fundamentada em análise específica.' },
  { n: '02', t: 'Implementação', tag: 'Cronograma reduzido',
    lead: 'Configuração, customizações e migração executadas em paralelo.',
    detail: 'A automação por IA assume o trabalho repetitivo, e a equipe Deepstrat conduz as decisões estruturais. Acompanhamento em ambiente real desde a primeira entrega.' },
  { n: '03', t: 'Hypercare', tag: '60 dias inclusos',
    lead: 'Os 60 dias após o go-live são acompanhados por equipe dedicada: ajustes finos, treinamento contínuo e plantão para incidentes.',
    detail: 'Encerrado o período, suporte recorrente fica disponível conforme a operação evolui.' }];

  return (
    <TechBlockShell
      number="// 03"
      label="Metodologia"
      title={<>Metodologia <span className="hl-solid">clara e previsível</span></>}>

      <div className="grid md:grid-cols-3 gap-8 lg:gap-12 items-center h-full">
        {phases.map((p, i) =>
        <div key={p.n} className="relative flex flex-col h-full">
            {i > 0 && <div className="hidden md:block absolute -left-6 top-7 w-3 h-px bg-white/30"></div>}
            <div className="flex items-center justify-between mb-5">
              <span className="text-[11px] font-mono text-white/40">PHASE_{p.n}</span>
              <span className="text-[10px] px-2 py-0.5 rounded-none bg-white/[.04] text-white/75 font-mono border border-white/15">{p.tag}</span>
            </div>
            <h4 className="text-[22px] lg:text-[24px] font-semibold text-white mb-3">{p.t}</h4>
            <p className="text-[14px] md:text-[14.5px] text-white/75 leading-[1.6] font-medium">{p.lead}</p>
            <p className="mt-3 text-[13px] text-white/50 leading-[1.6]">{p.detail}</p>
          </div>
        )}
      </div>
    </TechBlockShell>);

}

// ───────────────────────── COMPARE ─────────────────────────
function Compare() {
  const cols = [
  { tier: 'Entry-level', name: 'ERPs simplificados',
    tone: 'plain',
    price: 'R$ 100–500 / mês', setup: 'Plug-and-play', dx: 'Limitado',
    good: ['Barato e simples', 'Fácil de começar'],
    bad: ['Trava no crescimento', 'Integrações frágeis', 'Customização zero']
  },
  { tier: 'O ponto certo', name: 'Odoo + Deepstrat',
    tone: 'highlight',
    price: 'TCO 5–10x menor', setup: 'Meses, não anos', dx: '40+ aplicativos · integrados · operável por IA',
    good: ['Capacidade enterprise', 'Custo de PME', 'Operável por IA', 'Tudo em um único sistema'],
    bad: []
  },
  { tier: 'Enterprise', name: 'Plataformas enterprise',
    tone: 'plain',
    price: 'Centenas de milhares', setup: '6–18 meses', dx: 'Capaz, mas pesado',
    good: ['Cobertura completa', 'Mercado consolidado'],
    bad: ['Caro de manter', 'Implementação longa', 'Consultor caro pra tudo', 'Lock-in pesado']
  }];

  return (
    <section id="comparativo" className="snap-section min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] py-10 sm:py-12 lg:py-12 flex items-center">
      <div className="w-full max-w-7xl mx-auto px-6 lg:px-10">
        <div className="fade-up">
          <SectionTitle
            eyebrow="O ponto certo"
            title={<>Você não precisa escolher entre <span className="hl">simples</span> e <span className="hl">capaz</span></>}
            sub="Há quem cobre barato e te deixe na mão quando crescer. Há quem cubra tudo, com cronograma de catedral e fatura à altura. E há o meio onde a Deepstrat opera." />

        </div>
        <div className="mt-10 lg:mt-12 grid md:grid-cols-3 gap-5 items-stretch">
          {cols.map((c, i) =>
          <div key={c.name}
          className={`fade-up rounded-2xl p-7 flex flex-col ${
          c.tone === 'highlight' ?
          'bg-ink-950 text-white shadow-lift md:scale-[1.04] md:-my-2 relative overflow-hidden' :
          'bg-ink-50 border border-ink-150 ring-soft'}`
          }
          style={{ transitionDelay: `${i * 100}ms` }}>
              {c.tone === 'highlight' && <DSSymbol size={220} className="absolute -right-10 -bottom-10 text-white/[.05]" />}
              <div className="relative">
                <div className={`text-[11px] font-mono uppercase tracking-wider ${c.tone === 'highlight' ? 'text-white/70' : 'text-ink-400'}`}>{c.tier}</div>
                <div className={`mt-1.5 text-[20px] font-semibold ${c.tone === 'highlight' ? 'text-white' : 'text-ink-900'}`}>{c.name}</div>

                <dl className={`mt-5 space-y-3 pb-5 border-b ${c.tone === 'highlight' ? 'border-ink-800' : 'border-ink-100'}`}>
                  {[['Custo', c.price], ['Implementação', c.setup], ['Capacidade', c.dx]].map(([k, v]) =>
                <div key={k} className="flex items-baseline justify-between gap-3">
                      <dt className={`text-[11px] uppercase tracking-wider ${c.tone === 'highlight' ? 'text-white/50' : 'text-ink-500'}`}>{k}</dt>
                      <dd className={`text-[13px] text-right font-medium ${c.tone === 'highlight' ? 'text-white' : 'text-ink-900'}`}>{v}</dd>
                    </div>
                )}
                </dl>

                <ul className="mt-5 space-y-2.5 flex-1">
                  {c.good.map((g) =>
                <li key={g} className="flex items-start gap-2.5 text-[13.5px]">
                      <Icon.check width="16" height="16" className={c.tone === 'highlight' ? 'text-white mt-0.5 shrink-0' : 'text-ink-900 mt-0.5 shrink-0'} />
                      <span className={c.tone === 'highlight' ? 'text-white/95' : 'text-ink-700'}>{g}</span>
                    </li>
                )}
                  {c.bad.map((b) =>
                <li key={b} className="flex items-start gap-2.5 text-[13.5px]">
                      <Icon.x width="16" height="16" className="text-ink-300 mt-0.5 shrink-0" />
                      <span className="text-ink-400">{b}</span>
                    </li>
                )}
                </ul>

                {c.tone === 'highlight' &&
              <SquareBtn href="#agendar" {...CAL_TRIGGER_ATTRS} tone="light" className="mt-6 w-full justify-center">
                    Agendar demonstração <Icon.arrow width="14" height="14" />
                  </SquareBtn>
              }
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────────────────────── CTA / Cal.com popup ─────────────────────────
// Loads the Cal.com element-click embed. Any element on the page that carries
// the data-cal-link / data-cal-namespace attrs becomes a trigger for the popup.
const CAL_LINK = 'deepstrat/demonstracao-odoo';
const CAL_NAMESPACE = 'demonstracao-odoo';

function useCalEmbed() {
  useEffectS(() => {
    if (window.__calBooted) return;
    window.__calBooted = true;
    (function (C, A, L) {
      let p = function (a, ar) {a.q.push(ar);};
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal;let ar = arguments;
        if (!cal.loaded) {cal.ns = {};cal.q = cal.q || [];d.head.appendChild(d.createElement("script")).src = A;cal.loaded = true;}
        if (ar[0] === L) {
          const api = function () {p(api, arguments);};
          const namespace = ar[1];api.q = api.q || [];
          if (typeof namespace === "string") {cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
    })(window, "https://app.cal.com/embed/embed.js", "init");
    window.Cal("init", CAL_NAMESPACE, { origin: "https://app.cal.com" });
    window.Cal.ns[CAL_NAMESPACE]("ui", {
      cssVarsPerTheme: { light: { "cal-brand": "#0a0a0b" }, dark: { "cal-brand": "#fafafa" } },
      hideEventTypeDetails: false,
      layout: "month_view"
    });
  }, []);
}

// Attributes to spread onto any clickable element to make it a popup trigger.
const CAL_TRIGGER_ATTRS = {
  'data-cal-link': CAL_LINK,
  'data-cal-namespace': CAL_NAMESPACE,
  'data-cal-config': JSON.stringify({ layout: 'month_view', useSlotsViewOnSmallScreen: 'true' })
};

function CTA() {
  useCalEmbed();

  return (
    <section id="agendar" className="py-24 lg:py-32 relative overflow-hidden">
      <div className="relative max-w-7xl mx-auto px-6 lg:px-10">
        <div className="fade-up brackets relative bg-ink-950 text-white shadow-lift border border-white/10 overflow-hidden">
          <span className="br-tr"></span>
          <span className="br-br"></span>
          <DSSymbol size={620} className="absolute -left-40 -bottom-40 text-white/[.04]" />
          <div className="grid lg:grid-cols-[1fr_.85fr] relative">
            {/* Left: selling copy + primary CTA */}
            <div className="p-9 lg:p-14">
              {/* Header strip — mesmo padrão do TechBlockShell */}
              <div className="flex items-center gap-4 mb-6">
                <span className="text-[11px] font-mono tracking-[0.18em] text-white/45">{'// 03'}</span>
                <span className="h-px flex-1 bg-white/15 rule-sweep" style={{ animationDelay: '.2s' }}></span>
                <span className="text-[10.5px] font-mono tracking-[0.18em] uppercase text-white/60">Contato</span>
              </div>
              <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] font-semibold leading-[1.05]">
                Conheça o Odoo em uma demonstração <span className="hl-solid">guiada</span>
              </h2>
              <p className="mt-5 text-[15.5px] text-white/70 leading-[1.6] max-w-md">
                Uma apresentação estruturada da plataforma, com foco nos módulos mais relevantes
                para a sua operação.
              </p>
              <ul className="mt-7 space-y-3 text-[14px] text-white/80">
                {['Conversa de 30 minutos',
                'Visão geral dos principais módulos',
                'Espaço para tirar dúvidas sobre o projeto'].map((x) =>
                <li key={x} className="flex items-center gap-3"><Icon.check width="16" height="16" className="text-white" />{x}</li>
                )}
              </ul>

              {/* Primary Cal.com trigger */}
              <SquareBtn as="button" {...CAL_TRIGGER_ATTRS} tone="light" className="mt-10">
                Agendar demonstração <Icon.arrow width="14" height="14" />
              </SquareBtn>

              <div className="mt-10 pt-6 border-t border-white/10 text-[12.5px] text-white/55">
                Prefere conversar antes?{' '}
                <a href="https://wa.me/" className="text-white underline underline-offset-2 hover:text-white/80">WhatsApp</a>
                {' '}ou{' '}
                <a href="mailto:contato@deepstrat.com.br" className="text-white underline underline-offset-2 hover:text-white/80">e-mail</a>.
              </div>
            </div>

            {/* Right: visual scheduling preview (decorative, click to open Cal) */}
            <div
              {...CAL_TRIGGER_ATTRS}
              role="button"
              tabIndex={0}
              className="relative p-9 lg:p-12 border-l border-white/10 cursor-pointer group bg-white/[.01] hover:bg-white/[.03] transition-colors"
              aria-label="Abrir agenda Cal.com">

              {/* Mock calendar */}
              <div className="brackets relative border border-white/10 bg-white/[.02] p-5">
                <span className="br-tr"></span>
                <span className="br-br"></span>
                <div className="flex items-center justify-between mb-4">
                  <div className="text-[13px] font-medium text-white">Novembro 2026</div>
                  <div className="flex gap-1">
                    <span className="w-6 h-6 border border-white/15 flex items-center justify-center text-white/45 text-[12px]">‹</span>
                    <span className="w-6 h-6 border border-white/15 flex items-center justify-center text-white/45 text-[12px]">›</span>
                  </div>
                </div>
                <div className="grid grid-cols-7 gap-1 text-[10px] text-white/40 mb-2">
                  {['D', 'S', 'T', 'Q', 'Q', 'S', 'S'].map((d, i) => <div key={i} className="text-center font-mono tracking-wider">{d}</div>)}
                </div>
                <div className="grid grid-cols-7 gap-1">
                  {Array.from({ length: 35 }, (_, i) => {
                    const day = i - 4;
                    const isAvail = [3, 4, 5, 10, 11, 12, 17, 18, 19, 24, 25, 26].includes(day);
                    const isToday = day === 6;
                    return (
                      <div key={i}
                      className={`aspect-square flex items-center justify-center text-[11px] font-mono
                             ${day < 1 ? 'text-white/20' : 'text-white/50'}
                             ${isAvail ? 'bg-white/[.06] border border-white/25 text-white font-medium' : ''}
                             ${isToday ? '!bg-white !text-ink-950 border-white font-semibold' : ''}
                           `}>
                        {day > 0 && day <= 30 ? day : ''}
                      </div>);

                  })}
                </div>
              </div>

              {/* Time slots preview */}
              <div className="mt-4 space-y-2">
                {[
                { d: 'Qua · 13 nov', t: '09:00, 10:30, 14:00, 16:00' },
                { d: 'Qui · 14 nov', t: '11:00, 15:00' },
                { d: 'Sex · 15 nov', t: '09:30, 13:00, 17:00' }].
                map((s, i) =>
                <div key={i} className="flex items-baseline justify-between gap-3 text-[12px] py-2 px-3 bg-white/[.02] border border-white/[.06]">
                    <span className="text-white/90 font-medium">{s.d}</span>
                    <span className="text-white/55 font-mono text-[11px]">{s.t}</span>
                  </div>
                )}
              </div>

              <div className="mt-5 inline-flex items-center gap-2 text-[12px] text-white/70 group-hover:text-white transition">
                Clique para abrir a agenda
                <span className="transition-transform group-hover:translate-x-1">→</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────────── BLOG ─────────────────────────
// Tema Palantir: dark, tech-grid, coordenadas, brackets nos cards.
function Blog() {
  const [posts, setPosts] = useStateS(null); // null = loading, [] = vazio, [...] = ok
  const [err, setErr] = useStateS(null);

  useEffectS(() => {
    let alive = true;
    fetch('/api/blog-posts.php')
      .then((r) => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
      .then((d) => { if (alive) setPosts(d.posts || []); })
      .catch((e) => { if (alive) setErr(e.message); });
    return () => { alive = false; };
  }, []);

  if (err || (Array.isArray(posts) && posts.length === 0)) return null;

  const formatDate = (iso) => {
    if (!iso) return '';
    const d = new Date(iso.replace(' ', 'T') + 'Z');
    if (isNaN(d)) return '';
    return d.toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' });
  };

  const count = Array.isArray(posts) ? posts.length : 3;

  return (
    <section id="blog" className="snap-section relative min-h-[calc(100svh-64px)] sm:min-h-[calc(100svh-72px)] lg:min-h-[calc(100svh-80px)] py-16 lg:py-20 bg-ink-950 text-white overflow-hidden flex items-center">
      {/* Multi-layer tech background (mesmo padrao do Why/Implementation) */}
      <div className="absolute inset-0 tech-grid-fine scan-mask opacity-60 pointer-events-none"></div>
      <div className="absolute inset-0 tech-grid scan-mask pointer-events-none"></div>

      {/* Coordenadas nos cantos */}
      <div className="absolute top-6 left-6 coord hidden md:block">{'> deepstrat/blog · feed=public'}</div>
      <div className="absolute top-6 right-6 coord text-right hidden md:block">
        {`posts=${String(count).padStart(2,'0')} · refresh=10min · src=odoo`}
      </div>

      <div className="relative w-full max-w-7xl mx-auto px-6 lg:px-10">
        <div className="fade-up max-w-3xl">
          <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-white/55 mb-3 flex items-center gap-2.5">
            <DSSymbol size={12} className="text-white" />
            Blog
          </div>
          <h2 className="h-display text-[32px] sm:text-[40px] md:text-[48px] lg:text-[52px] leading-[1.05] font-semibold text-white">
            Nosso <span className="hl-solid">Blog</span>
          </h2>
        </div>

        {/* Separator */}
        <div className="fade-up flex items-baseline gap-4 mt-6 mb-4">
          <span className="text-[11px] font-mono uppercase tracking-[0.18em] text-white/55">
            {'// Últimos Posts'}
          </span>
          <span className="flex-1 h-px bg-white/15"></span>
        </div>

        <div className="grid md:grid-cols-3 gap-4 md:gap-5 lg:gap-6">
          {posts === null ? (
            Array.from({ length: 3 }).map((_, i) =>
              <div key={i} className="brackets border border-white/12 bg-white/[.02] overflow-hidden">
                <span className="br-tr"></span><span className="br-br"></span>
                <div className="aspect-[16/10] bg-white/[.04] animate-pulse"></div>
                <div className="p-6">
                  <div className="h-3 w-24 bg-white/10 rounded animate-pulse"></div>
                  <div className="mt-4 h-5 w-4/5 bg-white/10 rounded animate-pulse"></div>
                  <div className="mt-2 h-4 w-3/5 bg-white/10 rounded animate-pulse"></div>
                </div>
              </div>
            )
          ) : (
            posts.map((p, i) =>
              <a key={p.id} href={p.url}
                className="fade-up group relative brackets border border-white/10 bg-white/[.02] overflow-hidden hover:border-white/25 transition-colors"
                style={{ transitionDelay: `${i * 100}ms`, color: '#fff' }}>
                <span className="br-tr"></span><span className="br-br"></span>

                {/* Indice estilo telemetria */}
                <div className="absolute top-3 left-4 z-10 text-[9.5px] font-mono uppercase tracking-[0.14em] text-white/45">
                  {String(i + 1).padStart(2, '0')} / {String(count).padStart(2, '0')}
                </div>

                {/* Capa */}
                <div className="aspect-[16/9] bg-ink-900 overflow-hidden relative border-b border-white/10">
                  {p.cover_url ?
                    <>
                      <img src={p.cover_url} alt={p.title} loading="lazy"
                        className="w-full h-full object-cover opacity-90 group-hover:opacity-100 transition-opacity duration-500" />
                      <div className="absolute inset-0 pointer-events-none"
                        style={{ background: 'linear-gradient(to bottom, transparent 60%, rgba(10,10,11,.55) 100%)' }}></div>
                    </> :
                    <div className="w-full h-full flex items-center justify-center bg-white/[.02]">
                      <DSSymbol size={48} className="text-white/15" />
                    </div>
                  }
                </div>

                <div className="p-5">
                  <div className="text-[10.5px] font-mono uppercase tracking-[0.16em] text-white/50">
                    {formatDate(p.published)}{p.blog ? ' · ' + p.blog : ''}
                  </div>
                  <h3 className="mt-2 text-[16px] font-semibold text-white leading-[1.3] line-clamp-2">
                    {p.title}
                  </h3>
                  {p.subtitle || p.teaser ?
                    <p className="mt-2 text-[13px] text-white/60 leading-[1.5] line-clamp-2">
                      {p.subtitle || p.teaser}
                    </p>
                  : null}
                  <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
                    <span className="text-[11px] font-mono uppercase tracking-[0.14em]" style={{ color: 'var(--accent)' }}>
                      ler post
                    </span>
                    <span className="w-7 h-7 rounded-full border border-white/20 flex items-center justify-center text-white/70 group-hover:border-white/60 group-hover:text-white group-hover:translate-x-0.5 transition-all">
                      →
                    </span>
                  </div>
                </div>
              </a>
            )
          )}
        </div>

        {/* Ver todos: link para a galeria completa */}
        {posts && posts.length > 0 ?
          <div className="fade-up mt-6 lg:mt-8 flex items-baseline gap-4">
            <span className="flex-1 h-px bg-white/15"></span>
            <a href="/blog"
              className="group inline-flex items-center gap-3 text-[12px] font-mono uppercase tracking-[0.18em] text-white/70 hover:text-white transition-colors">
              ver biblioteca completa
              <span className="w-7 h-7 rounded-full border border-white/20 flex items-center justify-center group-hover:border-white/60 group-hover:translate-x-0.5 transition-all">
                →
              </span>
            </a>
            <span className="flex-1 h-px bg-white/15"></span>
          </div>
        : null}
      </div>
    </section>);

}

// ───────────────────────── BRAND SPIN BAND ─────────────────────────
// Self-contained band with the centered, slowly-spinning Deepstrat symbol
// on a blueprint-style white background. Thin blue gridlines (Deepstrat
// deep-direction blue, #2470db) evoke an engineering datasheet. Sits flush
// above the footer; the all-white base flows naturally into both the white
// CTA section above and the white footer below.
function BrandSpinBand() {
  const BP_BLUE = '#2470db';
  const BP_BLUE_INK = '#16407a';
  const canvasRef = useRefS(null);
  const iconsLayerRef = useRefS(null);
  const [webgl, setWebgl] = useStateS(false);

  // Icon physics is bootstrapped via a window-level helper installed on the
  // first mount. The React effect just kicks it off (and doesn't tear it
  // down on unmount, so a hydration mismatch elsewhere can't kill it). The
  // helper itself is idempotent: a global flag ensures we only run one
  // animation loop even if BrandSpinBand mounts/unmounts repeatedly.
  useEffectS(() => {
    if (typeof window === 'undefined') return;
    installIconPhysics();
  }, []);

  useEffectS(() => {
    if (typeof window === 'undefined') return;
    const THREE = window.THREE;
    const SVGLoader = THREE && THREE.SVGLoader;
    const canvas = canvasRef.current;
    if (!THREE || !SVGLoader || !canvas) return;

    // Probe WebGL — keep SVG fallback if WebGL isn't available.
    try {
      const probe = document.createElement('canvas').getContext('webgl') ||
                    document.createElement('canvas').getContext('experimental-webgl');
      if (!probe) return;
    } catch (e) { return; }

    setWebgl(true);

    const w0 = canvas.clientWidth || 800;
    const h0 = canvas.clientHeight || 400;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(35, w0 / h0, 0.1, 3000);
    camera.position.set(0, 0, 620);

    const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
    renderer.setSize(w0, h0, false);
    renderer.setClearColor(0x000000, 0);

    // Dramatic lighting on a polished-black surface: low ambient so the symbol
    // reads as a deep silhouette, with strong saturated grazing lights that
    // produce bright colored highlights along the bevels and edges.
    scene.add(new THREE.AmbientLight(0xffffff, 0.30));
    // Cool blue key — primary highlight, slightly grazing from above-left
    const keyLight = new THREE.DirectionalLight(0x6ba3ff, 3.4);
    keyLight.position.set(-5, 6, 7);
    scene.add(keyLight);
    // Hot white fill — grazes the right side for crisp white highlights
    const fillLight = new THREE.DirectionalLight(0xffffff, 1.6);
    fillLight.position.set(7, -2, 3);
    scene.add(fillLight);
    // Purple rim — wraps the back edges in violet
    const rimLight = new THREE.DirectionalLight(0xb085ff, 2.2);
    rimLight.position.set(-2, -5, -5);
    scene.add(rimLight);
    // Top accent — pure white pop on the upper facets
    const topLight = new THREE.DirectionalLight(0xffffff, 1.4);
    topLight.position.set(0, 10, 1);
    scene.add(topLight);
    // Warm orange point — Deepstrat AI accent, off to the side for a hint of warmth
    const warmAccent = new THREE.PointLight(0xfcb865, 1.8, 700);
    warmAccent.position.set(180, 40, 220);
    scene.add(warmAccent);

    // Procedural environment map — gives the metallic surface something colored
    // to reflect (without it, high-metalness materials look dull/grey).
    const envScene = new THREE.Scene();
    const envColors = [
      { c: 0x6ba3ff, p: [0,  4,  0] }, // top — blue
      { c: 0xb085ff, p: [0, -4,  0] }, // bottom — purple
      { c: 0xffffff, p: [4,  0,  0] }, // right — white
      { c: 0xfcb865, p: [-4, 0,  0] }, // left — warm
      { c: 0x4a90ff, p: [0,  0,  4] }, // front — blue
      { c: 0x1a1a2a, p: [0,  0, -4] }, // back — near-black
    ];
    envColors.forEach(({ c, p }) => {
      const m = new THREE.Mesh(
        new THREE.PlaneGeometry(8, 8),
        new THREE.MeshBasicMaterial({ color: c, side: THREE.DoubleSide })
      );
      m.position.set(...p);
      m.lookAt(0, 0, 0);
      envScene.add(m);
    });
    const pmrem = new THREE.PMREMGenerator(renderer);
    const envTex = pmrem.fromScene(envScene, 0.04).texture;
    scene.environment = envTex;
    envScene.traverse(o => {
      if (o.geometry) o.geometry.dispose();
      if (o.material) o.material.dispose();
    });
    pmrem.dispose();

    // Brand assets — symbol (4-arm mark) + wordmark ("deep strat" letters).
    // Both inlined so we don't need a runtime fetch; both flipped on Y to
    // correct SVG's inverted coordinate system.
    const symbolSvg =
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="800 233 320 322">' +
      '<path d="M996.02,392.43s0-.08,0-.12c-.03-1.36-.76-2.58-1.94-3.1-16.02-7.09-26.23-17.91-31.23-33.06-.44-1.35-1.56-2.22-2.84-2.22s-2.39.87-2.84,2.22c-4.99,15.15-15.21,25.97-31.23,33.06-1.18.52-1.91,1.74-1.94,3.1,0,.04,0,.08,0,.12,0,.04,0,.08,0,.12.03,1.36.76,2.58,1.94,3.1,16.02,7.09,26.23,17.91,31.23,33.06.44,1.35,1.56,2.22,2.84,2.22s2.39-.87,2.84-2.22c4.99-15.15,15.21-25.97,31.23-33.06,1.18-.52,1.91-1.74,1.94-3.1,0-.04,0-.08,0-.11Z"/>' +
      '<path d="M1045.42,418.97c-8.18-3.48-16.26-5.25-23.97-5.25-9.01,0-17.19,2.39-24.31,7.1-12.51,8.27-19.69,22.96-19.69,40.3l-.18,96.76c10.56-1.12,20.83-3.23,30.71-6.23l.16-90.49c0-6.98,2.1-12.22,5.92-14.74,1.96-1.3,4.47-1.96,7.45-1.96,3.39,0,7.34.88,11.41,2.56l.15.07,65.09,37.42c5.65-8.48,10.55-17.49,14.59-26.96l-66.48-38.18-.86-.39Z"/>' +
      '<path d="M980.15,351.17c3.85,7.67,9.78,13.84,17.63,18.34,4.91,2.82,10.47,4.91,16.56,6.25,3.69.81,7.47,1.17,11.24,1.17l99.72.07c-.98-10.58-2.95-20.87-5.82-30.79l-91.72.03c-3.2,0-6.41-.37-9.47-1.32-1.89-.59-3.6-1.31-5.08-2.16-2.6-1.49-4.45-3.32-5.51-5.43-2.06-4.11-1.28-9.72,2.21-15.81l39.5-69.09c-8.62-5.55-17.79-10.31-27.4-14.21l-38.86,67.99c-8.67,15.11-9.77,31.5-3.01,44.96Z"/>' +
      '<path d="M874.27,372.14c8.18,3.48,16.26,5.25,23.97,5.25,9.01,0,17.19-2.39,24.31-7.1,12.51-8.27,19.69-22.96,19.69-40.3l.19-103.02c-10.56,1.09-20.83,3.18-30.71,6.16l-.18,96.81c0,6.98-2.1,12.22-5.92,14.74-1.96,1.3-4.47,1.96-7.45,1.96-3.39,0-7.34-.88-11.41-2.56l-.15-.07-68.28-39.25c-5.39,8.65-10.01,17.83-13.75,27.45l68.84,39.53.86.39Z"/>' +
      '<path d="M939.54,439.94c-3.85-7.67-9.78-13.84-17.63-18.34-4.91-2.82-10.47-4.91-16.56-6.25-3.69-.81-7.47-1.17-11.24-1.17l-99.41-.07c1.38,10.61,3.78,20.9,7.07,30.79l90.17-.03c3.2,0,6.41.37,9.47,1.32,1.89.59,3.6,1.31,5.08,2.16,2.6,1.49,4.45,3.32,5.51,5.43,2.06,4.11,1.28,9.72-2.21,15.81l-36.98,64.69c8.74,5.37,18.01,9.96,27.72,13.66l36.03-63.04c8.67-15.11,9.77-31.5,3.01-44.96Z"/>' +
      '</svg>';
    const wordmarkSvg =
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="356 578 1208 230">' +
      '<path d="M361.83,694.74c0-40.47,27.32-67.99,62.93-67.99,17.4,0,31.77,6.68,41.68,18.41v-61.23h31.36v176.57h-30.76v-16.39c-9.92,11.74-24.48,18.62-42.29,18.62-35.61,0-62.93-27.32-62.93-67.99ZM430.63,734c21.45,0,36.63-15.58,36.63-39.26s-15.18-39.26-36.63-39.26-36.63,15.78-36.63,39.26,15.18,39.26,36.63,39.26Z"/>' +
      '<path d="M522.09,695.15c0-40.87,28.73-68.39,68.6-68.39,44.72,0,73.25,35.21,68.39,78.31h-104.21c2.23,18.41,18.21,29.75,35.41,29.75,13.96,0,27.52-7.28,33.39-20.03h33.19c-8.9,29.14-33.19,47.96-66.98,47.96-40.07,0-67.79-27.52-67.79-67.59ZM625.5,680.58c-5.06-15.78-18.01-25.9-34.4-25.9s-29.95,9.92-34.8,26.1l69.2-.2Z"/>' +
      '<path d="M675.89,695.15c0-40.87,28.73-68.39,68.6-68.39,44.72,0,73.25,35.21,68.4,78.31h-104.21c2.23,18.41,18.21,29.75,35.41,29.75,13.96,0,27.52-7.28,33.39-20.03h33.19c-8.9,29.14-33.19,47.96-66.98,47.96-40.07,0-67.79-27.52-67.79-67.59ZM779.29,680.58c-5.06-15.78-18.01-25.9-34.4-25.9s-29.95,9.92-34.8,26.1l69.21-.2Z"/>' +
      '<path d="M837.78,628.98h30.96v16.39c9.91-11.74,24.48-18.62,42.09-18.62,35.61,0,62.93,27.52,62.93,67.99s-27.32,67.99-62.93,67.99c-17.4,0-31.77-6.68-41.68-18.21v56.46h-31.36v-172ZM904.96,734c21.45,0,36.63-15.58,36.63-39.26s-15.18-39.26-36.63-39.26-36.63,15.78-36.63,39.26,15.18,39.26,36.63,39.26Z"/>' +
      '<path d="M1027.59,712.96h31.16c0,12.95,9.71,22.06,23.68,22.06,9.31,0,20.03-4.05,20.03-13.15,0-10.72-13.15-11.94-27.92-16.8-18.82-6.07-42.7-11.13-42.7-38.65s18.82-40.67,46.14-40.67,49.37,17.4,49.37,41.89h-30.96c0-8.3-7.49-13.96-17.2-13.96-9.11,0-15.78,4.86-15.78,12.14,0,9.11,10.93,10.93,25.09,15.38,20.44,6.27,44.92,12.14,44.92,39.66,0,26.1-22.06,41.89-52.61,41.89-32.17,0-53.22-20.44-53.22-49.78Z"/>' +
      '<path d="M1169.85,642.62h-24.28v-28.33h24.28v-30.35h31.57v30.35h24.08v28.33h-24.08v117.89h-31.57v-117.89Z"/>' +
      '<path d="M1320.08,694.54c0-40.47,27.32-67.79,62.93-67.79,17.6,0,32.17,6.88,42.09,18.62v-16.39h31.16v131.53h-31.16v-16.59c-9.92,11.94-24.49,18.82-42.09,18.82-35.61,0-62.93-27.52-62.93-68.19ZM1388.88,734c21.45,0,36.63-15.78,36.63-39.46s-15.18-39.05-36.63-39.05-36.63,15.58-36.63,39.05,15.18,39.46,36.63,39.46Z"/>' +
      '<path d="M1250.61,628.98h31.16v18.82c3.44-7.49,14.57-19.83,32.78-21.04v31.97c-19.63,0-32.38,13.15-32.38,33.39v68.4h-31.57v-131.53Z"/>' +
      '<path d="M1502.53,642.47h-24.28v-28.33h24.28v-30.35h31.57v30.35h24.08v28.33h-24.08v118.04h-31.57v-118.04Z"/>' +
      '</svg>';
    const loader = new SVGLoader();
    const symbolData   = loader.parse(symbolSvg);
    const wordmarkData = loader.parse(wordmarkSvg);

    // Two materials:
    //  • symbolMaterial — polished obsidian (metalness + clearcoat) for the
    //    4-arm mark, so the colored env map paints highlights on its bevels.
    //  • wordmarkMaterial — flat matte ink for the letters. Unlit
    //    MeshBasicMaterial: no shine, no env-map reflections, no surface
    //    texture. Clean, readable type.
    const symbolMaterial = new THREE.MeshPhysicalMaterial({
      color:              0x07070a,
      metalness:          0.85,
      roughness:          0.22,
      clearcoat:          0.90,
      clearcoatRoughness: 0.15,
      reflectivity:       0.6,
      envMapIntensity:    1.4,
      side:               THREE.DoubleSide,
    });
    const wordmarkMaterial = new THREE.MeshBasicMaterial({
      color: 0x0a0a0b,
      side:  THREE.DoubleSide,
    });

    // SVGLoader.createShapes() relies on auto-detection (winding direction or
    // ray-casting) to figure out which sub-paths are holes. For our wordmark
    // it fails — the bowls of d/e/p/a get filled as solid rectangles.
    //
    // We do hole assignment manually: for each <path>, the sub-path with the
    // largest bounding-box area is the outer shape; every other sub-path is a
    // hole. This is robust for typographic glyphs (each letter has 1 outer
    // contour + 0..N counterforms, with the outer always being the largest).
    const pathToShapesWithHoles = (path) => {
      const sub = path.subPaths || [];
      if (!sub.length) return [];
      if (sub.length === 1) {
        const s = new THREE.Shape();
        s.curves = sub[0].curves;
        return [s];
      }
      // Bounding-box area per sub-path
      const bboxArea = sub.map((sp) => {
        const pts = sp.getPoints();
        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
        for (const p of pts) {
          if (p.x < minX) minX = p.x;
          if (p.y < minY) minY = p.y;
          if (p.x > maxX) maxX = p.x;
          if (p.y > maxY) maxY = p.y;
        }
        return (maxX - minX) * (maxY - minY);
      });
      let outerIdx = 0;
      for (let i = 1; i < bboxArea.length; i++) {
        if (bboxArea[i] > bboxArea[outerIdx]) outerIdx = i;
      }
      const shape = new THREE.Shape();
      shape.curves = sub[outerIdx].curves;
      for (let i = 0; i < sub.length; i++) {
        if (i === outerIdx) continue;
        const hole = new THREE.Path();
        hole.curves = sub[i].curves;
        shape.holes.push(hole);
      }
      return [shape];
    };

    // Build an extruded group from parsed SVG path data; centers the group on
    // its bounding-box midpoint so subsequent positioning is relative to its
    // own center, not its top-left corner. Uses `shapeBuilder(path)` to convert
    // each parsed ShapePath into Shapes — callers can swap in a custom builder
    // (e.g. manual hole detection for glyphs).
    const buildExtruded = (svgData, extrudeOpts, mat, shapeBuilder) => {
      const buildShapes = shapeBuilder || ((p) => SVGLoader.createShapes(p));
      const g = new THREE.Group();
      svgData.paths.forEach((path) => {
        buildShapes(path).forEach((shape) => {
          g.add(new THREE.Mesh(new THREE.ExtrudeGeometry(shape, extrudeOpts), mat));
        });
      });
      const box = new THREE.Box3().setFromObject(g);
      const c = box.getCenter(new THREE.Vector3());
      const sz = box.getSize(new THREE.Vector3());
      g.children.forEach((m) => m.position.sub(c));
      return { group: g, size: sz };
    };

    const symbolBuilt = buildExtruded(symbolData, {
      depth: 26, bevelEnabled: true, bevelThickness: 2.0, bevelSize: 1.3, bevelSegments: 4, curveSegments: 24,
    }, symbolMaterial);
    // Wordmark is extruded WITHOUT bevel — letters with tight inner curves
    // (the counterforms of d/e/p/a) develop self-intersection artifacts when
    // beveled. Flat extrusion + the matte BasicMaterial reads as clean type.
    // Manual hole-detection is used here because SVGLoader.createShapes()
    // fails to identify the counterforms of d/e/p/a as holes.
    const wordmarkBuilt = buildExtruded(wordmarkData, {
      depth: 8, bevelEnabled: false, curveSegments: 16,
    }, wordmarkMaterial, pathToShapesWithHoles);

    // Proportions tuned to match the official brand lockup (logo-narrow.png,
    // aspect ~3.88:1, symbol section ~27% of total width). The wordmark width
    // is set as a multiple of the symbol display-height; this keeps the letters
    // reading at the correct visual weight relative to the mark.
    const SYMBOL_H        = 90;                       // smaller overall lockup
    const WM_W_TO_SYM_H   = 3.0;                      // wordmark width = 3x symbol height
    const symScale = SYMBOL_H / symbolBuilt.size.y;
    const wmDisplayWidth = SYMBOL_H * WM_W_TO_SYM_H;
    const wmScale = wmDisplayWidth / wordmarkBuilt.size.x;
    // scale.y is negative to flip SVG's downward Y axis.
    symbolBuilt.group.scale.set(symScale, -symScale, symScale);
    wordmarkBuilt.group.scale.set(wmScale, -wmScale, wmScale);

    const symW = symbolBuilt.size.x * symScale;
    const wmW  = wordmarkBuilt.size.x * wmScale;
    const GAP  = 14;
    const totalW = symW + GAP + wmW;
    // Position so the entire lockup is horizontally centered on origin.
    symbolBuilt.group.position.x   = -totalW / 2 + symW / 2;
    wordmarkBuilt.group.position.x =  totalW / 2 - wmW  / 2;

    const lockup = new THREE.Group();
    lockup.add(symbolBuilt.group);
    lockup.add(wordmarkBuilt.group);
    scene.add(lockup);

    // Fit the lockup to the visible viewport width — on narrow canvases (mobile)
    // it scales down so the wordmark doesn't get clipped at the edges.
    const naturalLockupWidth = totalW;
    const fitLockup = () => {
      const visibleH = 2 * Math.tan((camera.fov * Math.PI / 180) / 2) * camera.position.z;
      const visibleW = visibleH * camera.aspect;
      const target   = visibleW * 0.65;
      const s = Math.min(1, target / naturalLockupWidth);
      lockup.scale.set(s, s, s);
    };
    fitLockup();

    // (Odoo module icons are rendered as DOM <img> elements behind the canvas
    // — Three.js TextureLoader can't load them due to CORS on the Odoo CDN,
    // and DOM imgs don't need CORS for display. See the JSX render below.)

    // Mouse parallax (viewport-normalized).
    let targetX = 0, targetY = 0;
    const onMove = (e) => {
      targetX = ((e.clientX / window.innerWidth)  - 0.5) * 0.7;
      targetY = ((e.clientY / window.innerHeight) - 0.5) * 0.4;
    };
    window.addEventListener('mousemove', onMove, { passive: true });

    // Resize handling — re-fit the lockup so the wordmark always stays inside
    // the visible viewport, regardless of canvas aspect.
    const resize = () => {
      const w = canvas.clientWidth, h = canvas.clientHeight;
      if (!w || !h) return;
      renderer.setSize(w, h, false);
      camera.aspect = w / h;
      camera.updateProjectionMatrix();
      fitLockup();
    };
    const ro = (typeof ResizeObserver !== 'undefined') ? new ResizeObserver(resize) : null;
    if (ro) ro.observe(canvas);
    window.addEventListener('resize', resize);

    // Animate — lockup is completely static. The 3D scene only renders if
    // anything else needs it (e.g. layout/resize). One render pass on mount
    // is enough since nothing moves; we still keep the rAF loop running so
    // the canvas re-renders cleanly after resize/devicepixelratio changes.
    let raf = 0;
    const animate = () => {
      renderer.render(scene, camera);
      raf = requestAnimationFrame(animate);
    };
    animate();

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('resize', resize);
      if (ro) ro.disconnect();
      renderer.dispose();
      lockup.traverse((o) => {
        if (o.geometry) o.geometry.dispose();
      });
      symbolMaterial.dispose();
      wordmarkMaterial.dispose();
    };
  }, []);

  return (
    <section aria-hidden="true" className="relative overflow-hidden pointer-events-none bg-white">
      <style>{`
        @keyframes symbolSpin { to { transform: rotate(360deg); } }
        @keyframes bpRingSpin       { to { transform: translate(-50%, -50%) rotate(360deg); } }
        @keyframes bpRingSpinRev    { to { transform: translate(-50%, -50%) rotate(-360deg); } }
        @keyframes bpScan {
          0%   { transform: translateY(-100%); opacity: 0; }
          15%  { opacity: 1; }
          85%  { opacity: 1; }
          100% { transform: translateY(100%); opacity: 0; }
        }
        @keyframes bpRadialPulse {
          0%, 100% { opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
          50%      { opacity: 0.55; transform: translate(-50%, -50%) scale(1.04); }
        }
      `}</style>
      <div className="relative h-[300px] sm:h-[380px] lg:h-[440px]">
        {/* Blueprint grid — major lines */}
        <div className="absolute inset-0 pointer-events-none" style={{
          backgroundImage:
            `linear-gradient(${BP_BLUE} 1px, transparent 1px),
             linear-gradient(90deg, ${BP_BLUE} 1px, transparent 1px)`,
          backgroundSize: '64px 64px',
          opacity: 0.08,
        }}></div>
        {/* Blueprint grid — fine lines */}
        <div className="absolute inset-0 pointer-events-none" style={{
          backgroundImage:
            `linear-gradient(${BP_BLUE} 1px, transparent 1px),
             linear-gradient(90deg, ${BP_BLUE} 1px, transparent 1px)`,
          backgroundSize: '16px 16px',
          opacity: 0.04,
        }}></div>

        {/* Ruler ticks — bottom edge (every 32px). Subtle engineering scale. */}
        <div className="absolute left-0 right-0 bottom-0 h-2 pointer-events-none" style={{
          backgroundImage: `repeating-linear-gradient(to right, rgba(36,112,219,0.35) 0 1px, transparent 1px 32px)`,
          maskImage: 'linear-gradient(to bottom, transparent 0%, black 60%)',
          WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 60%)',
        }}></div>
        {/* Ruler ticks — top edge */}
        <div className="absolute left-0 right-0 top-0 h-2 pointer-events-none" style={{
          backgroundImage: `repeating-linear-gradient(to right, rgba(36,112,219,0.35) 0 1px, transparent 1px 32px)`,
          maskImage: 'linear-gradient(to top, transparent 0%, black 60%)',
          WebkitMaskImage: 'linear-gradient(to top, transparent 0%, black 60%)',
        }}></div>

        {/* Concentric orbit rings — dashed, counter-rotating slowly */}
        {[
          { size: 'min(180px, 30vw)', dash: '4 6',  opacity: 0.22, anim: 'bpRingSpin 90s linear infinite' },
          { size: 'min(280px, 46vw)', dash: '3 9',  opacity: 0.16, anim: 'bpRingSpinRev 120s linear infinite' },
          { size: 'min(420px, 66vw)', dash: '2 12', opacity: 0.10, anim: 'bpRingSpin 180s linear infinite' },
        ].map((r, i) => (
          <svg key={i} className="absolute top-1/2 left-1/2 pointer-events-none"
               style={{ width: r.size, height: r.size, transform: 'translate(-50%, -50%)', animation: r.anim, opacity: r.opacity }}
               viewBox="-50 -50 100 100">
            <circle cx="0" cy="0" r="48" fill="none" stroke={BP_BLUE} strokeWidth="0.4" strokeDasharray={r.dash} />
          </svg>
        ))}

        {/* Compass markers — 8 ticks around the middle ring at N, NE, E, SE, S, SW, W, NW */}
        <svg className="absolute top-1/2 left-1/2 pointer-events-none"
             style={{ width: 'min(280px, 46vw)', height: 'min(280px, 46vw)', transform: 'translate(-50%, -50%)', opacity: 0.45 }}
             viewBox="-50 -50 100 100">
          {[0, 45, 90, 135, 180, 225, 270, 315].map((deg, i) => {
            const isCardinal = deg % 90 === 0;
            const r1 = isCardinal ? 44 : 46.5;
            const r2 = 48.5;
            const rad = (deg - 90) * Math.PI / 180;
            return (
              <line key={i}
                    x1={Math.cos(rad) * r1} y1={Math.sin(rad) * r1}
                    x2={Math.cos(rad) * r2} y2={Math.sin(rad) * r2}
                    stroke={BP_BLUE}
                    strokeWidth={isCardinal ? 0.7 : 0.4} />
            );
          })}
        </svg>

        {/* Diagonal radial guides — thin 45° lines emanating outward from center */}
        <svg className="absolute top-1/2 left-1/2 pointer-events-none"
             style={{ width: 'min(420px, 66vw)', height: 'min(420px, 66vw)', transform: 'translate(-50%, -50%)', opacity: 0.10 }}
             viewBox="-50 -50 100 100">
          {[45, 135, 225, 315].map((deg, i) => {
            const rad = (deg - 90) * Math.PI / 180;
            return (
              <line key={i}
                    x1={Math.cos(rad) * 14} y1={Math.sin(rad) * 14}
                    x2={Math.cos(rad) * 50} y2={Math.sin(rad) * 50}
                    stroke={BP_BLUE} strokeWidth="0.3" strokeDasharray="1 4" />
            );
          })}
        </svg>

        {/* Soft radial wash — fades edges to pure white. */}
        <div className="absolute inset-0 pointer-events-none" style={{
          background: 'radial-gradient(ellipse 75% 80% at 50% 50%, transparent 0%, rgba(255,255,255,0.85) 95%)',
        }}></div>
        {/* Crosshair guides */}
        <div className="absolute left-0 right-0 top-1/2 h-px pointer-events-none" style={{ background: 'rgba(36,112,219,0.18)' }}></div>
        <div className="absolute top-0 bottom-0 left-1/2 w-px pointer-events-none" style={{ background: 'rgba(36,112,219,0.18)' }}></div>
        {/* Center engineering tick */}
        <div className="absolute top-1/2 left-1/2 pointer-events-none" style={{
          width: 14, height: 14, transform: 'translate(-50%, -50%)',
          border: `1px solid ${BP_BLUE}`, opacity: 0.30, animation: 'bpRadialPulse 4s ease-in-out infinite',
        }}></div>

        {/* Scan line — soft horizontal sweep top→bottom, repeats every 9s */}
        <div className="absolute inset-x-0 pointer-events-none" style={{
          height: 60,
          top: 0,
          background: 'linear-gradient(to bottom, transparent 0%, rgba(36,112,219,0.10) 45%, rgba(36,112,219,0.18) 50%, rgba(36,112,219,0.10) 55%, transparent 100%)',
          animation: 'bpScan 9s linear infinite',
        }}></div>

        {/* Floating Odoo module icons — sit BEHIND the canvas in DOM order so
            they show through the canvas's transparent areas (the lockup is
            opaque and covers anything beneath it). Plain <img> elements so no
            CORS pre-flight is needed. Positions are driven by the icon-physics
            useEffect above: Brownian drift + cursor repulsion + spring back
            to the base x/y%. */}
        <div ref={iconsLayerRef} data-bsb-icons className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
          {[
            { id: 'sale',           x: 8,  y: 18, s: 38 },
            { id: 'crm',            x: 22, y: 70, s: 44 },
            { id: 'account',        x: 38, y: 12, s: 34 },
            { id: 'stock',          x: 55, y: 78, s: 42 },
            { id: 'purchase',       x: 72, y: 22, s: 36 },
            { id: 'mrp',            x: 88, y: 60, s: 40 },
            { id: 'hr',             x: 14, y: 50, s: 32 },
            { id: 'project',        x: 30, y: 35, s: 38 },
            { id: 'website',        x: 46, y: 65, s: 36 },
            { id: 'mass_mailing',   x: 62, y: 42, s: 34 },
            { id: 'l10n_br',        x: 80, y: 82, s: 42 },
            { id: 'point_of_sale',  x: 92, y: 28, s: 38 },
            { id: 'helpdesk',       x: 4,  y: 85, s: 36 },
            { id: 'knowledge',      x: 50, y: 8,  s: 32 },
            { id: 'survey',         x: 66, y: 8,  s: 30 },
            { id: 'event',          x: 76, y: 92, s: 32 },
          ].map((m) => (
            <img
              key={m.id}
              src={`https://download.odoocdn.com/icons/${m.id}/static/description/icon_hi.png`}
              alt=""
              loading="lazy"
              onError={(e) => { e.currentTarget.style.display = 'none'; }}
              className="absolute rounded-xl"
              style={{
                left: `${m.x}%`, top: `${m.y}%`,
                width: m.s, height: m.s,
                opacity: 0.32,
                transform: 'translate(-50%, -50%)', // overridden each frame by the physics rAF
                willChange: 'transform',
                filter: 'saturate(0.85)',
              }} />
          ))}
        </div>

        {/* Three.js canvas — 3D symbol + wordmark lockup. Sits on top of the
            floating Odoo icons so the lockup remains the focal element. */}
        <canvas ref={canvasRef} className="absolute inset-0 block w-full h-full" />

        {/* Static SVG fallback — shown until WebGL takes over. */}
        {!webgl && (
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <DSSymbol
              size={900}
              className="text-ink-950"
              style={{
                width: 'min(220px, 36vw)',
                height: 'min(220px, 36vw)',
                animation: 'symbolSpin 140s linear infinite',
                opacity: 0.92,
                filter: 'drop-shadow(0 6px 18px rgba(36,112,219,0.18))',
              }} />
          </div>
        )}

        {/* Coordinate labels — visible on mobile, deep ink-blue. */}
        <div className="absolute top-3 sm:top-5 left-3 sm:left-6 coord !text-[8.5px] sm:!text-[10px] max-w-[42%] leading-tight" style={{ color: BP_BLUE_INK }}>
          {`// deepstrat · ia ↔ odoo`}
        </div>
        <div className="absolute top-3 sm:top-5 right-3 sm:right-6 coord !text-[8.5px] sm:!text-[10px] text-right max-w-[42%] leading-tight" style={{ color: BP_BLUE_INK }}>
          {`mcp=on · odoo=live`}
        </div>
        <div className="absolute bottom-3 sm:bottom-5 left-3 sm:left-6 coord !text-[8.5px] sm:!text-[10px] max-w-[42%] leading-tight" style={{ color: BP_BLUE_INK }}>
          {`pt-br → ação no erp`}
        </div>
        <div className="absolute bottom-3 sm:bottom-5 right-3 sm:right-6 coord !text-[8.5px] sm:!text-[10px] text-right max-w-[42%] leading-tight" style={{ color: BP_BLUE_INK }}>
          {`auditável · permissões`}
        </div>
      </div>
    </section>);

}

// ───────────────────────── FOOTER ─────────────────────────
function Footer({ showPartnerBadge = true }) {
  // Section heading with a small accent bar in brand blue — gives each column
  // a visual anchor without resorting to text-align tricks that hurt readability.
  const SectionHeading = ({ children }) => (
    <div className="flex items-center gap-2 mb-4">
      <span className="block w-5 h-px bg-deep-dir/70" />
      <span className="text-[11px] font-medium uppercase tracking-[0.14em] text-ink-500">{children}</span>
    </div>
  );
  return (
    <footer className="bg-ink-50 pt-20 pb-10 relative overflow-hidden">
      {/* Hairline accent that visually separates the footer from the section above */}
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-ink-200 to-transparent" />
      <DSSymbol size={600} className="mark-ornament -bottom-40 -right-20" />
      <div className="relative max-w-7xl mx-auto px-6 lg:px-10">
        {/* Brand anchor: discreet partner badge centered at the top of the footer */}
        {showPartnerBadge && (
          <div className="flex justify-center mb-14">
            <div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full border border-ink-200 bg-white shadow-[0_1px_2px_rgba(15,15,20,0.04)]">
              <span className="relative flex w-1.5 h-1.5">
                <span className="absolute inset-0 rounded-full bg-emerald-500 opacity-60 animate-ping" />
                <span className="relative inline-flex w-1.5 h-1.5 rounded-full bg-emerald-500" />
              </span>
              <span className="text-[11px] font-semibold uppercase tracking-[0.14em] text-ink-700">Parceiro Oficial Odoo</span>
            </div>
          </div>
        )}

        {/* Three columns — all left-aligned for natural reading, but distributed
            across the full width via 1fr/auto/1fr so they mirror the bottom row's
            left/center/right anchors. */}
        <div className="grid gap-10 md:grid-cols-[1fr_auto_1fr]">
          <div className="md:justify-self-start">
            <SectionHeading>Produto</SectionHeading>
            <ul className="space-y-2.5 text-[13.5px] text-ink-700">
              <li><a href="#modulos" className="hover:text-ink-900 transition-colors">Módulos Odoo</a></li>
              <li><a href="#ia" className="hover:text-ink-900 transition-colors">Implementação IA</a></li>
              <li><a href="#ia" className="hover:text-ink-900 transition-colors">Operação por ChatGPT</a></li>
              <li><a href="#comparativo" className="hover:text-ink-900 transition-colors">Comparativo</a></li>
            </ul>
          </div>
          <div className="md:justify-self-center">
            <SectionHeading>Contato</SectionHeading>
            <ul className="space-y-2.5 text-[13.5px] text-ink-700">
              <li><a href="mailto:contato@deepstrat.com.br" className="hover:text-ink-900 transition-colors">contato@deepstrat.com.br</a></li>
              <li><a href="https://wa.me/" className="hover:text-ink-900 transition-colors">WhatsApp · (11) ____-____</a></li>
              <li><a href="https://linkedin.com/" className="hover:text-ink-900 transition-colors">LinkedIn</a></li>
            </ul>
          </div>
          <div className="md:justify-self-end">
            <SectionHeading>Empresa</SectionHeading>
            <ul className="space-y-2.5 text-[13.5px] text-ink-700">
              <li>Deepstrat Tecnologia Ltda.</li>
              <li className="font-mono text-[12px] text-ink-500">CNPJ: __.___.___/0001-__</li>
              <li>São Paulo · Brasil</li>
            </ul>
          </div>
        </div>

        {/* Bottom bar — copyright left, logo dead-center, legal links right */}
        <div className="mt-16 pt-6 border-t border-ink-100 grid grid-cols-[1fr_auto_1fr] items-center gap-6 text-[12px] text-ink-400">
          <span className="justify-self-start">© 2026 Deepstrat</span>
          <a href="#top" aria-label="Voltar ao topo" className="block opacity-80 hover:opacity-100 transition-opacity">
            <DSWordmark height={18} />
          </a>
          <div className="justify-self-end flex gap-5">
            <a href="/privacidade" className="hover:text-ink-700 transition-colors">Privacidade</a>
            <a href="/termos" className="hover:text-ink-700 transition-colors">Termos</a>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, Pain, Modules, Why, ImplementationCarousel, Spotlight, Compare, Blog, CTA, BrandSpinBand, Footer });