// v3 mid sections — brand intro, why-choose, pack sizes (v1 restored), school/office, health
const { useState: useStateM } = React;

/* ====== Brand intro — warm roast tone ====== */
function BrandIntro() {
  return (
    <section className="section bg-roast" style={{position:'relative', overflow:'hidden'}} data-screen-label="Brand Intro">
      <div style={{position:'absolute', inset:0, opacity:0.05, pointerEvents:'none',
        backgroundImage:'radial-gradient(rgba(212,162,74,0.8) 1px, transparent 1.2px)', backgroundSize:'32px 32px'}}/>
      {/* drifting nuts */}
      <NutBgParticles density={7} opacity={0.22}/>

      <div className="wrap split-2" style={{position:'relative', gap:'clamp(48px,7vw,96px)'}}>
        <Reveal>
          <div style={{position:'relative', aspectRatio:'4/5', maxWidth:'clamp(380px, 36vw, 700px)'}}>
            <img src="assets/poster-jar.png" alt="Saffron-honey soaked nuts and dry fruits"
              style={{width:'100%', height:'100%', objectFit:'cover', borderRadius:'var(--r-lg)',
              boxShadow:'0 50px 100px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,162,74,0.25)'}}/>
            <div style={{position:'absolute', right:-18, top:24,
              background:'var(--saffron)', color:'var(--ink)',
              padding:'14px 18px', borderRadius:6, boxShadow:'0 24px 50px -18px rgba(0,0,0,0.5)',
              transform:'rotate(2deg)'}}>
              <div style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', fontWeight:700}}>Signature</div>
              <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:22, lineHeight:1, marginTop:4}}>Saffron-Honey Jar</div>
            </div>
            <div style={{position:'absolute', left:-24, bottom:-24,
              fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic',
              color:'var(--gold-3)', fontSize:140, lineHeight:0.8, opacity:0.85,
              pointerEvents:'none', userSelect:'none'}}>01</div>
            {/* floating accent nuts */}
            <span className="nut-float" style={{position:'absolute', top:'-3%', left:'-6%', filter:'drop-shadow(0 6px 10px rgba(0,0,0,0.4))'}}>
              <NutSvg.Almond size={36}/>
            </span>
            <span className="nut-float b" style={{position:'absolute', top:'58%', right:'-5%', animationDelay:'-2s'}}>
              <NutSvg.Pistachio size={38}/>
            </span>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <Eyebrow light>The Nuts Hub Promise</Eyebrow>
          <h2 className="serif" style={{fontSize:'clamp(34px,4.2vw,90px)', lineHeight:1.05, fontWeight:500,
            color:'var(--cream)', letterSpacing:'-0.005em', marginTop:22, marginBottom:24}}>
            A premium destination<br/>for{' '}
            <span style={{fontStyle:'italic', color:'var(--gold-3)'}}>everyday goodness.</span>
          </h2>
          <p style={{fontSize:17, lineHeight:1.65, color:'rgba(244,236,220,0.82)', maxWidth:'clamp(360px, 32vw, 620px)', margin:0}}>
            We bring together the essentials people return to again and again: premium nuts,
            naturally sweet dry fruits, quality dates, aromatic spices, and ready-to-enjoy
            snack mixes. Selected to make daily snacking easier, pantry shelves better
            stocked, and gifting more thoughtful.
          </p>

          <div style={{marginTop:40, display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0,
            borderTop:'1px solid rgba(212,162,74,0.22)', borderBottom:'1px solid rgba(212,162,74,0.22)'}}>
            {[
              ['By category','Nuts · Dates · Spices'],
              ['By need','Sachets · Family · Bulk'],
              ['By occasion','Personal · Festive · Corporate'],
            ].map(([a,b], i)=>(
              <div key={a} style={{padding:'22px 18px',
                borderRight: i<2 ? '1px solid rgba(212,162,74,0.22)' : 'none'}}>
                <div style={{fontSize:10.5, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-3)', fontWeight:600}}>{a}</div>
                <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:20, marginTop:6, color:'var(--cream)', lineHeight:1.2}}>{b}</div>
              </div>
            ))}
          </div>

          <div style={{display:'flex', gap:12, marginTop:32, flexWrap:'wrap'}}>
            <a className="btn btn-gold" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>Shop Bestsellers <Icon.Arrow/></a>
            <a className="btn btn-ghost" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>Our Story</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ====== Why Choose — paper with warm cards ====== */
function WhyChoose() {
  const usps = [
    { icon:<Icon.Sun/>,     title:'Selected for flavor', body:'Every category is chosen for how it tastes, feels and smells — never treated as a commodity.' },
    { icon:<Icon.Box/>,     title:'Pack sizes that fit life', body:'From pocket sachets to family pouches, bulk formats and gift boxes — each size for a practical moment.' },
    { icon:<Icon.Leaf/>,    title:'A stronger spice story', body:'Spices get the same attention as nuts — focused on aroma, freshness and kitchen usefulness.' },
    { icon:<Icon.Sparkle/>, title:'Snack, pantry & gifting', body:'Everyday essentials, office packs, lunchbox portions and gifting — all in one clear brand.' },
    { icon:<Icon.Shield/>,  title:'Calm, credible info', body:'Clear weights, straightforward ingredients, visible allergen notes — buy with confidence.' },
    { icon:<Icon.Weight/>,  title:'Built for routines', body:'Portion-friendly formats designed for lunchboxes, desk drawers, meetings and travel days.' },
    { icon:<Icon.Heart/>,   title:'Premium, not theatrical', body:'We speak through ingredient quality and freshness — not vague wellness or inflated luxury.' },
    { icon:<Icon.Gift/>,    title:'Gifting with substance', body:'Boxes designed to feel polished and generous — with contents people genuinely want to enjoy.' },
  ];
  return (
    <section className="section bg-pattern-cream" data-screen-label="Why Choose">
      <div className="wrap">
        <Reveal>
          <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 64px'}}>
            <Eyebrow align="center">Why Choose Nuts Hub</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'}}>
              Eight reasons we earn<br/>
              <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>shelf space.</span>
            </h2>
            <p style={{color:'var(--ink-soft)', fontSize:16, lineHeight:1.6, margin:0}}>
              Premium quality means more when it's easy to taste, easy to trust, and easy to fit into everyday life.
            </p>
          </div>
        </Reveal>

        <div className="usp-grid">
          {usps.map((u, i)=>(
            <Reveal key={u.title} delay={i*50} variant="slide-up">
              <div className="usp-card tilt-glow" style={{
                padding:'32px 28px', height:'100%',
                background:'#fff',
                border:'1px solid rgba(139,106,40,0.14)',
                borderRadius:'var(--r-md)', position:'relative',
              }}>
                <div style={{width:48, height:48, borderRadius:8,
                  background:'var(--saffron)', color:'var(--ink)',
                  display:'grid', placeItems:'center', marginBottom:18}}>{u.icon}</div>
                <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:24, lineHeight:1.2, color:'var(--ink)', marginBottom:10}}>{u.title}</div>
                <div style={{fontSize:14, lineHeight:1.6, color:'var(--ink-soft)'}}>{u.body}</div>
                <div style={{position:'absolute', top:20, right:24, fontFamily:"'Cormorant Garamond',serif", fontStyle:'italic', color:'var(--gold-deep)', fontSize:16, opacity:0.75}}>0{i+1}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .usp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
        @media (max-width:1024px){ .usp-grid{ grid-template-columns:repeat(2,1fr); } }
        @media (max-width:600px){ .usp-grid{ grid-template-columns:1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { BrandIntro, WhyChoose });