/* ============================================================
   RUDRAA RATNA — shared UI, icons & procedural gem art
   ============================================================ */
const { useState, useEffect, useRef, useId, useContext, createContext } = React;

/* ---------------- Navigation context ---------------- */
const Nav = createContext({ go:()=>{}, route:{page:'home'} });
function rrRouteHref(page, params={}){
  return (window.RRSEO && RRSEO.href) ? RRSEO.href(page, params) : '#';
}
function rrImgSrc(src){
  if(!src) return '';
  if(location.protocol === 'file:' && String(src).charAt(0)==='/') return String(src).slice(1);
  return src;
}
function rrProductAlt(p){
  if(!p) return 'Rudraa Ratna product image';
  const parts = [p.name, p.catLabel, 'Rudraa Ratna'];
  return parts.filter(Boolean).join(' - ');
}

/* ---------------- Icons ---------------- */
const I = {
  menu:   <path d="M3 6h18M3 12h18M3 18h18" />,
  close:  <path d="M6 6l12 12M18 6L6 18" />,
  search: <g><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></g>,
  cart:   <g><path d="M5 7h14l-1.5 11.5a2 2 0 0 1-2 1.5H8.5a2 2 0 0 1-2-1.5L5 7Z"/><path d="M9 7a3 3 0 0 1 6 0"/></g>,
  heart:  <path d="M12 20s-7-4.5-7-9.5A3.5 3.5 0 0 1 12 7a3.5 3.5 0 0 1 7 3.5C19 15.5 12 20 12 20Z"/>,
  star:   <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9L12 3.5Z"/>,
  chevR:  <path d="M9 6l6 6-6 6"/>,
  chevD:  <path d="M6 9l6 6 6-6"/>,
  arrow:  <g><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></g>,
  check:  <path d="M5 12.5l4.5 4.5L19 7"/>,
  wa:     <path d="M12.04 2C6.6 2 2.2 6.4 2.2 11.84c0 1.96.52 3.78 1.42 5.36L2 22l4.96-1.58a9.8 9.8 0 0 0 5.08 1.4h.01c5.43 0 9.83-4.4 9.83-9.84C21.88 6.4 17.48 2 12.04 2Zm5.78 14.02c-.24.68-1.4 1.32-1.94 1.36-.5.04-.5.4-3.14-.66-2.66-1.06-4.3-3.78-4.42-3.96-.12-.18-1.04-1.38-1.04-2.64 0-1.26.66-1.88.9-2.14.24-.26.52-.32.7-.32l.5.01c.16.01.38-.06.6.46.24.56.8 1.94.86 2.08.06.14.1.3.02.48-.08.18-.12.3-.24.46-.12.16-.26.36-.36.48-.12.14-.24.3-.1.54.14.24.62 1.02 1.32 1.66.92.82 1.68 1.08 1.92 1.2.24.12.38.1.52-.06.14-.16.6-.7.76-.94.16-.24.32-.2.54-.12.22.08 1.4.66 1.64.78.24.12.4.18.46.28.06.1.06.58-.18 1.26Z"/>,
  shield: <path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3Z"/>,
  truck:  <g><path d="M3 7h11v8H3z"/><path d="M14 10h4l3 3v2h-7z"/><circle cx="7" cy="17" r="1.6"/><circle cx="17.5" cy="17" r="1.6"/></g>,
  cert:   <g><circle cx="12" cy="10" r="5"/><path d="M9 14l-1.5 6L12 18l4.5 2L15 14"/></g>,
  pin:    <g><path d="M12 21s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11Z"/><circle cx="12" cy="10" r="2.5"/></g>,
  phone:  <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L20 13l1 4v2a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-1Z"/>,
  mail:   <g><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></g>,
  clock:  <g><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></g>,
  spark:  <path d="M12 3l1.6 5.4L19 10l-5.4 1.6L12 17l-1.6-5.4L5 10l5.4-1.6L12 3Z"/>,
  hand:   <g><path d="M7 11V6a1.5 1.5 0 0 1 3 0v4"/><path d="M10 10V4.5a1.5 1.5 0 0 1 3 0V10"/><path d="M13 10V5.5a1.5 1.5 0 0 1 3 0V12"/><path d="M16 9.5a1.5 1.5 0 0 1 3 0V15a6 6 0 0 1-6 6h-1.5a6 6 0 0 1-5-2.7L7 14"/></g>,
  leaf:   <path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14Zm0 0c2.5-5 5.5-8 10-10"/>,
  rise:   <g><path d="M4 18l5-5 3 3 8-8"/><path d="M16 8h4v4"/></g>,
  coin:   <g><ellipse cx="12" cy="8" rx="7" ry="3"/><path d="M5 8v6c0 1.7 3 3 7 3s7-1.3 7-3V8"/><path d="M5 11c0 1.7 3 3 7 3s7-1.3 7-3"/></g>,
  message:<g><path d="M4 5h16v11H9l-5 4z"/></g>,
  filter: <path d="M3 5h18M6 12h12M10 19h4"/>,
  play:   <path d="M8 5l11 7-11 7z"/>,
  whats2: null,
};
function Icon({ name, size=22, sw=1.6, ...rest }){
  return (
    <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="currentColor"
      strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round" {...rest}>{I[name]}</svg>
  );
}
function WaGlyph({ size=18 }){
  return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor">{I.wa}</svg>;
}

