/* ============================================================
   components-about.jsx — full About page (longer arc / bio / manifesto)
   ============================================================ */
const ARC = [
  { y: "2016", w: "Engineering college · Bangalore" },
  { y: "2019", w: "Stand-up stages" },
  { y: "’20–22", w: "Brand & agency" },
  { y: "’22–24", w: "Public · luxury · technical" },
  { y: "’24–25", w: "AI ad systems" },
  { y: "2026", w: "Sardar goes public" },
];

const LANES = [
  { ln: "Culture", p: "Reading what's moving on the internet before it has a name — and knowing which part a founder can actually use." },
  { ln: "Comedy", p: "Five years on stand-up stages. Attention is a craft, not a hack. Timing closes what a deck can't." },
  { ln: "Hip-hop", p: "Cadence, sampling, the remix instinct. The brand has a beat; the work lands on it." },
  { ln: "Tech", p: "Engineering dropout who never stopped building systems. The pipeline is the product." },
  { ln: "AI", p: "The multiplier underneath everything — used to speed production without outsourcing taste." },
];

function AboutPage() {
  return (
    <main className="about-main">
      <div className="page-top"></div>
      <section className="about-hero">
        <div className="wrap">
          <div className="eyebrow">The operator</div>
          <h1>One arc. Five lanes. <em>Receipts in each.</em></h1>
        </div>
        <img className="about-poster" src="assets/poster-hyperactive-1.png" alt="That Hyperactive Sardar — Abhileen Singh Saluja, Hyperactive Mode poster" />
      </section>

      <section className="about-section">
        <div className="wrap">
          <div className="prose">
            <p>That Hyperactive Sardar is the operating brand of <strong style={{color:"var(--bone)"}}>Abhileen Singh Saluja</strong> — a Dubai-based operator who runs strategy, production, and distribution with AI as the multiplier.</p>
            <p>The short version: engineering dropout who learned attention from stand-up, narrative from brand work, and systems from a decade of building them. Nothing got abandoned along the way. Everything stacked.</p>

            <blockquote className="pull">Five years from now, AI will be expected. <b>Taste won't.</b></blockquote>

            <p>The rarer move — the one only this operator can do — is reading what's moving on the internet and converting it into outcomes a founder can defend on a board deck. Anyone can generate. Almost no one can edit. The work isn't the prompt. <em>It's what gets killed.</em></p>

            <div className="lanes">
              {LANES.map((l, i) => (
                <div className="lane" key={i}>
                  <div className="ln">{l.ln}</div>
                  <p>{l.p}</p>
                </div>
              ))}
            </div>

            <p>That's the mishran — Culture × Comedy × Hip-hop × Tech × AI. One mix, five lanes, ten years. The public version stays simple: sharper stories, cleaner systems, stronger distribution, and client details shared only with permission.</p>
          </div>

          <div className="prose">
            <div className="arc" style={{margin:"44px 0 8px"}}>
              {ARC.map((a, i) => <div className="arc-step" key={i}><div className="y">{a.y}</div><div className="w">{a.w}</div></div>)}
            </div>
          </div>

          <div className="prose">
            <p style={{marginTop:"36px"}}>The brand runs two registers over one spine. The take is always sharp — only the delivery shifts.</p>
            <div className="registers">
              <div className="reg op">
                <h4>Operator Mode</h4>
                <p className="q">"The thing that usually works is not more output. It is killing the wrong half of the calendar before it ships."</p>
              </div>
              <div className="reg hy">
                <h4>Hyperactive Mode</h4>
                <p className="q">"That Hyperactive Sardar shipped six things this week. Killed nine. The maths is brutal. The maths is the moat. <b>SARDAR RUNS THE ROOM.</b>"</p>
              </div>
            </div>
            <p>The character does the recall work. The receipts do the close. Same operator, two registers — neither apologises for the other.</p>
          </div>

          <div className="prose">
            <div className="reject" style={{borderColor:"var(--bone-12)", maxWidth:"none"}}>
              <h4 style={{color:"var(--saffron)"}}>What I won't take</h4>
              <p style={{color:"var(--bone)", opacity:.84}}>No fractional-CMO retainer-only engagements. No hourly billing. No engagements without a named decision-maker. No logo-only commissions under AED 14,999. No strategy decks without a shippable artifact attached. No crypto / casino / unregulated finance. No "we partner with you" energy. <em style={{color:"var(--saffron)"}}>The rejection list compounds. New rejections earn a line.</em></p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { AboutPage, ARC, LANES });