// components.jsx — Shared UI components
const { useState, useEffect, useRef, useMemo } = React;

const fmt = (n) => "₹" + Math.round(n).toLocaleString("en-IN");

// ---------- ICONS ----------
const Icon = ({ name, size = 20, ...rest }) => {
  const paths = {
    leaf: <path d="M11 20A7 7 0 0 1 4 13c0-7 7-9 14-9 0 7-2 14-9 16Z M4 13c4 1 8 5 9 9" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>,
    mortar: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M5 11h14l-2 8a2 2 0 0 1-2 1H9a2 2 0 0 1-2-1Z"/><path d="M14 4l4 4M14 4l-2 2 4 4 2-2Z"/></g>,
    heart: <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    pin: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"><path d="M12 21s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z"/><circle cx="12" cy="9" r="2.5"/></g>,
    pot: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"><path d="M5 10h14l-1 9a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2Z"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></g>,
    bag: <path d="M6 8h12l-1 12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2Z M9 8a3 3 0 0 1 6 0" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    user: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></g>,
    search: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round"><circle cx="11" cy="11" r="6"/><path d="m20 20-4-4"/></g>,
    menu: <g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></g>,
    close: <g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="m6 6 12 12M18 6 6 18"/></g>,
    plus: <g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></g>,
    minus: <g stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 12h14"/></g>,
    arrow: <g stroke="currentColor" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></g>,
    check: <g stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></g>,
    star: <path d="M12 3l2.6 5.7 6.2.6-4.7 4.2 1.4 6.1L12 16.8l-5.5 2.8 1.4-6.1L3.2 9.3l6.2-.6Z" fill="currentColor"/>,
    whatsapp: <path d="M12 3a9 9 0 0 0-7.7 13.7L3 21l4.4-1.2A9 9 0 1 0 12 3Zm4.7 12.7c-.2.5-1.1 1-1.5 1-.4 0-.9.1-3-.9-2.5-1.2-4-3.8-4.2-4-.1-.2-1-1.3-1-2.6 0-1.2.7-1.8.9-2 .2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5.2.6.7 2 .8 2.1.1.1.1.3 0 .5l-.3.5c-.2.2-.3.4-.5.6-.2.2-.3.4-.1.7.2.4.8 1.4 1.8 2.2 1.2 1 2.2 1.4 2.6 1.5.3.1.5.1.7-.1.2-.2.8-1 1-1.2.2-.3.4-.2.7-.1.3.1 1.7.8 2 1 .3.1.5.2.6.3.1.2.1.7-.1 1.3Z" fill="currentColor"/>,
    truck: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h11v9H3z M14 10h4l3 3v3h-7z"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></g>,
    flame: <path d="M12 3c1 3-1 5-1 7s2 3 4 3c0 4-3 8-7 8s-6-3-6-7c0-3 2-5 3-6 1 2 3 1 3-2 0-1 1-2 2-3Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    chat: <path d="M4 5h16v11H8l-4 4Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    mail: <g stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"><path d="M3 6h18v12H3z"/><path d="m3 7 9 6 9-6"/></g>,
    phone: <path d="M5 4h3l2 5-2 1c1 2 3 4 5 5l1-2 5 2v3a2 2 0 0 1-2 2C9 20 4 15 4 6a2 2 0 0 1 1-2Z" stroke="currentColor" strokeWidth="1.6" fill="none" strokeLinejoin="round"/>,
    insta: <g stroke="currentColor" strokeWidth="1.6" fill="none"><rect x="4" y="4" width="16" height="16" rx="4"/><circle cx="12" cy="12" r="3.5"/><circle cx="17" cy="7" r="1" fill="currentColor"/></g>,
    fb: <path d="M14 8h2V5h-2c-2 0-4 1-4 4v2H8v3h2v7h3v-7h2.5l.5-3H13V9c0-.5.5-1 1-1Z" fill="currentColor"/>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...rest}>
      {paths[name]}
    </svg>
  );
};

const Stars = ({ rating = 5, size = 14 }) => {
  const full = Math.floor(rating);
  return (
    <span className="stars" style={{ display: "inline-flex", gap: 1 }}>
      {[1,2,3,4,5].map(i => (
        <Icon key={i} name="star" size={size} style={{ opacity: i <= full ? 1 : 0.25 }} />
      ))}
    </span>
  );
};

// ---------- BRAND MARK ----------
const BrandMark = ({ size = 38 }) => (
  <div className="brand-mark" style={{ width: size, height: size }}>
    <img src="assets/logo.jpeg" alt="Shudh Jain" width="35" height="35" decoding="async" loading="eager" fetchpriority="high" style={{width:'100%',height:'100%',objectFit:'cover',borderRadius:'50%'}}/>
  </div>
);

