/* A&M Kits — Sections 2 (product grid, trust, 5-Q test, footer) */
const { useState, useEffect } = React;

function ProductCard({ p }) {
  const c = window.domainColor(p.domain);
  const [hover, setHover] = useState(false);
  return (
    <article
      onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{
        background:'#fff', borderRadius:22, overflow:'hidden',
        border:'1px solid rgba(26,22,20,0.07)',
        transition:'all 0.3s', cursor:'pointer',
        transform: hover ? 'translateY(-3px)' : 'none',
        boxShadow: hover ? '0 16px 36px -12px rgba(26,22,20,0.12)' : 'none',
        display:'flex', flexDirection:'column',
      }}>
      <div style={{ aspectRatio:'4/3', background:'#F5F1E8', position:'relative', overflow:'hidden' }}>
        <img src={window.IMG_BASE + p.img} alt={p.name} loading="lazy"
          style={{ width:'100%', height:'100%', objectFit:'cover', mixBlendMode:'multiply', transform: hover ? 'scale(1.04)' : 'none', transition:'transform 0.45s ease' }}
          onError={(e)=>{ e.currentTarget.style.display='none'; }}
        />
        <div style={{ position:'absolute', top:12, left:12, display:'inline-flex', alignItems:'center', gap:6, background:'rgba(253,252,248,0.92)', backdropFilter:'blur(6px)', padding:'4px 10px', borderRadius:100, fontFamily:'Plus Jakarta Sans', fontSize:11, fontWeight:600, color:'#1A1614' }}>
          <span style={{ width:6, height:6, borderRadius:'50%', background:c }}/>
          {p.domain}
        </div>
        <div style={{ position:'absolute', top:12, right:12, background:'rgba(253,252,248,0.92)', backdropFilter:'blur(6px)', padding:'4px 10px', borderRadius:100, fontFamily:'Plus Jakarta Sans', fontSize:11, fontWeight:700, color:'#1A1614' }}>
          {p.score}
        </div>
      </div>

      <div style={{ padding:'18px 20px 20px', display:'flex', flexDirection:'column', gap:10, flex:1 }}>
        <div>
          <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:11, color:c, fontWeight:600, textTransform:'uppercase', letterSpacing:'0.07em', marginBottom:6 }}>{p.primarySkill}</div>
          <h4 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:22, letterSpacing:'-0.015em', lineHeight:1.1, color:'#1A1614' }}>{p.name}</h4>
          <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#7A6F68', fontWeight:500, marginTop:4 }}>Ages {p.ages}</div>
        </div>
        <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:13, color:'#534B45', lineHeight:1.55, flex:1 }}>
          <em style={{ fontFamily:'Instrument Serif', fontStyle:'italic', fontSize:14, color:c }}>Why it works · </em>
          {p.why}
        </p>
        <div style={{ display:'flex', gap:4, paddingTop:8, borderTop:'1px solid rgba(26,22,20,0.06)' }}>
          {p.skills.slice(0,5).map((_,i) => (
            <span key={i} title={p.skills[i]} style={{
              width:8, height:8, borderRadius:'50%',
              background:c, opacity: 0.18 + i*0.13,
            }}/>
          ))}
          <span style={{ marginLeft:'auto', fontFamily:'Plus Jakarta Sans', fontSize:11, color:'#7A6F68', fontWeight:500 }}>+{p.skills.length} skills</span>
        </div>
      </div>
    </article>
  );
}

function ProductGrid({ products }) {
  if (products.length === 0) {
    return (
      <div style={{ padding:'80px 0', textAlign:'center', fontFamily:'Plus Jakarta Sans', color:'#7A6F68' }}>
        <div style={{ fontFamily:'Instrument Serif', fontSize:42, color:'#1A1614', fontStyle:'italic', marginBottom:10 }}>Nothing matches yet.</div>
        <div>Try a different age or skill combination.</div>
      </div>
    );
  }
  return (
    <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(260px, 1fr))', gap:18 }}>
      {products.map(p => <ProductCard key={p.id} p={p} />)}
    </div>
  );
}

