/* Foto Neon — shared site chrome for the multi-page prototype. SiteNav (page-aware top bar), SiteFooter, and the GSAP animation hook. Everything is attached to window so the per-page babel scripts can use it. */ const FNC = window.FotoNeonDesignSystem_0a5c5f; const FN_BRAND = { phone: "+381 61 160 4669", phoneHref: "tel:+381611604669", instagram: "@foto_neon_", instagramHref: "https://www.instagram.com/foto_neon_/", logo: (typeof window !== "undefined" && window.FN_LOGO) || "assets/logo.jpg", }; const FN_NAV = [ { id: "home", label: "Početna" }, { id: "shop", label: "Shop" }, { id: "gallery", label: "Galerija" }, { id: "about", label: "O nama" }, ]; /* Reveal helper: add .fn-in to a [data-reveal] element, or to each child of a [data-reveal-stagger] container (with a per-child transition delay). Adding the class to CHILDREN means React re-applying a container's className can't strip it. Exposed on window so pages can re-reveal after a filter change. */ function fnRevealEl(el) { if (!el) return; const targets = el.hasAttribute("data-reveal-stagger") ? el.children : [el]; Array.prototype.forEach.call(targets, (t, i) => { if (t.classList.contains("fn-in")) return; t.style.animationDelay = Math.min(i, 8) * 0.06 + "s"; t.classList.add("fn-in"); }); } /* ---------- SiteNav ---------- */ function NavTab({ active, children, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } function SiteNav({ page, onNav, cart = 0, onCartClick }) { const [scrolled, setScrolled] = React.useState(false); const [open, setOpen] = React.useState(false); React.useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 40); onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); return () => window.removeEventListener("scroll", onScroll); }, []); const go = (id) => { onNav(id); setOpen(false); }; return ( ); } /* ---------- SiteFooter ---------- */ function FooterLink({ children, onClick, href }) { const [hover, setHover] = React.useState(false); const style = { background: "none", border: "none", padding: 0, textAlign: "left", cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "0.9rem", textDecoration: "none", color: hover ? "var(--neon-cyan)" : "var(--text-secondary)", textShadow: hover ? "0 0 8px var(--neon-cyan)" : "none", transition: "color 0.25s ease", }; if (href) return setHover(true)} onMouseLeave={() => setHover(false)} style={style}>{children}; return ; } function FooterCol({ title, children }) { return (

{title}

{children}
); } function SiteFooter({ onNav }) { return ( ); } /* ---------- Shared GSAP hook: hero entrance, scroll reveals, parallax, cursor glow ---------- */ function useFotoNeonAnimations(deps) { React.useEffect(() => { const g = window.gsap, ST = window.ScrollTrigger; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let moveHandler = null; const glow = document.querySelector(".cursor-glow"); if (g && glow && !reduce) { document.body.classList.add("glow-on"); g.set(glow, { x: window.innerWidth / 2, y: window.innerHeight * 0.4 }); const xTo = g.quickTo(glow, "x", { duration: 0.6, ease: "power3" }); const yTo = g.quickTo(glow, "y", { duration: 0.6, ease: "power3" }); moveHandler = (e) => { xTo(e.clientX); yTo(e.clientY); }; window.addEventListener("pointermove", moveHandler, { passive: true }); } if (!g || !ST || reduce) { document.documentElement.classList.remove("js-anim"); return () => { if (moveHandler) window.removeEventListener("pointermove", moveHandler); document.body.classList.remove("glow-on"); }; } g.registerPlugin(ST); const ctx = g.context(() => { // Hero entrance (only if a hero is present on this page) — plays immediately if (document.querySelector('[data-hero="title"]')) { g.timeline({ defaults: { ease: "power3.out" } }) .fromTo('[data-hero="eyebrow"]', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7 }) .fromTo('[data-hero="title"]', { y: 20, opacity: 0, scale: 0.96 }, { y: 0, opacity: 1, scale: 1, duration: 0.9 }, "-=0.4") .fromTo('[data-hero="lead"]', { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7 }, "-=0.5") .fromTo('[data-hero="cta"]', { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6 }, "-=0.4") .fromTo('[data-hero="sign"]', { opacity: 0, scale: 0.85 }, { opacity: 1, scale: 1, duration: 1.1, ease: "power2.out" }, "-=1.1"); } // Background-orb parallax (ScrollTrigger is reliable for scrub work) g.utils.toArray(".orb").forEach((orb, i) => { g.to(orb, { yPercent: i % 2 ? -14 : 14, ease: "none", scrollTrigger: { trigger: document.body, start: "top top", end: "bottom bottom", scrub: 1 } }); }); // Per-element scroll parallax (scrub-based — reliable in this preview, like the orbs). // Symmetric drift (+sp → -sp) so the element sits at its natural spot when centered. g.utils.toArray("[data-parallax]").forEach((el) => { const sp = parseFloat(el.getAttribute("data-parallax")) || 6; g.fromTo(el, { yPercent: sp }, { yPercent: -sp, ease: "none", scrollTrigger: { trigger: el, start: "top bottom", end: "bottom top", scrub: true } }); }); }); // Scroll reveals via IntersectionObserver. Adds .fn-in per element/child; the // hidden state is :not(.fn-in) in CSS, so revealed items fall back to natural // styles (survives React re-renders; no !important fighting hover transforms). const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { io.unobserve(e.target); fnRevealEl(e.target); } }); }, { rootMargin: "0px 0px -6% 0px", threshold: 0.04 }); document.querySelectorAll("[data-reveal], [data-reveal-stagger]").forEach((el) => io.observe(el)); // Failsafe: if IO timing is flaky after a page switch, add .fn-in to everything // shortly after mount so the one-shot reveal animation runs and settles visible. const failsafe = setTimeout(() => { document.querySelectorAll("[data-reveal], [data-reveal-stagger] > *").forEach((t) => t.classList.add("fn-in")); }, 1000); const onLoad = () => ST.refresh(); window.addEventListener("load", onLoad); return () => { clearTimeout(failsafe); window.removeEventListener("load", onLoad); io.disconnect(); if (moveHandler) window.removeEventListener("pointermove", moveHandler); document.body.classList.remove("glow-on"); ctx.revert(); }; }, deps || []); } /* ---------- Cart helpers + drawer ---------- */ function fnParsePrice(s) { return parseInt(String(s).replace(/[^\d]/g, ""), 10) || 0; } function fnFormatPrice(n) { return String(n).replace(/\B(?=(\d{3})+(?!\d))/g, "."); } const qtyBtn = { width: 26, height: 26, display: "grid", placeItems: "center", background: "transparent", border: "1px solid var(--border-hairline)", color: "var(--text-secondary)", cursor: "pointer", borderRadius: 4, fontSize: "0.95rem", lineHeight: 1 }; function CartLine({ it, onQty, onRemove }) { const neon = `var(--neon-${it.color})`; const tw = String(it.word).length; const fs = tw > 6 ? "0.44rem" : tw > 4 ? "0.6rem" : "0.78rem"; return (
{it.word}
{it.name}
{fnFormatPrice(fnParsePrice(it.price))} RSD
{it.qty}
); } function PayField({ label, ...rest }) { const [f, setF] = React.useState(false); return ( ); } function PaymentModal({ open, total, onClose, onPay }) { const [card, setCard] = React.useState({ num: "", name: "", exp: "", cvc: "" }); React.useEffect(() => { if (!open) setCard({ num: "", name: "", exp: "", cvc: "" }); }, [open]); if (!open) return null; const fmtNum = (v) => v.replace(/\D/g, "").slice(0, 16).replace(/(.{4})/g, "$1 ").trim(); const submit = (e) => { e.preventDefault(); onPay(); }; return (
e.stopPropagation()} style={{ width: "min(420px, 100%)", background: "rgba(10,10,18,0.98)", border: "1px solid rgba(255,16,240,0.35)", boxShadow: "0 0 44px rgba(255,16,240,0.25)", padding: "1.75rem" }}>
Plaćanje
Za naplatu {total} RSD
setCard((c) => ({ ...c, num: fmtNum(e.target.value) }))} placeholder="1234 5678 9012 3456" inputMode="numeric" required /> setCard((c) => ({ ...c, name: e.target.value }))} placeholder="Petar Petrović" required />
setCard((c) => ({ ...c, exp: e.target.value.replace(/[^\d/]/g, "").slice(0, 5) }))} placeholder="08/28" required /> setCard((c) => ({ ...c, cvc: e.target.value.replace(/\D/g, "").slice(0, 4) }))} placeholder="123" inputMode="numeric" required />
Plati {total} RSD

🔒 Demo plaćanje — ne unosite prave podatke kartice.

); } function CartDrawer({ open, items = [], onClose, onQty, onRemove, onCheckout, onNav }) { const [done, setDone] = React.useState(false); const [pay, setPay] = React.useState(false); React.useEffect(() => { if (!open) { setDone(false); setPay(false); } }, [open]); const total = items.reduce((s, it) => s + fnParsePrice(it.price) * it.qty, 0); const count = items.reduce((s, it) => s + it.qty, 0); const finishPay = () => { setPay(false); setDone(true); onCheckout(); }; return (
setPay(false)} onPay={finishPay} /> ); } Object.assign(window, { SiteNav, SiteFooter, CartDrawer, useFotoNeonAnimations, fnRevealEl, FN_BRAND, FN_NAV });