// ---------- HEADER ----------
const Header = ({ goto, cartCount, openCart }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const navTo = (page) => { setMenuOpen(false); goto(page); };
  return (
  <header className="site-header">
    <div className="container header-inner">
      <a className="brand" href="#" onClick={(e)=>{e.preventDefault();navTo('home');}}>
        <BrandMark/>
        <div className="brand-text">
          <span className="name">Shudh Jain</span>
          <span className="tag">Indori Achar · Est. Indore</span>
        </div>
      </a>
      <nav className="nav-desktop">
        <a href="#" onClick={(e)=>{e.preventDefault();goto('home');}}>Home</a>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('shop');}}>Shop All</a>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('shop');}}>Achar</a>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('product-jeeravan');}}>Jeeravan</a>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('about');}}>Our Story</a>
        <a href="#" onClick={(e)=>{e.preventDefault();goto('contact');}}>Contact</a>
      </nav>
      <div className="header-actions">
        <button className="icon-btn menu-btn" aria-label="Menu" onClick={()=>setMenuOpen(true)}><Icon name="menu"/></button>
        <button className="icon-btn" aria-label="Search"><Icon name="search"/></button>
        <button className="icon-btn" aria-label="Account" onClick={()=>goto('about')}><Icon name="user"/></button>
        <button className="icon-btn" aria-label="Cart" onClick={openCart}>
          <Icon name="bag"/>
          {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
        </button>
      </div>
    </div>
    <div className={`drawer-backdrop ${menuOpen?'open':''}`} onClick={()=>setMenuOpen(false)} style={{height:'100vh'}}></div>
    <aside className={`drawer ${menuOpen?'open':''}`} aria-hidden={!menuOpen} style={{left:0,right:'auto',width:'50vw',maxWidth:'300px',height:'100vh',transform:menuOpen?'translateX(0)':'translateX(-100%)',boxShadow:menuOpen?'10px 0 40px rgba(20,59,39,.15)':'none'}}>
      <div className="drawer-header">
        <strong>Menu</strong>
        <button className="icon-btn" aria-label="Close" onClick={()=>setMenuOpen(false)}><Icon name="close"/></button>
      </div>
      <div className="drawer-body">
        <nav className="nav-mobile" style={{display:'flex',flexDirection:'column',gap:'4px'}}>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('home');}} style={{padding:'14px 8px',borderBottom:'1px solid var(--line)',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Home</a>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('shop');}} style={{padding:'14px 8px',borderBottom:'1px solid var(--line)',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Shop All</a>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('shop');}} style={{padding:'14px 8px',borderBottom:'1px solid var(--line)',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Achar</a>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('product-jeeravan');}} style={{padding:'14px 8px',borderBottom:'1px solid var(--line)',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Jeeravan</a>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('about');}} style={{padding:'14px 8px',borderBottom:'1px solid var(--line)',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Our Story</a>
          <a href="#" onClick={(e)=>{e.preventDefault();navTo('contact');}} style={{padding:'14px 8px',fontSize:'17px',color:'inherit',textDecoration:'none'}}>Contact</a>
        </nav>
      </div>
    </aside>
  </header>
  );
};

// ---------- FOOTER ----------
const Footer = ({ goto }) => (
  <footer className="site-footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="brand">
            <BrandMark size={42}/>
            <div className="brand-text">
              <span className="name" style={{color:'var(--cream-50)'}}>Shudh Jain</span>
              <span className="tag" style={{color:'rgba(245,236,213,.55)'}}>Indori Achar · Est. Indore</span>
            </div>
          </div>
          <p>Small-batch, 100% Jain pickles and the legendary Indori Jeeravan — slow-crafted in Indore, shipped fresh across India.</p>
          <div style={{display:'flex',gap:10,marginTop:18}}>
            <a className="icon-btn" href="https://instagram.com/shudhjain.achar" target="_blank" rel="noopener" aria-label="@shudhjain.achar on Instagram" style={{background:'rgba(255,255,255,.08)',color:'var(--gold-300)'}}><Icon name="insta"/></a>
            <a className="icon-btn" href="#" style={{background:'rgba(255,255,255,.08)',color:'var(--gold-300)'}}><Icon name="fb"/></a>
            <a className="icon-btn" href="https://wa.me/918770167063" target="_blank" rel="noopener" aria-label="WhatsApp +91 87701 67063" style={{background:'rgba(255,255,255,.08)',color:'var(--gold-300)'}}><Icon name="whatsapp"/></a>
          </div>
        </div>
        <div className="footer-col">
          <h4>Shop</h4>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('shop');}}>All Products</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('product-aam');}}>Aam Achar</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('product-nimbu');}}>Nimbu Achar</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('product-mirch');}}>Mirch Achar</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('product-jeeravan');}}>Indori Jeeravan</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('product-combo');}}>Combo Pack</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Help</h4>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('contact');}}>Contact us</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('faq');}}>FAQ</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('faq');}}>Shipping & Returns</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('faq');}}>Track Order</a></li>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('contact');}}>WhatsApp Order</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#" onClick={(e)=>{e.preventDefault();goto('about');}}>Our Story</a></li>
            <li><a href="#">Bulk Orders</a></li>
            <li><a href="#">Wedding Hampers</a></li>
            <li><a href="#">Wholesale</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Shudh Jain. Made with love in Indore.</span>
        <span>FSSAI · Privacy · Terms</span>
      </div>
    </div>
  </footer>
);

