// "Our stack" — AI providers & models Castor deploys
function TechStack({ t }) {
  const label = t.lang === 'fr'
    ? 'La meilleure IA, déployée chez vous.'
    : 'The best AI, deployed for you.';
  const sub = t.lang === 'fr'
    ? 'On choisit le bon modèle pour chaque tâche — propriétaire ou open source, hébergé au Québec quand la confidentialité l\'exige.'
    : 'We pick the right model for each task — proprietary or open source, hosted in Québec when confidentiality demands it.';

  const providers = [
    { name: 'Anthropic', model: 'Claude Sonnet 4.5', logo: <AnthropicLogo/>,
      tone: t.lang === 'fr' ? 'Raisonnement juridique, rédaction longue, agents autonomes.' : 'Legal reasoning, long-form drafting, autonomous agents.' },
    { name: 'OpenAI', model: 'GPT-5.1', logo: <OpenAILogo/>,
      tone: t.lang === 'fr' ? 'Polyvalent, vision, voix temps réel.' : 'General-purpose, vision, realtime voice.' },
    { name: 'Google DeepMind', model: 'Gemini 3.1 Pro', logo: <GeminiLogo/>,
      tone: t.lang === 'fr' ? 'Contexte 2M tokens, documents volumineux.' : '2M token context, heavy document sets.' },
    { name: 'Mistral AI', model: 'Mistral Large 3', logo: <MistralLogo/>,
      tone: t.lang === 'fr' ? 'Modèle européen, souveraineté des données.' : 'European model, data sovereignty.' },
    { name: 'Meta', model: 'Llama 4', logo: <LlamaLogo/>,
      tone: t.lang === 'fr' ? 'Open source, déployé sur serveurs locaux.' : 'Open source, deployed on-prem.' },
    { name: 'DeepSeek', model: 'DeepSeek V3', logo: <DeepSeekLogo/>,
      tone: t.lang === 'fr' ? 'Performance haut de gamme, coût réduit.' : 'Frontier performance, fraction of the cost.' },
    { name: 'Nous Research', model: 'Hermes 4', logo: <NousLogo/>,
      tone: t.lang === 'fr' ? 'Fine-tuning sur mesure pour votre secteur.' : 'Custom fine-tuning for your industry.' },
    { name: 'OpenCLAW', model: 'Sovereign stack', logo: <OpenClawLogo/>,
      tone: t.lang === 'fr' ? 'Outillage open source Québec, orchestration d\'agents.' : 'Québec open-source tooling, agent orchestration.' },
  ];

  return (
    <section id="stack" style={{ padding: '90px 32px', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)', background: 'color-mix(in oklch, var(--ink) 1.2%, var(--bg))' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', maxWidth: 760, marginInline: 'auto', marginBottom: 44 }}>
          <div style={{ display: 'inline-flex', gap: 8, alignItems: 'center', marginBottom: 16, padding: '5px 11px', borderRadius: 999, border: '1px solid var(--border)', background: 'var(--bg-elev)' }}>
            <FleurDot size={10}/>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{t.lang === 'fr' ? 'NOTRE STACK' : 'OUR STACK'}</span>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 2.8vw, 38px)', lineHeight: 1.1, letterSpacing: '-0.028em', margin: 0, color: 'var(--ink)', fontWeight: 500, textWrap: 'balance' }}>{label}</h2>
          <p style={{ fontFamily: 'var(--font-ui)', fontSize: 15.5, color: 'var(--ink-soft)', marginTop: 14, lineHeight: 1.5, textWrap: 'pretty' }}>{sub}</p>
        </div>

        <div className="techstack-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--bg-elev)' }}>
          {providers.map((p, i) => (
            <ProviderCell key={i} {...p} col={i % 4} row={Math.floor(i / 4)}/>
          ))}
        </div>

        <div style={{ marginTop: 20, display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.04em' }}>
          <span>{t.lang === 'fr' ? '↳ Orchestrés via Castor' : '↳ Orchestrated by Castor'}</span>
          <span>·</span>
          <span>{t.lang === 'fr' ? 'Hébergement QC disponible' : 'QC hosting available'}</span>
          <span>·</span>
          <span>{t.lang === 'fr' ? 'Vos données ne servent pas à l\'entraînement' : 'Your data is never used for training'}</span>
        </div>
      </div>
    </section>
  );
}

