// ============================================================
// Work gallery + project detail modal - FreshWave Digital Studio
// ============================================================

function WorkPage({ onOpenProject }) {
  const [filter, setFilter] = useState('All');
  const filtered = filter === 'All' ? PROJECTS : PROJECTS.filter((p) => p.category === filter);

  return (
    <div className="scanlines">
      <div className="container mx-auto py-16">
        <div className="mb-12">
          <Eyebrow accent="cyan">Personal favorites</Eyebrow>
          <h1 className="crt-head mb-4 font-heading text-4xl md:text-5xl lg:text-6xl" style={{ letterSpacing: '-0.02em' }}>FreshWave favorites</h1>
          <p className="max-w-xl text-lg text-muted-foreground">A curated wall of pieces that best show the studio range: glow details, tiny replicas, fidget toys, statues and one-off character work.</p>
        </div>

        {/* Filter chips */}
        <div className="mb-12 flex flex-wrap gap-3">
          {WORK_CATEGORIES.map((c) => (
            <Button key={c} size="sm" variant={filter === c ? 'default' : 'outline'} onClick={() => setFilter(c)}>{c}</Button>
          ))}
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
          {filtered.map((p) => (<ProjectCard key={p.slug} project={p} onOpen={onOpenProject} />))}
        </div>

        {filtered.length === 0 && (
          <div className="py-24 text-center text-lg text-muted-foreground">Nothing in this category yet.</div>
        )}
      </div>
    </div>
  );
}

// Project detail modal ----------------------------------------------------
function ProjectModal({ project, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  if (!project) return null;
  const blocks = [
    { k: 'Overview', v: project.overview },
    { k: 'The challenge', v: project.challenge },
    { k: 'Our approach', v: project.approach },
    { k: 'Outcome', v: project.outcome },
  ];

  return (
    <div className="detail-backdrop fixed inset-0 z-[200] flex items-start justify-center overflow-y-auto p-4 md:p-10" onClick={onClose}>
      <div
        className="detail-surface relative w-full max-w-4xl overflow-hidden rounded-2xl border border-border bg-card"
        onClick={(e) => e.stopPropagation()}
      >
        <button onClick={onClose} className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/70 text-foreground transition-colors hover:text-primary" aria-label="Close">
          <Icon name="close" className="h-5 w-5" />
        </button>

        <div className="aspect-[16/9] w-full">
          <Placeholder label={`${project.title} hero photo`} accent={project.accent} glow className="h-full w-full" />
        </div>

        <div className="p-8 md:p-12">
          <div className="mb-4 flex flex-wrap items-center gap-4">
            <span className="font-mono text-xs uppercase tracking-[0.2em] neon-text-soft" style={{ color: accentHsl(project.accent) }}>{project.category}</span>
            <span className="font-mono text-xs text-muted-foreground">{project.year}</span>
            <span className="font-mono text-xs text-muted-foreground">· {project.material}</span>
          </div>
          <h2 className="crt-head mb-6 font-heading text-4xl tracking-wide md:text-5xl">{project.title}</h2>
          <p className="mb-10 max-w-2xl text-lg leading-relaxed text-muted-foreground">{project.description}</p>

          <div className="grid gap-8 md:grid-cols-2">
            {blocks.map((b) => (
              <div key={b.k}>
                <h3 className="mb-2 font-heading text-sm uppercase tracking-wider neon-text-soft" style={{ color: accentHsl(project.accent) }}>{b.k}</h3>
                <p className="text-sm leading-relaxed text-muted-foreground">{b.v}</p>
              </div>
            ))}
          </div>

          <div className="mt-10 flex flex-col gap-3 border-t border-border pt-8 sm:flex-row">
            <Button onClick={() => { onClose(); go('/commission'); }}>Commission something like this <Icon name="arrow-right" /></Button>
            <Button variant="outline" onClick={onClose}>Back to favorites</Button>
          </div>
        </div>
      </div>
    </div>
  );
}

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