/* ---------------- Purpose glyphs ---------------- */
function PurposeGlyph({ glyph, size=26 }){
  const c = "currentColor";
  const g = {
    coin: <g fill="none" stroke={c} strokeWidth="1.4"><circle cx="12" cy="12" r="8"/><path d="M12 7v10M9.5 9.2c0-1 1.1-1.6 2.5-1.6s2.5.7 2.5 1.7-1 1.4-2.5 1.7-2.5.7-2.5 1.7 1.1 1.7 2.5 1.7 2.5-.6 2.5-1.6"/></g>,
    rise: <g fill="none" stroke={c} strokeWidth="1.4"><path d="M4 17l5-5 3 3 8-8"/><path d="M16 7h4v4"/></g>,
    sun:  <g fill="none" stroke={c} strokeWidth="1.4"><circle cx="12" cy="12" r="4.2"/><path d="M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M18.4 5.6l-1.7 1.7M7.3 16.7l-1.7 1.7"/></g>,
    shield: <g fill="none" stroke={c} strokeWidth="1.4"><path d="M12 3l7 3v5c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6l7-3Z"/><path d="M9 12l2 2 4-4"/></g>,
    lotus: <g fill="none" stroke={c} strokeWidth="1.4"><path d="M12 5c1.6 1.8 2.4 3.6 2.4 5.6 0 .9-.2 1.7-.6 2.4M12 5c-1.6 1.8-2.4 3.6-2.4 5.6 0 .9.2 1.7.6 2.4"/><path d="M6 9c2.4.4 4 1.6 4.8 3.4M18 9c-2.4.4-4 1.6-4.8 3.4"/><path d="M4 13c3 4 5.5 5 8 5s5-1 8-5c-2.4.3-4.2 1-5.6 2"/></g>,
    om:   <g fill={c}><path d="M8.5 14.2c.9 0 1.6-.6 1.6-1.5 0-1-.8-1.6-1.7-1.6-1.2 0-2.1.9-2.1 2.3 0 1.8 1.5 3.1 3.7 3.1 2.6 0 4.4-1.8 4.4-4.3 0-1.3-.5-2.4-1.3-3.2l.6-1.4c.7.2 1.2.7 1.5 1.4l1.2-.5c-.5-1.2-1.5-2-2.9-2.1l.5-1.3-1.4-.4-1.6 4c-.5-.2-1-.3-1.6-.3v1.4c1.7 0 2.9 1.1 2.9 2.7 0 1.5-1 2.6-2.4 2.6-1.1 0-1.9-.6-1.9-1.5 0-.5.3-.9.7-.9l-.3.3c0 .4.3.5.4.5Z"/><circle cx="16.5" cy="6.4" r="1"/><path d="M14.5 17.5c1.5 1 4 1 5.5-.3-.7 2-2.8 2.8-4.4 2.3" fill="none" stroke={c} strokeWidth="1.2"/></g>,
  };
  return <svg viewBox="0 0 24 24" width={size} height={size}>{g[glyph]||g.sun}</svg>;
}