function KitGrid({ kits, onOpen }) {
  if (kits.length === 0) {
    return (
      <div style={{ padding:'80px 0', textAlign:'center', fontFamily:'Plus Jakarta Sans', color:'#7A6F68' }}>
        <div style={{ fontFamily:'Instrument Serif', fontSize:42, color:'#1A1614', fontStyle:'italic', marginBottom:10 }}>No kits match this filter.</div>
        <div>Clear filters or browse all 10 kits.</div>
      </div>
    );
  }
  return (
    <div className="kit-grid" style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill, minmax(360px, 1fr))', gap:22 }}>
      {kits.map(k => <window.AMComponents.KitCard key={k.id} kit={k} onOpen={onOpen} />)}
    </div>
  );
}

/* ─── CUSTOM KIT BUILDER ──────────────────────────────────────────────────── */
function CustomKitBuilder() {
  const [selected, setSelected] = useState(new Set());

  const toggle = (id) => {
    setSelected(prev => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  };

  const selectedProducts = window.PRODUCTS.filter(p => selected.has(p.id));
  const uniqueSkills = new Set(selectedProducts.flatMap(p => p.skills));

  const waMessage = selectedProducts.length >= 3
    ? `Hi! I'd like to build a custom kit with these toys:\n${selectedProducts.map((p,i) => `${i+1}. ${p.name}`).join('\n')}\n\n(${selectedProducts.length} toys selected, covering ${uniqueSkills.size}+ skills)\n\nPlease share pricing and availability!`
    : '';

  return (
    <section id="custom-kit" style={{ padding:'96px clamp(20px,4vw,52px) 60px', background:'#FDFCF8', borderTop:'1px solid rgba(26,22,20,0.08)' }}>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{ marginBottom:48 }}>
          <div style={{ display:'inline-flex', alignItems:'center', gap:9, marginBottom:18 }}>
            <span style={{ width:7, height:7, borderRadius:'50%', background:'#1D9E75' }}/>
            <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#1A1614', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:700 }}>Build Your Own Kit</span>
          </div>
          <h2 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:'clamp(36px,4.8vw,64px)', letterSpacing:'-0.025em', lineHeight:0.98, color:'#1A1614', marginBottom:18 }}>
            Can't find the perfect fit?{' '}
            <em style={{ fontStyle:'italic', color:'#D85A30' }}>Build your own.</em>
          </h2>
          <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:17, color:'#534B45', lineHeight:1.55, maxWidth:600 }}>
            Select 3 or more toys from our collection and we'll create a custom kit just for your child.
          </p>
        </div>

        {/* product thumbnail grid */}
        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(auto-fill, minmax(155px, 1fr))',
          gap:12,
          marginBottom: selected.size > 0 ? 100 : 0,
        }}>
          {window.PRODUCTS.map(p => {
            const on = selected.has(p.id);
            const c = window.domainColor(p.domain);
            return (
              <button key={p.id} onClick={() => toggle(p.id)} style={{
                background:'#fff', borderRadius:16,
                border: on ? `2px solid ${c}` : '2px solid transparent',
                padding:0, cursor:'pointer', textAlign:'left',
                boxShadow: on ? `0 0 0 1px ${c}40, 0 4px 16px rgba(26,22,20,0.08)` : '0 1px 3px rgba(26,22,20,0.06)',
                transform: on ? 'scale(1.02)' : 'none',
                transition:'all 0.2s',
                overflow:'hidden', position:'relative',
              }}>
                {on && (
                  <div style={{ position:'absolute', top:8, right:8, zIndex:1, width:22, height:22, borderRadius:'50%', background:c, display:'grid', placeItems:'center', color:'#fff', fontSize:12, fontWeight:700 }}>✓</div>
                )}
                <div style={{ aspectRatio:'1/1', background:'#F5F1E8', overflow:'hidden' }}>
                  <img src={window.IMG_BASE + p.img} alt={p.name} loading="lazy"
                    style={{ width:'100%', height:'100%', objectFit:'cover', mixBlendMode:'multiply' }}
                    onError={e => { e.currentTarget.style.display='none'; }}
                  />
                </div>
                <div style={{ padding:'10px 12px 12px' }}>
                  <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:10, color:c, fontWeight:700, textTransform:'uppercase', letterSpacing:'0.05em', marginBottom:4 }}>{p.primarySkill}</div>
                  <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, fontWeight:600, color:'#1A1614', lineHeight:1.3 }}>{p.name}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>

      {/* floating bottom bar */}
      {selected.size > 0 && (
        <div style={{
          position:'fixed', bottom:0, left:0, right:0, zIndex:150,
          background:'rgba(26,22,20,0.97)', backdropFilter:'blur(10px)',
          padding:'16px clamp(20px,4vw,52px)',
          display:'flex', alignItems:'center', justifyContent:'space-between', gap:16, flexWrap:'wrap',
          animation:'fadeIn 0.2s ease',
        }}>
          <div style={{ display:'flex', gap:24, alignItems:'center', flexWrap:'wrap' }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', color:'#FDFCF8' }}>
              <span style={{ fontWeight:700, fontSize:18 }}>{selected.size}</span>
              <span style={{ fontSize:14, color:'rgba(253,252,248,0.7)', marginLeft:6 }}>toy{selected.size !== 1 ? 's' : ''} selected</span>
            </div>
            <div style={{ fontFamily:'Plus Jakarta Sans', color:'rgba(253,252,248,0.7)', fontSize:14 }}>
              Covering <strong style={{ color:'#FDFCF8' }}>{uniqueSkills.size}+</strong> skills
            </div>
            {selected.size < 3 && (
              <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:13, color:'rgba(253,252,248,0.5)' }}>
                Select {3 - selected.size} more to send to WhatsApp
              </div>
            )}
          </div>
          <div style={{ display:'flex', gap:10, alignItems:'center', flexWrap:'wrap' }}>
            <button onClick={() => setSelected(new Set())} style={{
              background:'transparent', border:'1px solid rgba(253,252,248,0.25)', color:'rgba(253,252,248,0.7)',
              padding:'10px 18px', borderRadius:100, cursor:'pointer',
              fontFamily:'Plus Jakarta Sans', fontSize:13, fontWeight:500,
            }}>Clear all</button>
            <a
              href={selected.size >= 3 ? `https://wa.me/919456815951?text=${encodeURIComponent(waMessage)}` : '#custom-kit'}
              target={selected.size >= 3 ? '_blank' : '_self'}
              rel="noopener"
              style={{
                background: selected.size >= 3 ? '#25D366' : 'rgba(253,252,248,0.15)',
                color: selected.size >= 3 ? '#fff' : 'rgba(253,252,248,0.35)',
                padding:'12px 22px', borderRadius:100,
                fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:14,
                display:'inline-flex', alignItems:'center', gap:8,
                pointerEvents: selected.size >= 3 ? 'auto' : 'none',
                cursor: selected.size >= 3 ? 'pointer' : 'not-allowed',
                transition:'all 0.2s',
              }}>
              Send to WhatsApp for pricing →
            </a>
          </div>
        </div>
      )}
    </section>
  );
}

