/* Foto Neon — Shop page. Ready-made neon signs in a filterable grid, plus a
   custom-order CTA. Product data is illustrative (demo prices in RSD). */

const FNS = window.FotoNeonDesignSystem_0a5c5f;
const { NeonHeading: ShHeading, SectionLabel: ShLabel, NeonButton: ShButton, PortfolioTile: ShTile } = FNS;

const CATEGORIES = [
  { id: "sve", label: "Sve" },
  { id: "znaci", label: "Otvoreno & Radnja" },
  { id: "dom", label: "Dom & Ljubav" },
  { id: "zabava", label: "Bar & Zabava" },
];

const PRODUCTS = [
  { word: "OTVORENO", color: "pink", name: "Neon “Otvoreno”", cat: "znaci", price: "12.900", desc: "Klasičan znak za izlog. Uključen dimer." },
  { word: "OPEN", color: "cyan", name: "Neon “Open”", cat: "znaci", price: "12.900", desc: "Dvojezična varijanta za izlog." },
  { word: "COFFEE", color: "orange", name: "Neon “Coffee”", cat: "zabava", price: "13.900", desc: "Savršen za kafiće i kutke." },
  { word: "LOVE", color: "pink", name: "Neon “Love”", cat: "dom", price: "9.900", desc: "Topla dekoracija za dom i svadbe." },
  { word: "♥", color: "red", name: "Neon Srce", cat: "dom", price: "7.900", desc: "Mali akcenat, velika toplina." },
  { word: "BAR", color: "purple", name: "Neon “Bar”", cat: "zabava", price: "10.900", desc: "Za kućni bar ili ugostiteljstvo." },
  { word: "MUSIC", color: "cyan", name: "Neon “Music”", cat: "zabava", price: "14.900", desc: "Za studije, klubove i sobe." },
  { word: "24/7", color: "green", name: "Neon “24/7”", cat: "znaci", price: "8.900", desc: "Nonstop poruka za vaš objekat." },
];

function PriceTag({ value }) {
  return (
    <span style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: "1.15rem", color: "var(--text-primary)" }}>
      {value} <span style={{ fontSize: "0.8rem", color: "var(--text-muted)", fontWeight: 500 }}>RSD</span>
    </span>
  );
}

function Chip({ active, children, onClick }) {
  const [hover, setHover] = React.useState(false);
  const on = active || hover;
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: "0.5rem 1.1rem", borderRadius: 9999, cursor: "pointer", fontFamily: "var(--font-body)",
        fontSize: "0.85rem", fontWeight: 500, letterSpacing: "0.03em", background: "transparent",
        color: active ? "var(--neon-cyan)" : "var(--text-secondary)",
        border: `1px solid ${on ? "var(--neon-cyan)" : "rgba(255,255,255,0.18)"}`,
        boxShadow: active ? "0 0 12px rgba(0,255,240,0.35)" : "none",
        textShadow: active ? "0 0 8px var(--neon-cyan)" : "none", transition: "all 0.25s ease",
      }}>{children}</button>
  );
}

function ProductCard({ p, onAdd }) {
  const [hover, setHover] = React.useState(false);
  const [added, setAdded] = React.useState(false);
  const neon = `var(--neon-${p.color})`;
  const add = () => { onAdd(p); setAdded(true); setTimeout(() => setAdded(false), 1400); };
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: "flex", flexDirection: "column", background: "var(--surface-card)", backdropFilter: "blur(12px)",
        border: `1px solid ${hover ? neon : "var(--border-hairline)"}`, boxShadow: hover ? `0 0 26px color-mix(in srgb, ${neon} 30%, transparent)` : "none",
        transform: hover ? "translateY(-4px)" : "none", transition: "border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease" }}>
      <ShTile color={p.color} ratio="4 / 3">
        <ShHeading size="sm" color={p.color} style={{ fontSize: "clamp(1.4rem, 4vw, 2.2rem)" }}>{p.word}</ShHeading>
      </ShTile>
      <div style={{ padding: "1.25rem 1.35rem 1.5rem", display: "flex", flexDirection: "column", gap: "0.5rem", flex: 1 }}>
        <h3 style={{ margin: 0, fontSize: "1.1rem", fontWeight: 600, color: "var(--text-primary)" }}>{p.name}</h3>
        <p style={{ margin: 0, color: "var(--text-secondary)", fontSize: "0.9rem", lineHeight: 1.5, flex: 1 }}>{p.desc}</p>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "1rem", marginTop: "0.75rem" }}>
          <PriceTag value={p.price} />
          <ShButton color={p.color} size="sm" onClick={add}>{added ? "Dodato ✓" : "U korpu"}</ShButton>
        </div>
      </div>
    </div>
  );
}