// ---------- TRUST STRIP ----------
const TrustStrip = () => (
  <div className="strip">
    <div className="strip-track">
      {[
        "100% Jain — No Onion, No Garlic",
        "Free Shipping Across India",
        "No Preservatives · No Artificial Colours",
        "Small Batch · Made in Indore",
        "FSSAI Certified Kitchen",
        "5% OFF on all Prepaid Orders",
        "100% Jain — No Onion, No Garlic",
        "Free Shipping Across India",
        "No Preservatives · No Artificial Colours",
        "Small Batch · Made in Indore",
        "FSSAI Certified Kitchen",
        "5% OFF on all Prepaid Orders",
      ].map((t,i)=>(<span key={i}>{t}</span>))}
    </div>
  </div>
);

// ---------- PRODUCT CARD ----------
const ProductCard = ({ product, goto, onAdd }) => {
  const [selectedVariant, setSelectedVariant] = useState(product.variants[0]);
  const minPrice = Math.min(...product.variants.map(v=>v.price));
  return (
    <div className="product-card">
      <div className="media" onClick={()=>goto('product-'+product.id)} style={{cursor:'pointer'}}>
        <img src={product.image} alt={product.name} width="280" height="280" loading="lazy" decoding="async"/>
        {product.tag && <span className="badge">{product.tag}</span>}
      </div>
      <div className="body">
        <a className="title" href="#" onClick={(e)=>{e.preventDefault();goto('product-'+product.id);}} style={{cursor:'pointer',textDecoration:'none'}}>{product.name}</a>
        <div className="meta">{product.tagline}</div>
        <div style={{display:'flex',alignItems:'center',gap:6,marginTop:2}}>
          <Stars rating={product.rating}/>
          <span style={{fontSize:12,color:'var(--ink-500)'}}>({product.reviewCount})</span>
        </div>
        {product.variants.length > 1 && (
          <div style={{display:'flex',gap:6,flexWrap:'wrap',marginTop:8}}>
            {product.variants.map((v,i)=>{
              const isSel = selectedVariant.weight === v.weight;
              return (
              <button key={i} type="button" onClick={(e)=>{e.preventDefault();e.stopPropagation();setSelectedVariant(v);}} style={{
                cursor:'pointer',
                fontSize:11,fontWeight:600,letterSpacing:'.02em',
                background:isSel?'var(--green-700, #1f7a3a)':'var(--cream-100)',
                color:isSel?'#fff':'var(--ink-700)',
                border:isSel?'1px solid var(--green-700, #1f7a3a)':'1px solid var(--line)',
                padding:'3px 8px',borderRadius:999,
                transition:'background .15s, color .15s, border-color .15s',
              }}>{v.weight}</button>
              );
            })}
          </div>
        )}
        <span className="card-prepaid">+5% off on prepaid orders</span><div className="price-row">
          <span className="price">{fmt(selectedVariant.price)}</span>
          <button className="add" onClick={(e)=>{e.stopPropagation();onAdd(product, selectedVariant);}} aria-label="Add to cart"><Icon name="plus" size={18}/></button>
        </div>
      </div>
    </div>
  );
};

