// v3 Pack Sizes — restored v1 tilted layout, with WARM progression (cream → gold → saffron → roast → date)
function PackSizes() {
  // Restored: 5 tilted cards, light-to-dark progression with package SVG, name, weight, copy.
  // Dark dock bar below with italic copy + Build Your Pantry CTA.
  const packs = [
    { name:'Small Sachets', range:'20–35 G',       use:'Handbags, desk drawers, lunchboxes, travel, mindful snacking.',
      tone:'#F2EAD3', text:'var(--ink)', accent:'#8B6A28', tilt:-3 },
    { name:'Daily Packs',   range:'80–150 G',      use:'Easy to enjoy through the week — home, work, between routines.',
      tone:'#E0D2A6', text:'var(--ink)', accent:'#8B6A28', tilt:2 },
    { name:'Family Packs',  range:'250–500 G',     use:'A practical pantry size for households that snack and share regularly.',
      tone:'#C8A24E', text:'var(--ink)', accent:'#142456', tilt:-1 },
    { name:'Bulk Packs',    range:'1 KG & ABOVE',  use:'Frequent use, hospitality, baking, gatherings, well-stocked shelves.',
      tone:'#0E1B44', text:'var(--cream)', accent:'#E9CF95', dark:true, tilt:3 },
    { name:'Gift Packs',    range:'CURATED BOXES', use:'Presentation-led selections for celebrations and corporate gifting.',
      tone:'#070F2A', text:'var(--cream)', accent:'#E9CF95', dark:true, tilt:-2 },
  ];

  return (
    <section className="section bg-pattern-cream" style={{position:'relative'}} data-screen-label="Pack Sizes">
      <div className="wrap">
        {/* Header restored: title left + subtitle right */}
        <div className="split-2" style={{alignItems:'end', marginBottom:48, gap:48}}>
          <Reveal>
            <Eyebrow align="center" tone="var(--gold-deep)">+ &nbsp; Pack Sizes &nbsp; +</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(38px,4.6vw,100px)', lineHeight:1.05, marginTop:22,
              fontWeight:500, color:'var(--ink)', letterSpacing:'-0.005em', marginBottom:0, maxWidth:'clamp(380px, 36vw, 700px)'}}>
              Pack sizes that <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>match real life.</span>
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.65, maxWidth:'clamp(320px, 28vw, 560px)', margin:0, textAlign:'left'}}>
              Small packs for quick moments. Larger packs for generous routines. Move from a pocket
              sachet to a family pouch, a pantry refill, or an elegant gift box without losing the
              premium feel.
            </p>
          </Reveal>
        </div>

        {/* 5 tilted cards — slide-into-shelf entry */}
        <div className="pack-grid-v1">
          {packs.map((p, i)=>(
            <Reveal key={p.name} delay={i*100} variant="slide-up">
              <PackCardV1 pack={p} index={i}/>
            </Reveal>
          ))}
        </div>

        {/* Dark dock CTA */}
        <Reveal variant="slide-up">
          <div style={{
            marginTop:64,
            background:'var(--ink)', color:'var(--cream)',
            borderRadius:999,
            padding:'clamp(18px, 1.3vw, 26px) 0',
            display:'flex', alignItems:'center', justifyContent:'space-between', gap:24, flexWrap:'wrap',
            boxShadow:'0 30px 60px -30px rgba(7,15,42,0.55)'
          }}>
            <div style={{display:'flex', gap:18, alignItems:'center'}}>
              <span style={{color:'var(--gold-3)'}}>
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M7 0 L8 5 L13 7 L8 8 L7 13 L6 8 L1 7 L6 5 Z" fill="currentColor"/></svg>
              </span>
              <span style={{fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic', fontSize:'clamp(18px,1.6vw,32px)', color:'var(--cream)'}}>
                Small packs for quick moments. Larger packs for generous routines.
              </span>
            </div>
            <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>Build Your Pantry <Icon.Arrow/></a>
          </div>
        </Reveal>
      </div>
      <style>{`
        .pack-grid-v1{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
        @media (max-width:1100px){ .pack-grid-v1{ grid-template-columns:repeat(3,1fr); } }
        @media (max-width:680px){  .pack-grid-v1{ grid-template-columns:repeat(2,1fr); gap:14px; } }
      `}</style>
    </section>
  );
}