/* ─── WHY A&M WORLD (Trust) ────────────────────────────────────────────────── */
function WhyKits() {
  const items = [
    { lead:'178 skills mapped',
      body:"We don't just say \"educational\". We name the exact skill each toy develops — the same skills paediatricians and child psychologists measure." },
    { lead:'Multi-angle learning',
      body:'One toy starts a skill. Three toys build it. Our kits exercise each skill from different play angles — like a gym programme for the brain.' },
    { lead:'The 5-Question Test',
      body:'Every A&M product passes our evaluation: Does the child DO something? Does it give FEEDBACK? Can it get HARDER? Does it use MULTIPLE skills? Will they RETURN to it?' },
  ];
  return (
    <section id="why" style={{ padding:'120px clamp(20px,4vw,52px)', background:'#F5F1E8', borderTop:'1px solid rgba(26,22,20,0.08)' }}>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap:9, marginBottom:24 }}>
          <span style={{ width:7, height:7, borderRadius:'50%', background:'#1D9E75' }}/>
          <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#1A1614', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:700 }}>Why A&amp;M World</span>
        </div>
        <h2 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:'clamp(40px,5.5vw,72px)', letterSpacing:'-0.025em', lineHeight:1, color:'#1A1614', marginBottom:56, maxWidth:900 }}>
          Not just <em style={{ fontStyle:'italic', color:'#D85A30', textDecoration:'line-through', textDecorationThickness:'1.5px', textDecorationColor:'rgba(216,90,48,0.7)' }}>educational</em>. <span style={{ fontStyle:'italic', color:'#1A1614' }}>Skill-mapped.</span>
        </h2>

        <div className="why-grid" style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid rgba(26,22,20,0.12)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ padding:'40px 36px 40px 0', borderRight: i<2 ? '1px solid rgba(26,22,20,0.12)' : 'none', paddingLeft: i>0 ? 36 : 0 }}>
              <div style={{ fontFamily:'Instrument Serif', fontSize:18, fontStyle:'italic', color:'#D85A30', marginBottom:18 }}>0{i+1}.</div>
              <h3 style={{ fontFamily:'Instrument Serif', fontSize:'clamp(26px,2.6vw,34px)', fontWeight:400, letterSpacing:'-0.018em', color:'#1A1614', marginBottom:16, lineHeight:1.1 }}>{it.lead}</h3>
              <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:15, color:'#534B45', lineHeight:1.65 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─── SKILLS BY AGE ───────────────────────────────────────────────────────── */
