// page-about.jsx — About page content

const EXPERTISE = [
  { t: 'Video Editing' },
  { t: 'Motion Design' },
  { t: 'Social Media Strategy' },
  { t: 'Performance Marketing' },
  { t: 'Lead Generation' },
  { t: 'Photography' },
  { t: 'Videography' },
];

function AboutPage({ setRoute }) {
  return (
    <div className="page page-about">
      <CinematicHero />

      {/* Manifesto */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
            <Reveal delay={150}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
                <p style={{ fontFamily: 'var(--f-h)', fontSize: 32, lineHeight: 1.25, letterSpacing: '-0.02em', margin: 0, fontWeight: 'var(--f-h-weight)' }}>
                  Marketing should be <span style={{ color: 'var(--accent)', fontStyle: 'italic', fontFamily: 'var(--f-display)' }}>accountable</span>. We pitch the numbers we expect to hit, we track them every week, and we don&rsquo;t hide behind &lsquo;awareness&rsquo; when leads don&rsquo;t show up.
                </p>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, fontSize: 15, color: 'var(--muted)', lineHeight: 1.6 }}>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Senior-only on calls</h4>
                    <p style={{ margin: 0 }}>You speak directly to Satnam — the person doing the work, not an account manager.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Built in-house</h4>
                    <p style={{ margin: 0 }}>Creative, video, automation and ads — all built under one roof in Ludhiana.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Truth-telling</h4>
                    <p style={{ margin: 0 }}>We tell you when a campaign won&rsquo;t work, even if we&rsquo;ve already been paid for it.</p>
                  </div>
                  <div>
                    <h4 style={{ color: 'var(--ink)', fontSize: 17, marginBottom: 10, fontFamily: 'var(--f-sans)', fontWeight: 600 }}>Local roots</h4>
                    <p style={{ margin: 0 }}>We speak the language, know the Punjab market, and produce work that actually lands.</p>
                  </div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="stats">
            <Reveal className="stat"><div className="v"><CountUp to={10} />+</div><div className="k">Years in practice</div></Reveal>
            <Reveal className="stat" delay={80}><div className="v"><CountUp to={140} />+</div><div className="k">Projects delivered</div></Reveal>
            <Reveal className="stat" delay={160}><div className="v"><CountUp to={6} /></div><div className="k">Countries — social media clients</div></Reveal>
            <Reveal className="stat" delay={240}><div className="v"><CountUp to={8} /></div><div className="k">Largest team led</div></Reveal>
          </div>
        </div>
      </section>

      {/* Founder note */}
      <section>
        <div className="wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start' }}>
            <Reveal>
              <div style={{ marginTop: 24, padding: 16, border: '1px dashed var(--border)', borderRadius: 'var(--r-md)', background: 'var(--surface)' }}>
                <div style={{ aspectRatio: '4 / 5', background: 'var(--bg-2)', borderRadius: 'var(--r-sm)', display: 'grid', placeItems: 'center', position: 'relative' }}>
                  <span style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 88, color: 'var(--muted-2)' }}>SJ</span>
                  <span style={{ position: 'absolute', bottom: 10, left: 10, fontFamily: 'var(--f-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--muted)', padding: '4px 8px', border: '1px solid var(--border)', borderRadius: 4 }}>Satnam Singh · Ludhiana</span>
                </div>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <p style={{ fontFamily: 'var(--f-h)', fontSize: 24, lineHeight: 1.5, letterSpacing: '-0.015em', color: 'var(--ink-2)', margin: 0 }}>
                &ldquo;I started in video editing — cutting Bollywood promos in Mumbai, corporate films in Delhi, music videos in Punjab. Then I moved into social media and marketing, ran my own agency Socializar, and eventually built Harjog Solutions to bring all of it under one roof. Ten years on, the work is still the only thing that matters.&rdquo;
              </p>
              <p style={{ marginTop: 32, fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--muted)' }}>
                Satnam Singh · Founder &amp; Creative Director
              </p>
              <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  'Ashok Malhotra Group — Creative &amp; Social Media Head (Dec 2024–Present)',
                  'Socializar — Social Media Agency Owner (2023–24)',
                  'Praper Media — Team Lead, Video Production (2022–23)',
                  'Get Me Rank — Senior Designer (2020–22)',
                  'The Video Wand — Senior Video Editor, MCI India (2019–20)',
                  'Promo Editor, Bollywood &amp; Punjabi Productions (2019)',
                  'Westweb Technologies — Video Editor &amp; Designer (2016–19)',
                  'Freelancer — Video, Animation, Social Media (2014–16)',
                ].map((line, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'baseline', fontSize: 14, color: 'var(--muted)', lineHeight: 1.5 }}>
                    <span style={{ color: 'var(--accent)', fontFamily: 'var(--f-mono)', fontSize: 10 }}>—</span>
                    <span dangerouslySetInnerHTML={{ __html: line }} />
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Expertise */}
      <section id="capabilities">
        <div className="wrap">
          <Reveal className="sec-head">
            <h2>Core <span className="it">expertise</span></h2>
          </Reveal>
          {EXPERTISE.map((e, i) => (
            <Reveal key={e.t} className="svc-stack-item" delay={i * 40}>
              <h1 className="svc-stack-title">
                {e.t.split('').map((ch, j) => (
                  <span key={j} className="svc-ch-wrap">
                    <span className="svc-ch" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? ' ' : ch}</span>
                    <span className="svc-ch clone" style={{ transitionDelay: j * 14 + 'ms' }}>{ch === ' ' ? ' ' : ch}</span>
                  </span>
                ))}
              </h1>
            </Reveal>
          ))}
        </div>
      </section>

      <CTA setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { AboutPage, EXPERTISE });