function PackCardV1({pack, index}) {
  const isDark = pack.dark;
  const baseTilt = pack.tilt;
  return (
    <div className="pack-card-v1" style={{
      background: pack.tone, color: pack.text,
      borderRadius:'var(--r-md)', padding:'26px 22px 28px',
      minHeight:360, position:'relative', overflow:'hidden',
      transform:`rotate(${baseTilt}deg) translateY(${index%2?10:0}px)`,
      transition:'transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s',
      boxShadow:'0 26px 50px -28px rgba(11,22,56,0.4)',
      border: isDark ? '1px solid rgba(233,207,149,0.22)' : '1px solid rgba(7,15,42,0.06)',
      display:'flex', flexDirection:'column',
    }}>
      {/* Top: number badge top-right */}
      <div style={{position:'absolute', top:14, right:14,
        width:30, height:30, borderRadius:99,
        background: isDark ? 'rgba(233,207,149,0.18)' : 'rgba(7,15,42,0.10)',
        color: isDark ? 'var(--gold-3)' : 'var(--ink)',
        display:'grid', placeItems:'center',
        fontSize:11, fontWeight:700, letterSpacing:'0.06em',
      }}>0{index+1}</div>

      {/* Package SVG glyph */}
      <div style={{height:130, display:'flex', alignItems:'center', justifyContent:'center', marginTop:8, marginBottom:22}}>
        <PackageGlyph kind={index} accent={pack.accent} dark={isDark} tone={pack.tone}/>
      </div>

      {/* Name */}
      <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:28, lineHeight:1.1, letterSpacing:'-0.005em', fontWeight:500}}>
        {pack.name}
      </div>

      {/* Weight */}
      <div style={{
        marginTop:8,
        fontSize:11, fontWeight:700, letterSpacing:'0.18em', textTransform:'uppercase',
        color: isDark ? 'var(--gold-3)' : 'var(--gold-deep)',
      }}>{pack.range}</div>

      {/* Description */}
      <div style={{marginTop:14, fontSize:13.5, lineHeight:1.55,
        color: isDark ? 'rgba(244,236,220,0.78)' : 'var(--ink-soft)'}}>
        {pack.use}
      </div>
      <style>{`
        .pack-card-v1{ will-change: transform; }
      `}</style>
    </div>
  );
}