// ---------- WHY US ----------
const WhyUs = () => {
  const items = [
    { badge: 'assets/badge-jain-v3.png', title: '100% Jain', sub: 'No onion, no garlic. Pure Jain recipe.' },
    { badge: 'assets/badge-no-preservatives-v3.png', title: 'No Preservatives', sub: 'No artificial colours or chemicals.' },
    { badge: 'assets/badge-homemade-v2.png', title: 'Homemade Taste', sub: 'Ghar jaisa swad, har bite mein.' },
    { badge: 'assets/badge-small-batch-v3.png', title: 'Small Batch', sub: 'Freshly prepared in small quantities.' },
    { badge: 'assets/badge-premium-v3.png', title: 'Premium Ingredients', sub: 'Carefully selected, hand-pounded spices.' },
    { badge: 'assets/badge-authentic-indori-v3.png', title: 'Authentic Indori', sub: 'Made in Indore, the original way.' },
  ];
  return (
    <div className="grid-3" style={{gap:24}}>
      {items.map((it,i)=>(
        <div key={i} style={{textAlign:'center',padding:'8px 4px'}}>
          {it.badge ? (
            <div style={{
              width:96,height:96,borderRadius:'50%',
              background:'#fff',border:'1.5px solid var(--gold-300)',
              margin:'0 auto 14px',overflow:'hidden',
              display:'grid',placeItems:'center',
              boxShadow:'0 1px 0 rgba(0,0,0,0.04)'
            }}>
              <img src={it.badge} alt={it.title} width="76" height="76" loading="lazy" decoding="async" style={{width:'82%',height:'82%',objectFit:'contain'}}/>
            </div>
          ) : (
            <div style={{
              width:96,height:96,borderRadius:'50%',
              background:'var(--cream-100)',border:'1.5px solid var(--gold-300)',
              display:'grid',placeItems:'center',margin:'0 auto 14px',
              color:'var(--green-800)'
            }}>
              <Icon name={it.icon} size={36}/>
            </div>
          )}
          <div style={{fontFamily:'var(--font-display)',fontSize:18,color:'var(--green-900)',marginBottom:4}}>{it.title}</div>
          <div style={{fontSize:13,color:'var(--ink-500)',maxWidth:200,margin:'0 auto'}}>{it.sub}</div>
        </div>
      ))}
    </div>
  );
};


// ---------- WHATSAPP FLOATING WIDGET ----------
const WhatsAppFloat = ({ phone = "918770167063", message = "Hi! I'd like to know more about Shudh Jain achar." }) => {
  const [open, setOpen] = useState(false);
  const url = "https://wa.me/" + phone + "?text=" + encodeURIComponent(message);
  return (
    <div style={{position:'fixed',right:20,bottom:20,zIndex:9999,fontFamily:'inherit'}}>
      {open && (
        <div style={{
          position:'absolute',bottom:78,right:0,width:300,background:'#fff',
          border:'1px solid var(--line, #e5e0d3)',borderRadius:14,
          boxShadow:'0 12px 32px rgba(20,59,39,.18)',overflow:'hidden'
        }}>
          <div style={{background:'#128C7E',color:'#fff',padding:'14px 16px',display:'flex',alignItems:'center',gap:10}}>
            <div style={{width:40,height:40,borderRadius:'50%',background:'#fff',display:'grid',placeItems:'center',color:'#128C7E'}}>
              <Icon name="whatsapp" size={26}/>
            </div>
            <div style={{flex:1}}>
              <div style={{fontWeight:600,fontSize:14}}>Shudh Jain</div>
              <div style={{fontSize:12,opacity:.85}}>Typically replies in minutes</div>
            </div>
            <button onClick={()=>setOpen(false)} aria-label="Close" style={{background:'transparent',border:'none',color:'#fff',cursor:'pointer'}}>
              <Icon name="close" size={18}/>
            </button>
          </div>
          <div style={{padding:'14px 16px',background:'#ECE5DD'}}>
            <div style={{background:'#fff',padding:'10px 12px',borderRadius:'0 10px 10px 10px',fontSize:13,color:'#222',display:'inline-block',maxWidth:'100%'}}>
              Namaste! 🙏 How can we help you today? Ask us about our Jain achar, Indori Jeeravan, or bulk orders.
            </div>
          </div>
          <a href={url} target="_blank" rel="noopener" style={{
            display:'flex',alignItems:'center',justifyContent:'center',gap:8,
            background:'#25D366',color:'#fff',padding:'12px 16px',
            textDecoration:'none',fontWeight:600,fontSize:14
          }}>
            <Icon name="whatsapp" size={18}/> Start Chat
          </a>
        </div>
      )}
      <button
        onClick={()=>setOpen(o=>!o)}
        aria-label="Chat on WhatsApp"
        style={{
          width:60,height:60,borderRadius:'50%',background:'#25D366',color:'#fff',
          border:'none',cursor:'pointer',display:'grid',placeItems:'center',
          boxShadow:'0 8px 24px rgba(37,211,102,.45)',
          animation: open ? 'none' : 'sj-wa-pulse 2.2s ease-out infinite'
        }}>
        <Icon name={open ? 'close' : 'whatsapp'} size={30}/>
      </button>
      <style>{`
        @keyframes sj-wa-pulse {
          0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55), 0 8px 24px rgba(37,211,102,.45); }
          70% { box-shadow: 0 0 0 18px rgba(37,211,102,0), 0 8px 24px rgba(37,211,102,.45); }
          100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 8px 24px rgba(37,211,102,.45); }
        }
      `}</style>
    </div>
  );
};

// expose
Object.assign(window, { Icon, Stars, BrandMark, Header, Footer, TrustStrip, ProductCard, WhyUs, WhatsAppFloat, fmt });
