// v3 primitives — warm palette, nut SVGs, floating particle bg
const { useEffect: useEffect3p, useRef: useRef3p, useState: useState3p } = React;

/* === Logo === */
function NBMark({ size = 40, color = "currentColor" }) {
  return (
    <svg width={size} height={size} viewBox="0 0 80 80" fill="none" aria-hidden="true">
      <circle cx="40" cy="40" r="36" stroke={color} strokeWidth="3" />
      <path d="M22 52 V32 c0-3 2-5 5-5 s5 2 5 5 v20" stroke={color} strokeWidth="3.5" strokeLinecap="round" fill="none"/>
      <path d="M42 22 V52" stroke={color} strokeWidth="3.5" strokeLinecap="round"/>
      <ellipse cx="51" cy="44" rx="10" ry="8" stroke={color} strokeWidth="3.5" fill="none"/>
    </svg>
  );
}
function Logo({ light=false, compact=false }) {
  const color = light ? "var(--cream)" : "var(--ink)";
  const sub = light ? "rgba(244,236,220,0.6)" : "rgba(7,15,42,0.55)";
  return (
    <div style={{display:'flex', alignItems:'center', gap:12}}>
      <NBMark size={compact?32:38} color={color} />
      <div style={{lineHeight:0.95}}>
        <div className="wordmark" style={{color, fontSize:compact?19:22, letterSpacing:'-0.01em'}}>nuts hub</div>
        <div style={{
          marginTop:5, fontSize:8.5, letterSpacing:'0.28em',
          color:sub, textTransform:'uppercase', fontWeight:600
        }}>Premium Pantry · UAE</div>
      </div>
    </div>
  );
}

/* === Eyebrow with hairline === */
function Eyebrow({ children, light=false, align='left', tone }) {
  const c = tone || (light ? 'var(--gold-3)' : 'var(--gold-deep)');
  return (
    <div style={{
      display:'flex', alignItems:'center', gap:14, color:c,
      justifyContent: align==='center' ? 'center' : 'flex-start'
    }}>
      <span style={{width:32, height:1, background:'currentColor', opacity:0.7}}/>
      <span style={{fontSize:11, letterSpacing:'0.28em', textTransform:'uppercase', fontWeight:600}}>{children}</span>
      {align==='center' && <span style={{width:32, height:1, background:'currentColor', opacity:0.7}}/>}
    </div>
  );
}

/* === Icons === */
const Icon = {
  Search:(p)=> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  User:(p)=>   <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg>,
  Heart:(p)=>  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M12 21s-7-4.5-9.5-9C.8 8.5 3 4.5 7 4.5c2 0 3.5 1.2 5 3 1.5-1.8 3-3 5-3 4 0 6.2 4 4.5 7.5C19 16.5 12 21 12 21Z"/></svg>,
  Bag:(p)=>    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M5 8h14l-1.2 12a2 2 0 0 1-2 1.8H8.2A2 2 0 0 1 6.2 20Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>,
  Arrow:(p)=>  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>,
  ArrowUR:(p)=><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M7 17 17 7M9 7h8v8"/></svg>,
  Plus:(p)=>   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M12 5v14M5 12h14"/></svg>,
  Minus:(p)=>  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...p}><path d="M5 12h14"/></svg>,
  Truck:(p)=>  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.8"/><circle cx="17" cy="18" r="1.8"/></svg>,
  Leaf:(p)=>   <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M4 20s2-12 16-16c0 8-4 16-12 16M4 20c4-5 8-7 12-8"/></svg>,
  Gift:(p)=>   <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="9" width="18" height="11" rx="1.5"/><path d="M3 13h18M12 9v11M8 9a2.5 2.5 0 0 1 0-5c2 0 4 5 4 5s-2 0-4 0Zm8 0a2.5 2.5 0 0 0 0-5c-2 0-4 5-4 5s2 0 4 0Z"/></svg>,
  Shield:(p)=> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 3 4 6v6c0 5 4 8 8 9 4-1 8-4 8-9V6Z"/><path d="m9 12 2 2 4-4"/></svg>,
  Sparkle:(p)=><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M6 18l3-3"/></svg>,
  Weight:(p)=> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 8h14l-1 12H6Z"/><circle cx="12" cy="5" r="2"/></svg>,
  Box:(p)=>    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="m3 7 9-4 9 4-9 4Z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>,
  Sun:(p)=>    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/></svg>,
  Insta:(p)=>  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></svg>,
  Fb:(p)=>     <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M13 22v-8h3l1-4h-4V7.5c0-1.2.4-2 2-2h2V2.1C16.6 2 15.6 2 14.6 2 12 2 10 3.6 10 6.9V10H7v4h3v8Z"/></svg>,
  Tiktok:(p)=> <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M16 3c.6 2.6 2.4 4.3 5 4.6v3c-1.9 0-3.6-.6-5-1.6V16a6 6 0 1 1-6-6v3a3 3 0 1 0 3 3V3Z"/></svg>,
  Pin:(p)=>    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M12 21s-7-7-7-12a7 7 0 0 1 14 0c0 5-7 12-7 12Z"/><circle cx="12" cy="9" r="2.5"/></svg>,
  Phone:(p)=>  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>,
  Mail:(p)=>   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 7 9-7"/></svg>,
  Menu:(p)=>   <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>,
  X:(p)=>      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}><path d="M6 6l12 12M18 6 6 18"/></svg>,
};

