/* INDUSTRY VERTICALS — coverage map */

function Verticals() {
  const isMobile = useWindowWidth() < 768;
  const verticals = [
    { n: 'Skincare & Beauty',  count: 18, hue: 340 },
    { n: 'Apparel & Fashion',  count: 22, hue: 290 },
    { n: 'Supplements & Wellness', count: 14, hue: 160 },
    { n: 'Home & Living',      count: 9,  hue: 30  },
    { n: 'Food & Beverage',    count: 11, hue: 60  },
    { n: 'Pet',                count: 6,  hue: 220 },
    { n: 'Electronics',        count: 4,  hue: 200 },
    { n: 'Activewear',         count: 8,  hue: 130 },
    { n: 'Mobility & Outdoor', count: 5,  hue: 100 },
    { n: 'Kids & Baby',        count: 7,  hue: 350 },
  ];

  const regions = [
    { code: 'US', flag: '🇺🇸', label: 'United States',  brands: 32 },
    { code: 'EU', flag: '🇪🇺', label: 'European Union', brands: 28 },
    { code: 'UK', flag: '🇬🇧', label: 'United Kingdom', brands: 11 },
    { code: 'CA', flag: '🇨🇦', label: 'Canada',         brands: 6  },
    { code: 'AU', flag: '🇦🇺', label: 'Australia',      brands: 5  },
    { code: 'JP', flag: '🇯🇵', label: 'Japan',          brands: 3  },
  ];

  return (
    <section data-screen-label="10 Verticals" id="verticals" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        {isMobile ? (
          /* ── Mobile layout ── */
          <div>
            <SectionHeader
              eyebrow="Verticals served"
              title={<>10 verticals.<br /><span className="accent">85+ brands. 14 countries.</span></>}
              lead="Vertical-specialists, not generalists — we skip the learning curve."
              align="left"
            />

            {/* Marquee pills */}
            <div style={{ overflow: 'hidden', marginLeft: -16, marginRight: -16, marginBottom: 24, maskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)', WebkitMaskImage: 'linear-gradient(to right, transparent, black 8%, black 92%, transparent)' }}>
              <div className="marquee marquee--slow" style={{ gap: 10 }}>
                {[...verticals, ...verticals].map((v, i) => (
                  <span key={i} style={{
                    flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '9px 14px', background: 'white',
                    border: '1px solid var(--hairline-2)', borderRadius: 999, fontSize: 13,
                  }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: `oklch(0.7 0.13 ${v.hue})` }}></span>
                    {v.n}
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--muted)' }}>{v.count}</span>
                  </span>
                ))}
              </div>
            </div>

            {/* Compact stats strip */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[
                { n: '85+', label: 'DTC brands' },
                { n: '14', label: 'Countries' },
                { n: '10', label: 'Verticals' },
                { n: '7+yr', label: 'Avg. experience' },
              ].map(s => (
                <div key={s.label} style={{ background: 'var(--ink)', color: 'white', borderRadius: 16, padding: '18px 20px' }}>
                  <div className="num" style={{ fontSize: 32, fontWeight: 500, letterSpacing: '-0.03em', color: 'var(--green-bright)' }}>{s.n}</div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: '0.06em', textTransform: 'uppercase', marginTop: 4 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          /* ── Desktop layout ── */
          <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'start' }}>
            <div>
              <SectionHeader
                eyebrow="Verticals served"
                title={<>10 verticals.<br /><span className="accent">85+ DTC brands. 14 countries.</span></>}
                lead="We're vertical-specialists, not generalists. Each squad has shipped at least 6 brands in their category — so we skip the learning curve and ship lift faster."
                align="left"
              />
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {verticals.map((v, i) => (
                  <Reveal key={v.n} delay={i * 40}>
                    <span style={{
                      display: 'inline-flex', alignItems: 'center', gap: 10,
                      padding: '10px 16px', background: 'white',
                      border: '1px solid var(--hairline-2)', borderRadius: 999, fontSize: 14,
                    }}>
                      <span style={{ width: 10, height: 10, borderRadius: '50%', background: `oklch(0.7 0.13 ${v.hue})` }}></span>
                      {v.n}
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)' }}>{v.count}</span>
                    </span>
                  </Reveal>
                ))}
              </div>
            </div>

            {/* Global card — desktop only */}
            <Reveal delay={200} className="card dark-canvas" style={{
              background: 'var(--ink)', color: 'white',
              padding: 28, borderRadius: 22,
              position: 'relative', overflow: 'hidden',
            }}>
              <div aria-hidden style={{
                position: 'absolute', inset: 0, opacity: 0.15,
                backgroundImage: 'radial-gradient(circle at center, rgba(255,255,255,0.3) 0.7px, transparent 0.7px)',
                backgroundSize: '14px 14px',
                maskImage: 'radial-gradient(circle at 50% 60%, black 0%, transparent 70%)',
                WebkitMaskImage: 'radial-gradient(circle at 50% 60%, black 0%, transparent 70%)',
              }}></div>

              <div style={{ position: 'relative' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                  <span className="mono-label" style={{ color: 'rgba(255,255,255,.6)' }}>Global footprint</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'rgba(255,255,255,.6)' }}>
                    <span className="pulse-dot"></span> 14 time zones
                  </span>
                </div>

                <div className="num" style={{ fontSize: 80, fontWeight: 400, letterSpacing: '-0.04em', lineHeight: 0.9, marginBottom: 6 }}>
                  85+
                </div>
                <div style={{ fontSize: 14, color: 'rgba(255,255,255,.7)', marginBottom: 24 }}>DTC brands served worldwide</div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                  {regions.map((r, i) => (
                    <div key={r.code} style={{
                      display: 'grid', gridTemplateColumns: 'auto 1fr auto auto',
                      alignItems: 'center', gap: 12,
                      padding: '12px 0',
                      borderBottom: i < regions.length - 1 ? '1px dashed rgba(255,255,255,0.1)' : 'none',
                    }}>
                      <span style={{ fontSize: 18 }}>{r.flag}</span>
                      <span style={{ fontSize: 14 }}>{r.label}</span>
                      <BarTrail count={r.brands} max={32} />
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--green-bright)', minWidth: 36, textAlign: 'right' }}>{r.brands}</span>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
          </div>
        )}
      </div>
    </section>
  );
}

function BarTrail({ count, max }) {
  // animated horizontal bar
  const pct = Math.round((count / max) * 100);
  return (
    <div style={{ width: 110, height: 6, background: 'rgba(255,255,255,0.08)', borderRadius: 4, overflow: 'hidden' }}>
      <div style={{ width: `${pct}%`, height: '100%', background: 'var(--green-bright)', borderRadius: 4 }}></div>
    </div>
  );
}

window.Verticals = Verticals;