/* TECH STACK — platforms we work on */

function TechStack() {
  const isMobile = useWindowWidth() < 768;
  const groups = [
    {
      label: 'Storefront',
      items: [
        { n: 'Shopify',       color: '#7AB55C' },
        { n: 'Shopify Plus',  color: '#5E8E48' },
        { n: 'Headless',      color: '#0F1110' },
        { n: 'Next.js',       color: '#0F1110' },
        { n: 'WooCommerce',   color: '#7F54B3' },
      ],
    },
    {
      label: 'Paid media',
      items: [
        { n: 'Meta Ads',      color: '#1877F2' },
        { n: 'Google Ads',    color: '#4285F4' },
        { n: 'TikTok Ads',    color: '#0F1110' },
        { n: 'YouTube',       color: '#FF0033' },
        { n: 'Pinterest',     color: '#E60023' },
        { n: 'Reddit',        color: '#FF4500' },
      ],
    },
    {
      label: 'Lifecycle & CRM',
      items: [
        { n: 'Klaviyo',       color: '#000000' },
        { n: 'Postscript',    color: '#1A1F1C' },
        { n: 'Attentive',     color: '#7B2CBF' },
        { n: 'HubSpot',       color: '#FF7A59' },
      ],
    },
    {
      label: 'Analytics & CRO',
      items: [
        { n: 'GA4',           color: '#F9AB00' },
        { n: 'Mixpanel',      color: '#7856FF' },
        { n: 'Hotjar',        color: '#FD3A5C' },
        { n: 'PostHog',       color: '#1A1F1C' },
        { n: 'Northbeam',     color: '#21D177' },
        { n: 'Triple Whale',  color: '#1A1F1C' },
        { n: 'VWO',           color: '#392F8C' },
      ],
    },
  ];

  return (
    <section data-screen-label="09 Tech stack" id="stack" style={{ paddingTop: 64, paddingBottom: 64, background: 'var(--bg-2)' }}>
      <div className="container">
        <SectionHeader
          eyebrow="Tech stack"
          title={<>Battle-tested across <span className="accent">22+ platforms.</span></>}
          lead="We're platform-agnostic — but deep. Every senior on the team has shipped in production for at least three of these, and we keep certifications current."
          align="left"
        />

        {/* Shopify partner badges */}
        <Reveal style={{ display: 'flex', alignItems: 'center', flexDirection: 'row', gap: isMobile ? 16 : 24, marginBottom: 28, flexWrap: 'wrap' }}>
          <img src="images/shopify-partnersv2.png" alt="Shopify Partners" style={{ height: 32, opacity: 0.75, filter: 'grayscale(20%)' }} />
          <img src="images/shopify-plusv2.png" alt="Shopify Plus" style={{ height: 28, opacity: 0.75, filter: 'grayscale(20%)' }} />
          <img src="images/shopify-logo-with-textv2.png" alt="Shopify" style={{ height: 28, opacity: 0.75, filter: 'grayscale(20%)' }} />
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 20 }}>
          {groups.map((g, i) => (
            <Reveal key={g.label} delay={i * 60} className="card" style={{ padding: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16, paddingBottom: 12, borderBottom: '1px dashed var(--hairline)' }}>
                <span className="mono-label" style={{ color: 'var(--green-deep)' }}>{g.label}</span>
                <span className="mono-label">{g.items.length} tools</span>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {g.items.map(it => (
                  <span key={it.n} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '8px 14px',
                    background: 'var(--bg)', border: '1px solid var(--hairline-2)',
                    borderRadius: 999, fontSize: 13,
                    color: 'var(--ink)',
                  }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: it.color }}></span>
                    {it.n}
                  </span>
                ))}
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={300} style={{ marginTop: 28, display: 'flex', justifyContent: 'center', gap: 8, color: 'var(--ink-soft)', fontSize: 13 }}>
          <span>Don't see your stack?</span>
          <a href="#cta" className="ulink" style={{ color: 'var(--green-deep)', fontWeight: 500 }}>Tell us what you run on →</a>
        </Reveal>
      </div>
    </section>
  );
}

window.TechStack = TechStack;