/* Tech / AI stack — tools we use to build for clients */
const STACK_AI = [
  { name: 'Claude',     tag: 'AGENTS',      c: '#d97706', l: 'C' },
  { name: 'OpenAI',     tag: 'LLM · GPT',   c: '#10b981', l: 'O' },
  { name: 'Whisper',    tag: 'SPEECH',      c: '#7c5cff', l: 'W' },
  { name: 'LangChain',  tag: 'ORCHESTR.',   c: '#22d3ee', l: 'λ' },
  { name: 'Pinecone',   tag: 'VECTOR DB',   c: '#5eead4', l: '◆' },
  { name: 'Replicate',  tag: 'INFERENCE',   c: '#fb7185', l: 'R' },
];
const STACK_BUILD = [
  { name: 'Next.js',    tag: 'WEB',         c: '#e8eef7', l: 'N' },
  { name: 'React',      tag: 'UI',          c: '#22d3ee', l: '⚛' },
  { name: 'Swift',      tag: 'iOS',         c: '#fb7185', l: 'S' },
  { name: 'Kotlin',     tag: 'ANDROID',     c: '#a78bfa', l: 'K' },
  { name: 'React Native', tag: 'CROSS',     c: '#5eead4', l: 'RN' },
  { name: 'Unity',      tag: 'GAMING',      c: '#fbbf24', l: 'U' },
];
const STACK_CLOUD = [
  { name: 'AWS',        tag: 'CLOUD',       c: '#fb923c', l: 'A' },
  { name: 'Vercel',     tag: 'EDGE',        c: '#e8eef7', l: '▲' },
  { name: 'Cloudflare', tag: 'CDN',         c: '#fbbf24', l: '⛅' },
  { name: 'Supabase',   tag: 'POSTGRES',    c: '#5eead4', l: 'S' },
  { name: 'Stripe',     tag: 'PAYMENTS',    c: '#7c5cff', l: '$' },
  { name: 'Solidity',   tag: 'CHAIN',       c: '#22d3ee', l: '◆' },
];

const StackCard = ({ name, tag, c, l }) => (
  <div className="stack-card" style={{ '--c': c }}>
    <span className="stack-logo">{l}</span>
    <span className="stack-name">{name}</span>
    <span className="stack-tag">{tag}</span>
  </div>
);

const TechStack = () => (
  <section id="stack" className="sec-stack">
    <div className="container">
      <SectionHead
        eyebrow="OUR STACK"
        title={<>The <em className="gradient-text">tools &amp; AI</em> we ship with.</>}
        lead="A modern, battle-tested stack across AI, software, mobile, gaming and infrastructure. We pick the best tool for the job — and own the integration."
      />

      <div className="stack-section-head">
        <h4>AI &amp; Agents</h4>
        <span/>
      </div>
      <div className="stack-grid">
        {STACK_AI.map(s => <StackCard key={s.name} {...s}/>)}
      </div>

      <div className="stack-section-head">
        <h4>Software, Mobile &amp; Gaming</h4>
        <span/>
      </div>
      <div className="stack-grid">
        {STACK_BUILD.map(s => <StackCard key={s.name} {...s}/>)}
      </div>

      <div className="stack-section-head">
        <h4>Cloud, Payments &amp; Web4</h4>
        <span/>
      </div>
      <div className="stack-grid">
        {STACK_CLOUD.map(s => <StackCard key={s.name} {...s}/>)}
      </div>
    </div>
  </section>
);

Object.assign(window, { TechStack });