function ByAge() {
  const bands = [
    { id:'0-2',  label:'0–2 years',  blurb:'Sensory foundations. Cause-and-effect. First sounds. Hand strength. The building blocks of everything that comes next.', kits:['Tiny Thinker','Music & Rhythm'] },
    { id:'2-4',  label:'2–4 years',  blurb:"Motor explosion. First words. Pretend play. Classification. The age where everything clicks.",                            kits:['Little Explorer','Hand-Eye Hero','School Ready Starter'] },
    { id:'4-6',  label:'4–6 years',  blurb:'School readiness. Letters, numbers, scissors, emotions. The skills that determine day-one confidence.',                   kits:['School Ready Starter','Maths Master','Emotional Intelligence'] },
    { id:'6-8',  label:'6–8 years',  blurb:'Abstract thinking begins. Strategy games, spatial reasoning, reading fluency. The cognitive leap.',                       kits:['Logical Thinker','Spatial Genius','Family Game Night'] },
    { id:'8-12', label:'8–12 years', blurb:'Full logical reasoning. Multiplication mastery. Competitive strategy. Preparation for independence.',                     kits:['Logical Thinker','Maths Master','Family Game Night'] },
  ];
  const [active, setActive] = useState(0);
  const band = bands[active];
  return (
    <section id="by-age" style={{ padding:'120px clamp(20px,4vw,52px)', background:'#FDFCF8', borderTop:'1px solid rgba(26,22,20,0.08)' }}>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap:9, marginBottom:24 }}>
          <span style={{ width:7, height:7, borderRadius:'50%', background:'#1D9E75' }}/>
          <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#1A1614', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:700 }}>Skills by age</span>
        </div>
        <h2 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:'clamp(40px,5.5vw,72px)', letterSpacing:'-0.025em', lineHeight:0.98, color:'#1A1614', marginBottom:48, maxWidth:1000 }}>
          What does your child need <em style={{ fontStyle:'italic', color:'#D85A30' }}>right now</em>?
        </h2>

        {/* age band tabs */}
        <div className="no-scrollbar" style={{ display:'flex', gap:8, marginBottom:40, overflowX:'auto', paddingBottom:4 }}>
          {bands.map((b, i) => {
            const on = active === i;
            return (
              <button key={b.id} onClick={()=>setActive(i)} style={{
                background: on ? '#1A1614' : 'transparent',
                color: on ? '#FDFCF8' : '#534B45',
                border: on ? '1px solid #1A1614' : '1px solid rgba(26,22,20,0.18)',
                padding:'12px 22px', borderRadius:100, cursor:'pointer',
                fontFamily:'Plus Jakarta Sans', fontSize:14, fontWeight:600,
                whiteSpace:'nowrap', transition:'all 0.18s', flexShrink:0,
                fontVariantNumeric:'tabular-nums',
              }}>{b.label}</button>
            );
          })}
        </div>

        {/* active band content */}
        <div className="age-band-grid" style={{ display:'grid', gridTemplateColumns:'minmax(0, 1fr) minmax(0, 1.3fr)', gap:48, alignItems:'start' }}>
          <div>
            <div style={{ fontFamily:'Instrument Serif', fontSize:'clamp(80px,9vw,128px)', fontWeight:400, lineHeight:0.9, letterSpacing:'-0.03em', color:'#1A1614' }}>
              {band.label.split(' ')[0]}
            </div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:13, color:'#7A6F68', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:600, marginTop:8 }}>years</div>
            <p style={{ fontFamily:'Instrument Serif', fontSize:'clamp(22px,2.4vw,30px)', fontWeight:400, fontStyle:'italic', color:'#1A1614', lineHeight:1.25, letterSpacing:'-0.012em', marginTop:28, maxWidth:480 }}>
              "{band.blurb}"
            </p>
          </div>
          <div>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#7A6F68', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:600, marginBottom:18 }}>Recommended kits</div>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {band.kits.map((k, i) => (
                <a key={k} href="#kits" style={{
                  display:'flex', alignItems:'center', justifyContent:'space-between',
                  background:'#fff', border:'1px solid rgba(26,22,20,0.1)',
                  borderRadius:18, padding:'20px 24px',
                  fontFamily:'Plus Jakarta Sans', fontSize:15, fontWeight:600, color:'#1A1614',
                  transition:'all 0.18s',
                }}
                  onMouseEnter={e=>{ e.currentTarget.style.borderColor='#1A1614'; e.currentTarget.style.transform='translateX(4px)'; }}
                  onMouseLeave={e=>{ e.currentTarget.style.borderColor='rgba(26,22,20,0.1)'; e.currentTarget.style.transform='none'; }}
                >
                  <span style={{ display:'flex', alignItems:'center', gap:14 }}>
                    <span style={{ fontFamily:'Instrument Serif', fontSize:18, fontStyle:'italic', color:'#D85A30' }}>{String(i+1).padStart(2,'0')}</span>
                    {k}
                  </span>
                  <span style={{ color:'#7A6F68', fontSize:14 }}>→</span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── 5-QUESTION TEST ─────────────────────────────────────────────────────── */
