/* SERVICES HERO — page-specific */

function SvcHero() {
  const isMobile = useWindowWidth() < 768;

  return (
    <section data-screen-label="01 Services Hero" style={{ paddingTop: 130, paddingBottom: 56, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden className="grid-bg" style={{
        position: 'absolute', inset: 0, opacity: 0.4, pointerEvents: 'none',
        maskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 28 }}>
          <span className="eyebrow"><span className="dot"></span>What we ship</span>
        </Reveal>

        <Reveal delay={80} style={{ display: 'flex', justifyContent: 'center' }}>
          <h1 className="h2" style={{ maxWidth: 900, textAlign: 'center', fontSize: 'clamp(32px, 5vw, 68px)', letterSpacing: '-0.03em' }}>
            Four services. <span className="accent">One squad.</span><br />
            Measurable lift, not decks.
          </h1>
        </Reveal>

        <Reveal delay={140} style={{ display: 'flex', justifyContent: 'center', marginTop: 26 }}>
          <p className="lead" style={{ textAlign: 'center' }}>
            We don't sell hours — we ship outcomes. Each engagement starts with a hypothesis,
            ends with a measurable shift in your funnel, and runs on a 14-day sprint cadence.
          </p>
        </Reveal>

        <Reveal delay={200} style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 32 }}>
          <BtnDark icon={!isMobile} style={isMobile ? { fontSize: 13, height: 42, padding: '0 16px' } : undefined} onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>Book a scoping call</BtnDark>
          <BtnGreen icon={!isMobile} style={isMobile ? { fontSize: 13, height: 42, padding: '0 16px' } : undefined} onClick={() => window.location.href='/services.html#pricing'}>See pricing</BtnGreen>
        </Reveal>

        {/* Quick jump nav */}
        <Reveal delay={260} style={{ marginTop: 80 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
            gap: 0,
            background: 'white',
            border: '1px solid var(--hairline-2)',
            borderRadius: 18,
            overflow: 'hidden',
          }}>
            {[
              { n: '01', t: 'Performance Marketing', sub: 'Meta · Google · TikTok · Klaviyo', href: '#perf', metric: '3.8× avg ROAS' },
              { n: '02', t: 'Websites & Landing',    sub: 'Shopify · Next.js · Framer',       href: '#web',  metric: '+186% CVR' },
              { n: '03', t: 'CRO & Experimentation', sub: '14-day testing sprints',           href: '#cro',  metric: '71% win rate' },
              { n: '04', t: 'MVP & Product Design',  sub: 'Lean dev · design systems',        href: '#mvp',  metric: '4–8 wk launch' },
            ].map((s, i) => {
              const col = i % 2;
              const row = Math.floor(i / 2);
              const borderRight = isMobile ? (col === 0 ? '1px solid var(--hairline-2)' : 'none') : (i < 3 ? '1px solid var(--hairline-2)' : 'none');
              const borderBottom = isMobile ? (row === 0 ? '1px solid var(--hairline-2)' : 'none') : 'none';
              return (
                <a key={s.n} href={s.href} style={{
                  padding: isMobile ? 16 : 20,
                  borderRight,
                  borderBottom,
                  display: 'flex', flexDirection: 'column', gap: 10,
                  transition: 'background .2s',
                }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span className="mono-label" style={{ color: 'var(--green-deep)' }}>{s.n}</span>
                    <Icon.Arrow size={12} />
                  </div>
                  <div>
                    <div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, letterSpacing: '-0.01em' }}>{s.t}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 4 }}>{s.sub}</div>
                  </div>
                  <div style={{ marginTop: 'auto', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green-deep)', paddingTop: 12, borderTop: '1px dashed var(--hairline)' }}>
                    {s.metric}
                  </div>
                </a>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.SvcHero = SvcHero;