function ProviderCell({ name, model, logo, tone, col, row }) {
  const [hov, setHov] = useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        padding: '28px 22px',
        borderRight: col < 3 ? '1px solid var(--border)' : 'none',
        borderTop: row > 0 ? '1px solid var(--border)' : 'none',
        background: hov ? 'color-mix(in oklch, var(--brand) 3%, var(--bg-elev))' : 'var(--bg-elev)',
        transition: 'background 160ms',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        gap: 12,
        minHeight: 180,
      }}>
      <div style={{ height: 30, display: 'flex', alignItems: 'center', opacity: hov ? 1 : 0.9, transition: 'opacity 160ms' }}>
        {logo}
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.015em', marginBottom: 2 }}>{model}</div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-faint)' }}>{name}</div>
      </div>
      <div style={{ fontFamily: 'var(--font-ui)', fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.45, textWrap: 'pretty' }}>{tone}</div>
    </div>
  );
}

// --- Logos (accurate brand marks) -------------------------------------------

function AnthropicLogo() {
  // Anthropic: clay-orange stylized "A" mark + wordmark
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="Anthropic">
      <path fill="#CC785C" d="M13.2 2.4h-3.8L3 21.6h4l1.2-3.9h6.6l1.2 3.9h4L13.5 2.4h-.3zm-3.9 12.1L11.4 8l2.1 6.5H9.3z"/>
      <text x="22" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="15" fontWeight="600" letterSpacing="-0.02em">Anthropic</text>
    </svg>
  );
}

function OpenAILogo() {
  // OpenAI blossom mark
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="OpenAI">
      <path fill="var(--ink)" d="M21.55 10.04a5.44 5.44 0 00-.47-4.47 5.52 5.52 0 00-5.93-2.65A5.52 5.52 0 0010.9 1a5.51 5.51 0 00-5.25 3.8 5.5 5.5 0 00-3.68 2.67 5.53 5.53 0 00.68 6.47 5.44 5.44 0 00.47 4.47 5.52 5.52 0 005.93 2.65 5.5 5.5 0 004.15 1.86 5.52 5.52 0 005.26-3.8 5.5 5.5 0 003.67-2.67 5.53 5.53 0 00-.68-6.47zM12.3 20.23a4.1 4.1 0 01-2.62-.95l.13-.07 4.34-2.5a.71.71 0 00.36-.62v-6.12l1.83 1.06.01.03v5.07a4.1 4.1 0 01-4.05 4.1zM3.75 16.84a4.08 4.08 0 01-.49-2.74l.13.08 4.34 2.5a.7.7 0 00.71 0l5.3-3.06v2.11l.01.03-5.36 3.1a4.1 4.1 0 01-4.64-1.92zM2.61 7.52a4.09 4.09 0 012.14-1.8v5.17c0 .25.13.49.35.61l5.28 3.05-1.83 1.06-.03-.01L4.13 13a4.1 4.1 0 01-1.52-5.48zm15.08 3.51l-5.28-3.05 1.83-1.05.03.01 4.39 2.53a4.1 4.1 0 01-.63 7.41v-5.24a.71.71 0 00-.34-.61zm1.82-2.74l-.13-.08-4.34-2.5a.7.7 0 00-.71 0l-5.3 3.06V6.66l-.01-.03 5.36-3.09a4.1 4.1 0 016.08 4.25zm-11.5 3.77l-1.83-1.06v-5.1a4.1 4.1 0 016.73-3.14l-.13.07-4.34 2.5a.71.71 0 00-.36.62l-.01 6.11h-.06zm1-2.16l2.36-1.36 2.36 1.36v2.72l-2.36 1.36-2.36-1.36V9.9z"/>
      <text x="30" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="15" fontWeight="600" letterSpacing="-0.02em">OpenAI</text>
    </svg>
  );
}

