// pages.jsx — All page components

const HomePage = ({ goto, onAdd }) => {
  const products = window.SJ_DATA.products.filter(p=>p.id!=='combo');
  const combo = window.SJ_DATA.products.find(p=>p.id==='combo');
  const reviews = window.SJ_DATA.reviews.slice(0,3);

  return (
    <>
      {/* HERO */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">Shudh Jain · Est. Indore</span>
              <h1 className="h-display">
                Indore ki rasoi se,<br/>
                <span className="accent">seedha aapke ghar.</span>
              </h1>
              <p className="lead">
                Slow-crafted Jain achar — no onion, no garlic, no preservatives. Just sun-ripened fruit, mustard oil, and hand-pounded Indori masala. <span className="deva">घर जैसा स्वाद.</span>
              </p>
              <div className="hero-cta">
                <button className="btn btn-primary btn-lg" onClick={()=>goto('shop')}>Shop the achar <Icon name="arrow" size={18}/></button>
                <button className="btn btn-ghost btn-lg" onClick={()=>goto('product-combo')}>Try the combo · ₹499</button>
              </div>
              <div className="hero-trust">
                <div className="item"><Icon name="leaf"/> 100% Jain</div>
                <div className="item"><Icon name="truck"/> Free shipping</div>
                <div className="item"><Icon name="shield"/> No preservatives</div>
                <div className="item"><Icon name="check"/> FSSAI certified</div>
              </div>
            </div>
            <div className="hero-visual">
              <div className="hero-medallion">
                <div>Made in<br/><strong>Indore</strong><br/>since 2024</div>
              </div>
              <img src="assets/lifestyle-4.jpeg" alt="Shudh Jain Indori Achar" width="543" height="679" fetchpriority="high" decoding="async" loading="eager"/>
            </div>
          </div>
        </div>
      </section>

      <TrustStrip/>

      {/* PRODUCTS */}
      <section className="section">
        <div className="container">
          <div className="text-center" style={{marginBottom:40}}>
            <span className="eyebrow">Our Range</span>
            <h2 className="h-section" style={{marginTop:8}}>Char swad, ek Indori soul</h2>
            <div className="diamond-divider" style={{marginTop:14}}>❋</div>
          </div>
          <div className="grid-4">
            {products.map(p => <ProductCard key={p.id} product={p} goto={goto} onAdd={onAdd}/>)}
          </div>
        </div>
      </section>

      {/* COMBO */}
      <section className="section-tight">
        <div className="container">
          <div className="combo-card combo-card-banner">
            <div className="combo-banner-image">
              <img src="assets/combo-banner.webp" alt="Testing Combo Pack — 4 flavours, only ₹499" width="578" height="385" loading="lazy" decoding="async"/>
            </div>
            <div style={{position:'relative',zIndex:1}}>
              <span className="ribbon">Limited Trial Pack</span>
              <h3>Taste all five. <em style={{fontFamily:'Caveat',color:'var(--gold-300)',fontSize:38}}>One pack.</em></h3>
              <p style={{maxWidth:480,opacity:.85,fontSize:15,margin:'8px 0 0'}}>Mirch 200g · Nimbu 200g · Aam 200g · Mix Achar 200g · Jeeravan 100g — 5 authentic flavours, 1 perfect experience.</p>
              <div className="price-big">
                ₹499 <span className="price-old">₹686</span>
              </div>
              <div className="combo-prepaid-note">+ Extra 5% off on prepaid orders</div><div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
                <button className="btn btn-gold btn-lg" onClick={()=>onAdd(combo, combo.variants[0])}>Add combo to cart</button>
                <button className="btn btn-ghost btn-lg" style={{color:'var(--cream-50)',borderColor:'var(--gold-300)'}} onClick={()=>goto('product-combo')}>Learn more</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY US */}
      <section className="section" style={{background:'white'}}>
        <div className="container">
          <div className="text-center" style={{marginBottom:48}}>
            <span className="eyebrow">Why Shudh Jain</span>
            <h2 className="h-section" style={{marginTop:8}}>Bilkul shudh. Bilkul ghar jaisa.</h2>
          </div>
          <WhyUs/>
        </div>
      </section>

      {/* STORY */}
      <section className="section">
        <div className="container">
          <div className="story-grid">
            <div className="story-image">
              <img src="assets/lifestyle-6.jpeg" alt="Made in Indore" width="541" height="676" loading="lazy" decoding="async"/>
            </div>
            <div>
              <span className="eyebrow">Our Story</span>
              <h2 className="h-section" style={{margin:'10px 0 18px'}}>Indore ke ek Jain parivaar se, sirf aapke liye.</h2>
              <p style={{color:'var(--ink-700)',fontSize:16,marginBottom:14}}>
                Shudh Jain started in our family kitchen — a recipe handed down through three generations of Indori women, each adding her own gentle touch. Every batch is still made by hand: mustard oil tempered slowly, spices roasted in small lots, mangoes cured in the sun.
              </p>
              <p style={{color:'var(--ink-700)',fontSize:16,marginBottom:22}}>
                No shortcuts. No machines. No compromises on what goes in — and just as importantly, what doesn't.
              </p>
              <button className="btn btn-ghost" onClick={()=>goto('about')}>Read our story <Icon name="arrow" size={16}/></button>
            </div>
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="section" style={{background:'var(--cream-100)'}}>
        <div className="container">
          <div className="text-center" style={{marginBottom:40}}>
            <span className="eyebrow">Reviews</span>
            <h2 className="h-section" style={{marginTop:8}}>500+ happy households</h2>
            <div style={{display:'inline-flex',alignItems:'center',gap:10,marginTop:12}}>
              <Stars rating={5} size={18}/>
              <span style={{fontWeight:600,color:'var(--ink-700)'}}>4.9 / 5</span>
              <span style={{color:'var(--ink-500)',fontSize:14}}>· based on 482 verified reviews</span>
            </div>
          </div>
          <div className="grid-3">
            {reviews.map((r,i)=>(
              <div key={i} className="review-card">
                <Stars rating={r.rating}/>
                <p className="quote">"{r.text}"</p>
                <div className="author">
                  <strong>{r.name}</strong>
                  {r.city}
                  {r.verified && <span className="verified"><Icon name="check" size={12}/> Verified buyer</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* INSTA-STYLE GRID */}
      <section className="section-tight">
        <div className="container">
          <div className="text-center" style={{marginBottom:24}}>
            <a className="eyebrow" href="https://instagram.com/shudhjain.achar" target="_blank" rel="noopener" style={{textDecoration:'none'}}>@shudhjain.achar</a>
            <h3 className="h-card" style={{marginTop:8,fontSize:22}}>Tag us in your achar moments</h3>
          </div>
          <div className="grid-4" style={{gap:6}}>
            {['product-aam.jpeg','product-mirch.jpeg','product-nimbu.jpeg','product-jeeravan.png'].map(n=>(
              <div key={n} style={{aspectRatio:'1/1',borderRadius:12,overflow:'hidden',background:'var(--cream-100)'}}>
                <img src={`assets/${n}`} alt="" loading="lazy" decoding="async" style={{width:'100%',height:'100%',objectFit:'cover'}}/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

const ShopPage = ({ goto, onAdd }) => {
  const [filter, setFilter] = useState('all');
  const products = window.SJ_DATA.products;
  const filtered = filter === 'all' ? products : products.filter(p => p.id === filter || (filter==='achar' && p.id !== 'jeeravan' && p.id !== 'combo'));

  return (
    <>
      <section style={{padding:'40px 0 24px',background:'var(--cream-100)',borderBottom:'1px solid var(--line)'}}>
        <div className="container text-center">
          <span className="eyebrow">Collection</span>
          <h1 className="h-section" style={{marginTop:8}}>Shop all products</h1>
          <p className="muted" style={{maxWidth:540,margin:'10px auto 0'}}>Every jar, hand-prepared in small batches. Free shipping across India on every order.</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div style={{display:'flex',gap:8,flexWrap:'wrap',marginBottom:28,justifyContent:'center'}}>
            {[
              { id:'all', label:'All' },
              { id:'achar', label:'Achar' },
              { id:'jeeravan', label:'Jeeravan' },
              { id:'combo', label:'Combo Pack' },
            ].map(t=>(
              <button key={t.id} className={`pill ${filter===t.id?'active':''}`}
                style={{
                  cursor:'pointer',
                  background: filter===t.id ? 'var(--green-800)' : 'var(--green-50)',
                  color: filter===t.id ? 'var(--cream-50)' : 'var(--green-900)',
                  border: filter===t.id ? '1px solid var(--green-800)' : '1px solid rgba(46, 122, 79, .25)',
                  padding:'8px 18px',
                  fontSize:13,
                }}
                onClick={()=>setFilter(t.id)}>{t.label}</button>
            ))}
          </div>
          <div className="grid-4">
            {filtered.map(p => <ProductCard key={p.id} product={p} goto={goto} onAdd={onAdd}/>)}
          </div>
        </div>
      </section>
    </>
  );
};

const PDP = ({ productId, goto, onAdd }) => {
  const product = window.SJ_DATA.products.find(p=>p.id===productId);
  const [variantIdx, setVariantIdx] = useState(0);
  const [qty, setQty] = useState(1);
  const [imgIdx, setImgIdx] = useState(0);

  useEffect(() => {
    if (!product) return;
    const variant = product.variants[variantIdx];
    if (window.fbq) {
      window.fbq('track', 'ViewContent', {
        content_ids: [String(product.id)],
        content_type: 'product',
        content_name: product.name,
        value: variant.price,
        currency: 'INR',
      });
    }
  }, [product, variantIdx]);

  if (!product) return <div className="container section">Product not found.</div>;
  const variant = product.variants[variantIdx];
  const heatLabel = ['Mild','Medium','Spicy','Hot'][product.heat] || 'Medium';

  return (
    <>
      <div className="container" style={{padding:'16px 20px',fontSize:13,color:'var(--ink-500)'}}>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('home');}}>Home</a> / <a href="#" onClick={(e)=>{e.preventDefault();goto('shop');}}>Shop</a> / <span style={{color:'var(--ink-900)'}}>{product.name}</span>
      </div>

      <section style={{padding:'8px 0 56px'}}>
        <div className="container">
          <div className="pdp-grid">
            <div className="pdp-gallery">
              <div className="main">
                <img src={product.gallery[imgIdx]} alt={product.name} loading="lazy" decoding="async"/>
              </div>
              <div className="thumbs">
                {product.gallery.map((g,i)=>(
                  <div key={i} className={`thumb ${i===imgIdx?'active':''}`} onClick={()=>setImgIdx(i)}>
                    <img src={g} alt="" loading="lazy" decoding="async"/>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <span className="eyebrow">{product.tag}</span>
              <h1 className="h-display" style={{fontSize:'clamp(30px, 5vw, 44px)',margin:'8px 0 4px'}}>{product.name}</h1>
              <div style={{fontFamily:'var(--font-deva)',fontSize:20,color:'var(--ink-700)',marginBottom:4}}>{product.hindi}</div>
              <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:18}}>
                <Stars rating={product.rating} size={16}/>
                <span style={{fontSize:13,color:'var(--ink-500)'}}>{product.rating} · {product.reviewCount} reviews</span>
              </div>

              <div style={{fontFamily:'var(--font-display)',fontSize:36,color:'var(--green-900)',marginBottom:6}}>
                {fmt(variant.price * qty)}
              </div>
              <div style={{fontSize:13,color:'var(--ink-500)',marginBottom:20}}>Inclusive of all taxes · Free shipping</div>

              <p style={{color:'var(--ink-700)',fontSize:15,marginBottom:22,lineHeight:1.6}}>{product.desc}</p>

              {product.variants.length > 1 && (
                <>
                  <div style={{fontSize:12,fontWeight:600,letterSpacing:'.04em',textTransform:'uppercase',color:'var(--ink-700)',marginBottom:8}}>Choose size</div>
                  <div className="weight-group">
                    {product.variants.map((v,i)=>(
                      <button key={i} className={`weight-chip ${i===variantIdx?'active':''}`} onClick={()=>setVariantIdx(i)}>
                        <strong>{v.weight}</strong>
                        <span className="w-price">{fmt(v.price)}</span>
                      </button>
                    ))}
                  </div>
                </>
              )}

              <div style={{display:'flex',gap:12,alignItems:'center',marginBottom:16,flexWrap:'wrap'}}>
                <div className="qty-stepper">
                  <button onClick={()=>setQty(Math.max(1, qty-1))}><Icon name="minus" size={16}/></button>
                  <span>{qty}</span>
                  <button onClick={()=>setQty(qty+1)}><Icon name="plus" size={16}/></button>
                </div>
                <button className="btn btn-primary btn-lg" style={{flex:1,minWidth:200}}
                  onClick={()=>{ for (let i=0;i<qty;i++) onAdd(product, variant); }}>
                  Add to cart · {fmt(variant.price * qty)}
                </button>
              </div>
              <button className="btn btn-gold btn-block btn-lg" style={{marginBottom:14}}
                onClick={()=>{ for (let i=0;i<qty;i++) onAdd(product, variant); goto('checkout'); }}>
                Buy now · Express checkout
              </button>

              <a className="btn btn-ghost btn-block" href={`https://wa.me/${window.SJ_DATA.brand.whatsapp}?text=Hi! I want to order ${product.name} (${variant.weight})`} target="_blank" rel="noopener">
                <Icon name="whatsapp" size={18}/> Order on WhatsApp
              </a>

              <div style={{display:'flex',gap:14,flexWrap:'wrap',margin:'24px 0'}}>
                <span className="pill"><Icon name="leaf" size={14}/> 100% Jain</span>
                <span className="pill"><Icon name="shield" size={14}/> No preservatives</span>
                <span className="pill"><Icon name="flame" size={14}/> {heatLabel}</span>
                <span className="pill"><Icon name="truck" size={14}/> Free shipping</span>
              </div>

              <div className="accordion">
                <details open>
                  <summary>Ingredients</summary>
                  <div className="a-body">{product.ingredients}</div>
                </details>
                <details>
                  <summary>How to use</summary>
                  <div className="a-body">Use a clean, dry spoon every time. Reseal tightly after each use. Pairs with parathas, dal-chawal, theplas, khichdi, dahi, or anything that needs a hit of Indori magic.</div>
                </details>
                <details>
                  <summary>Shelf life & storage</summary>
                  <div className="a-body">12 months unopened. After opening, keep in a cool, dry place — refrigeration optional but extends freshness.</div>
                </details>
                <details>
                  <summary>Shipping</summary>
                  <div className="a-body">Free shipping pan-India. Most orders deliver in 4–7 business days. Indore local: same-day. COD available with ₹50 charge + ₹100 partial prepayment.</div>
                </details>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Related */}
      <section className="section-tight" style={{background:'var(--cream-100)'}}>
        <div className="container">
          <h3 className="h-section" style={{fontSize:28,textAlign:'center',marginBottom:24}}>You might also like</h3>
          <div className="grid-3">
            {window.SJ_DATA.products.filter(p=>p.id!==productId).slice(0,3).map(p =>
              <ProductCard key={p.id} product={p} goto={goto} onAdd={onAdd}/>
            )}
          </div>
        </div>
      </section>
    </>
  );
};

const AboutPage = ({ goto }) => (
  <>
    <section style={{padding:'56px 0 24px',background:'var(--cream-100)'}}>
      <div className="container text-center">
        <span className="eyebrow">Our Story</span>
        <h1 className="h-display" style={{maxWidth:760,margin:'12px auto 0',fontSize:'clamp(34px, 6vw, 56px)'}}>
          Three generations.<br/><span style={{color:'var(--saffron)',fontStyle:'italic'}}>One recipe.</span>
        </h1>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="story-grid">
          <div className="story-image">
            <img src="assets/lifestyle-6.jpeg" alt="" loading="lazy" decoding="async"/>
          </div>
          <div>
            <h2 className="h-section" style={{marginBottom:16}}>It started in a Jain household in Indore.</h2>
            <p style={{color:'var(--ink-700)',fontSize:16,marginBottom:14}}>
              Every summer, our grandmother would set out trays of raw mango on the terrace, cover them with muslin, and let the Indori sun do its work. By evening, the courtyard smelled of mustard oil and roasted fenugreek. That was achar season.
            </p>
            <p style={{color:'var(--ink-700)',fontSize:16,marginBottom:14}}>
              Shudh Jain is that same kitchen — just bigger. We still cure mangoes in the sun. We still hand-pound our spices. We still refuse to add a single preservative, colour, or shortcut.
            </p>
            <p style={{color:'var(--ink-700)',fontSize:16}}>
              And because we're Jain, you'll never find onion, garlic, or any root vegetables in our recipes. Just the way it's been for generations.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section className="section" style={{background:'white'}}>
      <div className="container">
        <div className="text-center" style={{marginBottom:48}}>
          <h2 className="h-section">What we promise</h2>
        </div>
        <WhyUs/>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="combo-card text-center">
          <h3>Want to taste the difference?</h3>
          <p style={{maxWidth:480,margin:'8px auto 18px',opacity:.85}}>Try the trial combo — all four flavours in one pack at a special introductory price.</p>
          <button className="btn btn-gold btn-lg" onClick={()=>goto('product-combo')}>Get the combo · ₹499</button>
        </div>
      </div>
    </section>
  </>
);

const ContactPage = () => {
  const [sent, setSent] = useState(false);
  return (
    <>
      <section style={{padding:'56px 0 24px',background:'var(--cream-100)'}}>
        <div className="container text-center">
          <span className="eyebrow">Contact</span>
          <h1 className="h-section" style={{marginTop:10}}>Get in touch</h1>
          <p className="muted" style={{maxWidth:540,margin:'10px auto 0'}}>Bulk orders, wedding hampers, wholesale, or just a hello — we'd love to hear from you.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{display:'grid',gap:32,gridTemplateColumns:'1fr',maxWidth:920,margin:'0 auto'}} className="contact-grid">
            <div style={{display:'grid',gap:14}}>
              <div style={{display:'flex',gap:14,alignItems:'flex-start'}}>
                <div style={{width:44,height:44,borderRadius:'50%',background:'var(--green-50)',color:'var(--green-800)',display:'grid',placeItems:'center',flexShrink:0}}>
                  <Icon name="whatsapp"/>
                </div>
                <div>
                  <div style={{fontWeight:600,marginBottom:2}}>WhatsApp · fastest</div>
                  <a href={`https://wa.me/${window.SJ_DATA.brand.whatsapp}`} style={{color:'var(--green-800)'}}>{window.SJ_DATA.brand.phone}</a>
                  <div style={{fontSize:13,color:'var(--ink-500)'}}>Replies within 30 minutes · 9 AM – 9 PM</div>
                </div>
              </div>
              <div style={{display:'flex',gap:14,alignItems:'flex-start'}}>
                <div style={{width:44,height:44,borderRadius:'50%',background:'var(--green-50)',color:'var(--green-800)',display:'grid',placeItems:'center',flexShrink:0}}>
                  <Icon name="mail"/>
                </div>
                <div>
                  <div style={{fontWeight:600,marginBottom:2}}>Email</div>
                  <div>{window.SJ_DATA.brand.email}</div>
                </div>
              </div>
              <div style={{display:'flex',gap:14,alignItems:'flex-start'}}>
                <div style={{width:44,height:44,borderRadius:'50%',background:'var(--green-50)',color:'var(--green-800)',display:'grid',placeItems:'center',flexShrink:0}}>
                  <Icon name="pin"/>
                </div>
                <div>
                  <div style={{fontWeight:600,marginBottom:2}}>Kitchen</div>
                  <div>{window.SJ_DATA.brand.address}</div>
                </div>
              </div>
            </div>
            <div className="checkout-section" style={{margin:0}}>
              {sent ? (
                <div style={{textAlign:'center',padding:'24px 0'}}>
                  <div style={{width:56,height:56,borderRadius:'50%',background:'var(--green-50)',color:'var(--green-700)',display:'grid',placeItems:'center',margin:'0 auto 14px'}}>
                    <Icon name="check" size={28}/>
                  </div>
                  <h3 style={{margin:0,marginBottom:6}}>Message received!</h3>
                  <p className="muted">We'll get back to you within a few hours.</p>
                </div>
              ) : (
                <form onSubmit={(e)=>{e.preventDefault();setSent(true);}}>
                  <h3>Send us a message</h3>
                  <div className="grid-2" style={{gap:12,marginBottom:12}}>
                    <div className="field"><label>Name</label><input className="input" required defaultValue=""/></div>
                    <div className="field"><label>Phone</label><input className="input" required defaultValue=""/></div>
                  </div>
                  <div className="field" style={{marginBottom:12}}><label>Email</label><input className="input" type="email" defaultValue=""/></div>
                  <div className="field" style={{marginBottom:14}}><label>Message</label><textarea className="textarea" placeholder="Tell us what you need…" required defaultValue=""></textarea></div>
                  <button className="btn btn-primary btn-block btn-lg" type="submit">Send message</button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

const FAQPage = () => (
  <>
    <section style={{padding:'56px 0 24px',background:'var(--cream-100)'}}>
      <div className="container text-center">
        <span className="eyebrow">FAQ</span>
        <h1 className="h-section" style={{marginTop:10}}>Aapke sawal, hamare jawab</h1>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="faq-list accordion">
          {window.SJ_DATA.faqs.map((f,i)=>(
            <details key={i} open={i===0}>
              <summary>{f.q}</summary>
              <div className="a-body">{f.a}</div>
            </details>
          ))}
        </div>
        <div style={{textAlign:'center',marginTop:48}}>
          <p className="muted" style={{marginBottom:14}}>Still have questions?</p>
          <a className="btn btn-primary" href={`https://wa.me/${window.SJ_DATA.brand.whatsapp}`} target="_blank">
            <Icon name="whatsapp" size={18}/> Message us on WhatsApp
          </a>
        </div>
      </div>
    </section>
  </>
);

Object.assign(window, { HomePage, ShopPage, PDP, AboutPage, ContactPage, FAQPage });