/* ============================================================ HOME ============================================================ */
function PurposePicker({ compact=false }){
  const { go } = useContext(Nav);
  const [sel,setSel] = useState('prosperity');
  const matches = RR.PRODUCTS.filter(p=>p.purposes.includes(sel)).slice(0,4);
  const cur = RR.purpose(sel);
  return (
    <div className="purpose">
      <div className="purpose__chips">
        {RR.PURPOSES.map(pp=>(
          <button key={pp.id} className={`purpose__chip ${sel===pp.id?'is-active':''}`} onClick={()=>setSel(pp.id)}>
            <span className="purpose__ic"><PurposeGlyph glyph={pp.glyph} size={24}/></span>
            <span className="purpose__lbl">{pp.label}</span>
            <span className="purpose__deva deva">{pp.deva}</span>
          </button>
        ))}
      </div>
      <div className="purpose__panel">
        <div className="purpose__panel-head">
          <div>
            <div className="eyebrow">For {cur.label}</div>
            <p className="purpose__blurb">{cur.blurb}</p>
          </div>
          <button className="link-underline" onClick={()=>go('shop',{purpose:sel})}>See all for {cur.label} <Icon name="arrow" size={16}/></button>
        </div>
        <div className="purpose__grid" key={sel}>
          {matches.map((p,i)=><ProductCard key={p.id} p={p} delay={i*0.05}/>)}
        </div>
      </div>
    </div>
  );
}

