// Portfolio page
const { useState: useStatePF, useMemo: useMemoPF } = React;

const PF_ITEMS = [
  { id: 1, cat: 'Business Cards', title: 'Die-cut shape — Heineken-style cards', img: 'media/business-cards-design-01.webp', fit: 'fit-bc-design' },
  { id: 2, cat: 'Roll-up Banners', title: 'Retail roll-ups — 3 designs', img: 'media/roll-up-banner-01.webp', fit: 'fit-rollup' },
  { id: 3, cat: 'Signage', title: 'LED + 3D channel-letter signs', img: 'media/signage-01.webp', fit: 'fit-signage' },
  { id: 4, cat: 'Exhibition', title: 'GITEX shell-scheme — 6m × 3m', img: 'media/exhibition-shell-scheme-01.webp', fit: 'fit-exhibit' },
  { id: 5, cat: 'Vehicle Wraps', title: 'Fleet livery — full wrap, 4 vehicles', img: 'media/vehicle-wraps-01.webp', fit: 'fit-vehicle' },
  { id: 6, cat: 'Flyers & Leaflets', title: 'A5 launch flyer — 5,000 run', img: 'media/flyers-01.webp', fit: 'fit-flyer' },
  { id: 7, cat: 'Production', title: 'On press — overnight flyer run', img: 'media/gallery-post-9.webp', fit: 'fit-press' },
  { id: 8, cat: 'Production', title: 'CMYK setup — full process colour', img: 'media/gallery-post-3.webp', fit: 'fit-cmyk' },
  { id: 9, cat: 'Branded Merch', title: 'Event polo shirts — 200 units', img: 'media/tshirt-printing-01.webp', fit: 'fit-tshirt' },
  { id: 10, cat: 'Wall Graphics', title: 'Office wall vinyl — meeting room', img: 'media/wall-graphics-01.webp', fit: 'fit-wall' },
  { id: 11, cat: 'Flyers & Leaflets', title: 'Tri-fold restaurant menu', img: 'media/leaflet-printing-01.webp', fit: 'fit-leaflet' },
  { id: 12, cat: 'Stationery', title: 'Letterhead identity — 4-up split', img: 'media/letterheads-01.webp', fit: 'fit-letter' },
  { id: 13, cat: 'Canvas Prints', title: 'Hospitality canvas — lobby install', img: 'media/canvas-printing-01.webp', fit: 'fit-canvas' },
  { id: 14, cat: 'Large Format', title: 'Process-colour lobby mural', img: 'media/home-more-than-ink.webp', fit: 'fit-ink-elephant' },
];

function Portfolio() {
  const [filter, setFilter] = useStatePF('All');

  const counts = useMemoPF(() => {
    const c = { All: PF_ITEMS.length };
    PF_ITEMS.forEach(i => { c[i.cat] = (c[i.cat] || 0) + 1; });
    return c;
  }, []);

  const cats = ['All', 'Business Cards', 'Flyers & Leaflets', 'Roll-up Banners', 'Signage', 'Exhibition', 'Vehicle Wraps', 'Wall Graphics', 'Branded Merch', 'Stationery', 'Canvas Prints', 'Large Format', 'Production'];
  const visible = filter === 'All' ? PF_ITEMS : PF_ITEMS.filter(i => i.cat === filter);
  const { go } = useRouter();

  return (
    <main>
      <section className="page-head">
        <div className="wrap">
          <div className="crumbs" style={{marginBottom: 18}}>
            <a href="#" onClick={(e) => { e.preventDefault(); go('home'); }}>Home</a>
            <span>/</span>
            <span style={{color:'var(--ink)'}}>Portfolio</span>
          </div>
          <div className="page-head-row">
            <h1>Selected work.<br/><span style={{color:'var(--muted)'}}>Off the press.</span></h1>
            <p className="lead">A cross-section of jobs from the past 24 months — business cards, roll-ups, signage, exhibition stands, vehicle wraps. Filter by format below.</p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="ribbon" style={{marginBottom: 32}}>
            <div className="ribbon-dot" aria-hidden="true"></div>
            <div>
              <b>Demo placeholder.</b> Job names and clients shown here are illustrative — to be replaced with real, named projects (with permission) before launch.
            </div>
          </div>

          <div className="filter-row">
            {cats.filter(c => c === 'All' || counts[c]).map(c => (
              <button key={c} className={"filter-pill" + (filter === c ? ' active' : '')} onClick={() => setFilter(c)}>
                {c} <span className="count">{counts[c] || 0}</span>
              </button>
            ))}
          </div>

          <div className="gallery-grid">
            {visible.map(item => (
              <a key={item.id} className="gallery-card" href="#" onClick={(e) => e.preventDefault()}>
                <div className="img"><img src={item.img} alt={item.title} className={item.fit || ''} /></div>
                <div className="body">
                  <div className="cat">{item.cat} · {String(item.id).padStart(2,'0')}</div>
                  <div className="title">{item.title}</div>
                </div>
              </a>
            ))}
          </div>

          {visible.length === 0 && (
            <div style={{padding: 80, textAlign:'center', color:'var(--muted)'}}>No jobs in this category yet.</div>
          )}
        </div>
      </section>

      {/* CTA band */}
      <section className="cta-band">
        <div className="wrap">
          <div className="cta-band-row">
            <div>
              <div className="eyebrow on-dark" style={{marginBottom: 24}}>Have a job in mind?</div>
              <h2 className="h-section">Tell us the format and the deadline. We'll do the rest.</h2>
            </div>
            <div className="cta-actions">
              <a className="btn btn-primary btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('quote'); }}>Get a Quote <span className="btn-arrow">→</span></a>
              <a className="btn btn-ghost btn-lg" href="#" onClick={(e) => { e.preventDefault(); go('upload'); }}><UploadIcon /> Upload Artwork</a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Portfolio });