/* portfolio.jsx — Portfolio page with category filter */

const PORTFOLIO_ITEMS = [
  { id: 1,  title: "Pink Bridal Dinner",          venue: "Los Angeles",        season: "Spring 2025", cat: "private",   img: "public/images/events/bridal-table-pink-candles.jpg" },
  { id: 2,  title: "Cream Roses & Calla Lilies",  venue: "Los Angeles",        season: "Winter 2024", cat: "bouquets",  img: "public/images/events/cream-roses-calla-arrangement.jpg" },
  { id: 3,  title: "Citrus Garland Table",        venue: "San Diego",          season: "Summer 2024", cat: "garden",    img: "public/images/events/citrus-garland-tablescape.jpg" },
  { id: 4,  title: "Pink Garden Bouquet",         venue: "Los Angeles",        season: "Spring 2025", cat: "bouquets",  img: "public/images/events/pink-garden-bouquet.jpg" },
  { id: 17, title: "Event Highlight Reel",        venue: "Southern California",season: "2024–2025",   cat: "install",   video: "public/videos/event-highlight.mp4" },
  { id: 5,  title: "Garden Ceremony Setup",       venue: "Inland Empire",      season: "Fall 2024",   cat: "coastal",   img: "public/images/events/garden-tablescape-eucalyptus.jpg" },
  { id: 6,  title: "Pink Rose Vase Detail",       venue: "Los Angeles",        season: "Spring 2025", cat: "coastal",   img: "public/images/events/pink-rose-vase-closeup.jpg" },
  { id: 7,  title: "Orange Rose Centerpiece",     venue: "Los Angeles",        season: "Summer 2024", cat: "garden",    img: "public/images/events/citrus-centerpiece-roses.jpg" },
  { id: 8,  title: "Garden Arrangement",          venue: "Los Angeles",        season: "Winter 2024", cat: "bouquets",  img: "public/images/events/cream-roses-arrangement-side.jpg" },
  { id: 9,  title: "Garden Coral Tablescape",     venue: "Inland Empire",      season: "Spring 2025", cat: "sunset",    img: "public/images/events/garden-coral-tablescape.jpg" },
  { id: 10, title: "Hydrangea Bridal Table",      venue: "Inland Empire",      season: "Spring 2025", cat: "private",   img: "public/images/events/bridal-table-hydrangea-gold.jpg" },
  { id: 11, title: "Citrus & Rose Detail",        venue: "San Diego",          season: "Summer 2024", cat: "garden",    img: "public/images/events/citrus-centerpiece-closeup.jpg" },
  { id: 12, title: "Citrus Favors Display",       venue: "San Diego",          season: "Summer 2024", cat: "private",   img: "public/images/events/citrus-favors-table.jpg" },
  { id: 13, title: "Boho Rattan Installation",    venue: "Los Angeles",        season: "Fall 2023",   cat: "install",   img: "public/images/events/boho-rattan-installation.jpg" },
  { id: 14, title: "Eucalyptus Garland Table",    venue: "Inland Empire",      season: "Fall 2023",   cat: "garden",    img: "public/images/events/eucalyptus-garland-event.jpg" },
  { id: 15, title: "Orange Roses Arrangement",    venue: "Los Angeles",        season: "Spring 2023", cat: "bouquets",  img: "public/images/events/orange-roses-floral.jpg" },
  { id: 16, title: "Garden Seating Vignette",     venue: "Inland Empire",      season: "Fall 2023",   cat: "coastal",   img: "public/images/events/garden-seating-vignette.jpg" },
];

const CATEGORIES = [
  { id: "all", label: "All Work" },
  { id: "coastal", label: "Coastal Weddings" },
  { id: "sunset", label: "Sunset Receptions" },
  { id: "garden", label: "Garden Tablescapes" },
  { id: "install", label: "Statement Installations" },
  { id: "bouquets", label: "Bridal Bouquets" },
  { id: "private", label: "Private Celebrations" },
];