function FiveQuestionTest() {
  const Qs = [
    { n:'01', q:'Does the child DO something?',   gloss:'not passive — the child acts, decides, manipulates',  yes:'Active engagement' },
    { n:'02', q:'Does the toy give FEEDBACK?',    gloss:'self-correcting — child sees right and wrong',          yes:'Self-correcting' },
    { n:'03', q:'Can it get HARDER?',             gloss:'progression — the same toy challenges at 3 and at 7',   yes:'Has progression' },
    { n:'04', q:'Does it use MULTIPLE skills?',   gloss:'multi-domain — fine motor + counting + planning',       yes:'Multi-skill' },
    { n:'05', q:'Will they RETURN to it?',        gloss:'replay value — comes back every week',                  yes:'Replay value' },
  ];
  const [active, setActive] = useState(0);
  return (
    <section id="method" style={{ padding:'120px clamp(20px,4vw,52px)', background:'#1A1614', color:'#FDFCF8' }}>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:48 }}>
          <span style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#A89D94', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:600 }}>The 5-Question Test</span>
          <span style={{ flex:1, height:1, background:'rgba(253,252,248,0.18)' }}/>
        </div>

        <h2 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:'clamp(40px,5.5vw,72px)', letterSpacing:'-0.025em', lineHeight:0.98, marginBottom:18, maxWidth:900 }}>
          How we <em style={{ color:'#D85A30', fontStyle:'italic' }}>evaluate</em> every toy.
        </h2>
        <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:17, color:'rgba(253,252,248,0.7)', maxWidth:560, lineHeight:1.55, marginBottom:64 }}>
          We don't add anything to our catalogue until it passes a 5-question screen. Most don't make it. Every product on this page scores 3/5 or higher. Most score 5/5.
        </p>

        <div style={{ display:'grid', gridTemplateColumns:'minmax(0,1.2fr) minmax(0,1fr)', gap:60, alignItems:'start' }} className="why-grid">
          <div style={{ display:'flex', flexDirection:'column' }}>
            {Qs.map((q, i) => (
              <button key={q.n} onClick={()=>setActive(i)} style={{
                background:'transparent', border:'none', cursor:'pointer',
                textAlign:'left', padding:'22px 0',
                borderTop: '1px solid rgba(253,252,248,0.12)',
                color:'#FDFCF8', display:'grid', gridTemplateColumns:'52px 1fr 28px', gap:16, alignItems:'center',
                transition:'opacity 0.2s',
                opacity: active===i ? 1 : 0.55,
              }}>
                <span style={{ fontFamily:'Instrument Serif', fontSize:18, color:'#D85A30', fontStyle:'italic' }}>{q.n}</span>
                <span style={{ fontFamily:'Instrument Serif', fontSize:'clamp(22px,2.4vw,32px)', fontWeight:400, letterSpacing:'-0.015em', lineHeight:1.1 }}>{q.q}</span>
                <span style={{
                  width:24, height:24, borderRadius:'50%',
                  border:'1px solid rgba(253,252,248,0.3)',
                  display:'grid', placeItems:'center',
                  background: active===i ? '#D85A30' : 'transparent',
                  borderColor: active===i ? '#D85A30' : 'rgba(253,252,248,0.3)',
                  fontSize:11, color:'#FDFCF8',
                }}>{active===i ? '✓' : ''}</span>
              </button>
            ))}
            <div style={{ borderTop:'1px solid rgba(253,252,248,0.12)' }}/>
          </div>

          {/* score panel */}
          <div style={{
            background:'rgba(253,252,248,0.05)',
            border:'1px solid rgba(253,252,248,0.12)',
            borderRadius:24, padding:'36px',
            position:'sticky', top:130,
          }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#A89D94', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:600, marginBottom:14 }}>Question {Qs[active].n}</div>
            <div style={{ fontFamily:'Instrument Serif', fontSize:32, letterSpacing:'-0.02em', lineHeight:1.1, marginBottom:18 }}>{Qs[active].q}</div>
            <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:15, color:'rgba(253,252,248,0.7)', lineHeight:1.6, marginBottom:28 }}>{Qs[active].gloss}</p>

            <div style={{ display:'flex', alignItems:'baseline', gap:14, marginTop:36 }}>
              <div style={{ fontFamily:'Instrument Serif', fontSize:72, color:'#D85A30', lineHeight:0.85, fontStyle:'italic' }}>{active+1}<span style={{ fontSize:36, color:'rgba(253,252,248,0.5)', fontStyle:'normal' }}>/5</span></div>
              <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:14, color:'rgba(253,252,248,0.6)', maxWidth:160, lineHeight:1.4 }}>
                A&amp;M-approved toys must pass at least 3 of 5.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─── CTA FOOTER ──────────────────────────────────────────────────────────── */
