const { useState, useEffect } = React;

function App() {
  const tweakResult = useTweaks(TWEAK_DEFAULTS);
  const tweaks = tweakResult?.tweaks ?? TWEAK_DEFAULTS;
  const setTweak = tweakResult?.setTweak ?? (()=>{});
  const TweaksPanel = tweakResult?.TweaksPanel ?? (({children})=>null);
  const TweakSection = tweakResult?.TweakSection ?? (({children})=>null);
  const TweakNumber = tweakResult?.TweakNumber ?? (()=>null);
  const TweakText   = tweakResult?.TweakText   ?? (()=>null);

  const price    = tweaks.price    ?? 349;
  const oldPrice = tweaks.oldPrice ?? 499;
  const rzKey    = tweaks.razorpayKey ?? '';

  const [cart, setCart] = useState(()=>{
    try { return JSON.parse(localStorage.getItem('dl_cart')||'[]'); } catch{ return []; }
  });
  useEffect(()=>{ localStorage.setItem('dl_cart', JSON.stringify(cart)); }, [cart]);

  const [qty, setQty]               = useState(1);
  const [cartOpen, setCartOpen]     = useState(false);
  const [rzOpen, setRzOpen]         = useState(false);
  const [rzTotals, setRzTotals]     = useState(null);
  const [toast, setToast]           = useState({show:false,msg:''});
  const [activeThumb, setActiveThumb] = useState(0);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  useEffect(()=>{
    document.body.style.overflow = mobileMenuOpen ? 'hidden' : '';
    return ()=>{ document.body.style.overflow = ''; };
  }, [mobileMenuOpen]);

  const totalCartQty = cart.reduce((s,i)=>s+i.qty,0);

  const productImages = [
    'uploads/Screenshot 2026-05-01 at 5.03.28 PM.png',
    'uploads/WhatsApp Image 2026-05-01 at 2.53.07 PM (2).jpeg',
  ];

  function showToast(msg) {
    setToast({show:true,msg});
    setTimeout(()=>setToast(t=>({...t,show:false})),3000);
  }

  function addToCart() {
    setCart(c=>{
      const existing = c.findIndex(i=>i.id==='henna-100g');
      if(existing>=0){
        const n=[...c]; n[existing]={...n[existing],qty:n[existing].qty+qty}; return n;
      }
      return [...c,{id:'henna-100g',qty}];
    });
    showToast('Added ×'+qty+' to cart!');
    setCartOpen(true);
  }

  function updateQty(idx,newQty) {
    if(newQty<1){ removeItem(idx); return; }
    setCart(c=>{ const n=[...c]; n[idx]={...n[idx],qty:newQty}; return n; });
  }
  function removeItem(idx) {
    setCart(c=>c.filter((_,i)=>i!==idx));
  }

  function handleCheckout(totals) {
    setRzTotals(totals);
    setCartOpen(false);
    setRzOpen(true);
  }
  function handleSuccess() {
    setCart([]);
    setRzOpen(false);
  }

  function buyNow() {
    const subtotal = price*qty;
    const shipping = subtotal>=SHIPPING_THRESHOLD?0:SHIPPING_COST;
    setCart([{id:'henna-100g',qty}]);
    setRzTotals({subtotal,shipping,total:subtotal+shipping});
    setRzOpen(true);
  }

  return (
    <>
      <div className="announce">
        <div className="announce-track">
          &nbsp;&nbsp;&nbsp;🌿 Free Delivery on orders above ₹499 &nbsp;·&nbsp; 100% Natural &amp; Chemical Free &nbsp;·&nbsp; Trusted by 10,000+ customers &nbsp;·&nbsp; 30-day satisfaction guarantee &nbsp;·&nbsp;
          &nbsp;&nbsp;&nbsp;🌿 Free Delivery on orders above ₹499 &nbsp;·&nbsp; 100% Natural &amp; Chemical Free &nbsp;·&nbsp; Trusted by 10,000+ customers &nbsp;·&nbsp; 30-day satisfaction guarantee &nbsp;·&nbsp;
        </div>
      </div>

      <nav>
        <div className="nav-logo">
          <div className="nav-logo-main">Divine Leaf</div>
          <div className="nav-logo-sub">Organic Henna</div>
        </div>
        <ul className="nav-links">
          <li><a href="#product">Shop</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#how-to">How To Use</a></li>
          <li><a href="#reviews">Reviews</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
        <div className="nav-right">
          <div className="nav-phone">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.34 9.28 19.79 19.79 0 01.25 4.63 2 2 0 012.23 2.5h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 10a16 16 0 006.29 6.29l.57-.57a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            +91 9891015404
          </div>
          <button className="btn-nav btn-nav-cart" onClick={()=>setCartOpen(true)}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg>
            Cart
            {totalCartQty>0&&<div className="cart-badge">{totalCartQty}</div>}
          </button>
          <button
            className={`nav-burger ${mobileMenuOpen?'open':''}`}
            aria-label="Toggle menu"
            aria-expanded={mobileMenuOpen}
            onClick={()=>setMobileMenuOpen(o=>!o)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      <div
        className={`mobile-menu-backdrop ${mobileMenuOpen?'open':''}`}
        onClick={()=>setMobileMenuOpen(false)}
      ></div>
      <aside className={`mobile-menu ${mobileMenuOpen?'open':''}`}>
        <div className="mobile-menu-head">
          <div className="nav-logo-main">Divine Leaf</div>
          <button
            className="mobile-menu-close"
            aria-label="Close menu"
            onClick={()=>setMobileMenuOpen(false)}
          >×</button>
        </div>
        <ul className="mobile-menu-links">
          {[
            {href:'#product', label:'Shop'},
            {href:'#about', label:'About'},
            {href:'#how-to', label:'How To Use'},
            {href:'#reviews', label:'Reviews'},
            {href:'#contact', label:'Contact'},
          ].map(l=>(
            <li key={l.href}>
              <a href={l.href} onClick={()=>setMobileMenuOpen(false)}>{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="mobile-menu-foot">
          <div className="nav-phone">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.34 9.28 19.79 19.79 0 01.25 4.63 2 2 0 012.23 2.5h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.91 10a16 16 0 006.29 6.29l.57-.57a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
            +91 9891015404
          </div>
        </div>
      </aside>

      <section className="hero">
        <div className="hero-left">
          <div className="hero-badge">100% Natural &amp; Chemical Free</div>
          <h1 className="hero-title">
            Pure Organic Henna<br/>
            for <em>Naturally Beautiful</em><br/>
            <strong>Hair</strong>
          </h1>
          <p className="hero-sub">
            Experience the power of nature with <strong>Divine Leaf Organic Henna</strong> —
            soft, chemical-free care for stronger, shinier hair. Made with love, purity,
            and the goodness of natural leaves.
          </p>
          <div className="hero-actions">
            <button className="btn-primary" onClick={()=>document.getElementById('product').scrollIntoView({behavior:'smooth'})}>Shop Now</button>
            <button className="btn-secondary" onClick={()=>document.getElementById('how-to').scrollIntoView({behavior:'smooth'})}>How To Use</button>
          </div>
          <div className="hero-trust">
            {['100% Organic','No Chemicals','Safe for Regular Use','Smooth &amp; Soft Texture'].map(t=>(
              <div key={t} className="hero-trust-item">
                <span className="trust-check">✔</span>
                <span dangerouslySetInnerHTML={{__html:t}}/>
              </div>
            ))}
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-img-wrap">
            <svg className="hero-leaf-bg" viewBox="0 0 200 200" fill="none">
              <path d="M100 10 C160 10, 190 60, 190 100 C190 155, 150 190, 100 190 C40 185, 10 130, 20 80 C30 30, 60 10, 100 10Z" fill="#1a3d1f"/>
              <path d="M100 30 L100 180" stroke="#fff" strokeWidth="2" opacity="0.3"/>
              <path d="M100 60 Q60 90 30 100" stroke="#fff" strokeWidth="1.5" opacity="0.2"/>
              <path d="M100 90 Q58 115 35 130" stroke="#fff" strokeWidth="1.5" opacity="0.2"/>
              <path d="M100 60 Q140 90 170 100" stroke="#fff" strokeWidth="1.5" opacity="0.2"/>
              <path d="M100 90 Q142 115 165 130" stroke="#fff" strokeWidth="1.5" opacity="0.2"/>
            </svg>
            <div className="hero-img-frame">
              <img src="uploads/Screenshot 2026-05-01 at 5.03.28 PM.png" alt="Divine Leaf Organic Henna product packaging"/>
            </div>
            <div className="hero-img-badge">
              <strong>100%</strong>
              Natural<br/>Chemical<br/>Free
            </div>
          </div>
        </div>
      </section>

      <section className="section-wrap alt" id="about">
        <div className="about-grid">
          <div className="about-img">
            <img src="uploads/Screenshot 2026-05-01 at 5.03.28 PM.png" alt="Divine Roots Organic Henna how to use infographic"/>
          </div>
          <div className="about-content">
            <div className="section-eyebrow left">Our Story</div>
            <h2 className="section-title">Inspired by nature<br/>and <em>tradition.</em></h2>
            <div className="gold-divider" style={{margin:'16px 0 24px',justifyContent:'flex-start'}}>
              <div className="gold-divider-line"></div>
              <div className="gold-divider-icon">✦</div>
              <div className="gold-divider-line"></div>
            </div>
            <p className="about-text">
              Divine Leaf is inspired by nature and tradition. We create hair care products that are <strong>safe, organic, and chemical-free</strong>, so you can care for your hair without compromise.
            </p>
            <p className="about-text">
              Our henna is made with love, purity, and the goodness of natural leaves — harvested from pristine farms and processed without harsh chemicals to deliver the richest, most natural colour possible.
            </p>
            <button className="btn-primary" onClick={()=>document.getElementById('product').scrollIntoView({behavior:'smooth'})}>
              Shop Now
            </button>
          </div>
        </div>
      </section>

      <section className="section-wrap dark section-center">
        <div className="section-eyebrow">Why Choose Us</div>
        <h2 className="section-title">The Divine Leaf <em>Difference</em></h2>
        <div className="gold-divider">
          <div className="gold-divider-line"></div>
          <div className="gold-divider-icon">✦</div>
          <div className="gold-divider-line"></div>
        </div>
        <div className="why-grid-wrap">
          <div className="why-grid">
            {[
              { icon:'🌿', name:'100% Organic', desc:'Sourced from certified organic farms. Nothing artificial, ever.' },
              { icon:'⚗️', name:'No Chemicals', desc:'Zero ammonia, zero peroxide, zero parabens. Pure botanical goodness.' },
              { icon:'🔄', name:'Safe for Regular Use', desc:'Gentle enough to use every 4–6 weeks without damaging your hair.' },
              { icon:'✨', name:'Smooth &amp; Soft Texture', desc:'Leaves hair silky, manageable, and deeply conditioned after every use.' },
              { icon:'🏆', name:'Trusted Quality', desc:'10,000+ happy customers across India trust Divine Leaf for natural colour.' },
            ].map(w=>(
              <div key={w.name} className="why-card">
                <span className="why-icon">{w.icon}</span>
                <div className="why-name">{w.name}</div>
                <div className="why-desc" dangerouslySetInnerHTML={{__html:w.desc}}/>
                <div className="why-line"></div>
              </div>
            ))}
          </div>
          <div className="why-slider-hint" aria-hidden="true">← swipe →</div>
        </div>
      </section>

      <section className="product-section" id="product">
        <div className="product-gallery">
          <div className="product-main-img">
            <img src={productImages[activeThumb]} alt="Divine Leaf Organic Henna" style={{maxHeight:460,objectFit:'cover',width:'100%'}}/>
          </div>
          <div className="product-thumbs">
            {productImages.map((img,i)=>(
              <div key={i} className={`product-thumb ${activeThumb===i?'active':''}`} onClick={()=>setActiveThumb(i)}>
                <img src={img} alt={`Product view ${i+1}`}/>
              </div>
            ))}
          </div>
        </div>

        <div className="product-info">
          <div className="product-badge-row">
            <div className="product-badge">100% Natural</div>
            <div className="product-badge">Chemical Free</div>
            <div className="product-badge">Pure Herbal</div>
          </div>
          <div className="product-name">Divine Leaf<br/><em>Organic Henna Powder</em></div>
          <div className="product-tagline">Natural Hair Colouring · Deep Conditioning · 100g</div>
          <div className="product-stars">
            <span className="stars">★★★★★</span>
            <span className="review-count">4.9 · 2,847 reviews</span>
          </div>
          <ul className="product-features">
            {['Natural Hair Coloring','Deep Conditioning Formula','Promotes Hair Growth','Reduces Hair Fall','Covers Greys Naturally','Pure Herbal Powder'].map(f=>(
              <li key={f}><div className="feat-dot">✓</div>{f}</li>
            ))}
          </ul>
          <div className="product-price-row">
            <div className="product-price"><sup>₹</sup>{price}</div>
            <div className="product-price-old">₹{oldPrice}</div>
            <div className="product-price-save">Save ₹{oldPrice-price}</div>
          </div>
          <div className="qty-row">
            <span className="qty-label">Qty</span>
            <div className="qty-ctrl">
              <button className="qty-btn" onClick={()=>setQty(q=>Math.max(1,q-1))}>−</button>
              <div className="qty-num">{qty}</div>
              <button className="qty-btn" onClick={()=>setQty(q=>q+1)}>+</button>
            </div>
          </div>
          <button className="btn-buy" onClick={buyNow}>
            Buy Now — ₹{(price*qty).toFixed(0)}
          </button>
          <button className="btn-cart" onClick={addToCart}>+ Add to Cart</button>
          <div className="product-assurances">
            {['🔒 Secure Payment','🚚 Free delivery above ₹499','↩ 30-day guarantee','🌿 100% Natural'].map(a=>(
              <div key={a} className="assurance">{a}</div>
            ))}
          </div>
        </div>
      </section>

      <section className="how-to-section" id="how-to">
        <div className="section-center">
          <div className="section-eyebrow">Step by Step</div>
          <h2 className="section-title">How to Use <em>Divine Leaf</em></h2>
          <div className="gold-divider">
            <div className="gold-divider-line"></div>
            <div className="gold-divider-icon">✦</div>
            <div className="gold-divider-line"></div>
          </div>
        </div>
        <div className="steps-grid">
          {[
            { n:1, icon:'🥣', title:'Mix', sub:'Prepare the paste', desc:'Mix 1 spoon of curd (yogurt) and warm water with Divine Leaf henna until you get a smooth paste.' },
            { n:2, icon:'⏰', title:'Soak', sub:'5 to 6 hours', desc:'Soak it for 5 to 6 hours for the best colour release and deep pigmentation.' },
            { n:3, icon:'💆', title:'Apply', sub:'Roots to tips', desc:'Apply the mixture to your hair, ensuring even coverage from roots to tips.' },
            { n:4, icon:'🕐', title:'Let it Sit', sub:'2 hours', desc:'Let it sit for 2 hours for deep nourishment and rich colour penetration.' },
            { n:5, icon:'🚿', title:'Wash', sub:'Normal water', desc:'Wash it off with normal water and enjoy naturally coloured, healthy, and shiny hair.' },
          ].map(s=>(
            <div key={s.n} className="step-card">
              <div className="step-num">{s.n}</div>
              <span className="step-icon">{s.icon}</span>
              <div className="step-title">{s.title}</div>
              <div className="step-sub">{s.sub}</div>
              <div className="step-desc">{s.desc}</div>
            </div>
          ))}
        </div>
        <div className="how-to-tagline">✦ Natural Beauty, Naturally You! ✦</div>
      </section>

      <section className="section-wrap dark section-center">
        <div className="section-eyebrow">Benefits</div>
        <h2 className="section-title">What Divine Leaf <em>Does for You</em></h2>
        <div className="gold-divider">
          <div className="gold-divider-line"></div>
          <div className="gold-divider-icon">✦</div>
          <div className="gold-divider-line"></div>
        </div>
        <div className="benefits-grid">
          {[
            { icon:'✨', title:'Adds Shine', desc:'Botanical oils coat each strand, reflecting light for mirror-like gloss and natural lustre.' },
            { icon:'💪', title:'Strengthens Hair', desc:'Henna protein bonds fill gaps in the hair cortex, reducing breakage and improving tensile strength.' },
            { icon:'🌊', title:'Improves Texture', desc:'Transforms coarse or damaged hair into silky, manageable locks with every application.' },
            { icon:'❄️', title:'Natural Cooling Effect', desc:'Henna\'s natural cooling properties soothe the scalp, reducing irritation and promoting comfort.' },
          ].map(b=>(
            <div key={b.title} className="benefit-card">
              <div className="benefit-icon-wrap">{b.icon}</div>
              <div>
                <div className="benefit-title">{b.title}</div>
                <div className="benefit-desc">{b.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section-wrap section-center" id="reviews">
        <div className="section-eyebrow">Customer Reviews</div>
        <h2 className="section-title">What Our Customers <em>Say</em></h2>
        <div className="gold-divider">
          <div className="gold-divider-line"></div>
          <div className="gold-divider-icon">✦</div>
          <div className="gold-divider-line"></div>
        </div>
        <div className="reviews-grid">
          {[
            { text: 'My hair feels so soft and natural after using Divine Leaf Henna! I\'ve tried many products but nothing compares to this.', author:'Priya S.', location:'Delhi', stars:5 },
            { text: 'Finally found a chemical-free henna that actually works! My greys are covered beautifully and my hair feels stronger.', author:'Meena R.', location:'Mumbai', stars:5 },
            { text: 'I love how easy it is to apply and the colour lasts so long. Completely natural, no smell issues. Absolutely love it!', author:'Sunita K.', location:'Bangalore', stars:5 },
          ].map(r=>(
            <div key={r.author} className="review-card">
              <div className="review-stars">{'★'.repeat(r.stars)}</div>
              <div className="review-text">"{r.text}"</div>
              <div className="review-author">{r.author}</div>
              <div className="review-location">{r.location}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="contact-section" id="contact">
        <div className="section-eyebrow">Get in Touch</div>
        <h2 className="section-title" style={{textAlign:'center'}}>We're Here to <em>Help</em></h2>
        <div className="gold-divider">
          <div className="gold-divider-line"></div>
          <div className="gold-divider-icon">✦</div>
          <div className="gold-divider-line"></div>
        </div>
        <div className="contact-grid">
          <div className="contact-card">
            <div className="contact-icon">📞</div>
            <div className="contact-label">Phone</div>
            <div className="contact-value">+91 9891015404</div>
          </div>
          <div className="contact-card">
            <div className="contact-icon">📍</div>
            <div className="contact-label">Location</div>
            <div className="contact-value">India</div>
          </div>
          <div className="contact-card">
            <div className="contact-icon">⏰</div>
            <div className="contact-label">Support Hours</div>
            <div className="contact-value">Mon–Sat 9am–7pm</div>
          </div>
        </div>
      </section>

      <footer>
        <div className="footer-top">
          <div>
            <div className="footer-brand-name">Divine Leaf</div>
            <div className="footer-brand-sub">Organic Henna</div>
            <div className="footer-about">
              We create hair care products that are safe, organic, and chemical-free,
              so you can care for your hair without compromise. Made with love, purity,
              and the goodness of natural leaves.
            </div>
            <div className="footer-tagline">✦ Go Natural with Divine Leaf ✦</div>
          </div>
          <div>
            <div className="footer-col-title">Shop</div>
            <ul className="footer-links">
              <li><a href="#product">Organic Henna</a></li>
              <li><a href="#product">Hair Care</a></li>
              <li><a href="#product">Starter Kits</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-title">Learn</div>
            <ul className="footer-links">
              <li><a href="#about">About Us</a></li>
              <li><a href="#how-to">How To Use</a></li>
              <li><a href="#reviews">Reviews</a></li>
            </ul>
          </div>
          <div>
            <div className="footer-col-title">Contact</div>
            <ul className="footer-links">
              <li><a href="tel:+919891015404">+91 9891015404</a></li>
              <li><a href="#contact">India</a></li>
              <li><a href="#contact">Support</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Divine Leaf Organic Henna. All rights reserved.</span>
          <span>Privacy Policy · Terms of Service</span>
        </div>
      </footer>

      <CartDrawer
        open={cartOpen}
        cart={cart}
        price={price}
        onClose={()=>setCartOpen(false)}
        onUpdateQty={updateQty}
        onRemove={removeItem}
        onCheckout={handleCheckout}
      />

      {rzOpen && rzTotals && (
        <RazorpayModal
          totals={rzTotals}
          rzKey={rzKey}
          onClose={()=>setRzOpen(false)}
          onSuccess={handleSuccess}
        />
      )}

      <div className={`toast ${toast.show?'show':''}`}>🌿 {toast.msg}</div>

      <TweaksPanel>
        <TweakSection label="Pricing">
          <TweakNumber label="Price (₹)" value={tweaks.price} min={99} max={999} step={1} onChange={v=>setTweak('price',v)}/>
          <TweakNumber label="Old Price (₹)" value={tweaks.oldPrice} min={100} max={1499} step={1} onChange={v=>setTweak('oldPrice',v)}/>
        </TweakSection>
        <TweakSection label="Razorpay">
          <TweakText label="API Key" value={tweaks.razorpayKey} onChange={v=>setTweak('razorpayKey',v)}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);