/* A&M World — Skills Guide App */ const { useState, useEffect } = React; const DOMAIN_INFO = [ { id: 'Cognitive', headline: 'The thinking', emphasis: 'brain', tagline: 'Logic · Memory · Reasoning', description: 'Deductive reasoning, working memory, spatial intelligence, number sense, and planning. The cognitive domain covers every skill that happens when your child thinks their way through a challenge. It\'s the most product-rich domain in our catalogue — because it\'s the foundation of academic and professional success.', keySkills: ['Deductive Reasoning', 'Working Memory', 'Spatial Reasoning', 'Number Sense', 'Pattern Recognition', 'Planning & Strategy', 'Decision-Making', 'Probability'], }, { id: 'Sensory', headline: 'Reading', emphasis: 'the world', tagline: 'Sound · Touch · Force', description: 'Auditory discrimination, force modulation, tactile discrimination, and visual tracking. Before complex cognitive skills can form, the brain must learn to accurately interpret sensory input. Sensory development peaks in the first 5 years — and the right toys accelerate it dramatically.', keySkills: ['Auditory Discrimination', 'Force Modulation', 'Visual Tracking', 'Tactile Discrimination', 'Rhythm & Beat', 'Cause & Effect'], }, { id: 'Motor', headline: 'Hands that', emphasis: 'think', tagline: 'Fine Motor · Coordination · Strength', description: 'Hand-eye coordination, fine motor control, bilateral hand use, and arm strength. Physical skills are the invisible foundation for everything else — writing, drawing, sports, and every form of self-expression. Children with strong motor foundations learn faster across every domain.', keySkills: ['Hand-Eye Coordination', 'Fine Motor Control', 'Bilateral Hand Use', 'Pincer Grasp', 'Arm Strength', 'In-Hand Manipulation'], }, { id: 'Language', headline: 'The', emphasis: 'word-builder', tagline: 'Literacy · Phonics · Vocabulary', description: 'Letter recognition, phonics, spelling, vocabulary, and sequencing. Language skills compound — every word a child learns makes the next word easier. Multisensory language tools (3D letters, physical spelling games) consistently outperform screens in every developmental study we\'ve reviewed.', keySkills: ['Letter Recognition', 'Phonics & Spelling', 'Vocabulary', 'Sequencing', 'Number Sense', 'Reading Readiness'], }, { id: 'Social-Emotional', headline: 'The operating', emphasis: 'system', tagline: 'Emotions · Empathy · Resilience', description: 'Emotion identification, empathy, frustration tolerance, and theory of mind. These are the skills that determine how your child navigates relationships, handles setbacks, and reads other people. Social-emotional intelligence is the strongest predictor of long-term life satisfaction — above IQ, grades, or income.', keySkills: ['Emotion Identification', 'Empathy', 'Theory of Mind', 'Frustration Tolerance', 'Turn-Taking', 'Competitive Resilience', 'Emotional Vocabulary'], }, { id: 'Creative', headline: 'The imagination', emphasis: 'engine', tagline: 'Pretend Play · Narrative · Open-Ended', description: 'Pretend play, narrative construction, and open-ended exploration. Creative skills are how children rehearse real-world scenarios, process emotions, and build the cognitive flexibility to think in new ways. Creativity is not a talent — it\'s a skill that develops with the right kind of play.', keySkills: ['Pretend Play', 'Narrative Construction', 'Open-Ended Exploration', 'Role Play', 'Colour Recognition', 'Sequencing'], }, { id: 'Life Skills', headline: 'Ready for the', emphasis: 'real world', tagline: 'Time · Classification · Independence', description: 'Time-telling, classification, sorting, and practical independence. Life skills are the often-underrated foundation of childhood competence. When children can tell time, sort objects, and follow routines independently, they develop agency — the belief that they can affect their world.', keySkills: ['Time-Telling', 'Classification', 'Colour Recognition', 'Shape Recognition', 'Sorting & Categorising', 'Number Sense'], }, ]; /* ─── HERO ────────────────────────────────────────────────────────────────── */ function SkillsHero() { return (
Skills Guide · A&M World

178 skills.
9 domains.
Every toy, mapped.

Most toys say "educational". We name the exact skill each toy develops — the same skills paediatricians and developmental psychologists measure. This is how we build kits that actually work.

{window.DOMAINS.map(d => ( { e.currentTarget.style.background = d.color + '26'; }} onMouseLeave={e => { e.currentTarget.style.background = d.color + '14'; }} > {d.glyph} {d.id} ))}
{[ { n:'178', l:'skills mapped' }, { n:'7', l:'developmental domains' }, { n:'28', l:'products scored' }, { n:'10', l:'curated skill kits' }, ].map((s, i, arr) => (
0 ? 24 : 0 }}>
{s.n}
{s.l}
))}
); } /* ─── DOMAIN SECTION ─────────────────────────────────────────────────────── */ function DomainSection({ info, bg }) { const c = window.domainColor(info.id); const domainObj = window.DOMAINS.find(d => d.id === info.id); const products = window.PRODUCTS.filter(p => p.domain === info.id); const kits = window.KITS.filter(k => k.domain === info.id); const anchorId = 'domain-' + info.id.toLowerCase().replace(/\s+/g, '-'); return (
{/* left: headline + description */}
{domainObj?.glyph} {info.id}

{info.headline} {info.emphasis}

{info.tagline}

{info.description}

{/* right: skills + kits */}
Key skills in this domain
{info.keySkills.map(sk => ( {sk} ))}
{kits.length > 0 && ( <>
Featured kit{kits.length > 1 ? 's' : ''}
{kits.map(k => ( { e.currentTarget.style.background = c + '0A'; e.currentTarget.style.borderColor = c + '30'; }} onMouseLeave={e => { e.currentTarget.style.background = 'rgba(26,22,20,0.03)'; e.currentTarget.style.borderColor = 'rgba(26,22,20,0.07)'; }} > {domainObj?.glyph} {k.name} {k.ages} → ))} )}
{/* products in this domain */} {products.length > 0 && ( <>
{products.length} product{products.length !== 1 ? 's' : ''} in this domain
{products.map(p => )}
)}
); } /* ─── HOW WE SCORE ───────────────────────────────────────────────────────── */ function HowWeScore() { return (
Our methodology

How we score every toy.

Every product in our catalogue passes a 5-question evaluation. Most toys fail at least one. Products that score 3/5 or below don't make the cut.

{[ { n:'01', q:'Does the child DO something?', b:'Not passive — the child acts, decides, manipulates. Watching something happen is not development.' }, { n:'02', q:'Does it give FEEDBACK?', b:'Self-correcting: the child sees right and wrong. No adult needed to evaluate the outcome.' }, { n:'03', q:'Can it get HARDER?', b:'The same toy challenges a 3-year-old and a 7-year-old differently. Progression is built in.' }, { n:'04', q:'Does it use MULTIPLE skills?', b:'Fine motor + counting + planning in one toy. Multi-skill toys build faster than single-skill ones.' }, { n:'05', q:'Will they RETURN to it?', b:'Replay value. If a child only plays once, the skill investment is shallow. Return = deep practice.' }, ].map((item, i) => (
0 ? 28 : 0, borderTop: i >= 3 ? '1px solid rgba(253,252,248,0.12)' : 'none', paddingTop: i >= 3 ? 32 : 32 }}>
{item.n}

{item.q}

{item.b}

))}
); } /* ─── APP ─────────────────────────────────────────────────────────────────── */ function App() { const { AMHeader, AMFooter } = window.AMShared; const { CTAFooter, ByAge } = window.AMSections; useEffect(() => { function handleHash() { const h = (window.location.hash || '').replace('#', ''); if (!h) return; setTimeout(() => { const el = document.getElementById(h); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 68; window.scrollTo({ top, behavior:'smooth' }); }, 100); } handleHash(); window.addEventListener('hashchange', handleHash); return () => window.removeEventListener('hashchange', handleHash); }, []); const bgs = ['#FDFCF8', '#F5F1E8', '#FDFCF8', '#F5F1E8', '#FDFCF8', '#F5F1E8', '#FDFCF8']; return (
{DOMAIN_INFO.map((info, i) => ( ))}
); } ReactDOM.createRoot(document.getElementById('root')).render();