const PortfolioPage = ({ navigate }) => {
  const [active, setActive] = React.useState("all");
  const [lightbox, setLightbox] = React.useState(null);
  const items = active === "all" ? PORTFOLIO_ITEMS : PORTFOLIO_ITEMS.filter(p => p.cat === active);

  return (
    <>
      <section style={{ background: "var(--ivory)", paddingTop: 200, paddingBottom: 60 }}>
        <div className="shell">
          <Reveal><span className="eyebrow rule-eyebrow">03 — Portfolio</span></Reveal>
          <Reveal delay={1}>
            <h1 className="serif" style={{ marginTop: 28, maxWidth: "18ch", fontSize: "clamp(48px, 7vw, 108px)", fontWeight: 300, letterSpacing: "-0.01em" }}>
              Selected work, <span style={{ fontStyle: "italic", color: "var(--accent-4)" }}>composed</span> across the coast.
            </h1>
          </Reveal>
          <Reveal delay={2}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 4, marginTop: 60, borderTop: "1px solid var(--hairline-soft)", borderBottom: "1px solid var(--hairline-soft)", padding: "20px 0" }}>
              {CATEGORIES.map(c => (
                <button key={c.id} onClick={() => setActive(c.id)}
                  style={{
                    background: "transparent",
                    border: 0,
                    padding: "10px 18px",
                    fontSize: 11,
                    letterSpacing: "0.22em",
                    textTransform: "uppercase",
                    fontWeight: 500,
                    cursor: "pointer",
                    color: active === c.id ? "var(--accent-4)" : "var(--plum-soft)",
                    borderBottom: active === c.id ? "1px solid var(--accent-4)" : "1px solid transparent",
                    transition: "color 200ms ease, border-color 200ms ease",
                  }}>
                  {c.label}
                </button>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      <section style={{ background: "var(--ivory)", paddingBottom: 160 }}>
        <div className="shell">
          <div className="portfolio-grid">
            {items.map((p, i) => (
              <Reveal key={p.id} delay={(i % 3) + 1} className={"port-item port-item--" + (i % 5 === 0 ? "tall" : i % 5 === 3 ? "short" : "med")}>
                <div className="port-viz" onClick={() => setLightbox(p)} style={{ position: "relative" }}>
                  {p.video ? (
                    <>
                      <video autoPlay muted loop playsInline style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}>
                        <source src={p.video} type="video/mp4" />
                      </video>
                      <div style={{ position: "absolute", top: 12, right: 12, background: "rgba(18,12,16,0.65)", color: "var(--ivory)", fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase", padding: "5px 10px", fontWeight: 600, display: "flex", alignItems: "center", gap: 5 }}>
                        ▶ Video
                      </div>
                    </>
                  ) : (
                    <img src={p.img} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", transition: "transform 1200ms cubic-bezier(.2,.7,.3,1)" }} />
                  )}
                </div>
                <div style={{ marginTop: 18, display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 20 }}>
                  <div>
                    <div className="serif" style={{ fontSize: 22, fontStyle: "italic" }}>{p.title}</div>
                    <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--plum-soft)", marginTop: 6 }}>{p.venue} · {p.season}</div>
                  </div>
                  <span style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "var(--accent-4)" }}>
                    {CATEGORIES.find(c => c.id === p.cat)?.label.split(" ")[0]}
                  </span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Lightbox — rendered via portal so fixed positioning always works */}
      {lightbox && ReactDOM.createPortal(
        <div onClick={() => setLightbox(null)} style={{
          position: "fixed", inset: 0, zIndex: 9999,
          background: "rgba(18, 12, 16, 0.96)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          padding: "24px",
          backdropFilter: "blur(10px)",
          cursor: "zoom-out",
        }}>
          {/* Close */}
          <button onClick={() => setLightbox(null)} style={{
            position: "absolute", top: 24, right: 32,
            background: "transparent", color: "rgba(251,244,235,0.7)",
            border: "1px solid rgba(251,244,235,0.25)",
            fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase",
            cursor: "pointer", fontWeight: 500, padding: "8px 18px",
          }}>Close ×</button>

          {/* Photo or Video */}
          {lightbox.video ? (
            <video
              onClick={e => e.stopPropagation()}
              src={lightbox.video}
              autoPlay
              muted
              loop
              style={{
                maxWidth: "82vw",
                maxHeight: "75vh",
                display: "block",
                boxShadow: "0 40px 100px rgba(0,0,0,0.7)",
                cursor: "default",
              }}
            />
          ) : (
            <img
              onClick={e => e.stopPropagation()}
              src={lightbox.img}
              alt={lightbox.title}
              style={{
                maxWidth: "80vw",
                maxHeight: "75vh",
                objectFit: "contain",
                display: "block",
                boxShadow: "0 40px 100px rgba(0,0,0,0.7)",
                cursor: "default",
              }}
            />
          )}

          {/* Caption + CTA */}
          <div onClick={e => e.stopPropagation()} style={{ marginTop: 24, textAlign: "center" }}>
            <div className="serif" style={{ fontStyle: "italic", fontSize: 22, color: "var(--ivory)" }}>{lightbox.title}</div>
            <div style={{ fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(251,244,235,0.45)", marginTop: 8 }}>
              {lightbox.venue}{lightbox.season ? " · " + lightbox.season : ""}
            </div>
            <button
              onClick={() => { setLightbox(null); navigate("contact"); }}
              style={{
                marginTop: 24,
                padding: "14px 36px",
                background: "var(--accent-4)",
                color: "var(--ivory)",
                border: "none",
                fontSize: 11,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                fontWeight: 500,
                cursor: "pointer",
                transition: "opacity 200ms ease",
              }}
              onMouseEnter={e => e.target.style.opacity = 0.85}
              onMouseLeave={e => e.target.style.opacity = 1}
            >
              Interested? Let's Talk →
            </button>
          </div>
        </div>,
        document.body
      )}

      <InquiryCTA navigate={navigate} />

      <style>{`
        .portfolio-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px 20px; margin-top: 32px; }
        .port-item { display: flex; flex-direction: column; }
        .port-viz { width: 100%; cursor: pointer; border: 1px solid var(--hairline-soft); overflow: hidden; flex-shrink: 0; }
        .port-viz > img { transition: transform 1200ms cubic-bezier(.2,.7,.3,1); }
        .port-viz:hover > img { transform: scale(1.05); }
        .port-viz { aspect-ratio: 4/5; }
        @media (max-width: 860px) { .portfolio-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 540px) { .portfolio-grid { grid-template-columns: 1fr; } }
      `}</style>
    </>
  );
};

Object.assign(window, { PortfolioPage });