/* TechStack.jsx — technologies & integrations marquee, real brand logos */
const TechStack = () => {
  // Logos reais via Simple Icons (cor original da marca por padrão).
  // Marcas escuras (GitHub, OpenAI, Notion) recebem override claro p/ contraste no fundo escuro.
  // SVGs inline para marcas indisponíveis na CDN (sem dependência externa).
  const OPENAI_SVG = `<svg width="22" height="22" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"><path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071.007L4.8 13.65a4.504 4.504 0 0 1-2.46-5.754zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071-.007l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.66zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/></svg>`;
  const SLACK_SVG = `<svg width="22" height="22" viewBox="0 0 122.8 122.8" xmlns="http://www.w3.org/2000/svg"><path d="M25.8 77.6c0 7.1-5.8 12.9-12.9 12.9S0 84.7 0 77.6s5.8-12.9 12.9-12.9h12.9v12.9z" fill="#E01E5A"/><path d="M32.3 77.6c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9v32.3c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V77.6z" fill="#E01E5A"/><path d="M45.2 25.8c-7.1 0-12.9-5.8-12.9-12.9S38.1 0 45.2 0s12.9 5.8 12.9 12.9v12.9H45.2z" fill="#36C5F0"/><path d="M45.2 32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H12.9C5.8 58.1 0 52.3 0 45.2s5.8-12.9 12.9-12.9h32.3z" fill="#36C5F0"/><path d="M97 45.2c0-7.1 5.8-12.9 12.9-12.9s12.9 5.8 12.9 12.9-5.8 12.9-12.9 12.9H97V45.2z" fill="#2EB67D"/><path d="M90.5 45.2c0 7.1-5.8 12.9-12.9 12.9s-12.9-5.8-12.9-12.9V12.9C64.7 5.8 70.5 0 77.6 0s12.9 5.8 12.9 12.9v32.3z" fill="#2EB67D"/><path d="M77.6 97c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9-12.9-5.8-12.9-12.9V97h12.9z" fill="#ECB22E"/><path d="M77.6 90.5c-7.1 0-12.9-5.8-12.9-12.9s5.8-12.9 12.9-12.9h32.3c7.1 0 12.9 5.8 12.9 12.9s-5.8 12.9-12.9 12.9H77.6z" fill="#ECB22E"/></svg>`;
  // "Claude Code" — terminal-prompt mark na cor da marca Claude.
  const CLAUDECODE_SVG = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#D97757" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="2.5" y="4" width="19" height="16" rx="3" stroke="#D97757" opacity="0.5"/><path d="M7 10l3 2.5-3 2.5"/><path d="M12.5 15h4.5"/></svg>`;
  // VS Code (slug removido da CDN) — marca em SVG inline.
  const VSCODE_SVG = `<svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#0098FF" d="M23.15 2.587 18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"/></svg>`;

  // Cada item: slug (Simple Icons) | svg (inline) | mono (fallback). 'tone' = cor do
  // monograma/realce. Se um logo da CDN falhar (404), cai automaticamente p/ monograma.
  const rowA = [
    { name: 'Claude',        slug: 'claude',              tone: '#D97757' },
    { name: 'Claude Code',   svg: CLAUDECODE_SVG,         tone: '#D97757' },
    { name: 'Anthropic',     slug: 'anthropic', color: 'FFFFFF', tone: '#D97757' },
    { name: 'OpenAI',        svg: OPENAI_SVG,             tone: '#10A37F' },
    { name: 'Gemini',        slug: 'googlegemini',        tone: '#8E75B2' },
    { name: 'Mistral AI',    slug: 'mistralai',           tone: '#FA520F' },
    { name: 'Groq',          mono: true,                  tone: '#F55036' },
    { name: 'Hugging Face',  slug: 'huggingface',         tone: '#FFD21E' },
    { name: 'MCP',           slug: 'modelcontextprotocol', color: 'FFFFFF', tone: '#00D4FF' },
    { name: 'Cursor',        slug: 'cursor', color: 'FFFFFF', tone: '#7CB0FF' },
    { name: 'VS Code',       svg: VSCODE_SVG,             tone: '#007ACC' },
    { name: 'GitHub',        slug: 'github', color: 'FFFFFF', tone: '#FFFFFF' },
    { name: 'Supabase',      slug: 'supabase',            tone: '#3ECF8E' },
    { name: 'PostgreSQL',    slug: 'postgresql',          tone: '#4169E1' },
    { name: 'Redis',         slug: 'redis',               tone: '#FF4438' },
    { name: 'n8n',           slug: 'n8n',                 tone: '#EA4B71' },
    { name: 'Make',          slug: 'make',                tone: '#6D00CC' },
    { name: 'Zapier',        slug: 'zapier',              tone: '#FF4F00' },
    { name: 'Hostinger',     slug: 'hostinger',           tone: '#673DE6' },
  ];
  const rowB = [
    { name: 'WhatsApp',        slug: 'whatsapp',     tone: '#25D366' },
    { name: 'Evolution API',   mono: true,           tone: '#1FD17B' },
    { name: 'Mega API',        mono: true,           tone: '#00D4FF' },
    { name: 'Telegram',        slug: 'telegram',     tone: '#26A5E4' },
    { name: 'Instagram',       slug: 'instagram',    tone: '#E4405F' },
    { name: 'Meta',            slug: 'meta',         tone: '#1877F2' },
    { name: 'Gmail',           slug: 'gmail',        tone: '#EA4335' },
    { name: 'Google',          slug: 'google',       tone: '#4285F4' },
    { name: 'Google Calendar', slug: 'googlecalendar', tone: '#4285F4' },
    { name: 'Vapi',            mono: true,           tone: '#1FD17B' },
    { name: 'Slack',           svg: SLACK_SVG,       tone: '#E01E5A' },
    { name: 'Notion',          slug: 'notion', color: 'FFFFFF', tone: '#FFFFFF' },
    { name: 'HubSpot',         slug: 'hubspot',      tone: '#FF7A59' },
    { name: 'ClickUp',         slug: 'clickup',      tone: '#7B68EE' },
    { name: 'CRM',             mono: true,           tone: '#7CB0FF' },
    { name: 'Stripe',          slug: 'stripe',       tone: '#635BFF' },
    { name: 'Mercado Pago',    slug: 'mercadopago',  tone: '#00B1EA' },
    { name: 'Asaas',           mono: true,           tone: '#1A8CFF' },
  ];

  const iconSrc = (b) => `https://cdn.simpleicons.org/${b.slug}` + (b.color ? `/${b.color}` : '');

  const initials = (n) => {
    const w = n.replace(/\bAPI\b/i, '').trim().split(/\s+/).filter(Boolean);
    if (w.length >= 2) return (w[0][0] + w[1][0]).toUpperCase();
    return n.slice(0, 2).toUpperCase();
  };

  const Mono = ({ b }) => (
    <span style={{
      width: 22, height: 22, borderRadius: 6, flexShrink: 0,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: `${b.tone}22`, border: `1px solid ${b.tone}66`, color: b.tone,
      fontFamily: 'var(--ar-font-title)', fontWeight: 700, fontSize: 9.5, letterSpacing: '0.02em',
    }}>{initials(b.name)}</span>
  );

  const Pill = ({ b }) => {
    const [failed, setFailed] = React.useState(false);
    const useMono = b.mono || (!b.svg && (failed || !b.slug));
    return (
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 11, padding: '12px 20px', borderRadius: 14,
        background: 'var(--ar-bg-card)', border: '1px solid rgba(255,255,255,0.08)', flexShrink: 0,
        fontFamily: 'var(--ar-font-title)', fontWeight: 600, fontSize: 16, color: 'var(--ar-text-main)',
        whiteSpace: 'nowrap',
      }}>
        {b.svg
          ? <span style={{ width: 22, height: 22, display: 'inline-flex', flexShrink: 0 }} dangerouslySetInnerHTML={{ __html: b.svg }} />
          : useMono
            ? <Mono b={b} />
            : <img src={iconSrc(b)} alt={b.name} width="22" height="22" loading="eager" decoding="async" onError={() => setFailed(true)}
                style={{ width: 22, height: 22, objectFit: 'contain', flexShrink: 0, display: 'block' }} />}
        {b.name}
      </div>
    );
  };

  // dir > 0 → desliza para a DIREITA; dir < 0 → para a ESQUERDA.
  // Animação em JS (rAF) para garantir movimento contínuo e independente do CSS.
  const Track = ({ items, dir }) => {
    const ref = React.useRef(null);
    const pausedRef = React.useRef(false);
    React.useEffect(() => {
      const el = ref.current;
      if (!el) return;
      const speed = 46; // px/segundo — velocidade adequada
      let half = el.scrollWidth / 2;
      let offset = dir > 0 ? -half : 0;
      let last = performance.now();
      let raf;
      const measure = () => { half = el.scrollWidth / 2; };
      window.addEventListener('resize', measure);
      const step = (now) => {
        const dt = Math.min((now - last) / 1000, 0.05);
        last = now;
        if (!pausedRef.current && half > 0) {
          offset += dir * speed * dt;
          if (offset <= -half) offset += half;
          if (offset >= 0) offset -= half;
          el.style.transform = `translateX(${offset}px)`;
        }
        raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
      return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', measure); };
    }, [dir]);

    return (
      <div className="tech-mask" style={{ overflow: 'hidden' }}
        onMouseEnter={() => { pausedRef.current = true; }}
        onMouseLeave={() => { pausedRef.current = false; }}>
        <div ref={ref} style={{ display: 'flex', gap: 14, width: 'max-content', willChange: 'transform' }}>
          {[...items, ...items].map((b, i) => <Pill key={i} b={b} />)}
        </div>
      </div>
    );
  };

  return (
    <section style={{ background: 'var(--ar-bg-section)', padding: '96px 0' }}>
      <Container>
        <SectionHead
          align="center" maxWidth={760}
          eyebrow="TECNOLOGIAS & INTEGRAÇÕES"
          title={<>Construído com as <GradText>ferramentas certas</GradText> para cada projeto</>}
          sub="Trabalhamos com tecnologias modernas de IA, automação e dados — e integramos com as ferramentas que sua empresa já usa."
        />
      </Container>
      <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 16 }}>
        {/* topo → direita */}
        <Track items={rowA} dir={1} />
        {/* baixo → esquerda */}
        <Track items={rowB} dir={-1} />
      </div>
      <style>{`
        .tech-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
      `}</style>
    </section>
  );
};

window.TechStack = TechStack;