function HomePage(){
  const { go } = useContext(Nav);
  const featured = ['pyrite-bracelet','citrine-bracelet','5-mukhi-rudraksha','pyrite-frame'].map(RR.byId);
  const guidanceCards = [
    { n:'Purpose first', r:'Guided buying', t:'We start with what the customer is trying to choose for: prosperity, protection, calm, focus, gifting or spiritual routine.' },
    { n:'Authenticity visible', r:'Product education', t:'Product pages explain material, care, real-vs-fake checks and certificate language where the product type supports it.' },
    { n:'Human support', r:'WhatsApp-first', t:'Customers can ask before purchase, compare options and confirm product suitability without pressure.' },
  ];
  return (
    <main>
      {/* HERO */}
      <section className="hero-wrap">
        <div className="wrap hero">
          <div className="hero__copy">
            <Reveal className="eyebrow" delay={0}>॥ श्री गणेशाय नमः ॥</Reveal>
            {RR.settings.heroHeadline
              ? <Reveal as="h1" className="h-hero" delay={0.06}>{RR.settings.heroHeadline}</Reveal>
              : <Reveal as="h1" className="h-hero" delay={0.06}>Authentic Rudraksha,<br/>Gemstones &amp; Crystals — <span className="hero__em">chosen with guidance.</span></Reveal>}
            {RR.settings.heroLead
              ? <Reveal delay={0.14} className="lead hero__lead">{RR.settings.heroLead}</Reveal>
              : <Reveal delay={0.14} className="lead hero__lead">Buy with trust. Rudraa Ratna helps you select spiritual products by <b>purpose</b>, <b>authenticity</b> and <b>consultation</b> — never guesswork.</Reveal>}
            <Reveal delay={0.2} className="hero__cta">
              <button className="btn btn-maroon btn-lg" onClick={()=>go('shop')}>Shop Products <Icon name="arrow" size={17}/></button>
              <a className="btn btn-wa btn-lg" href={RR.wa("Hi Rudraa Ratna, I'd like a free consultation to choose the right product.")} target="_blank" rel="noopener"><WaGlyph size={18}/> Consult on WhatsApp</a>
            </Reveal>
            <Reveal delay={0.28} className="hero__proof">
              <div className="hero__avatars">{['#C49A3F','#8A5FB6','#2F9D6C','#57161B'].map((c,i)=><span key={i} style={{ background:c }}/>)}</div>
              <div><Icon name="cert" size={17}/><div className="hero__proof-txt"><b>Guided selection</b> with authenticity-first product notes</div></div>
            </Reveal>
          </div>
          <Reveal className="hero__visual" delay={0.12}>
            <div className="hero__mandala"/>
            <div className="hero__plinth">
              <GemArt stone="pyrite" form="bracelet" size={360}/>
            </div>
            <div className="hero__float hero__float--cert card">
              <span className="hf-ic" style={{ color:'var(--gold)' }}><Icon name="cert" size={20}/></span>
              <div><b>Certificate-ready</b><span>Documentation where applicable</span></div>
            </div>
            <div className="hero__float hero__float--ship card">
              <span className="hf-ic" style={{ color:'var(--leaf)' }}><Icon name="truck" size={20}/></span>
              <div><b>Pan-India Delivery</b><span>Safe, insured shipping</span></div>
            </div>
            <div className="hero__float hero__float--wa card">
              <span className="hf-ic" style={{ color:'var(--wa)' }}><WaGlyph size={18}/></span>
              <div><b>Guided on WhatsApp</b><span>Ask before you buy</span></div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* TRUST STRIP */}
      <div className="trust-strip">
        {[
          { ic:'spark', b:'Authentic & Energised', s:'Genuine spiritual products' },
          { ic:'hand', b:'Guided Consultation', s:'Choose by purpose, not guesswork' },
          { ic:'pin', b:'Noida-Based', s:'A trusted local name' },
          { ic:'wa', b:'WhatsApp Support', s:'Real humans, quick replies' },
          { ic:'truck', b:'National Delivery', s:'Crystals & gems pan-India' },
        ].map((t,i)=>(
          <div className="ti" key={i}><Icon name={t.ic} size={26}/><div><b>{t.b}</b><span>{t.s}</span></div></div>
        ))}
      </div>

      {/* SHOP BY PURPOSE */}
      <section className="section">
        <div className="wrap">
          <Reveal className="section-head center">
            <span className="eyebrow no-rule">Shop by Intention · <span className="deva">संकल्प</span></span>
            <h2 className="h2">What do you seek?</h2>
            <p>Tell us your intention and we'll show what fits. Every Rudraa journey begins with purpose — prosperity, protection, peace and more.</p>
          </Reveal>
          <div className="mt10"><PurposePicker/></div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section tight" style={{ background:'var(--ivory-2)', borderBlock:'1px solid var(--line)' }}>
        <div className="wrap">
          <Reveal className="section-head"><span className="eyebrow">Collections</span><h2 className="h2">Explore by category</h2></Reveal>
          <div className="cat-grid mt8">
            {RR.CATEGORIES.map((c,i)=>(
              <Reveal key={c.id} className="cat-card" delay={i*0.06}>
                <button onClick={()=>go('shop',{cat:c.id})}>
                  <div className="cat-card__art"><GemArt stone={c.id==='rudraksha'?'rudraksha':c.id==='gemstones'?'emerald':c.id==='vastu'?'pyrite':'amethyst'} form={c.id==='rudraksha'?'bead':c.id==='gemstones'?'stone':c.id==='vastu'?'frame':'bracelet'} size={120}/></div>
                  <div className="cat-card__txt">
                    <div className="cat-card__deva deva">{c.deva}</div>
                    <h3 className="h3">{c.label}</h3>
                    <p>{c.blurb}</p>
                    <span className="link-underline">{c.count} products <Icon name="chevR" size={15}/></span>
                  </div>
                </button>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* BESTSELLERS */}
      <section className="section">
        <div className="wrap">
          <div className="section-head between row wrapflex" style={{ maxWidth:'none', alignItems:'flex-end', gap:20 }}>
            <Reveal><span className="eyebrow">Most Loved</span><h2 className="h2">Bestsellers this month</h2></Reveal>
            <Reveal><button className="btn btn-ghost" onClick={()=>go('shop')}>View all <Icon name="arrow" size={16}/></button></Reveal>
          </div>
          <div className="prod-grid mt8">
            {featured.map((p,i)=><ProductCard key={p.id} p={p} delay={i*0.06}/>)}
          </div>
        </div>
      </section>

      {/* CONSULTATION BAND */}
      <section className="consult-band">
        <div className="wrap consult-band__in">
          <Reveal className="consult-band__copy">
            <span className="eyebrow" style={{ color:'var(--gold-soft)' }}>Guided Buying · <span className="deva">परामर्श</span></span>
            <h2 className="h2" style={{ color:'#fff' }}>Not sure what to choose?<br/>Speak to us before you buy.</h2>
            <p style={{ color:'rgba(245,233,204,.78)' }}>Tell us your purpose and we'll recommend the right Rudraksha, gemstone or crystal — with honest, belief-based guidance. No pressure, ever.</p>
            <div className="consult-band__tags">
              {RR.PURPOSES.map(p=><span key={p.id} className="consult-tag">{p.label}</span>)}
            </div>
            <div className="row gap4 wrapflex mt6">
              <a className="btn btn-wa btn-lg" href={RR.wa("Hi Rudraa Ratna, I'd like guidance. My purpose is: ")} target="_blank" rel="noopener"><WaGlyph/> Start free consultation</a>
              <button className="btn btn-outline-gold btn-lg" onClick={()=>go('consultation')}>How it works</button>
            </div>
          </Reveal>
          <Reveal className="consult-band__art" delay={0.12}>
            <div className="consult-orb"><GemArt stone="amethyst" form="bracelet" size={260}/></div>
          </Reveal>
        </div>
      </section>

      {/* AUTHENTICITY */}
      <section className="section">
        <div className="wrap auth-home">
          <Reveal className="auth-home__media">
            <FakeRealMini/>
          </Reveal>
          <Reveal className="auth-home__copy" delay={0.1}>
            <span className="eyebrow">Before You Buy</span>
            <h2 className="h2">Real, or just shiny?</h2>
            <p>The market is full of dyed glass sold as crystals and uncertified Rudraksha. We make authenticity visible — so you never pay genuine prices for fakes.</p>
            <ul className="auth-list">
              <li><Icon name="check" size={18}/><div><b>Certificate-supported beads & gems</b> — documentation is shown where applicable and should be confirmed before purchase.</div></li>
              <li><Icon name="check" size={18}/><div><b>Natural, untreated stones</b> — real lustre, weight and inclusions, never painted.</div></li>
              <li><Icon name="check" size={18}/><div><b>Energised with intention</b> — cleansed and prepared before it reaches you.</div></li>
            </ul>
            <button className="btn btn-maroon" onClick={()=>go('product',{id:'pyrite-bracelet'})}>See it on a product <Icon name="arrow" size={16}/></button>
          </Reveal>
        </div>
      </section>

      <WhyRudraaSection/>
      <BeforeYouBuySection/>
      <PageAnswers page="home"/>

      {/* TESTIMONIALS */}
      <section className="section tight" style={{ background:'var(--ivory-2)', borderBlock:'1px solid var(--line)' }}>
        <div className="wrap">
          <Reveal className="section-head center"><span className="eyebrow no-rule">Guidance Standard</span><h2 className="h2">How Rudraa Ratna helps you choose</h2></Reveal>
          <div className="testi-grid mt8">
            {guidanceCards.map((t,i)=>(
              <Reveal key={i} className="testi card" delay={i*0.08}>
                <Icon name={i===0?'hand':i===1?'cert':'wa'} size={20}/>
                <p className="testi__txt">{t.t}</p>
                <div className="testi__by"><span className="testi__av" style={{ background:['#C49A3F','#8A5FB6','#2F9D6C'][i] }}>{t.n[0]}</span><div><b>{t.n}</b><span>{t.r}</span></div></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <TrustDisclaimer/>

      {/* OFFER BAND */}
      <section className="offer-band">
        <div className="wrap offer-band__in">
          <div>
            <span className="eyebrow no-rule" style={{ color:'var(--gold)' }}>First order</span>
            <h3 className="h2" style={{ marginTop:6 }}>Begin your journey — {RR.settings.offerText}.</h3>
            <p className="muted" style={{ marginTop:8 }}>Use code <b className="maroon-text">{RR.settings.offerCode}</b> at checkout, or just mention it on WhatsApp.</p>
          </div>
          <a className="btn btn-gold btn-lg" href={RR.wa("Hi Rudraa Ratna, I'd like to use "+RR.settings.offerCode+" on my first order.")} target="_blank" rel="noopener"><WaGlyph/> Claim on WhatsApp</a>
        </div>
      </section>
    </main>
  );
}

/* mini fake-vs-real compare slider (also used standalone) */
function FakeRealMini(){
  const [pos,setPos] = useState(52);
  return (
    <div className="fr-mini">
      <div className="fr-mini__stage">
        <div className="fr-side fr-real"><GemArt stone="pyrite" form="bracelet" size={210}/><span className="fr-tag fr-tag--real"><Icon name="check" size={13}/> Genuine Pyrite</span></div>
        <div className="fr-side fr-fake" style={{ clipPath:`inset(0 0 0 ${pos}%)` }}>
          <div className="fr-fake-art"><GemArt stone="quartz" form="bracelet" size={210}/></div>
          <span className="fr-tag fr-tag--fake">Dyed / coated</span>
        </div>
        <div className="fr-handle" style={{ left:pos+'%' }}><span><Icon name="chevR" size={14}/><Icon name="chevR" size={14} style={{transform:'rotate(180deg)'}}/></span></div>
        <input className="fr-range" type="range" min="6" max="94" value={pos} onChange={e=>setPos(+e.target.value)} aria-label="Compare real vs fake"/>
      </div>
      <p className="fr-mini__cap muted">Drag to compare · real Pyrite keeps a deep metallic glow; fakes look flat and over-bright.</p>
    </div>
  );
}

Object.assign(window, { HomePage, PurposePicker, FakeRealMini });