/* Package SVG — clean line-art pouches with subtle warm accent block */
function PackageGlyph({ kind, accent, dark, tone }) {
  const stroke = dark ? '#E9CF95' : '#0B1638';
  const fill = dark ? tone : '#FFFFFF';
  const block = accent;
  const items = [
    /* sachet */
    <svg key="0" width="80" height="110" viewBox="0 0 80 110">
      <rect x="14" y="6" width="52" height="5" fill={block}/>
      <path d="M14 11 L66 11 L62 100 L18 100 Z" fill={fill} stroke={stroke} strokeWidth="1.3"/>
      <rect x="28" y="44" width="24" height="14" fill={block} opacity="0.85"/>
      <line x1="28" y1="66" x2="52" y2="66" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
      <line x1="28" y1="72" x2="48" y2="72" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
    </svg>,
    /* daily pack — wider pouch with center stamp */
    <svg key="1" width="90" height="116" viewBox="0 0 90 116">
      <rect x="20" y="6" width="50" height="6" fill={block} rx="2"/>
      <path d="M16 12 L74 12 Q80 12 80 20 L76 104 Q76 110 68 110 L22 110 Q14 110 14 104 L10 20 Q10 12 16 12 Z" fill={fill} stroke={stroke} strokeWidth="1.3"/>
      <circle cx="45" cy="56" r="11" fill={block} opacity="0.9"/>
      <line x1="24" y1="80" x2="66" y2="80" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
      <line x1="24" y1="88" x2="56" y2="88" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
    </svg>,
    /* family — wider, fat block */
    <svg key="2" width="100" height="116" viewBox="0 0 100 116">
      <path d="M16 14 Q50 6 84 14 L86 24 L84 106 Q84 112 76 112 L24 112 Q16 112 16 106 L14 24 Z" fill={fill} stroke={stroke} strokeWidth="1.3"/>
      <rect x="26" y="44" width="48" height="22" fill={block} opacity="0.9"/>
      <line x1="32" y1="78" x2="68" y2="78" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
      <line x1="32" y1="86" x2="62" y2="86" stroke={stroke} strokeWidth="0.8" opacity="0.4"/>
    </svg>,
    /* bulk — gusset bag with 1KG label */
    <svg key="3" width="100" height="116" viewBox="0 0 100 116">
      <path d="M10 28 L20 16 L80 16 L90 28 L90 106 Q90 112 84 112 L16 112 Q10 112 10 106 Z" fill={fill} stroke={stroke} strokeWidth="1.3"/>
      <rect x="22" y="40" width="56" height="40" fill={block} opacity="0.9"/>
      <text x="50" y="65" fontFamily="Plus Jakarta Sans" fontSize="13" fontWeight="700" textAnchor="middle" fill={dark?tone:'#FFFFFF'} letterSpacing="2.5">1 KG</text>
    </svg>,
    /* gift — box with ribbon */
    <svg key="4" width="110" height="106" viewBox="0 0 110 106">
      <rect x="6" y="26" width="98" height="74" fill={fill} stroke={stroke} strokeWidth="1.3"/>
      <rect x="6" y="24" width="98" height="16" fill={block}/>
      <rect x="48" y="6" width="14" height="94" fill={block} opacity="0.95"/>
      <path d="M55 6 C 48 -2 40 6 48 12 M55 6 C 62 -2 70 6 62 12" fill={block} opacity="0.95"/>
    </svg>,
  ];
  return items[kind];
}

