// Tech Constellation (v2) — a multi-row marquee of supplier/technology
// NAMES (no logos, no copyright risk) flowing horizontally at different
// speeds and directions. Reads as "we deploy a flood of specific, modern
// things" — which is exactly the message.
//
// Implementation: three CSS-animated rows. Each row doubles its child list
// so the loop is seamless. Rows pause on hover so you can actually read
// something that catches your eye.

const { useEffect: useEffectTC } = React;

const ROW_AI_AND_DATA = [
  { n: 'OpenAI',            g: 'ai' },
  { n: 'Anthropic · Claude', g: 'ai' },
  { n: 'Google Gemini',     g: 'ai' },
  { n: 'Meta Llama',        g: 'ai' },
  { n: 'Mistral',           g: 'ai' },
  { n: 'Cohere',            g: 'ai' },
  { n: 'xAI · Grok',        g: 'ai' },
  { n: 'AWS Bedrock',       g: 'ai' },
  { n: 'Perplexity',        g: 'ai' },
  { n: 'Supabase',          g: 'data' },
  { n: 'Snowflake',         g: 'data' },
  { n: 'Databricks',        g: 'data' },
  { n: 'Postgres',          g: 'data' },
  { n: 'BigQuery',          g: 'data' },
  { n: 'ClickHouse',        g: 'data' },
  { n: 'Redis',             g: 'data' },
  { n: 'MongoDB',           g: 'data' },
  { n: 'Pinecone',          g: 'ai' },
  { n: 'Qdrant',            g: 'ai' },
  { n: 'Weaviate',          g: 'ai' },
];

const ROW_AUTOMATION_AND_PLATFORMS = [
  { n: 'n8n',               g: 'automation' },
  { n: 'Zapier',            g: 'automation' },
  { n: 'Make',              g: 'automation' },
  { n: 'Workato',           g: 'automation' },
  { n: 'Tray.io',           g: 'automation' },
  { n: 'MuleSoft',          g: 'automation' },
  { n: 'Airbyte',           g: 'data' },
  { n: 'HubSpot',           g: 'comms' },
  { n: 'Salesforce',        g: 'comms' },
  { n: 'Twilio',            g: 'comms' },
  { n: 'SendGrid',          g: 'comms' },
  { n: 'Google Workspace',  g: 'comms' },
  { n: 'Microsoft 365',     g: 'comms' },
  { n: 'Slack',             g: 'comms' },
  { n: 'Zendesk',           g: 'comms' },
  { n: 'Intercom',          g: 'comms' },
  { n: 'Freshworks',        g: 'comms' },
  { n: 'Calendly',          g: 'comms' },
];

const ROW_CLOUD_AND_CARRIERS = [
  { n: 'AWS',               g: 'cloud' },
  { n: 'Google Cloud',      g: 'cloud' },
  { n: 'Microsoft Azure',   g: 'cloud' },
  { n: 'Cloudflare',        g: 'cloud' },
  { n: 'Vercel',            g: 'cloud' },
  { n: 'GitHub',            g: 'cloud' },
  { n: 'AT&T',              g: 'carrier' },
  { n: 'Verizon',           g: 'carrier' },
  { n: 'T-Mobile',          g: 'carrier' },
  { n: 'Lumen',             g: 'carrier' },
  { n: 'Spectrum',          g: 'carrier' },
  { n: 'Comcast Business',  g: 'carrier' },
  { n: 'Cox Business',      g: 'carrier' },
  { n: 'Zayo',              g: 'carrier' },
  { n: 'Windstream',        g: 'carrier' },
  { n: 'Tangoe',            g: 'automation' },
  { n: 'Okta',              g: 'security' },
  { n: '1Password',         g: 'security' },
  { n: 'CrowdStrike',       g: 'security' },
  { n: 'SentinelOne',       g: 'security' },
];

const GROUPS = {
  ai:         { label: 'AI / ML',        color: '#7B5DAD' },
  data:       { label: 'Data / infra',   color: '#5BC5E3' },
  comms:      { label: 'Comms / CRM',    color: '#6B8BC5' },
  automation: { label: 'Automation',     color: '#10B981' },
  cloud:      { label: 'Cloud / dev',    color: '#F59E0B' },
  carrier:    { label: 'Carriers',       color: '#EC4899' },
  security:   { label: 'Security / IAM', color: '#EF4444' },
};

function Chip({ n, g }) {
  const color = GROUPS[g]?.color || '#94A3B8';
  return (
    <span className="tc-chip">
      <span
        className="tc-chip-dot"
        style={{ background: color, boxShadow: `0 0 10px ${color}88` }}
        aria-hidden="true"
      />
      <span className="tc-chip-name">{n}</span>
    </span>
  );
}

// Double a row so the CSS `translateX(-50%)` animation seamlessly loops.
function Row({ items, speed = 60, reverse = false }) {
  return (
    <div className="tc-row" aria-hidden="true">
      <div
        className="tc-row-track"
        style={{
          animationDuration: `${speed}s`,
          animationDirection: reverse ? 'reverse' : 'normal',
        }}
      >
        {items.map((t, i) => <Chip key={'a-' + i} {...t} />)}
        {items.map((t, i) => <Chip key={'b-' + i} {...t} />)}
      </div>
    </div>
  );
}

window.TechConstellation = function TechConstellation() {
  // Screen-reader summary so the marquee isn't invisible to assistive tech.
  const srCount = ROW_AI_AND_DATA.length + ROW_AUTOMATION_AND_PLATFORMS.length + ROW_CLOUD_AND_CARRIERS.length;

  return (
    <section className="constellation-section reveal">
      <div className="container">
        <div className="section-head left" style={{ marginBottom: 36 }}>
          <span className="kicker">Technology we deploy</span>
          <h2 style={{ marginTop: 20 }}>Specific, modern, and deliberate.</h2>
          <p style={{ maxWidth: 640 }}>
            When we say "AI" we mean particular models, vetted for the workload. When we say "automation" we mean specific platforms we've run in production. We evaluate against 300+ providers globally — these are a slice of the stack we actually deploy.
          </p>
        </div>

        <div className="constellation-legend">
          {Object.entries(GROUPS).map(([k, g]) => (
            <div key={k} className="constellation-legend-item">
              <span
                className="constellation-legend-dot"
                style={{ background: g.color, boxShadow: `0 0 10px ${g.color}88` }}
              />
              <span className="mono">{g.label}</span>
            </div>
          ))}
        </div>

        <div className="tc-marquee" role="img" aria-label={`Partial view of ${srCount}+ technologies Technology Cycle deploys, including AI models, data platforms, CRMs, automation tools, cloud providers, telecom carriers, and security platforms.`}>
          <Row items={ROW_AI_AND_DATA} speed={72} />
          <Row items={ROW_AUTOMATION_AND_PLATFORMS} speed={58} reverse />
          <Row items={ROW_CLOUD_AND_CARRIERS} speed={66} />
        </div>

        <p className="constellation-foot">
          Partial view · we evaluate against 300+ providers and pick per workload. Vendor-agnostic by design.
        </p>
      </div>
    </section>
  );
};