/* ============================================================
   components-portfolio.jsx — CASES data, CaseCard, Work (home), WorkPage (grid)
   ============================================================ */
const CASES = [
  { slug:"fintech-growth", cat:"Fintech · Growth engine", stat:"$3M", sup:"", statcap:"AUM in 6 months, from a $100K base.",
    industry:"Fintech platform", built:"Content engines, webinar funnels, SEO surface, investor-summit creative sprint",
    shipped:"27,000+ users · 100+ keywords · 5,300+ organic sessions/month · 150+ creatives in 7 days", nda:"Anonymised per client context", feat:true },
  { slug:"distribution", cat:"Distribution · Creative direction", stat:"50M+", sup:"", statcap:"views on one campaign reel.",
    industry:"Global drone / camera brand", built:"Three campaign concepts, scripts, shoot direction, edit supervision",
    shipped:"50M+ views on the primary campaign reel · platform-native distribution across travel verticals · public examples on request", nda:"Public examples on request", feat:true },
  { slug:"consumer-launch", cat:"Consumer venture · Dubai", stat:"+203K", sup:"", statcap:"views in the first 30 days from a standing start.",
    industry:"Dubai consumer venture across three sub-brands", built:"Brand book, applied guidelines, content engine, landing page, investor deck, token system",
    shipped:"+954 followers · marketing manager and production team handed off and running", nda:"Anonymised per NDA", feat:true },
  { slug:"b2b-system", cat:"B2B · AI pipeline", stat:"50+", sup:"", statcap:"qualified leads per week.",
    industry:"Engineering-services software across oil, gas, manufacturing, chemicals, utilities",
    built:"AI-driven drip engine, email workflow, remote production team, documented operating process",
    shipped:"CTR up 25-40% · system still running after handoff", nda:"Anonymised per client NDA", feat:true },
  { slug:"public-storytelling", cat:"Civic & tourism · Storytelling", stat:"10M+", sup:"", statcap:"campaign reach across Rajasthan.",
    industry:"Civic, conservation, luxury rail, tourism, and public-sector narratives", built:"PSA films, reels, scripts, storyboards, production direction",
    shipped:"Government and tourism campaigns translated into human-first public storytelling", nda:"Public examples on request", feat:true },
  { slug:"brand-systems", cat:"Brand systems · End-to-end", stat:"3", sup:"", statcap:"full systems, not just logos.",
    industry:"Consumer venture, B2B SaaS, luxury real estate", built:"Discovery, platform, personas, identity, colour, type, voice, brand book, action pack",
    shipped:"37-page brand book · 20-page applied guidelines · machine-readable tokens", nda:"", feat:false },
  { slug:"automation", cat:"AI multiplier · Operating systems", stat:"~60%", sup:"", statcap:"manual marketing workload reduced.",
    industry:"Founder-led brands and technical operators", built:"Script-to-asset workflows, content engines, calendars, reporting loops, team handoff",
    shipped:"10+ landing pages with 20-35% lift · days-to-hours production cycles", nda:"", feat:false },
  { slug:"luxury-lifestyle", cat:"Luxury · lifestyle · creator", stat:"100+", sup:"", statcap:"videos shipped in a 30-day real-estate sprint.",
    industry:"Luxury real estate, jewellery, coffee, music, creator, hypercar and SUV launches", built:"Creative direction, brand films, stills, launch assets, agent content systems",
    shipped:"100K+ organic reach in 30 days · 4 sales in the same window", nda:"", feat:false },
  { slug:"personal-brand", cat:"Personal brand · Dubai", stat:"Mishran", sup:"", statcap:"Culture, Comedy, Hip-hop, Tech, AI.",
    industry:"Own channels, founder-media experiments, and GCC culture thesis", built:"Writing, commentary, dispatches, studio rhythm, AI-native media practice",
    shipped:"The operator brand acts as the lab, not just the brochure", nda:"", feat:false },
];

function CaseCard({ c }) {
  return (
    <a className="case" href="contact.html">
      <div className="case-top">
        <div className="case-cat">{c.cat}</div>
        <div className="case-stat">{c.stat}{c.sup && <sup>{c.sup}</sup>}</div>
        <div className="case-statcap">{c.statcap}</div>
      </div>
      <div className="case-shape">
        <div className="srow"><span className="k">Industry</span><span className="v">{c.industry}</span></div>
        <div className="srow"><span className="k">Built</span><span className="v">{c.built}</span></div>
        <div className="srow"><span className="k">Shipped</span><span className="v">{c.shipped}</span></div>
      </div>
      <div className="case-foot">
        <span className="nda">{c.nda ? "■ " + c.nda : "\u00A0"}</span>
        <span className="view">Discuss similar work <Arrow/></span>
      </div>
    </a>
  );
}

