// grid.jsx — Header, hero, filter bar, and the ArtStation-style project grid.
// Exports to window: GridView

function Header({ onHome, right }) {
  return (
    <header className="pf-header">
      <Wordmark onClick={onHome} />
      <div style={{ display: "flex", alignItems: "center", gap: 18 }}>{right}</div>
    </header>
  );
}

function Hero() {
  return (
    <section className="pf-hero-wrap">
      <Background id="hero-bg" />
      <div className="pf-hero">
        <div className="pf-hero__eyebrow">Technical Artist · Unreal Engine</div>
        <h1 className="pf-hero__title">
          보이는 품질과<br />보이지 않는 성능,<br />그 사이를 설계합니다.
        </h1>
        <p className="pf-hero__sub">
          실시간 렌더링 최적화부터 셰이더, 아티스트 워크플로우 자동화, 방송용 실시간 그래픽과
          모션그래픽까지 — 기술과 아트가 만나는 지점에서 문제를 풀어온 작업들을 모았습니다.
        </p>
      </div>
    </section>
  );
}

function FilterBar({ categories, active, onChange }) {
  return (
    <nav className="pf-filters" aria-label="작업 분류">
      {categories.map((c) => (
        <button
          key={c.key}
          className="pf-filter"
          aria-pressed={active === c.key}
          onClick={() => onChange(c.key)}
        >
          {c.label}
        </button>
      ))}
    </nav>
  );
}

function Card({ project, index, onOpen }) {
  return (
    <button className="pf-card" onClick={() => onOpen(project)} style={{ animationDelay: `${index * 60}ms` }}>
      <div className="pf-card__media">
        <Slot id={`thumb-${project.id}`} label={`${project.title} — 썸네일`} radius={16} />
        <span className="pf-card__index">{String(index + 1).padStart(2, "0")}</span>
        <div className="pf-card__overlay">
          <div className="pf-card__overlay-text">
            <div className="pf-card__view">
              자세히 보기
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div className="pf-card__title">{project.title}</div>
      </div>
    </button>
  );
}

function GridView({ projects, onOpen, headerRight }) {
  const categories = [
    { key: "all", label: "전체" },
    { key: "Tech", label: "Tech" },
    { key: "Art", label: "Art" },
  ];

  const [active, setActive] = React.useState("all");

  const filtered = React.useMemo(
    () => (active === "all" ? projects : projects.filter((p) => p.category === active)),
    [projects, active]
  );

  return (
    <div>
      <Header right={headerRight} onHome={() => setActive("all")} />
      <Hero />
      <FilterBar categories={categories} active={active} onChange={setActive} />
      <div className="pf-grid" key={active}>
        {filtered.map((p, i) => (
          <Card key={p.id} project={p} index={i} onOpen={onOpen} />
        ))}
      </div>
      <footer className="pf-footer">
        <span>© 2025 방명환 · Change &amp; Adapt</span>
        <span>Portfolio — Technical Art / 3D / Motion</span>
      </footer>
    </div>
  );
}

Object.assign(window, { GridView, Header });