/* ============================================================
   GEM ART — procedural, palette-driven stone visuals
   ============================================================ */
const STONE = {
  pyrite:          { a:'#EBCB78', b:'#C49A3F', c:'#7C5E22', hi:'#FFF7DA', edge:'#5A4316' },
  citrine:         { a:'#F8D06C', b:'#E0A02E', c:'#A1610F', hi:'#FFF2CB', edge:'#7E4B0C' },
  amethyst:        { a:'#C8A8E4', b:'#8A5FB6', c:'#4E2F77', hi:'#F2E6FF', edge:'#3C2360' },
  tourmaline:      { a:'#74747E', b:'#3A3A41', c:'#17171B', hi:'#ADB2BC', edge:'#0C0C0F' },
  rosequartz:      { a:'#F7CBD4', b:'#E394A6', c:'#BC6479', hi:'#FFEAEF', edge:'#9C4E62' },
  'sapphire-yellow':{ a:'#F7D662', b:'#D9A62D', c:'#9A6D12', hi:'#FFF4C2', edge:'#7C560B' },
  emerald:         { a:'#7ACFA4', b:'#2F9D6C', c:'#15613F', hi:'#CEF4E0', edge:'#0E4A30' },
  quartz:          { a:'#F5F7FA', b:'#D6DCE3', c:'#9FAAB6', hi:'#FFFFFF', edge:'#8893A0' },
  rudraksha:       { a:'#9E6833', b:'#5F3C1B', c:'#36200E', hi:'#D3A263', edge:'#2A180A' },
};