function GeminiLogo() {
  // Gemini spark with signature blue→purple→pink gradient
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="Gemini">
      <defs>
        <linearGradient id="gem-grad" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0%" stopColor="#4796E3"/>
          <stop offset="50%" stopColor="#8168E6"/>
          <stop offset="100%" stopColor="#D96570"/>
        </linearGradient>
      </defs>
      <path fill="url(#gem-grad)" d="M12 1c0 5.52 4.48 10 10 10.5v.5c-5.52.5-10 4.98-10 10.5h-.5C11 17 6.52 12.52 1 12v-.5c5.52-.5 10-5 10-10.5h1z" transform="translate(0 0.5)"/>
      <text x="26" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="15" fontWeight="600" letterSpacing="-0.02em">Gemini</text>
    </svg>
  );
}

function MistralLogo() {
  // Mistral AI: layered pixel-flag gradient (signature yellow→orange→red)
  const c = ['#FFD700', '#FFA219', '#FF6B35', '#E63946', '#A02035'];
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="Mistral AI">
      {/* 5 stripes × 4 cols = signature flag */}
      {[0,1,2,3,4].map(row => [0,1,2,3].map(col => (
        <rect key={row+'-'+col} x={2 + col*4} y={1 + row*4} width="4" height="4" fill={c[Math.min(4, row + Math.floor(col/1.5))]}/>
      )))}
      <text x="26" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="14" fontWeight="600" letterSpacing="-0.02em">Mistral AI</text>
    </svg>
  );
}

function LlamaLogo() {
  // Meta infinity mark (brand blue)
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="Meta Llama">
      <g fill="none" strokeWidth="2.6" strokeLinecap="round">
        <path d="M2 12c3-7 9-7 12 0s9 7 12 0" stroke="#0467DF"/>
        <path d="M2 12c3 7 9 7 12 0s9-7 12 0" stroke="#1977F3"/>
      </g>
      <text x="32" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="14" fontWeight="600" letterSpacing="-0.02em">Meta Llama</text>
    </svg>
  );
}

function DeepSeekLogo() {
  // DeepSeek: whale/curve mark in signature blue
  return (
    <svg viewBox="0 0 140 24" width="130" height="24" aria-label="DeepSeek">
      <path fill="#4D6BFE" d="M12 3c-4.5 0-8 3-8 7 0 2 1 4 3 5.5-.5 1-1.5 1.8-2.8 2 .2.3.8.5 1.8.5 2 0 3.5-.8 4.5-2 .5.1 1 .2 1.5.2 4.5 0 8-3 8-7S16.5 3 12 3zm3 8a1.3 1.3 0 110-2.6 1.3 1.3 0 010 2.6z"/>
      <text x="26" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="14" fontWeight="600" letterSpacing="-0.02em">DeepSeek</text>
    </svg>
  );
}

function NousLogo() {
  // Nous Research: concentric circle mark
  return (
    <svg viewBox="0 0 150 24" width="140" height="24" aria-label="Nous Research">
      <g fill="none" stroke="var(--ink)" strokeWidth="1.8">
        <circle cx="12" cy="12" r="8"/>
        <circle cx="12" cy="12" r="4"/>
        <circle cx="12" cy="12" r="1.5" fill="var(--ink)"/>
      </g>
      <text x="26" y="12" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="12" fontWeight="600" letterSpacing="-0.01em">Nous</text>
      <text x="26" y="21" fill="var(--ink)" fontFamily="var(--font-mono)" fontSize="8" fontWeight="500" letterSpacing="0.14em" opacity="0.7">RESEARCH</text>
    </svg>
  );
}

function OpenClawLogo() {
  // OpenCLAW: claw/fleur motif (Québec flavor) + wordmark
  return (
    <svg viewBox="0 0 150 24" width="140" height="24" aria-label="OpenCLAW">
      <g fill="none" stroke="var(--brand)" strokeWidth="2" strokeLinecap="round">
        <path d="M6 20 L6 10 M6 10 Q6 4 12 4 Q18 4 18 10 L18 20"/>
        <path d="M10 14 L14 14" stroke="var(--ink)" strokeWidth="1.5"/>
      </g>
      <circle cx="12" cy="10" r="1.6" fill="var(--brand)"/>
      <text x="24" y="17" fill="var(--ink)" fontFamily="var(--font-display)" fontSize="14" fontWeight="600" letterSpacing="-0.02em">OpenCLAW</text>
    </svg>
  );
}

Object.assign(window, { TechStack, ProviderCell, AnthropicLogo, OpenAILogo, GeminiLogo, MistralLogo, LlamaLogo, DeepSeekLogo, NousLogo, OpenClawLogo });