/* ABOUT HERO + facts strip */

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

  return (
    <section data-screen-label="01 About Hero" style={{ paddingTop: 130, paddingBottom: 80, position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden className="grid-bg" style={{
        position: 'absolute', inset: 0, opacity: 0.35, 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>About ecomlifters</span>
        </Reveal>

        <Reveal delay={80} style={{ display: 'flex', justifyContent: 'center' }}>
          <h1 className="display" style={{ maxWidth: 1100, textAlign: 'center' }}>
            We don't sell <span className="accent">hours.</span><br />
            We ship <span className="accent">measurable lift.</span>
          </h1>
        </Reveal>

        <Reveal delay={140} style={{ display: 'flex', justifyContent: 'center', marginTop: 26 }}>
          <p className="lead" style={{ textAlign: 'center' }}>
            Ecomlifters is a senior squad of performance designers, growth engineers and media operators
            working with DTC brands across 14 countries. We were tired of agencies that charge for decks,
            so we built one that charges for outcomes.
          </p>
        </Reveal>

        <Reveal delay={220} style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
          <BtnDark onClick={() => document.getElementById('about-story') && document.getElementById('about-story').scrollIntoView({behavior:'smooth'})}>Read our story</BtnDark>
          <BtnGreen onClick={() => window.open('https://calendly.com/ecomlifters/30min', '_blank')}>Work with us</BtnGreen>
        </Reveal>

        {/* Key facts strip */}
        <Reveal delay={300} style={{ marginTop: 72 }}>
          <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',
          }}>
            {[
              { v: 2019,    l: 'Founded',         note: '7 years in business' },
              { v: '85+',   l: 'Brands served',   note: 'Across 14 countries' },
              { v: 24,      l: 'Senior team',      note: '7+ yr avg experience' },
              { v: '$10M+', l: 'Revenue lifted',   note: 'For DTC clients' },
            ].map((s, i) => {
              const col = i % 2;
              const row = Math.floor(i / 2);
              return (
                <div key={s.l} style={{
                  padding: isMobile ? 20 : 24,
                  borderRight: isMobile
                    ? (col === 0 ? '1px solid var(--hairline-2)' : 'none')
                    : (i < 3 ? '1px solid var(--hairline-2)' : 'none'),
                  borderBottom: isMobile && row === 0 ? '1px solid var(--hairline-2)' : 'none',
                }}>
                  <div className="num" style={{ fontSize: isMobile ? 'clamp(28px, 7vw, 44px)' : 'clamp(36px, 4vw, 56px)', fontWeight: 400, letterSpacing: '-0.03em', lineHeight: 1 }}>{s.v}</div>
                  <div className="mono-label" style={{ marginTop: 10, color: 'var(--green-deep)' }}>{s.l}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-soft)', marginTop: 4 }}>{s.note}</div>
                </div>
              );
            })}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.AboutHero = AboutHero;