function GemArt({ stone='pyrite', form='bracelet', size=220 }){
  const uid = useId().replace(/[:]/g,'');
  const s = STONE[stone] || STONE.pyrite;
  const gid = (n)=> `${stone}-${uid}-${n}`;

  // shared gradient defs
  const Defs = (
    <defs>
      <radialGradient id={gid('bead')} cx="34%" cy="30%" r="75%">
        <stop offset="0%" stopColor={s.hi}/>
        <stop offset="32%" stopColor={s.a}/>
        <stop offset="70%" stopColor={s.b}/>
        <stop offset="100%" stopColor={s.c}/>
      </radialGradient>
      <radialGradient id={gid('beadG')} cx="50%" cy="50%" r="60%">
        <stop offset="0%" stopColor={s.a}/>
        <stop offset="100%" stopColor={s.c}/>
      </radialGradient>
      <linearGradient id={gid('lin')} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor={s.hi}/>
        <stop offset="45%" stopColor={s.a}/>
        <stop offset="100%" stopColor={s.c}/>
      </linearGradient>
      <radialGradient id={gid('halo')} cx="50%" cy="50%" r="50%">
        <stop offset="0%" stopColor={s.a} stopOpacity="0.30"/>
        <stop offset="55%" stopColor={s.b} stopOpacity="0.10"/>
        <stop offset="100%" stopColor={s.b} stopOpacity="0"/>
      </radialGradient>
      <filter id={gid('soft')} x="-30%" y="-30%" width="160%" height="160%">
        <feDropShadow dx="0" dy="3" stdDeviation="3" floodColor={s.edge} floodOpacity="0.30"/>
      </filter>
    </defs>
  );

  const halo = <circle cx="50" cy="50" r="46" fill={`url(#${gid('halo')})`} />;

  let body = null;

  if(form==='bracelet'){
    const cx=50, cy=49, R=33, n=18, r=6.6;
    const beads=[];
    for(let i=0;i<n;i++){
      const ang = (i/n)*Math.PI*2 - Math.PI/2;
      const x = cx + R*Math.cos(ang), y = cy + R*Math.sin(ang);
      beads.push(<circle key={i} cx={x.toFixed(2)} cy={y.toFixed(2)} r={r} fill={`url(#${gid('bead')})`} stroke={s.edge} strokeOpacity="0.25" strokeWidth="0.5"/>);
    }
    body = (
      <g filter={`url(#${gid('soft')})`}>
        {beads}
        {/* guru bead + spacer at bottom */}
        <circle cx={cx} cy={cy+R+1.5} r="3.1" fill="#C9A24B"/>
        <circle cx={cx} cy={cy+R+8.5} r="8.2" fill={`url(#${gid('bead')})`} stroke={s.edge} strokeOpacity="0.3" strokeWidth="0.6"/>
        <circle cx={cx-2.4} cy={cy+R+6} r="2" fill={s.hi} opacity="0.7"/>
      </g>
    );
  } else if(form==='bead'){
    // single textured rudraksha-like bead
    const ridges=[];
    for(let i=0;i<6;i++){
      const t=(i-2.5)/3;
      ridges.push(<path key={i} d={`M50 16 C ${50+t*40} 32, ${50+t*46} 66, 50 84`} fill="none" stroke={s.edge} strokeOpacity="0.45" strokeWidth="1.1"/>);
    }
    const pores=[];
    for(let i=0;i<26;i++){
      const a=Math.random()*Math.PI*2, rr=Math.random()*28;
      pores.push(<circle key={i} cx={50+rr*Math.cos(a)} cy={50+rr*Math.sin(a)*0.9} r={0.7+Math.random()*0.7} fill={s.edge} opacity="0.22"/>);
    }
    body = (
      <g filter={`url(#${gid('soft')})`}>
        <circle cx="50" cy="50" r="34" fill={`url(#${gid('bead')})`} />
        {ridges}{pores}
        <ellipse cx="40" cy="38" rx="9" ry="6" fill={s.hi} opacity="0.5"/>
      </g>
    );
  } else if(form==='stone'){
    // emerald-cut facet gem
    const oct = (k)=>[[30,18],[70,18],[82,35],[82,65],[70,82],[30,82],[18,65],[18,35]].map(([x,y])=>{
      const mx=50+(x-50)*k, my=50+(y-50)*k; return `${mx},${my}`;
    }).join(' ');
    body = (
      <g filter={`url(#${gid('soft')})`}>
        <polygon points={oct(1)} fill={`url(#${gid('lin')})`} stroke={s.edge} strokeWidth="0.8"/>
        <polygon points={oct(0.62)} fill={s.a} opacity="0.9"/>
        <polygon points={oct(0.62)} fill={`url(#${gid('lin')})`} opacity="0.5"/>
        {/* corner facets */}
        {[[30,18,70,18],[70,18,82,35],[82,65,70,82],[30,82,18,65],[18,35,30,18]].map((q,i)=>(
          <polygon key={i} points={`${q[0]},${q[1]} ${q[2]},${q[3]} 50,50`} fill={s.c} opacity={i%2?0.16:0.28}/>
        ))}
        <line x1="38" y1="30" x2="62" y2="30" stroke={s.hi} strokeWidth="1.6" opacity="0.7" strokeLinecap="round"/>
      </g>
    );
  } else if(form==='frame'){
    body = (
      <g filter={`url(#${gid('soft')})`}>
        <rect x="20" y="16" width="60" height="62" rx="3" fill="#3E0F13"/>
        <rect x="20" y="16" width="60" height="62" rx="3" fill="none" stroke="#C9A24B" strokeWidth="3"/>
        <rect x="26" y="22" width="48" height="50" rx="2" fill="#2a0a0d"/>
        {/* pyrite cluster */}
        {[[40,52,9],[52,48,11],[46,38,8],[58,56,7],[34,44,6]].map(([x,y,r],i)=>(
          <polygon key={i} points={`${x-r},${y} ${x-r*0.4},${y-r} ${x+r*0.5},${y-r*0.8} ${x+r},${y+r*0.2} ${x+r*0.3},${y+r} ${x-r*0.5},${y+r*0.9}`} fill={`url(#${gid('beadG')})`} stroke={s.edge} strokeWidth="0.6"/>
        ))}
        <line x1="44" y1="34" x2="56" y2="40" stroke={s.hi} strokeWidth="1.4" opacity="0.6"/>
        <path d="M40 78l-6 8M60 78l6 8" stroke="#C9A24B" strokeWidth="2" strokeLinecap="round"/>
      </g>
    );
  } else if(form==='tower'){
    body = (
      <g filter={`url(#${gid('soft')})`}>
        <polygon points="38,30 50,12 62,30" fill={`url(#${gid('lin')})`} stroke={s.edge} strokeWidth="0.6"/>
        <polygon points="50,12 62,30 50,30" fill={s.c} opacity="0.18"/>
        <rect x="38" y="30" width="24" height="54" fill={`url(#${gid('lin')})`} stroke={s.edge} strokeWidth="0.6"/>
        <rect x="50" y="30" width="12" height="54" fill={s.c} opacity="0.16"/>
        <line x1="50" y1="14" x2="50" y2="84" stroke={s.hi} strokeWidth="1.2" opacity="0.55"/>
        <ellipse cx="50" cy="86" rx="16" ry="4" fill={s.edge} opacity="0.2"/>
      </g>
    );
  } else if(form==='tree'){
    const chips=[];
    for(let i=0;i<34;i++){
      const a=Math.random()*Math.PI*2, rr=4+Math.random()*18;
      chips.push(<circle key={i} cx={50+rr*Math.cos(a)} cy={32+rr*Math.sin(a)*0.85} r={1.6+Math.random()*1.4} fill={`url(#${gid('beadG')})`} stroke={s.edge} strokeOpacity="0.3" strokeWidth="0.3"/>);
    }
    body = (
      <g filter={`url(#${gid('soft')})`}>
        <path d="M50 54 L50 40 M50 46 L42 38 M50 44 L58 36 M50 50 L44 46 M50 48 L57 44" stroke="#6b4a2a" strokeWidth="1.6" fill="none" strokeLinecap="round"/>
        {chips}
        <rect x="40" y="54" width="20" height="9" rx="2" fill={s.c}/>
        <rect x="40" y="54" width="20" height="9" rx="2" fill={`url(#${gid('lin')})`} opacity="0.5"/>
        <rect x="37" y="63" width="26" height="5" rx="2.5" fill="#2a0a0d"/>
      </g>
    );
  }

  return (
    <div className="gemart" style={{ width:size, height:size }}>
      <svg viewBox="0 0 100 100" width={size} height={size} style={{ overflow:'visible' }}>
        {Defs}{halo}{body}
      </svg>
    </div>
  );
}