/* ====== School & Office — warm roast split with tabs ====== */
function SchoolOffice() {
  const [tab, setTab] = useStateM('school');
  const data = {
    school: {
      eyebrow:'For School Routines',
      h:'Easy portions for packed mornings.',
      body:'Neat, portion-friendly packs designed for busy mornings, lunchboxes, and after-school hunger — with clear ingredient and allergen visibility so families can choose what fits.',
      bullets:['No artificial colors','Allergen-friendly labelling','Resealable when needed','Kid-approved mixes'],
      cta:'View School Packs',
      img:'assets/school.webp',
      tag:'School Pack · 30g',
    },
    office: {
      eyebrow:'For Office Routines',
      h:'Desk-ready. Team-ready.',
      body:'Clean, convenient snacking for desk drawers, quick breaks, team sharing, and office pantries that need better everyday options. Easy to keep on hand through the week.',
      bullets:['Subscribe & restock weekly','Bulk team packs available','Branded corporate options','Less sugar, more substance'],
      cta:'Shop Office Packs',
      img:'assets/office.webp',
      tag:'Office Box · 12 packs',
    },
  };
  const d = data[tab];
  return (
    <section className="section bg-roast" style={{position:'relative', overflow:'hidden'}} data-screen-label="School & Office">
      <NutBgParticles density={6} opacity={0.18}/>
      <div className="wrap" style={{position:'relative'}}>
        <div style={{display:'flex', alignItems:'end', justifyContent:'space-between', gap:32, marginBottom:48, flexWrap:'wrap'}}>
          <Reveal>
            <Eyebrow light>For Busy Days</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(34px,4.2vw,90px)', lineHeight:1.05, marginTop:18, color:'var(--cream)',
              fontWeight:500, letterSpacing:'-0.005em', marginBottom:0}}>
              Made for lunchboxes,<br/>desks &amp; <span style={{fontStyle:'italic', color:'var(--gold-3)'}}>busy days.</span>
            </h2>
          </Reveal>
          <Reveal delay={100}>
            <div style={{display:'flex', gap:4, padding:5,
              background:'rgba(244,236,220,0.08)', borderRadius:6, border:'1px solid rgba(212,162,74,0.3)'}}>
              {[['school','School'],['office','Office']].map(([k,lbl])=>(
                <button key={k} onClick={()=>setTab(k)} style={{
                  padding:'12px 28px', borderRadius:4, border:'none', cursor:'pointer',
                  background: tab===k?'var(--saffron)':'transparent',
                  color: tab===k?'var(--ink)':'var(--cream)',
                  fontWeight:700, fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
                  transition:'all .25s', fontFamily:'inherit'
                }}>{lbl}</button>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal variant="slide-up">
          <div className="so-card" style={{
            display:'grid', gridTemplateColumns:'1.05fr 1fr', gap:0, alignItems:'stretch',
            borderRadius:'var(--r-lg)', overflow:'hidden',
            border:'1px solid rgba(212,162,74,0.25)', background:'rgba(244,236,220,0.04)'
          }}>
            <div style={{position:'relative', minHeight:520}}>
              <img key={d.img} src={d.img} alt=""
                style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', animation:'fadein .5s ease'}}/>
              <div style={{position:'absolute', inset:0, background:'linear-gradient(135deg, rgba(11,22,56,0.0) 50%, rgba(11,22,56,0.35))'}}/>
              <div style={{position:'absolute', left:24, bottom:24,
                background:'rgba(11,22,56,0.85)', backdropFilter:'blur(8px)',
                border:'1px solid rgba(212,162,74,0.4)', color:'var(--gold-3)',
                padding:'8px 14px', borderRadius:4,
                fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', fontWeight:700}}>{d.tag}</div>
            </div>
            <div style={{padding:'clamp(36px,5vw,64px)', display:'flex', flexDirection:'column', justifyContent:'center'}}>
              <Eyebrow light>{d.eyebrow}</Eyebrow>
              <h3 className="serif" style={{fontSize:'clamp(28px,3.2vw,68px)', lineHeight:1.1, marginTop:14, marginBottom:18,
                color:'var(--cream)', fontWeight:500}}>{d.h}</h3>
              <p style={{color:'rgba(244,236,220,0.78)', fontSize:16, lineHeight:1.65, margin:'0 0 24px', maxWidth:480}}>{d.body}</p>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                {d.bullets.map(b => (
                  <li key={b} style={{display:'flex', alignItems:'center', gap:10, fontSize:14, color:'var(--cream)'}}>
                    <span style={{width:5, height:5, borderRadius:99, background:'var(--saffron)'}}/>{b}
                  </li>
                ))}
              </ul>
              <div style={{display:'flex', gap:12, marginTop:36, flexWrap:'wrap'}}>
                <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>{d.cta} <Icon.Arrow/></a>
                <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>View Sachets</a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @keyframes fadein{ from{opacity:0;transform:scale(1.04)} to{opacity:1;transform:none} }
        @media (max-width:900px){ .so-card{ grid-template-columns:1fr !important; } }
      `}</style>
    </section>
  );
}

/* ====== Health — paper with warm-toned cards ====== */
function Health() {
  const groups = [
    { name:'Nuts',       img:'assets/benefits/nuts.webp',   pos:'50% 70%', icon:<NutSvg.Almond size={32}/>,
      copy:'Plant protein, fiber, and mostly unsaturated fats. A handful makes a satisfying, practical addition to balanced eating.',
      stats:[['~6g','protein / 30g'],['Plant fats','heart-friendly'],['Fiber-rich','satiety']] },
    { name:'Dry Fruits', img:'assets/benefits/dryfruits.webp', pos:'85% 75%', icon:<NutSvg.Cashew size={36}/>,
      copy:'Fruit-based sweetness and fiber in a pantry-friendly format. More concentrated than fresh fruit — smaller portions go a long way.',
      stats:[['Natural','no added syrup'],['Iron & K+','daily minerals'],['Fiber-dense','digestion']] },
    { name:'Dates',      img:'assets/benefits/dates.webp',    pos:'88% 75%', icon:<NutSvg.Date size={28}/>,
      copy:'Natural sweetness with fiber and potassium — perfect for snack plates, coffee breaks, and mindful portioned snacking.',
      stats:[['Quick energy','natural sugars'],['Potassium','daily balance'],['Pairs with','milk, coffee, nuts']] },
    { name:'Spices',     img:'assets/benefits/spices.webp',  pos:'30% 60%', icon:<NutSvg.Saffron size={32}/>,
      copy:'Add aroma and depth to food — helping create fuller flavor without depending on salt-heavy seasonings.',
      stats:[['Aromatic','complex flavor'],['Less salt','better seasoning'],['Whole &','fresh ground']] },
  ];
  return (
    <section className="section bg-pattern-cream" data-screen-label="Health">
      <div className="wrap">
        <Reveal>
          <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 56px'}}>
            <Eyebrow align="center">Simple Ingredients</Eyebrow>
            <h2 className="serif" style={{fontSize:'clamp(34px,4.2vw,90px)', lineHeight:1.05, marginTop:18, marginBottom:18,
              color:'var(--ink)', fontWeight:500, letterSpacing:'-0.005em'}}>
              Thoughtful everyday benefits, <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>plainly said.</span>
            </h2>
            <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.6, margin:0}}>
              Health language stays calm and clear. The point isn't to overpromise — it's to help
              people see why nuts, dry fruits, dates and spices belong in balanced daily routines.
            </p>
          </div>
        </Reveal>

        <div className="grid-4">
          {groups.map((g, i)=>(
            <Reveal key={g.name} delay={i*80} variant="slide-up">
              <div className="health-card tilt-glow" style={{
                background:'#fff', borderRadius:'var(--r-md)', overflow:'hidden',
                border:'1px solid rgba(139,106,40,0.14)',
                height:'100%', display:'flex', flexDirection:'column'
              }}>
                <div style={{position:'relative', aspectRatio:'4/3', overflow:'hidden'}}>
                  <img src={g.img} alt="" style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:g.pos,
                    transition:'transform .8s ease'}} className="hc-img"/>
                  <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, transparent 50%, rgba(7,14,36,0.7))'}}/>
                  <span style={{position:'absolute', top:14, right:14, filter:'drop-shadow(0 4px 6px rgba(0,0,0,0.3))'}}>
                    {g.icon}
                  </span>
                  <div style={{position:'absolute', left:20, bottom:16, color:'var(--cream)'}}>
                    <div style={{fontSize:10.5, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-3)', fontWeight:700}}>0{i+1}</div>
                    <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:32, lineHeight:1, marginTop:4}}>{g.name}</div>
                  </div>
                </div>
                <div style={{padding:'22px 24px 24px', flex:1, display:'flex', flexDirection:'column'}}>
                  <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-soft)', margin:0, flex:1}}>{g.copy}</p>
                  <div style={{marginTop:20, paddingTop:16, borderTop:'1px dashed rgba(7,15,42,0.15)', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8}}>
                    {g.stats.map(([a,b])=>(
                      <div key={a}>
                        <div style={{fontFamily:"'Cormorant Garamond',serif", color:'var(--ink)', fontSize:17, lineHeight:1.1, fontWeight:500}}>{a}</div>
                        <div style={{fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--gold-deep)', marginTop:3, fontWeight:600}}>{b}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <p style={{textAlign:'center', marginTop:40, fontSize:12, color:'rgba(7,15,42,0.55)', fontStyle:'italic', maxWidth:640, marginInline:'auto'}}>
            Nutritional notes are intended as general ingredient guidance, not medical advice.
          </p>
        </Reveal>
      </div>
      <style>{`.health-card:hover .hc-img{ transform: scale(1.06); }`}</style>
    </section>
  );
}

Object.assign(window, { PackSizes, PackCardV1, SchoolOffice, Health });