function CTAFooter() {
  const WA = (window.AM_WA) || 'https://wa.me/919456815951?text=Hi%20I%20want%20to%20explore%20A%26M%20skill%20kits';
  return (
    <section style={{ padding:'120px clamp(20px,4vw,52px) 40px', background:'#FDFCF8' }}>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{
          background:'#fff', borderRadius:32,
          border:'1px solid rgba(26,22,20,0.08)',
          padding:'clamp(40px,6vw,80px)',
          display:'grid', gridTemplateColumns:'minmax(0,1fr) auto', gap:40,
          alignItems:'center', position:'relative', overflow:'hidden',
        }} className="cta-grid">
          {/* deco */}
          <div aria-hidden style={{ position:'absolute', right:-100, top:-100, width:400, height:400, borderRadius:'50%', background:'radial-gradient(circle, #D85A3018 0%, transparent 70%)' }}/>

          <div style={{ position:'relative' }}>
            <div style={{ fontFamily:'Plus Jakarta Sans', fontSize:12, color:'#7A6F68', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:600, marginBottom:18 }}>For better moments</div>
            <h2 style={{ fontFamily:'Instrument Serif', fontWeight:400, fontSize:'clamp(40px,5.5vw,68px)', letterSpacing:'-0.025em', lineHeight:0.98, color:'#1A1614', marginBottom:20 }}>
              Ready to build your child's <em style={{ color:'#D85A30', fontStyle:'italic' }}>future</em>?
            </h2>
            <p style={{ fontFamily:'Plus Jakarta Sans', fontSize:17, color:'#534B45', lineHeight:1.55, maxWidth:520 }}>
              Order on WhatsApp, ask a question, or get a kit recommendation tailored to your child's age and interests.
            </p>
          </div>

          <div style={{ display:'flex', flexDirection:'column', gap:12, position:'relative', minWidth:260 }}>
            <a href={WA} target="_blank" rel="noopener" style={{
              background:'#1A1614', color:'#FDFCF8',
              padding:'18px 24px', borderRadius:100,
              fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:15,
              display:'flex', alignItems:'center', justifyContent:'center', gap:10,
            }}>
              <span style={{ fontSize:18 }}>✦</span> Order on WhatsApp
            </a>
            <a href="skills-guide.html" style={{
              background:'#fff', color:'#1A1614',
              border:'1px solid rgba(26,22,20,0.18)',
              padding:'18px 24px', borderRadius:100,
              fontFamily:'Plus Jakarta Sans', fontWeight:600, fontSize:15,
              display:'flex', alignItems:'center', justifyContent:'center', gap:10,
            }}>
              Read the Skills Guide →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

window.AMSections = { ProductCard, ProductGrid, KitGrid, CustomKitBuilder, WhyKits, ByAge, FiveQuestionTest, CTAFooter };