/* ---------------- Stars ---------------- */
function Stars({ value=5, size=15 }){
  return (
    <span className="stars" style={{ '--sz':size+'px' }}>
      {[0,1,2,3,4].map(i=>(
        <svg key={i} viewBox="0 0 24 24" width={size} height={size}
          fill={i < Math.round(value) ? 'currentColor' : 'none'} stroke="currentColor" strokeWidth="1.3">{I.star}</svg>
      ))}
    </span>
  );
}

/* ---------------- Reveal on scroll ---------------- */
function Reveal({ children, delay=0, as='div', className='', style }){
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ el.classList.add('in'); io.unobserve(el); } });
    }, { threshold:0.12, rootMargin:'0px 0px -8% 0px' });
    io.observe(el); return ()=>io.disconnect();
  },[]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${className}`} style={{ animationDelay:delay+'s', ...style }}>{children}</Tag>;
}

/* ---------------- Logo ---------------- */
function Logo({ onDark=false, size=1 }){
  const ink = onDark ? '#F5E9CC' : '#57161B';
  const gold = '#C19A4B';
  return (
    <div className="rr-logo" style={{ display:'flex', alignItems:'center', gap:12*size }}>
      <svg width={38*size} height={38*size} viewBox="0 0 48 48" aria-hidden="true">
        <circle cx="24" cy="24" r="22" fill="none" stroke={gold} strokeWidth="1"/>
        {[...Array(16)].map((_,i)=>{
          const a=(i/16)*Math.PI*2, x1=24+15*Math.cos(a), y1=24+15*Math.sin(a), x2=24+20*Math.cos(a), y2=24+20*Math.sin(a);
          return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke={gold} strokeWidth="1" opacity="0.8"/>;
        })}
        <circle cx="24" cy="24" r="11" fill="none" stroke={gold} strokeWidth="1.4"/>
        <path d="M24 15 C18 20, 18 28, 24 33 C30 28, 30 20, 24 15Z" fill={onDark?'#C19A4B':'#57161B'} opacity="0.9"/>
        <circle cx="24" cy="24" r="2.4" fill={gold}/>
      </svg>
      <div style={{ lineHeight:1, whiteSpace:'nowrap' }}>
        <div style={{ fontFamily:'var(--display)', fontWeight:600, fontSize:23*size, letterSpacing:'.01em', color:ink, whiteSpace:'nowrap' }}>Rudraa Ratna</div>
        <div style={{ fontFamily:'var(--body)', fontWeight:600, fontSize:8.5*size, letterSpacing:'.32em', textTransform:'uppercase', color:gold, marginTop:2 }}>Guided · Authentic</div>
      </div>
    </div>
  );
}

/* ---------------- Header ---------------- */
function Header(){
  const { go, route } = useContext(Nav);
  const [open,setOpen] = useState(false);
  const [scrolled,setScrolled] = useState(false);
  useEffect(()=>{
    const onScroll=()=>setScrolled(window.scrollY>14);
    onScroll(); window.addEventListener('scroll',onScroll,{passive:true});
    return ()=>window.removeEventListener('scroll',onScroll);
  },[]);
  useEffect(()=>{ setOpen(false); },[route]);
  const links = [
    { label:'Home', page:'home' },
    { label:'Shop', page:'shop' },
    { label:'Pyrite', page:'pyrite-landing' },
    { label:'Consultation', page:'consultation' },
    { label:'Contact', page:'contact' },
  ];
  const active = (p)=> route.page===p || (p==='shop' && route.page==='product');
  return (
    <header className="rr-head">
      <div className="rr-topbar">
        <div className="wrap rr-topbar__in">
          <span className="deva">॥ श्री ॥ <span className="rr-top-sep">Authentic · Energised · Certificate-ready where applicable</span></span>
          <span className="rr-top-right">
            <a href={RR.wa("Hi Rudraa Ratna, I'd like guidance on choosing a product.")} target="_blank" rel="noopener"><Icon name="wa" size={14}/> {RR.WA_DISPLAY}</a>
            <span className="rr-top-dot">•</span>
            <span><Icon name="pin" size={13}/> Noida, India</span>
          </span>
        </div>
      </div>
      <div className={`rr-nav ${scrolled?'is-scrolled':''}`}>
        <div className="wrap rr-nav__in">
          <a className="rr-nav__logo" href={rrRouteHref('home')} onClick={(e)=>{ e.preventDefault(); go('home'); }}><Logo/></a>
          <nav className="rr-nav__links">
            {links.map(l=>(
              <a key={l.page} href={rrRouteHref(l.page)} className={`rr-nav__link ${active(l.page)?'is-active':''}`} onClick={(e)=>{ e.preventDefault(); go(l.page); }}>{l.label}</a>
            ))}
          </nav>
          <div className="rr-nav__actions">
            <button className="rr-icbtn" aria-label="Search"><Icon name="search" size={20}/></button>
            <button className="rr-icbtn rr-hide-sm" aria-label="Wishlist"><Icon name="heart" size={20}/></button>
            <button className="rr-icbtn" aria-label="Cart"><Icon name="cart" size={20}/><span className="rr-cart-dot">2</span></button>
            <a className="btn btn-wa btn-sm rr-hide-md" href={RR.wa("Hi Rudraa Ratna, I'd like a free consultation.")} target="_blank" rel="noopener"><WaGlyph size={16}/> Consult</a>
            <button className="rr-icbtn rr-burger" aria-label="Menu" onClick={()=>setOpen(true)}><Icon name="menu" size={24}/></button>
          </div>
        </div>
      </div>

      {/* mobile drawer */}
      <div className={`rr-drawer ${open?'is-open':''}`}>
        <div className="rr-drawer__bg" onClick={()=>setOpen(false)}/>
        <div className="rr-drawer__panel">
          <div className="rr-drawer__top">
            <Logo size={0.9}/>
            <button className="rr-icbtn" onClick={()=>setOpen(false)} aria-label="Close"><Icon name="close" size={24}/></button>
          </div>
          <nav className="rr-drawer__links">
            {links.map(l=>(
              <a key={l.page} href={rrRouteHref(l.page)} className={active(l.page)?'is-active':''} onClick={(e)=>{ e.preventDefault(); go(l.page); }}>{l.label}<Icon name="chevR" size={18}/></a>
            ))}
          </nav>
          <a className="btn btn-wa btn-block btn-lg" href={RR.wa("Hi Rudraa Ratna, I'd like a free consultation.")} target="_blank" rel="noopener"><WaGlyph/> Consult on WhatsApp</a>
          <p className="rr-drawer__meta deva">॥ शुभं भवतु ॥</p>
        </div>
      </div>
    </header>
  );
}

/* ---------------- Footer ---------------- */
function Footer(){
  const { go } = useContext(Nav);
  return (
    <footer className="rr-foot">
      <div className="wrap">
        <div className="rr-foot__top">
          <div className="rr-foot__brand">
            <Logo onDark size={1.05}/>
            <p className="mt6">Guided buying for Rudraksha, gemstones, crystals and Vastu — chosen with you, by purpose and authenticity, from our Noida-led support desk.</p>
            <a className="btn btn-outline-gold btn-sm" href={RR.wa("Hi Rudraa Ratna, I'd like guidance.")} target="_blank" rel="noopener"><WaGlyph size={15}/> Talk to us</a>
          </div>
          <div className="rr-foot__cols">
            <div>
              <h4>Shop</h4>
              <a href={rrRouteHref('shop')} onClick={(e)=>{ e.preventDefault(); go('shop'); }}>All Products</a>
              <a href={rrRouteHref('product',{id:'pyrite-bracelet'})} onClick={(e)=>{ e.preventDefault(); go('product',{id:'pyrite-bracelet'}); }}>Pyrite Bracelet</a>
              <a href={rrRouteHref('product',{id:'citrine-bracelet'})} onClick={(e)=>{ e.preventDefault(); go('product',{id:'citrine-bracelet'}); }}>Citrine Bracelet</a>
              <a href={rrRouteHref('shop',{cat:'rudraksha'})} onClick={(e)=>{ e.preventDefault(); go('shop',{cat:'rudraksha'}); }}>Rudraksha</a>
              <a href={rrRouteHref('shop',{cat:'gemstones'})} onClick={(e)=>{ e.preventDefault(); go('shop',{cat:'gemstones'}); }}>Gemstones</a>
            </div>
            <div>
              <h4>Guidance</h4>
              <a href={rrRouteHref('consultation')} onClick={(e)=>{ e.preventDefault(); go('consultation'); }}>Free Consultation</a>
              <a href={rrRouteHref('pyrite-landing')} onClick={(e)=>{ e.preventDefault(); go('pyrite-landing'); }}>Pyrite Guide</a>
              <a href={rrRouteHref('shop')} onClick={(e)=>{ e.preventDefault(); go('shop'); }}>Shop by Purpose</a>
              <a role="button">Before You Buy</a>
              <a role="button">Authenticity</a>
            </div>
            <div>
              <h4>Help</h4>
              <a href={rrRouteHref('contact')} onClick={(e)=>{ e.preventDefault(); go('contact'); }}>Contact & Store</a>
              <a role="button">Shipping (Pan-India)</a>
              <a role="button">Returns</a>
              <a role="button">Track Order</a>
              <a role="button">FAQs</a>
            </div>
          </div>
        </div>
        <div className="rr-foot__bar">
          <span>© {new Date().getFullYear()} Rudraa Ratna · Noida, India</span>
          <span className="rr-foot__disc">Products are sold on the basis of belief & tradition and are not a substitute for professional medical, legal or financial advice.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- Product card ---------------- */
function ProductCard({ p, delay=0 }){
  const { go } = useContext(Nav);
  return (
    <Reveal className="pcard" delay={delay}>
      <div className="pcard__media" onClick={()=>go('product',{id:p.id})}>
        <div className="pcard__tags">
          {p.badges?.includes('bestseller') && <span className="badge badge-maroon">Bestseller</span>}
          {p.badges?.includes('new') && <span className="badge badge-leaf">New</span>}
          {p.badges?.includes('certified') && <span className="badge badge-gold">Certificate-ready</span>}
          {p.badges?.includes('rare') && <span className="badge badge-gold">Rare</span>}
          {p.off>=25 && <span className="badge badge-sale">{p.off}% off</span>}
        </div>
        <button className="pcard__fav" aria-label="Save"><Icon name="heart" size={18}/></button>
        <ProductVisual p={p} size={188}/>
      </div>
      <div className="pcard__body">
        <span className="pcard__cat">{p.catLabel}</span>
        <div onClick={()=>go('product',{id:p.id})}>
          <a className="pcard__name-link" href={rrRouteHref('product',{id:p.id})} onClick={(e)=>{ e.preventDefault(); e.stopPropagation(); go('product',{id:p.id}); }}>
            <span className="pcard__name">{p.name}</span>
            <span className="pcard__deva deva">{p.deva}</span>
          </a>
        </div>
        <div className="row gap2" style={{ fontSize:13, color:'var(--ink-3)' }}>
          <Icon name="cert" size={14}/> <span>Authenticity guidance available</span>
        </div>
        <div className="pcard__price">
          <span className="now">{RR.fmt(p.price)}</span>
          <span className="was">{RR.fmt(p.mrp)}</span>
        </div>
        <a className="pcard__wa" href={p.waLink} target="_blank" rel="noopener" onClick={(e)=>e.stopPropagation()}>
          <WaGlyph size={16}/> Ask on WhatsApp
        </a>
      </div>
    </Reveal>
  );
}

/* ---------------- Product visual (uploaded photo overrides gem art) ---------------- */
function ProductVisual({ p, size=188, form }){
  if(p && p.image){
    return <img className="prod-img" src={rrImgSrc(p.image)} alt={rrProductAlt(p)} loading="lazy" decoding="async" style={{ width:size, height:size, objectFit:'cover', borderRadius:'12px', display:'block' }}/>;
  }
  return <GemArt stone={p.stone} form={form||p.form} size={size}/>;
}

/* ---------------- expose ---------------- */
Object.assign(window, {
  Nav, rrRouteHref, rrImgSrc, rrProductAlt, Icon, WaGlyph, PurposeGlyph, GemArt, ProductVisual, Stars, Reveal, Logo, Header, Footer, ProductCard, STONE,
});