function ShopPage({ onNav, onAddToCart }) {
  window.useFotoNeonAnimations();
  const [cat, setCat] = React.useState("sve");
  const add = onAddToCart || (() => {});
  const gridRef = React.useRef(null);
  React.useEffect(() => {
    const gr = gridRef.current;
    if (gr && window.fnRevealEl) window.fnRevealEl(gr);
  }, [cat]);
  const shown = PRODUCTS.filter((p) => cat === "sve" || p.cat === cat);
  return (
    <div>
      {/* Page header */}
      <section style={{ position: "relative", padding: "9rem 1.5rem 3rem", textAlign: "center" }}>
        <div style={{ maxWidth: "48rem", margin: "0 auto" }}>
          <ShLabel color="cyan" align="center" data-hero="eyebrow">Prodavnica</ShLabel>
          <ShHeading color="pink" size="lg" align="center" animate="flicker" data-hero="title" style={{ margin: "1rem 0 1.25rem" }}>Shop</ShHeading>
          <p data-hero="lead" style={{ color: "var(--text-secondary)", fontSize: "1.15rem", lineHeight: 1.55, margin: 0 }}>
            Gotovi neon znakovi spremni za isporuku. Ne vidite pravu? Naručite <span style={{ color: "var(--neon-cyan)" }}>custom</span>.
          </p>
        </div>
      </section>

      {/* Filter + grid */}
      <section style={{ position: "relative", padding: "0 1.5rem 6rem" }}>
        <div style={{ maxWidth: "80rem", margin: "0 auto" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem", justifyContent: "center", marginBottom: "3rem" }}>
            {CATEGORIES.map((c) => <Chip key={c.id} active={cat === c.id} onClick={() => setCat(c.id)}>{c.label}</Chip>)}
          </div>
          <div data-reveal-stagger="scale" ref={gridRef} style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gap: "1.75rem" }}>
            {shown.map((p) => <ProductCard key={p.name} p={p} onAdd={add} />)}
          </div>
        </div>
      </section>

      {/* Custom-order band */}
      <section style={{ position: "relative", padding: "0 1.5rem 7rem" }}>
        <div data-reveal data-parallax="7" style={{ maxWidth: "72rem", margin: "0 auto", textAlign: "center", padding: "3.5rem 2rem", border: "1px solid var(--border-hairline)", background: "var(--surface-card-alt)", backdropFilter: "blur(12px)" }}>
          <ShHeading color="cyan" size="md" align="center" animate="pulse">Napravimo custom</ShHeading>
          <p style={{ color: "var(--text-secondary)", fontSize: "1.1rem", lineHeight: 1.6, maxWidth: "38rem", margin: "1.25rem auto 2rem" }}>
            Vaš tekst, vaša boja, vaše dimenzije. Pošaljite ideju i dobićete besplatan digitalni mock-up.
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <ShButton color="pink" onClick={() => onNav("home")}>Zatraži ponudu</ShButton>
            <ShButton color="cyan" onClick={() => onNav("gallery")}>Inspiracija</ShButton>
          </div>
        </div>
      </section>
    </div>
  );
}

window.ShopPage = ShopPage;