// PortfolioPage.jsx — Anika Williams Design
// ACME-style components grid: category rows with description + 3 product cards each.

const PORTFOLIO_CATEGORIES = [
{
  id: 'identity',
  title: 'Sheet metal chair',
  desc: 'Comprehensive brand identity systems built around mark, type, color and motion. Designed for editorial flexibility, longevity, and consistent expression across surfaces.',
  items: [
  { brand: '\n', name: 'Monochrome Identity Suite', image: 'assets/portfolio-amplifier-case.png' },
  { brand: 'Maison Toile', name: 'Editorial Mark — 2025 Refresh' },
  { brand: 'Studio Privé', name: 'Wordmark & Auxiliary System' }]

},
{
  id: 'print',
  title: 'Magazine holder',
  desc: 'Editorial commissions, art direction, and book design. Long-form layouts that hold the eye, with grids tuned for serif lead and considered margin rhythm.',
  items: [
  { brand: 'Periodical 04', name: 'Quarterly Editorial Spread' },
  { brand: 'Atelier Press', name: 'Toile — Limited Monograph' },
  { brand: 'Plinth Books', name: 'Architecture Catalogue 2024' }]

},
{
  id: 'spatial',
  title: 'Amplifier case',
  desc: 'Wayfinding, exhibition graphics, and brand installations. Typography scaled to the body, materials chosen for the room, signage that resolves at every distance.',
  items: [
  { brand: 'Hôtel Pont', name: 'Lobby Wayfinding Programme', image: 'assets/portfolio-amplifier-tube.webp' },
  { brand: 'Civic Museum', name: 'Permanent Collection Signage', image: 'assets/portfolio-magazine-flat.png' },
  { brand: 'Atelier Nord', name: 'Flagship Wall Installation', image: 'assets/portfolio-magazine-3q.png' }]

},
{
  id: 'digital',
  title: 'Tensile textile cement casting',
  desc: 'Interfaces, design systems and prototypes for editorial, commerce and luxury clients. Detail-led work; type, motion and grid as primary system tokens.',
  items: [
  { brand: 'Studio Privé', name: 'Commerce Site & Lookbook' },
  { brand: 'Periodical 04', name: 'Reading App — Mobile Suite' },
  { brand: 'Maison Toile', name: 'Brand Site Component Library' }]

}];


const INDUSTRIES = ['All industries', 'Brand Identity', 'Print', 'Environmental', 'UX/UI', 'Packaging'];

function PortfolioPage({ onNavigate }) {
  const [industry, setIndustry] = React.useState('All industries');
  const [industryOpen, setIndustryOpen] = React.useState(false);
  const [page, setPage] = React.useState(1);

  return (
    <div style={{ background: '#F2EADB', minHeight: '100vh', paddingTop: 68, color: '#0a0a0a' }}>

      {/* Breadcrumb */}
      <div style={{
        padding: '40px 56px 0',
        maxWidth: 1280, margin: '0 auto'
      }}>
        <div style={{
          display: 'flex', gap: 32, alignItems: 'center',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 11, letterSpacing: '0.5px', color: '#0a0a0a'
        }}>
          <span style={{ fontWeight: 600 }}>AWD<sup style={{ fontSize: 8 }}>★</sup></span>
          <span style={{ color: '#0a0a0a' }}>Portfolio / Components</span>
        </div>
      </div>

      {/* Page Title */}
      <section style={{ padding: '64px 56px 64px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <h1 style={{

            fontSize: 'clamp(64px, 8vw, 112px)',
            fontWeight: 700,
            textTransform: 'uppercase', color: '#0a0a0a',
            lineHeight: 1.15, margin: 0, fontFamily: "sedgwick-ave-display", letterSpacing: "-1px"
          }}>PROJECTS
</h1>
        </div>
      </section>

      {/* Filter Bar */}
      {/* Category Rows */}
      <section style={{ padding: '32px 56px 96px', borderTop: '1px solid #e5e5e5' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          {PORTFOLIO_CATEGORIES.map((cat, i) => <CategoryRow key={cat.id} cat={cat} index={i} />
          )}
        </div>
      </section>

      <AWFooter onNavigate={onNavigate} />
    </div>);

}

function CategoryRow({ cat, index }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '280px 1fr',
      gap: 64,
      padding: '64px 0',
      borderBottom: '1px solid #e5e5e5'
    }}>
      {/* Left: title + description + view all */}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <h2 style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 28, fontWeight: 700, letterSpacing: '-0.01em',
          color: '#0a0a0a', lineHeight: 1.15,
          margin: '0 0 20px', textTransform: 'none'
        }}>{cat.title}</h2>
        <p style={{
          fontFamily: "'EB Garamond', serif",
          fontSize: 15, lineHeight: 1.55, color: '#3a3a3a',
          margin: 0, maxWidth: 240
        }}>{cat.desc}</p>
        <div style={{ flex: 1 }} />
        <ViewAllPill />
      </div>

      {/* Right: 3 product cards */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 16
      }}>
        {cat.items.map((item, i) =>
        <ProductCard key={i} item={item} seed={`${cat.id}-${i}`} />
        )}
      </div>
    </div>);

}