/* === Nut illustrations (small, decorative) === */
const NutSvg = {
  Almond: ({size=36, ...rest}) => (
    <svg width={size} height={size*1.4} viewBox="0 0 50 70" {...rest}>
      <defs>
        <radialGradient id="alm-g" cx="35%" cy="35%">
          <stop offset="0" stopColor="#E6B97A"/>
          <stop offset="0.6" stopColor="#B07A3E"/>
          <stop offset="1" stopColor="#6E4220"/>
        </radialGradient>
      </defs>
      <ellipse cx="25" cy="35" rx="14" ry="28" fill="url(#alm-g)" stroke="#5C3214" strokeWidth="1"/>
      <path d="M25 8 Q22 35 25 62" stroke="#5C3214" strokeWidth="0.8" fill="none" opacity="0.5"/>
      <ellipse cx="20" cy="22" rx="4" ry="6" fill="rgba(255,240,210,0.35)"/>
    </svg>
  ),
  Cashew: ({size=44, ...rest}) => (
    <svg width={size} height={size*0.7} viewBox="0 0 60 42" {...rest}>
      <defs>
        <linearGradient id="csh-g" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#F0CA8A"/>
          <stop offset="0.6" stopColor="#C99A52"/>
          <stop offset="1" stopColor="#8A5A2C"/>
        </linearGradient>
      </defs>
      <path d="M8 20 C 6 6, 22 0, 32 8 C 40 14, 50 14, 54 26 C 56 36, 42 40, 30 36 C 20 32, 14 32, 10 28 Z" fill="url(#csh-g)" stroke="#6E4220" strokeWidth="1"/>
      <path d="M14 16 Q 28 12 50 24" stroke="#6E4220" strokeWidth="0.8" fill="none" opacity="0.5"/>
    </svg>
  ),
  Pistachio: ({size=40, ...rest}) => (
    <svg width={size} height={size*0.9} viewBox="0 0 50 45" {...rest}>
      <defs>
        <radialGradient id="pst-g" cx="50%" cy="40%">
          <stop offset="0" stopColor="#B5C892"/>
          <stop offset="0.55" stopColor="#7B9C5F"/>
          <stop offset="1" stopColor="#3F5A2B"/>
        </radialGradient>
        <linearGradient id="pst-shell" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#E5C99A"/>
          <stop offset="1" stopColor="#A07B4A"/>
        </linearGradient>
      </defs>
      <ellipse cx="25" cy="22" rx="18" ry="15" fill="url(#pst-shell)" stroke="#7A5630" strokeWidth="1"/>
      <ellipse cx="25" cy="22" rx="9" ry="10" fill="url(#pst-g)" stroke="#4B6936" strokeWidth="0.6"/>
      <path d="M22 13 Q 25 22 22 32" stroke="#3F5A2B" strokeWidth="0.6" fill="none" opacity="0.6"/>
    </svg>
  ),
  Walnut: ({size=42, ...rest}) => (
    <svg width={size} height={size} viewBox="0 0 50 50" {...rest}>
      <defs>
        <radialGradient id="wln-g" cx="35%" cy="35%">
          <stop offset="0" stopColor="#D1A36A"/>
          <stop offset="1" stopColor="#6E4220"/>
        </radialGradient>
      </defs>
      <ellipse cx="25" cy="25" rx="20" ry="18" fill="url(#wln-g)" stroke="#4F2C15" strokeWidth="1"/>
      <path d="M25 7 Q 20 25 25 43 M10 18 Q 25 22 40 18 M10 32 Q 25 28 40 32 M16 10 Q 18 25 16 40 M34 10 Q 32 25 34 40" stroke="#4F2C15" strokeWidth="0.7" fill="none" opacity="0.55"/>
    </svg>
  ),
  Date: ({size=32, ...rest}) => (
    <svg width={size} height={size*1.5} viewBox="0 0 40 60" {...rest}>
      <defs>
        <radialGradient id="dt-g" cx="40%" cy="30%">
          <stop offset="0" stopColor="#A0633A"/>
          <stop offset="0.55" stopColor="#5A3018"/>
          <stop offset="1" stopColor="#2A1608"/>
        </radialGradient>
      </defs>
      <ellipse cx="20" cy="30" rx="13" ry="24" fill="url(#dt-g)" stroke="#1F1004" strokeWidth="0.8"/>
      <ellipse cx="16" cy="20" rx="3" ry="5" fill="rgba(255,210,160,0.3)"/>
    </svg>
  ),
  Saffron: ({size=36, ...rest}) => (
    <svg width={size} height={size} viewBox="0 0 40 40" {...rest}>
      <g stroke="#9A2C0A" strokeWidth="1.4" fill="none" strokeLinecap="round">
        <path d="M8 32 Q 14 14 22 8"/>
        <path d="M12 30 Q 18 20 28 12"/>
        <path d="M16 34 Q 22 22 32 18"/>
      </g>
      <g stroke="#E89B2A" strokeWidth="0.7" fill="none" strokeLinecap="round" opacity="0.85">
        <path d="M9 31 Q 15 15 21 9"/>
        <path d="M13 29 Q 19 21 27 13"/>
      </g>
    </svg>
  ),
};

