// Portfolio page

const { useState: pUseState, useMemo: pUseMemo } = React;

function PortfolioPage({ openLightbox, setRoute }) {
  const [filter, setFilter] = pUseState("all");

  const filtered = pUseMemo(() => {
    if (filter === "all") return window.PORTFOLIO;
    return window.PORTFOLIO.filter((p) => p.cat === filter);
  }, [filter]);

  const counts = pUseMemo(() => {
    const c = { all: window.PORTFOLIO.length };
    window.CATEGORIES.forEach((cat) => {
      if (cat.key === "all") return;
      c[cat.key] = window.PORTFOLIO.filter((p) => p.cat === cat.key).length;
    });
    return c;
  }, []);

  return (
    <main data-screen-label="03 Portfolio">
      {/* Header */}
      <section className="relative bg-wafer-20 overflow-hidden">
        <div className="absolute inset-0 paw-pattern opacity-50" />
        <div className="relative max-w-[1280px] mx-auto px-6 py-20 md:py-24 text-center">
          <window.Eyebrow className="justify-center">Our work</window.Eyebrow>
          <h1 className="mt-6 font-display text-6xl md:text-8xl text-steel-blue leading-[0.9]">
            <window.ScriptAccent angle={-4} color="#779A93" className="text-7xl md:text-9xl">
              Portfolio.
            </window.ScriptAccent>
          </h1>
          <p className="mt-5 font-serif text-xl text-charcoal/75 max-w-2xl mx-auto leading-relaxed">
            Twenty years of capturing the soul of every furry friend across Texas and beyond.
          </p>
        </div>
      </section>

      {/* Filter tabs */}
      <section className="sticky top-[84px] z-30 bg-white/95 backdrop-blur border-y border-bark-beige-40">
        <div className="max-w-[1400px] mx-auto px-6">
          <div className="nice-scroll overflow-x-auto flex items-center gap-2 py-4">
            {window.CATEGORIES.map((c) => {
              const active = filter === c.key;
              return (
                <button
                  key={c.key}
                  onClick={() => setFilter(c.key)}
                  className={`whitespace-nowrap px-5 py-2 rounded-full text-sm tracking-wide transition border ${
                    active
                      ? "bg-juniper text-white border-juniper"
                      : "bg-white text-charcoal/70 border-bark-beige-40 hover:border-steel-blue/40 hover:text-steel-blue"
                  }`}
                >
                  {c.label}{" "}
                  <span className={`ml-1 text-[10px] tracking-widest ${active ? "text-white/70" : "text-charcoal/40"}`}>
                    {counts[c.key]}
                  </span>
                </button>
              );
            })}
            <div className="flex-1" />
            <div className="hidden md:flex text-xs text-charcoal/55 tracking-wide pr-2">
              Showing <span className="font-medium text-steel-blue mx-1">{filtered.length}</span> of {window.PORTFOLIO.length}
            </div>
          </div>
        </div>
      </section>

      {/* Grid */}
      <section className="bg-wafer-20">
        <div className="max-w-[1400px] mx-auto px-6 py-16">
          {filtered.length === 0 ? (
            <div className="text-center py-32 text-charcoal/60 font-serif">
              No work in this category yet.
            </div>
          ) : (
            <div className="masonry-4">
              {filtered.map((img) => {
                const realIndex = window.PORTFOLIO.findIndex((p) => p.id === img.id);
                return (
                  <div className="masonry-item" key={img.id}>
                    <window.PortfolioCard image={img} onClick={() => openLightbox(realIndex)} />
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </section>

      {/* Bottom CTA */}
      <section className="bg-steel-blue text-white relative overflow-hidden">
        <div className="absolute inset-0 paw-pattern-light" />
        <div className="relative max-w-[1100px] mx-auto px-6 py-20 md:py-24 text-center">
          <h2 className="font-display text-4xl md:text-5xl leading-tight">
            Like what you see?{" "}
            <window.ScriptAccent angle={-4} color="#DDD1C7" className="text-6xl">
              Let's book.
            </window.ScriptAccent>
          </h2>
          <p className="mt-5 font-serif text-lg text-white/85 max-w-2xl mx-auto">
            Studio or on-location — every session crafted for your pet's personality.
          </p>
          <div className="mt-9 flex flex-wrap items-center justify-center gap-4">
            <window.Button onClick={() => setRoute("contact")} variant="tertiary" size="lg" className="!bg-wafer !text-steel-blue hover:!bg-white">
              Book your session <window.Icon.ArrowRight className="w-3.5 h-3.5" />
            </window.Button>
            <window.Button as="a" href={window.IG_URL} variant="ghost-white" size="lg">
              Browse on Instagram
            </window.Button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.PortfolioPage = PortfolioPage;