/* A&M Kits — Components (hero, how-it-works, kits grid, drawer) */ const { useState, useEffect, useRef, useMemo } = React; /* ─── HELPERS ─────────────────────────────────────────────────────────────── */ function DomainDot({ domain, size = 8 }) { const c = window.domainColor(domain); return ; } function SkillPill({ domain, label, onClick, active, dense }) { const c = window.domainColor(domain); return ( ); } function DomainGlyph({ domain }) { const c = window.domainColor(domain); const d = window.DOMAINS.find(x => x.id === domain); return ( {d?.glyph || '◆'} ); } /* ─── TOAST ───────────────────────────────────────────────────────────────── */ function KitsToast({ msg, onDone }) { useEffect(() => { if (!msg) return; const t = setTimeout(onDone, 2600); return () => clearTimeout(t); }, [msg]); return (
{msg && (
{msg}
)}
); } const KITS_WA = 'https://wa.me/919456815951?text=Hi%20I%20want%20to%20explore%20A%26M%20skill%20kits'; /* ─── NAV ─────────────────────────────────────────────────────────────────── */ function Nav() { const [scrolled, setScrolled] = useState(false); const [mobileOpen, setMobileOpen] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 30); window.addEventListener('scroll', fn); return () => window.removeEventListener('scroll', fn); }, []); useEffect(() => { if (mobileOpen) { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; } }, [mobileOpen]); const scrollToTop = () => window.scrollTo({ top:0, behavior:'smooth' }); const scrollToSection = (id) => { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 68; window.scrollTo({ top, behavior:'smooth' }); }; const LINKS = [ { id:'home', label:'Home', active:true, onClick: scrollToTop }, { id:'kits', label:'Kits', active:false, onClick: () => scrollToSection('kits') }, { id:'skills', label:'Skills Guide', active:false, href: 'skills-guide.html' }, { id:'about', label:'About', active:false, href: 'about.html' }, ]; const linkStyle = (on) => ({ color: on ? '#1A1614' : '#534B45', fontSize:14, fontWeight: on ? 700 : 500, fontFamily:'Plus Jakarta Sans', background:'transparent', border:'none', cursor:'pointer', padding:'4px 0', borderBottom: on ? '1.5px solid #C45B3A' : '1.5px solid transparent', transition:'color 0.18s', }); return ( <> {/* Mobile menu */} {mobileOpen && (
setMobileOpen(false)} style={{ position:'fixed', inset:'68px 0 0 0', zIndex:99, background:'rgba(253,252,248,0.98)', backdropFilter:'blur(10px)', padding:'40px clamp(20px,4vw,52px)', animation:'fadeIn 0.2s ease', }}>
)} ); } /* ─── HERO ────────────────────────────────────────────────────────────────── */ function Hero() { const stats = [ { n:'28', l:'products' }, { n:'10', l:'skill kits' }, { n:'9', l:'developmental domains' }, { n:'0–12',l:'ages covered' }, ]; return (
{/* decorative dots */}
A&M World · for better moments

Every toy builds a skill.

We don't sell toys — we sell skill-building systems. Each kit is engineered to develop the specific cognitive, motor, and social-emotional skills your child needs.

Explore Kits → Shop by Skill
{/* Stats strip */}
{stats.map((s,i) => (
0 ? 24 : 0 }}>
{s.n}
{s.l}
))}
); } /* ─── HOW IT WORKS ────────────────────────────────────────────────────────── */ function HowItWorks() { const steps = [ { n:'01', t:'Understand the skill', b:"Every child develops 178 skills from birth to age 13 — motor, cognitive, emotional, creative. Our Skills Guide helps you understand which ones matter at your child's age." }, { n:'02', t:'Choose the right kit', b:'Each kit bundles 3–5 wooden toys that develop a specific skill from different angles — like a workout programme for the brain. One toy starts a skill. A kit builds it.' }, { n:'03', t:'Watch them grow', b:'The skills are embedded in the play mechanic. Your child develops hand-eye coordination, logical reasoning, or emotional intelligence naturally — while having fun.' }, ]; return (
How it works

Skills first. Toys second.

{steps.map((s, i) => (
{s.n}

{s.t}

{s.b}

))}
); } /* ─── FILTER BAR (sticky) ─────────────────────────────────────────────────── */ function FilterBar({ activeDomains, toggleDomain, ageBucket, setAgeBucket, kitCount, productCount }) { return (
{/* row 1 — counts + age */}
Kits {kitCount} · Products {productCount}
Age {[null, ...window.AGE_BUCKETS.map(a=>a.id)].map(a => ( ))}
{/* row 2 — domain pills */}
{window.DOMAINS.map(d => { const on = activeDomains.has(d.id); return ( ); })}
); } /* ─── KIT PRICES ──────────────────────────────────────────────────────────── */ const KIT_PRICES = { 'KIT-LOG-01': '₹1,999', 'KIT-MTH-01': '₹1,999', 'KIT-SCH-01': '₹1,999', 'KIT-EQ-01': '₹2,499', 'KIT-HEH-01': '₹2,499', 'KIT-TT-01': '₹2,999', 'KIT-FAM-01': '₹3,499', 'KIT-SPA-01': '₹1,499', 'KIT-EXP-01': '₹2,499', 'KIT-MUS-01': '₹1,999', }; /* ─── KIT CARD ────────────────────────────────────────────────────────────── */ function KitCard({ kit, onOpen }) { const c = window.domainColor(kit.domain); const products = kit.products.map(window.productById).filter(Boolean); const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={()=>setHover(false)} onClick={()=>onOpen(kit)} style={{ background:'#FFFFFF', borderRadius:28, overflow:'hidden', cursor:'pointer', border:'1px solid rgba(26,22,20,0.08)', boxShadow: hover ? '0 24px 48px -16px rgba(26,22,20,0.15), 0 0 0 1px '+c+'30' : '0 1px 2px rgba(26,22,20,0.04)', transform: hover ? 'translateY(-4px)' : 'none', transition:'all 0.35s cubic-bezier(0.4,0,0.2,1)', display:'flex', flexDirection:'column', }}> {/* header band */}
{(window.DOMAINS.find(d=>d.id===kit.domain)||{}).glyph} {kit.domain.toUpperCase()}
{kit.type}
{kit.ages}
{/* title block */}
{kit.tagline}

{kit.name}

{kit.pitch}

{/* product thumbnail strip */}
{products.slice(0,5).map((p, i) => (
{p.name}{ e.currentTarget.style.display='none'; }} />
))}
{/* skill tags */}
{kit.skillTags.slice(0,4).map(t => ( {t} ))} {kit.skillTags.length > 4 && ( +{kit.skillTags.length-4} )}
{/* price line */}
{KIT_PRICES[kit.id] || ''} free delivery across India
{/* footer — skills count + buy buttons */}
Skills covered
{kit.skillCount}
Tap for details
e.stopPropagation()} style={{ display:'block', width:'100%', textAlign:'center', background:'#1A1614', color:'#FDFCF8', padding:'13px 20px', borderRadius:100, fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:14, marginBottom:8, boxSizing:'border-box', }}>Buy This Kit → e.stopPropagation()} style={{ display:'block', width:'100%', textAlign:'center', background:'transparent', color:'#534B45', border:'1px solid rgba(26,22,20,0.18)', padding:'10px 20px', borderRadius:100, fontFamily:'Plus Jakarta Sans', fontWeight:500, fontSize:13, boxSizing:'border-box', }}>Have questions? WhatsApp us
); } /* ─── KIT DRAWER ──────────────────────────────────────────────────────────── */ function KitDrawer({ kit, onClose }) { useEffect(() => { if (!kit) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = e => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); }; }, [kit]); if (!kit) return null; const c = window.domainColor(kit.domain); const products = kit.products.map(window.productById).filter(Boolean); return (
e.stopPropagation()} style={{ width:'min(720px, 100%)', background:'#FDFCF8', height:'100%', overflowY:'auto', animation:'slideIn 0.35s cubic-bezier(0.16,1,0.3,1)', position:'relative', }}> {/* close */} {/* header */}
{(window.DOMAINS.find(d=>d.id===kit.domain)||{}).glyph} {kit.domain.toUpperCase()} · {kit.type.toUpperCase()}
{kit.tagline}

{kit.name}

{kit.ages} · ages · {products.length} toys · in kit · {kit.skillCount} skills · developed

{kit.pitch}

{/* skills */}
Skills you'll build
{kit.skillTags.map(t => ( {t} ))}
{/* products in kit */}
What's inside · {products.length} toys
{products.map((p, i) => { const pc = window.domainColor(p.domain); return (
{p.name}{ e.currentTarget.style.display='none'; }} />
{p.primarySkill}

{p.name}

{p.why}

Ages {p.ages} {p.score}
); })}
{/* CTA bottom */}
Buy This Kit → Have questions? WhatsApp us
); } window.AMComponents = { Nav, KitsToast, Hero, HowItWorks, FilterBar, KitCard, KitDrawer, DomainDot, SkillPill };