function ProductCard({ item, seed }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: '#f4f4f2',
        display: 'flex', flexDirection: 'column',
        transition: 'background 200ms',
        cursor: 'pointer', width: "243px", height: "243px"
      }}>
      {/* Image area */}
      <div style={{
        aspectRatio: '1 / 1',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        overflow: 'hidden'
      }}>
        {item.image ?
        <img src={item.image} alt={`${item.name}${item.brand && item.brand.trim() ? ' for ' + item.brand.trim() : ''} — design work by Anika Williams`} loading="lazy" style={{ width: '100%', height: '100%', display: 'block', objectFit: "cover" }} /> :
        <ProductPlaceholder seed={seed} />}
      </div>
    </div>);

}

function ProductPlaceholder({ seed }) {
  // Geometric placeholder shapes — varied per seed
  const shapes = [
  <svg key="0" viewBox="0 0 120 90" style={{ width: '100%', height: '100%' }}>
      <rect x="20" y="18" width="80" height="54" fill="#d4d4d0" />
      <rect x="32" y="30" width="56" height="6" fill="#0a0a0a" />
      <rect x="32" y="42" width="40" height="4" fill="#888" />
      <circle cx="92" cy="56" r="6" fill="#0a0a0a" />
    </svg>,
  <svg key="1" viewBox="0 0 120 90" style={{ width: '100%', height: '100%' }}>
      <polygon points="60,12 102,72 18,72" fill="#cfcfca" />
      <polygon points="60,28 88,68 32,68" fill="#0a0a0a" opacity="0.85" />
    </svg>,
  <svg key="2" viewBox="0 0 120 90" style={{ width: '100%', height: '100%' }}>
      <circle cx="60" cy="45" r="30" fill="#d4d4d0" />
      <circle cx="60" cy="45" r="18" fill="#0a0a0a" />
      <circle cx="60" cy="45" r="6" fill="#F2EADB" />
    </svg>,
  <svg key="3" viewBox="0 0 120 90" style={{ width: '100%', height: '100%' }}>
      <rect x="14" y="20" width="92" height="50" fill="#cfcfca" />
      <rect x="22" y="28" width="20" height="34" fill="#0a0a0a" />
      <rect x="48" y="28" width="20" height="34" fill="#666" />
      <rect x="74" y="28" width="20" height="34" fill="#0a0a0a" />
    </svg>];

  // pick deterministically from seed
  let h = 0;
  for (let i = 0; i < seed.length; i++) h = h * 31 + seed.charCodeAt(i) >>> 0;
  return shapes[h % shapes.length];
}

function ViewAllPill() {
  const [hov, setHov] = React.useState(false);
  return (
    <button
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        marginTop: 32,
        display: 'inline-flex', alignItems: 'center', gap: 14,
        background: 'none', border: 'none', padding: 0, cursor: 'pointer'
      }}>
      <span style={{
        width: 44, height: 44, borderRadius: '50%',
        border: '1px dashed #0a0a0a',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: hov ? '#0a0a0a' : 'transparent',
        color: hov ? '#F2EADB' : '#0a0a0a',
        transition: 'all 200ms'
      }}>→</span>
    </button>);

}

function GridIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <rect x="1" y="1" width="5" height="5" fill="#F2EADB" />
      <rect x="8" y="1" width="5" height="5" fill="#F2EADB" />
      <rect x="1" y="8" width="5" height="5" fill="#F2EADB" />
      <rect x="8" y="8" width="5" height="5" fill="#F2EADB" />
    </svg>);

}

const pageArrowStyle = {
  background: 'none', border: 'none', cursor: 'pointer',
  fontSize: 18, color: '#0a0a0a', padding: '4px 8px',
  fontFamily: "'JetBrains Mono', monospace"
};

const pageNumStyle = {
  background: 'none', cursor: 'pointer',
  width: 36, height: 36,
  fontFamily: "'JetBrains Mono', monospace",
  fontSize: 13, color: '#0a0a0a',
  display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
};

Object.assign(window, { PortfolioPage });