/* ============================================================ PYRITE CAMPAIGN LANDING ============================================================ */
function PyriteLandingPage(){
  const { go } = useContext(Nav);
  const pyriteProducts = ['pyrite-bracelet','pyrite-frame','pyrite-tree'].map(RR.byId);
  const hero = RR.byId('pyrite-bracelet');
  const benefits = [
    { ic:'coin', t:'Traditionally linked with abundance', d:'Known as a stone of wealth in traditional belief — worn as a symbol for opportunity and focus.' },
    { ic:'sun', t:'Builds confidence', d:'Strengthens willpower and bold decision-making for work and life.' },
    { ic:'shield', t:'Shields your energy', d:'A protective stone believed to deflect negativity while you hustle.' },
    { ic:'spark', t:'Daily-wear luxury', d:'A quietly premium accessory that works with every outfit, every day.' },
  ];
  const waHero = RR.wa("Hi Rudraa Ratna, I saw your Pyrite page. Please share price, availability and guidance for the Pyrite Bracelet.");
  return (
    <main className="lp">
      <Breadcrumb items={[{label:'Home',page:'home'},{label:'Pyrite Bracelet'}]}/>
      {/* HERO */}
      <section className="lp-hero">
        <div className="wrap lp-hero__in">
          <div className="lp-hero__copy">
            <Reveal className="lp-badge"><Icon name="spark" size={15}/> Bestselling prosperity piece</Reveal>
            <Reveal as="h1" className="h-hero lp-hero__h" delay={0.05}>Wear a symbol of prosperity, every single day.</Reveal>
            <Reveal delay={0.12} className="lead lp-hero__lead">The natural <b>Pyrite Bracelet</b> — a daily-wear prosperity & confidence accessory, selected with authenticity checks and documentation where applicable.</Reveal>
            <Reveal delay={0.18} className="lp-hero__pricerow">
              <div className="lp-price"><span className="lp-price__now">{RR.fmt(hero.price)}</span><span className="lp-price__was">{RR.fmt(hero.mrp)}</span><span className="badge badge-sale">{hero.off}% off</span></div>
              <div className="lp-rate"><Icon name="cert" size={16}/><span>Authenticity checks before dispatch</span></div>
            </Reveal>
            <Reveal delay={0.24} className="lp-hero__cta">
              <a className="btn btn-wa btn-lg" href={waHero} target="_blank" rel="noopener"><WaGlyph size={18}/> Get price on WhatsApp</a>
              <button className="btn btn-ghost btn-lg" onClick={()=>go('product',{id:'pyrite-bracelet'})}>View full details</button>
            </Reveal>
            <Reveal delay={0.3} className="lp-hero__trust">
              <span><Icon name="cert" size={17}/> Documentation where applicable</span>
              <span><Icon name="truck" size={17}/> Pan-India delivery</span>
              <span><Icon name="shield" size={17}/> Energised & cleansed</span>
            </Reveal>
          </div>
          <Reveal className="lp-hero__art" delay={0.1}>
            <div className="lp-hero__glow"/>
            <div className="hero__plinth lp-plinth"><GemArt stone="pyrite" form="bracelet" size={360}/></div>
            <div className="lp-float card"><b className="maroon-text">FIRST10</b><span>10% off your first order</span></div>
          </Reveal>
        </div>
      </section>

      {/* MARQUEE TRUST */}
      <div className="lp-marquee">
        <div className="lp-marquee__track">
          {[...Array(2)].map((_,k)=>(
            <React.Fragment key={k}>
              {['Natural Pyrite','Authenticity Checks','Energised','Noida-Based','WhatsApp Guidance','Pan-India Delivery','Belief-Based Guidance'].map((t,i)=>(
                <span key={k+'-'+i}>✦ {t}</span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>

      {/* BENEFITS */}
      <section className="section">
        <div className="wrap">
          <Reveal className="section-head center"><span className="eyebrow no-rule">Why Pyrite · <span className="deva">पाइराइट</span></span><h2 className="h2">The merchant's favourite stone</h2><p>Traditionally called "Fool's Gold" for its golden shine — and valued as a symbolic stone for abundance and willpower.</p></Reveal>
          <div className="lp-benefits mt10">
            {benefits.map((b,i)=>(
              <Reveal key={i} className="lp-benefit" delay={i*0.07}>
                <span className="lp-benefit__ic"><Icon name={b.ic} size={26}/></span>
                <h3 className="h3">{b.t}</h3><p>{b.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* SPLIT — who it's for */}
      <section className="section tight" style={{ background:'var(--ivory-2)', borderBlock:'1px solid var(--line)' }}>
        <div className="wrap lp-split">
          <Reveal className="lp-split__art"><div className="lp-orb"><GemArt stone="pyrite" form="frame" size={230}/></div></Reveal>
          <Reveal className="lp-split__copy" delay={0.1}>
            <span className="eyebrow">Is it for you?</span>
            <h2 className="h2">Made for those who mean business</h2>
            <ul className="auth-list">
              <li><Icon name="check" size={18}/><div><b>Entrepreneurs & shop owners</b> wanting a prosperity symbol for focus and intention.</div></li>
              <li><Icon name="check" size={18}/><div><b>Professionals</b> seeking confidence in high-stakes moments.</div></li>
              <li><Icon name="check" size={18}/><div><b>Anyone starting fresh</b> — a new job, venture or chapter.</div></li>
            </ul>
            <div className="row gap4 wrapflex">
              <a className="btn btn-wa" href={waHero} target="_blank" rel="noopener"><WaGlyph size={16}/> Ask if it suits you</a>
              <button className="btn btn-ghost" onClick={()=>go('consultation')}>Take the 1-min guide</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* THE RANGE */}
      <section className="section">
        <div className="wrap">
          <Reveal className="section-head between row wrapflex" style={{ maxWidth:'none', alignItems:'flex-end', gap:20 }}>
            <div><span className="eyebrow">The Pyrite range</span><h2 className="h2">Bracelet, frame & tree</h2></div>
            <button className="btn btn-ghost" onClick={()=>go('shop',{cat:'crystals'})}>Shop all crystals <Icon name="arrow" size={16}/></button>
          </Reveal>
          <div className="prod-grid mt8" style={{ gridTemplateColumns:'repeat(3,1fr)' }}>
            {pyriteProducts.map((p,i)=><ProductCard key={p.id} p={p} delay={i*0.07}/>)}
          </div>
        </div>
      </section>

      {/* PLACEMENT / HOW TO WEAR */}
      <section className="section tight">
        <div className="wrap">
          <Reveal className="section-head center"><span className="eyebrow no-rule">Make it work</span><h2 className="h2">How to wear & place Pyrite</h2></Reveal>
          <div className="how-grid mt8">
            {[
              { ic:'hand', t:'On the wrist', d:'Wear the bracelet on your left wrist in the morning. Set a clear intention as you put it on.' },
              { ic:'coin', t:'On your desk', d:'Place a Pyrite frame in the South-East (wealth) corner of your desk, shop or near the cash box.' },
              { ic:'leaf', t:'Care for it', d:'Keep away from prolonged water. Cleanse under moonlight monthly to recharge.' },
            ].map((s,i)=>(
              <Reveal key={i} className="how-card" delay={i*0.07}><span className="how-num">{i+1}</span><span className="how-ic"><Icon name={s.ic} size={24}/></span><h3 className="h3">{s.t}</h3><p>{s.d}</p></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* AUTHENTICITY */}
      <section className="section auth-sec">
        <div className="wrap auth-home">
          <Reveal className="auth-home__media"><FakeRealMini/></Reveal>
          <Reveal className="auth-home__copy" delay={0.1}>
            <span className="eyebrow">Don't get fooled</span>
            <h2 className="h2">Real Pyrite vs cheap fakes</h2>
            <p>Many "pyrite" products online are dyed glass or plated beads. Genuine Pyrite has a deep metallic golden glow, real weight and tiny cubic flecks — ask Rudraa Ratna for certificate or authenticity-card details before purchase.</p>
            <ul className="auth-list">
              <li><Icon name="check" size={18}/><div><b>Metallic lustre</b>, not a flat plastic shine.</div></li>
              <li><Icon name="check" size={18}/><div><b>Real weight</b> in the hand — fakes feel light.</div></li>
              <li><Icon name="check" size={18}/><div><b>Certificate support</b> where applicable, plus photo-verification on WhatsApp.</div></li>
            </ul>
            <a className="btn btn-wa" href={waHero} target="_blank" rel="noopener"><WaGlyph size={16}/> Verify before you buy</a>
          </Reveal>
        </div>
      </section>

      <BeforeYouBuySection/>
      <PageAnswers page="pyrite-landing"/>
      <TrustDisclaimer/>

      {/* FINAL CTA */}
      <section className="lp-final">
        <div className="wrap lp-final__in">
          <span className="eyebrow no-rule" style={{ color:'var(--gold-soft)', justifyContent:'center' }}>Begin today</span>
          <h2 className="h1" style={{ color:'#fff', marginTop:10 }}>Let your everyday carry a little gold.</h2>
          <p style={{ color:'rgba(245,233,204,.78)', maxWidth:560, margin:'14px auto 0' }}>Message us for price, sizing and honest guidance. Use <b style={{color:'var(--gold-soft)'}}>FIRST10</b> for 10% off your first order.</p>
          <div className="row gap4 wrapflex center mt8" style={{ justifyContent:'center' }}>
            <a className="btn btn-gold btn-lg" href={waHero} target="_blank" rel="noopener"><WaGlyph/> Get price on WhatsApp</a>
            <button className="btn btn-outline-gold btn-lg" onClick={()=>go('product',{id:'pyrite-bracelet'})}>See full product</button>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PyriteLandingPage });