// pages.jsx — Page components for Kids of Jupiter const { T, cls, Logo, PlanetMark, Button, productName, useProducts, useConfig, useCollections, buildWaSingle, buildWaCart, openWa, WHATSAPP } = window.KOJ_Site_Helpers; function formatSizeRange(sizes) { if (!sizes || sizes.length === 0) return ''; const nums = [...new Set(sizes.map(Number))].sort((a, b) => a - b); const ranges = []; let start = nums[0], prev = nums[0]; for (let i = 1; i <= nums.length; i++) { if (i < nums.length && nums[i] === prev + 1) { prev = nums[i]; } else { ranges.push(start === prev ? `${start}` : `${start}-${prev}`); if (i < nums.length) { start = prev = nums[i]; } } } return ranges.join(', ') + ' yaş'; } const { useState: useS, useMemo: useM, useEffect: useE, useRef: useR } = React; function ThemeToggle({ theme, toggleTheme }) { const isDark = theme === 'boutique'; return ( ); } // ─── Header ────────────────────────────────────────────────────────────────── function Header({ lang, setLang, route, go, cartCount, openCart, openMenu, theme, toggleTheme }) { const t = T(lang); const config = useConfig(); const [scrolled, setScrolled] = useS(false); useE(() => { const fn = () => setScrolled(window.scrollY > 12); window.addEventListener('scroll', fn, {passive:true}); return () => window.removeEventListener('scroll', fn); }, []); const links = [ ['#/shop', t.nav.shop], ['#/collections', t.nav.collections], ['#/new', t.nav.new], ['#/about', t.nav.about], ['#/contact', t.nav.contact], ]; return (
); } function LangSwitcher({ lang, setLang }) { const langs = [['tr','TR'],['en','EN'],['ar','AR'],['ru','RU']]; const [open, setOpen] = useS(false); const ref = useR(null); useE(() => { const fn = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }; document.addEventListener('click', fn); return () => document.removeEventListener('click', fn); }, []); const current = langs.find(l => l[0] === lang) || langs[0]; return (
{open && (
{langs.map(([code, label]) => ( ))}
)}
); } // ─── Mobile menu ───────────────────────────────────────────────────────────── function MobileMenu({ open, onClose, lang, setLang, t }) { const config = useConfig(); if (!open) return null; const links = [ ['#/', t.nav.home], ['#/shop', t.nav.shop], ['#/collections', t.nav.collections], ['#/new', t.nav.new], ['#/about', t.nav.about], ['#/contact', t.nav.contact], ]; return (
); } // ─── Home ───────────────────────────────────────────────────────────────────── function HomePage({ lang, go, addToCart }) { const t = T(lang); const products = useProducts(); const featured = products.filter(p => p.pop >= 8).slice(0, 4); const newest = products.filter(p => p.isNew).slice(0, 6); return (
); } function drawSnowflake(ctx, x, y, radius, opacity) { ctx.save(); ctx.translate(x, y); ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`; ctx.lineWidth = 1.2; ctx.beginPath(); for (let i = 0; i < 6; i++) { ctx.moveTo(0, 0); ctx.lineTo(0, -radius); ctx.moveTo(0, -radius * 0.55); ctx.lineTo(-radius * 0.35, -radius * 0.75); ctx.moveTo(0, -radius * 0.55); ctx.lineTo(radius * 0.35, -radius * 0.75); ctx.rotate(Math.PI / 3); } ctx.stroke(); ctx.restore(); } function GlobalSnowCanvas() { const canvasRef = useR(null); useE(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animationFrameId; let width = (canvas.width = window.innerWidth); let height = (canvas.height = window.innerHeight); const handleResize = () => { if (!canvas) return; width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; }; window.addEventListener('resize', handleResize); const numParticles = 75; const particles = Array.from({ length: numParticles }, () => ({ x: Math.random() * width, y: Math.random() * height, r: Math.random() * 3.5 + 1.2, d: Math.random() * numParticles, opacity: Math.random() * 0.65 + 0.3, speedY: Math.random() * 0.8 + 0.4, isSnowflake: Math.random() < 0.3, color: Math.random() > 0.35 ? 'rgba(255, 255, 255,' : 'rgba(226, 184, 94,' })); let angle = 0; const render = () => { ctx.clearRect(0, 0, width, height); angle += 0.008; particles.forEach((p) => { p.y += p.speedY + Math.cos(angle + p.d) * 0.4; p.x += Math.sin(angle) * 0.8; if (p.y > height + 15) { p.y = -15; p.x = Math.random() * width; } if (p.x > width + 15) p.x = -15; if (p.x < -15) p.x = width + 15; if (p.isSnowflake) { drawSnowflake(ctx, p.x, p.y, p.r * 2.2, p.opacity); } else { ctx.beginPath(); ctx.fillStyle = `${p.color}${p.opacity})`; ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true); ctx.fill(); } }); animationFrameId = requestAnimationFrame(render); }; render(); return () => { window.removeEventListener('resize', handleResize); cancelAnimationFrame(animationFrameId); }; }, []); return (