/* ABOUT STORY — origin + timeline */

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

  return (
    <section data-screen-label="02 About Story" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 40 : 80, alignItems: 'start' }}>
          {/* Left intro */}
          <div style={{ position: isMobile ? 'relative' : 'sticky', top: isMobile ? 0 : 120 }}>
            <span className="eyebrow"><span className="dot"></span>Our story</span>
            <h2 className="h2" style={{ marginTop: 16 }}>
              From <span className="accent">freelance side-hustle</span><br />
              to a 24-person global squad.
            </h2>

            {/* Founder sticker */}
            <div style={{ marginTop: 28, background: 'var(--ink)', color: 'white', borderRadius: 14, padding: 18 }}>
              <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
                {[{n:'Yashdeep T', h:200}, {n:'Vishal C', h:140}, {n:'Tanuj R', h:30}].map(p => (
                  <Avatar key={p.n} name={p.n} size={36} hue={p.h} />
                ))}
              </div>
              <p style={{ margin: 0, fontSize: 13, color: 'rgba(255,255,255,.85)', lineHeight: 1.5 }}>
                "We started Ecomlifters because every agency we tried as founders felt like a slot machine. We wanted a partner that ran growth like an engineering team — and couldn't find one. So we built it."
              </p>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,.5)', marginTop: 12, fontFamily: 'var(--font-mono)' }}>
                — Co-founders, 2019
              </div>
            </div>
          </div>

          {/* Right timeline */}
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', left: 0, top: 8, bottom: 8, width: 2,
              background: 'linear-gradient(180deg, var(--green) 0%, var(--green-deep) 100%)',
              borderRadius: 2, opacity: 0.18,
            }}></div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
              {[
                { y: '2019', t: 'Three founders, one rented desk',      d: 'Started as a 3-person team in Gurgaon helping local Shopify brands ship better product pages. First client paid us in store credit.' },
                { y: '2020', t: 'First $1M generated for a client',     d: 'A skincare brand we worked with hit $1M ARR. We realized the playbook scaled across categories, not just one.' },
                { y: '2021', t: 'Expanded into paid media',             d: 'Hired our first senior media buyer. Built our experimentation framework. Brought 8 brands from sub-$10k/mo to seven figures.' },
                { y: '2022', t: 'Crossed 30 brands served',             d: 'Opened a second team for European clients. Built our internal attribution model after losing visibility post-iOS14.' },
                { y: '2024', t: 'Launched performance-share pricing',   d: 'For select brands, we tied our fee to their growth. Took bigger swings. Most clients we still work with today came in this cohort.' },
                { y: '2026', t: '85+ brands. 14 countries. 24 people.', d: 'Where we are now. Still founder-led, still senior-only, still measuring outcomes — not hours.' },
              ].map((m, i) => (
                <Reveal key={m.y} delay={i * 60} style={{ paddingLeft: 36, position: 'relative' }}>
                  <div style={{
                    position: 'absolute', left: -6, top: 6,
                    width: 14, height: 14, borderRadius: '50%',
                    background: 'var(--bg)', border: '2px solid var(--green)',
                  }}></div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 8, flexWrap: 'wrap' }}>
                    <span className="mono-label" style={{ color: 'var(--green-deep)', fontSize: 13 }}>{m.y}</span>
                    <h3 className="h3" style={{ fontSize: 22, fontWeight: 500 }}>{m.t}</h3>
                  </div>
                  <p style={{ fontSize: 15, color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55, maxWidth: '62ch' }}>{m.d}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AboutStory = AboutStory;