/* ============================================================ ABOUT + POLICIES ============================================================ */
function InfoCard({ icon='shield', title, children }){
  return (
    <Reveal className="policy-card card">
      <span className="policy-card__ic"><Icon name={icon} size={22}/></span>
      <h3 className="h3">{title}</h3>
      <p>{children}</p>
    </Reveal>
  );
}

function UnboxingVideoNotice(){
  return (
    <div className="unboxing-notice">
      <span className="unboxing-notice__ic"><Icon name="play" size={24}/></span>
      <div>
        <h3 className="h3">Unboxing video disclaimer</h3>
        <p>For damaged, missing, wrong, broken, or tampered-package claims, please record one continuous unboxing video before opening the parcel. The video should show the sealed package, shipping label, all sides of the parcel, and the full opening process. Claims may be difficult to verify without a clear unboxing video.</p>
      </div>
    </div>
  );
}

function AboutPage(){
  return (
    <main>
      <Breadcrumb items={[{label:'Home',page:'home'},{label:'About Us'}]}/>
      <section className="section tight">
        <div className="wrap about-hero">
          <Reveal className="about-hero__copy">
            <span className="eyebrow">Guided, authentic spiritual shopping</span>
            <h1 className="h1">About Rudraa Ratna</h1>
            <p>Rudraa Ratna helps customers choose Rudraksha, gemstones, crystals and Vastu products by concern, purpose and authenticity. The experience is consult-first, so buyers can ask before they buy.</p>
          </Reveal>
          <Reveal className="about-hero__logo" delay={0.08}>
            <Logo size={1.45}/>
            <p>Rudraa Ratna is built around careful guidance, visible authenticity notes and WhatsApp support for real product questions.</p>
          </Reveal>
        </div>
      </section>

      <section className="section tight" style={{ background:'var(--ivory-2)', borderBlock:'1px solid var(--line)' }}>
        <div className="wrap">
          <div className="policy-grid">
            <InfoCard icon="hand" title="Concern-first buying">Customers can start with Health & Wellness, Wealth, Career, Stress & Anxiety, Protection or Spiritual Balance instead of guessing products.</InfoCard>
            <InfoCard icon="cert" title="Authenticity-first notes">Product pages show material, origin, care, traditional use and certificate language where applicable.</InfoCard>
            <InfoCard icon="wa" title="Human WhatsApp support">Buyers can compare options, ask for availability and confirm suitability before purchase.</InfoCard>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <Reveal className="section-head center">
            <span className="eyebrow no-rule">How we guide</span>
            <h2 className="h2">Purpose, product, then purchase.</h2>
            <p>We keep claims belief-based and practical. Spiritual products are not positioned as medical, financial, legal or guaranteed-result solutions.</p>
          </Reveal>
          <UnboxingVideoNotice/>
        </div>
      </section>
      <TrustDisclaimer/>
    </main>
  );
}

function ShippingPolicyPage(){
  return (
    <main>
      <Breadcrumb items={[{label:'Home',page:'home'},{label:'Shipping Policy'}]}/>
      <section className="section tight">
        <div className="wrap">
          <Reveal className="section-head center">
            <span className="eyebrow no-rule">Shipping Policy</span>
            <h1 className="h1">Pan-India delivery for Rudraa Ratna orders.</h1>
            <p>Orders are packed carefully and shared with courier partners for delivery across India. Exact timelines can vary by city, courier load and product availability.</p>
          </Reveal>

          <div className="policy-grid mt10">
            <InfoCard icon="truck" title="Dispatch timeline">Ready products are usually dispatched after order confirmation and payment. Custom, certificate-ready or consult-first items may take longer.</InfoCard>
            <InfoCard icon="pin" title="Delivery coverage">We support national delivery across India. Remote pin codes can take additional time depending on courier serviceability.</InfoCard>
            <InfoCard icon="message" title="Order support">For shipping status, share your order name and phone number on WhatsApp. We will help with courier updates where available.</InfoCard>
          </div>

          <div className="mt10"><UnboxingVideoNotice/></div>
        </div>
      </section>
      <TrustDisclaimer/>
    </main>
  );
}

Object.assign(window, { AboutPage, ShippingPolicyPage, UnboxingVideoNotice });