// page-work.jsx — Work / portfolio page content

const ALL_WORK = [
  {
    slug: 'township-launch',
    image: 'https://images.unsplash.com/photo-WQ42ypHazNo?w=1200&q=80&auto=format&fit=crop',
    cat: 'Real Estate', date: '2025–26',
    title: 'Ashok Malhotra Group — Digital & Lead Gen',
    blurb: 'Managing social media, performance marketing and lead generation for premier Ludhiana real estate properties. Driving site visits and bookings for internal sales teams.',
    glyph: 'A', tags: ['Real Estate', 'Performance', 'Social Media'],
  },
  {
    slug: 'mla-campaign',
    image: 'https://images.unsplash.com/photo-AXGOhRx0Sko?w=1200&q=80&auto=format&fit=crop',
    cat: 'Political', date: '2025',
    title: 'Vidhan Sabha Campaign — Punjab',
    blurb: 'Full creative and outreach engine for a sitting MLA. 4.2L verified voter touchpoints across booths, IVR, WhatsApp and on-ground field collateral.',
    glyph: 'V', tags: ['Political', 'Social Media'],
  },
  {
    cat: 'Social Media', date: '2023–24',
    title: 'Socializar — Global Social Campaigns',
    blurb: 'Led social media campaigns for brands across London, Australia, Canada, USA, Dubai and Thailand. Content creation, influencer marketing and community management.',
    glyph: 'S', tags: ['Social Media', 'Performance'],
  },
  {
    cat: 'Film & Production', date: '2019',
    title: 'Bollywood & Punjabi Film Promos',
    blurb: 'Edited promos for Bala, Nikka Zaildar 3, Jabaria Jodi, Dream Girl, Doorbeen, Surkhi Bindi, Appa Ani Bappa and Chai Mera Put for major Bollywood and Punjabi productions.',
    glyph: 'B', tags: ['Film & Production'],
  },
  {
    cat: 'Film & Production', date: '2019',
    title: 'Mitti Da Bawa — Punjabi Feature Film',
    blurb: 'Movie trailer, dialogue promos, song videos and complete graphics work for the 2019 Punjabi feature film.',
    glyph: 'M', tags: ['Film & Production'],
  },
  {
    cat: 'Corporate Video', date: '2019–20',
    title: 'MCI India — Corporate Films & Auto Expo',
    blurb: "Corporate promos, lyrical videos, app demo videos and Mahindra's pitch video for Auto Expo 2020. Produced at The Video Wand, New Delhi.",
    glyph: 'C', tags: ['Corporate Video', 'Film & Production'],
  },
  {
    cat: 'Product Campaign', date: '2020–22',
    title: 'D2C Product Campaigns — Multi-Brand',
    blurb: 'Video and creative campaigns for Lahori Jeera, Skout Organics, Calming Dog, Kuddly, QuitStix, Chef V, Whom and Drink Dry.',
    glyph: 'P', tags: ['Product Campaign', 'Film & Production'],
  },
  {
    cat: 'App & Tech', date: '2021',
    title: 'HealthOptim — AI App Launch Video',
    blurb: 'Full intro and promotional video for HealthOptim, an artificial intelligence-based health and wellness platform.',
    glyph: 'H', tags: ['Corporate Video', 'Film & Production'],
  },
  {
    cat: 'Real Estate', date: '2020–24',
    title: 'Real Estate Creative — Multi-Project',
    blurb: 'Brand and video work for M3M, Omaxe, Urbana, Sahu City, Broadway, County 7, Corner Walk, Exclusiverentals.ca, IVY County, Amy Serfass, Cleo and Resurge.',
    glyph: 'R', tags: ['Real Estate', 'Film & Production'],
  },
  {
    cat: 'Music Video', date: '2018–22',
    title: 'Music Video Direction & Editing',
    blurb: 'Directed and edited music videos for Tere Hasse (Pritam x Binner x Sunny), Brave Gabru (Gavvy Gora), Jazbaat (Rukpal Grewal), Reality by Ansh and many more.',
    glyph: 'V', tags: ['Film & Production'],
  },
];

function WorkPage({ setRoute }) {
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Real Estate', 'Political', 'Social Media', 'Film & Production', 'Performance', 'Corporate Video'];
  const shown = filter === 'All'
    ? ALL_WORK
    : ALL_WORK.filter(w => w.tags.includes(filter) || w.cat === filter);

  return (
    <div className="page">
      <div className="page-head">
        <div className="wrap">
          <div className="page-head-split">
            <h1><TypeReveal>10 years of<br /><span className="it">real work.</span></TypeReveal></h1>
            <p className="deck">
              From Bollywood film promos and Punjabi music videos to real estate launches, political campaigns and global social media — built by one person, one studio.
            </p>
          </div>
        </div>
      </div>

      <section style={{ paddingTop: 60 }}>
        <div className="wrap">
          <div style={{ display: 'flex', gap: 8, marginBottom: 48, flexWrap: 'wrap' }}>
            {filters.map(f => (
              <button key={f} className={"budget-chip" + (filter === f ? " active" : "")} onClick={() => setFilter(f)}>
                {f === 'All' ? f : `${f} (${ALL_WORK.filter(w => w.tags.includes(f) || w.cat === f).length})`}
              </button>
            ))}
          </div>

          <div className="work-grid">
            {shown.map((w, i) => (
              <Reveal key={w.title} className="work-card" delay={(i % 2) * 100}
                      onClick={() => w.slug ? setRoute('case/' + w.slug) : null}
                      style={{ cursor: w.slug ? 'pointer' : 'default' }}>
                <Parallax speed={-0.05} as="div" style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden', aspectRatio: '4 / 3', background: 'var(--surface)', border: '1px solid var(--border)', marginBottom: 24, position: 'relative' }}>
                  {w.image ? (
                    <img src={w.image} alt={w.title} style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
                  ) : (
                    <div className="work-thumb-inner">
                      <span className="glyph">{w.glyph}</span>
                      <span className="placeholder-lbl">{w.cat}</span>
                    </div>
                  )}
                </Parallax>
                <div className="work-meta">
                  <span>{w.cat}</span>
                  <span>{w.date}</span>
                </div>
                <h3>{w.title}</h3>
                <p className="blurb">{w.blurb}</p>
                {w.slug && (
                  <div style={{ marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 8, fontFamily: 'var(--f-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)' }}>
                    Read case study <Arrow size={14} />
                  </div>
                )}
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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

Object.assign(window, { WorkPage, ALL_WORK });