// v3 Hero — warm cream with floating nuts, bowl-breathe, conversion CTAs
function Hero() {
  return (
    <section data-screen-label="Hero" style={{
      position:'relative', overflow:'hidden',
      background:`
        radial-gradient(1000px 600px at 75% 30%, rgba(212,162,74,0.16), transparent 60%),
        radial-gradient(900px 700px at 10% 100%, rgba(218,166,90,0.18), transparent 60%),
        linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%)
      `,
      color:'var(--ink)',
      paddingTop:'clamp(40px,5vw,72px)',
      paddingBottom:'clamp(64px,7vw,120px)',
    }}>
      {/* faint pattern */}
      <div style={{position:'absolute', inset:0, opacity:0.06, pointerEvents:'none',
        backgroundImage:'radial-gradient(rgba(139,106,40,0.7) 1px, transparent 1.2px)',
        backgroundSize:'32px 32px'}}/>
      {/* floating nut particles in bg */}
      <NutBgParticles density={9} opacity={0.45}/>
      {/* corner ornament */}
      <svg width="180" height="180" viewBox="0 0 180 180" style={{position:'absolute', top:40, right:48, opacity:0.18, pointerEvents:'none'}}>
        <g stroke="var(--gold-deep)" strokeWidth="1" fill="none">
          <circle cx="90" cy="90" r="70"/><circle cx="90" cy="90" r="55"/>
          <path d="M90 20 V160 M20 90 H160"/>
        </g>
      </svg>

      <div className="wrap split-2" style={{position:'relative', alignItems:'center'}}>
        <Reveal>
          <Eyebrow>Premium Pantry · UAE</Eyebrow>
          <h1 className="serif" style={{
            fontSize:'clamp(44px,5.4vw,132px)', lineHeight:1.0, fontWeight:500,
            letterSpacing:'-0.015em', marginTop:24, marginBottom:24, color:'var(--ink)',
          }}>
            Premium Nuts,<br/>
            Dry Fruits, Dates<br/>
            <span style={{fontStyle:'italic', color:'var(--gold-deep)'}}>&amp; Spices.</span>
          </h1>
          <p style={{fontSize:'clamp(15px,1.05vw,24px)', lineHeight:1.65,
            color:'var(--ink-soft)', maxWidth:520, margin:'0 0 36px'}}>
            From quick snack sachets and lunchbox packs to family pouches,
            bulk essentials, and elegant gift boxes — one premium destination for everyday living.
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
            <a className="btn btn-gold btn-lg" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>
              Shop the Collection <Icon.Arrow/>
            </a>
            <a className="btn btn-ghost-dark btn-lg" href="#" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }}>
              Explore Gifting
            </a>
          </div>

          <div style={{marginTop:48, paddingTop:32, borderTop:'1px solid rgba(139,106,40,0.22)'}}>
            <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:16,
              fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase',
              color:'var(--ink-soft)', fontWeight:600}}>
              <span>Popular categories</span>
              <span style={{flex:1, height:1, background:'rgba(139,106,40,0.18)'}}/>
            </div>
            <div style={{display:'flex', gap:24, flexWrap:'wrap'}}>
              {['Nuts','Dates','Dry Fruits','Spices','Gifting'].map(t => (
                <a key={t} href="" onClick={(e) => { e.preventDefault(); window.navigateTo('maintenance'); }} style={{
                  color:'var(--ink)', textDecoration:'none',
                  fontFamily:"'Cormorant Garamond',serif", fontSize:22, fontWeight:500
                }}>
                  <span className="u-draw">{t}</span>
                </a>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <HeroVisual/>
        </Reveal>
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div style={{position:'relative', aspectRatio:'1/1.05', maxWidth:'clamp(420px, 42vw, 820px)', marginLeft:'auto'}}>
      {/* breathing bowl */}
      <div className="bowl-breathe" style={{
        position:'absolute', inset:'4%',
        borderRadius:'50%', overflow:'hidden',
        boxShadow:'0 50px 100px -30px rgba(11,22,56,0.45), 0 0 0 1px rgba(139,106,40,0.25)',
        transformOrigin:'center',
      }}>
        <img src="assets/hero-section.webp" alt="Premium nuts, dates and chocolates"
          style={{width:'100%', height:'100%', objectFit:'cover'}}/>
      </div>

      {/* slow rotating dashed ring */}
      <div className="ring-spin-slow" style={{
        position:'absolute', inset:'-3%',
        borderRadius:'50%', border:'1px dashed rgba(200,162,78,0.45)', pointerEvents:'none'
      }}/>
      {/* solid hairline ring */}
      <div style={{position:'absolute', inset:'-1%', borderRadius:'50%',
        border:'1px solid rgba(139,106,40,0.3)', pointerEvents:'none'}}/>

      {/* floating nuts orbiting */}
      <span className="nut-float" style={{position:'absolute', top:'-2%', left:'15%', filter:'drop-shadow(0 8px 12px rgba(11,22,56,0.25))'}}>
        <NutSvg.Almond size={42}/>
      </span>
      <span className="nut-float b" style={{position:'absolute', top:'8%', right:'-2%', animationDelay:'-2s', filter:'drop-shadow(0 8px 12px rgba(11,22,56,0.25))'}}>
        <NutSvg.Cashew size={48}/>
      </span>
      <span className="nut-float c" style={{position:'absolute', bottom:'10%', left:'-4%', animationDelay:'-1s', filter:'drop-shadow(0 8px 12px rgba(11,22,56,0.25))'}}>
        <NutSvg.Pistachio size={46}/>
      </span>
      <span className="nut-float" style={{position:'absolute', bottom:'-2%', right:'18%', animationDelay:'-3s', filter:'drop-shadow(0 8px 12px rgba(11,22,56,0.25))'}}>
        <NutSvg.Date size={32}/>
      </span>
      <span className="nut-float b" style={{position:'absolute', top:'42%', right:'-7%', animationDelay:'-4s', filter:'drop-shadow(0 6px 10px rgba(11,22,56,0.25))'}}>
        <NutSvg.Walnut size={40}/>
      </span>

      {/* Signature chip */}
      <div style={{
        position:'absolute', top:'6%', left:'-4%',
        background:'var(--paper)', border:'1px solid rgba(139,106,40,0.35)',
        padding:'14px 18px', borderRadius:8,
        boxShadow:'0 24px 50px -18px rgba(11,22,56,0.35)',
      }}>
        <div style={{fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--gold-deep)', fontWeight:700}}>Signature Jar</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:22, marginTop:4, color:'var(--ink)'}}>Saffron-Honey</div>
        <div style={{fontSize:11, color:'var(--ink-soft)', marginTop:2}}>400g · limited stock</div>
      </div>

      {/* Trust chip */}
      <div style={{
        position:'absolute', bottom:'6%', right:'-4%',
        background:'var(--paper)', border:'1px solid rgba(139,106,40,0.35)',
        padding:'12px 18px', borderRadius:8,
        boxShadow:'0 24px 50px -18px rgba(11,22,56,0.35)',
        display:'flex', alignItems:'center', gap:14
      }}>
        <div style={{display:'flex'}}>
          {['#7E5832','#B88C4E','#3A4F8A','#A5733B'].map((c,i)=>(
            <div key={i} style={{width:26, height:26, borderRadius:99, background:c, border:'2px solid var(--paper)', marginLeft:i?-9:0}}/>
          ))}
        </div>
        <div>
          <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:22, color:'var(--ink)', lineHeight:1}}>12k+</div>
          <div style={{fontSize:10.5, color:'var(--ink-soft)', marginTop:2, letterSpacing:'0.1em', textTransform:'uppercase'}}>UAE homes &amp; offices</div>
        </div>
      </div>

      {/* free delivery sticker */}
      <div style={{
        position:'absolute', top:'46%', right:'-8%',
        background:'var(--saffron)', color:'var(--ink)',
        padding:'12px 14px', borderRadius:8,
        boxShadow:'0 20px 40px -16px rgba(212,162,74,0.5)',
        transform:'rotate(-3deg)',
      }}>
        <div style={{fontSize:10, letterSpacing:'0.2em', fontWeight:700, textTransform:'uppercase'}}>Free Delivery</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif", fontSize:18, lineHeight:1, marginTop:4}}>Over AED 150</div>
      </div>
    </div>
  );
}

/* ====== Trust strip ====== */
function TrustStrip() {
  const items = [
    [<Icon.Sparkle key="0"/>, 'Hand-selected at origin'],
    [<Icon.Shield key="1"/>, 'Hygienically sealed packs'],
    [<Icon.Weight key="2"/>, 'Honest pack weights'],
    [<Icon.Truck key="3"/>,  'UAE-wide delivery'],
    [<Icon.Gift key="4"/>,   'Gift-ready presentation'],
  ];
  return (
    <section style={{background:'var(--cream)', borderTop:'1px solid rgba(139,106,40,0.10)', borderBottom:'1px solid rgba(139,106,40,0.10)'}}>
      <div className="wrap" style={{padding:'clamp(18px, 1.3vw, 26px) 0', display:'flex', justifyContent:'space-between', gap:24, alignItems:'center', flexWrap:'wrap'}}>
        {items.map(([ic, lbl])=>(
          <div key={lbl} style={{display:'flex', alignItems:'center', gap:12, color:'var(--ink)'}}>
            <span style={{color:'var(--gold-deep)'}}>{ic}</span>
            <span style={{fontSize:13, fontWeight:600, letterSpacing:'0.02em'}}>{lbl}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroVisual, TrustStrip });