/* Home: identity reveal band + curated horizontal case slider */
function Work({ onBook }) {
  const trackRef = useRef(null);
  const featured = CASES.filter((c) => c.feat);
  const scrollBy = (dir) => {
    const t = trackRef.current; if (!t) return;
    t.scrollBy({ left: dir * Math.min(582, t.clientWidth * 0.86), behavior: "smooth" });
  };

  const SHOTS = window.HERO_SHOTS || [];
  const [bgIdx, setBgIdx] = useState(0);
  const [flash, setFlash] = useState(false);
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    setFlash(true);
    const ft = setTimeout(() => setFlash(false), 560);
    if (SHOTS.length < 2) return () => clearTimeout(ft);
    const iv = setInterval(() => setBgIdx((i) => (i + 1) % SHOTS.length), 2500);
    return () => { clearTimeout(ft); clearInterval(iv); };
  }, [SHOTS.length]);

  return (
    <section className="work" id="top">
      <div className="work-bg" aria-hidden="true">
        {SHOTS.map((src, i) => (
          <img key={src} className={"work-bg-shot" + (i === bgIdx ? " on" : "")} src={src} alt="" />
        ))}
        <div className="work-bg-scrim"></div>
      </div>
      {flash && <div className="work-flash" aria-hidden="true"></div>}
      <div className="wrap work-id">
        <div className="eyebrow">Dubai · GCC · 2026</div>
        <div className="work-mark"><WordmarkTHS /></div>
        <p className="work-tag">Internet culture, <b>translated into business growth.</b></p>
        <p className="work-line">Because robots can't dream. <span>I speak fluent internet.</span></p>
        <p className="work-sub">
          Operated by <b>Abhileen Singh Saluja</b> — one operator, full marketing function, AI as the multiplier.
          Culture × Comedy × Hip-hop × Tech × AI.
        </p>
        <div className="work-cta">
          <button className="btn btn-saffron" onClick={onBook}>Book the call <Arrow/></button>
          <a className="btn btn-ghost-light" href="#work">See the work</a>
        </div>
        <a className="work-scroll" href="#work" aria-label="Scroll to the work">
          <span>Scroll</span>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
        </a>
        <div className="work-hero-stripe" aria-hidden="true"></div>
      </div>

      <div className="wrap work-head" id="work">
        <div>
          <div className="eyebrow">02 · My work, with receipts</div>
          <h2 className="work-h2">Real numbers. Public-safe proof.</h2>
          <p className="work-hint">Five flagship receipts from the 2026 portfolio: fintech growth, 50M+ distribution, a Dubai launch, B2B pipeline, and public storytelling. If the shape fits, the room is open.</p>
        </div>
        <div className="pf-nav">
          <button className="pf-arrow" onClick={()=>scrollBy(-1)} aria-label="Previous case">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
          </button>
          <button className="pf-arrow" onClick={()=>scrollBy(1)} aria-label="Next case">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
          </button>
        </div>
      </div>
      <div className="wrap">
        <div className="pf-track" ref={trackRef}>
          {featured.map((c) => <CaseCard key={c.slug} c={c} />)}
        </div>
        <div className="work-seeall">
          <a className="btn btn-ghost-light" href="work.html">See the selected work lanes <Arrow/></a>
        </div>
      </div>
    </section>
  );
}

/* Work page: hero + public-safe 2-up grid of selected work lanes */
function WorkPage() {
  return (
    <section className="workpage">
      <div className="page-top"></div>
      <div className="wrap workpage-hero">
        <div className="eyebrow">The work</div>
        <h1>The work. <em>Receipts, not claims.</em></h1>
        <p className="lede">Fintech growth. Distribution at scale. B2B pipelines. Brand systems built to run without the operator. Nine lanes, real numbers — the receipts speak loud enough.</p>
        <div className="workpage-stats">
          <div className="s"><div className="n">$3M</div><div className="l">AUM scaled in 6 months</div></div>
          <div className="s"><div className="n">50M+</div><div className="l">views on one campaign reel</div></div>
          <div className="s"><div className="n">10M+</div><div className="l">government and tourism reach</div></div>
          <div className="s"><div className="n">50+/wk</div><div className="l">qualified B2B leads</div></div>
        </div>
      </div>
      <div className="wrap">
        <div className="grid-cases">
          {CASES.map((c) => <CaseCard key={c.slug} c={c} />)}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Work, WorkPage, CaseCard, CASES });