/* === Background nut particles (small floating SVGs) === */
function NutBgParticles({ density=8, opacity=0.35 }) {
  const items = [];
  const variants = ['Almond','Cashew','Pistachio','Walnut','Date'];
  for (let i=0; i<density; i++) {
    const v = variants[i % variants.length];
    const Comp = NutSvg[v];
    const left = (i * 13 + 7) % 100;
    const top  = (i * 21 + 11) % 100;
    const size = 22 + ((i*7)%18);
    const dur  = 9 + ((i*1.7)%6);
    const delay = -((i*1.3) % dur);
    const rot = ((i*53)%360);
    items.push(
      <span key={i} style={{
        position:'absolute',
        left:`${left}%`, top:`${top}%`,
        opacity, transform:`rotate(${rot}deg)`,
        animation:`nut-float-${i%3===0?'a':i%3===1?'b':'c'} ${dur}s ease-in-out infinite`,
        animationDelay:`${delay}s`,
        pointerEvents:'none',
      }}>
        <Comp size={size}/>
      </span>
    );
  }
  return (
    <div className="nut-bg-particles" aria-hidden="true" style={{
      position:'absolute', inset:0, overflow:'hidden', pointerEvents:'none', zIndex:0,
    }}>
      {items}
    </div>
  );
}

/* === Reveal (basic + variants) === */
function Reveal({ children, delay=0, variant='', as: Tag='div', style, ...rest }) {
  const ref = useRef3p(null);
  useEffect3p(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{
        if (e.isIntersecting) {
          setTimeout(()=>el.classList.add('is-in'), delay);
          io.disconnect();
        }
      });
    }, { threshold: 0.12, rootMargin:'0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <Tag ref={ref} className={`reveal ${variant}`} style={style} {...rest}>{children}</Tag>;
}

Object.assign(window, { NBMark, Logo, Eyebrow, Icon, NutSvg, NutBgParticles, Reveal });
