// Home page — hero + sections
const { useState: useStateHome } = React;

function FeaturedProducts({ openProduct, setPage, wishlist = [], toggleWishlist }) {
  const featured = window.BAMBOO_PRODUCTS.slice(0, 4);
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div style={{flex:1}}>
            <div className="mono">— Handcrafted Living</div>
            <h2>Rooted in nature,<br/><em className="italic">crafted for mindful living.</em></h2>
          </div>
          <div className="head-side">
            Each creation is hand-shaped from seasoned natural bamboo by master artisans in Maharashtra — bringing sustainable warmth, harmony, and timeless Indian craftsmanship into your home.
          </div>
        </div>
        <div className="products-grid" style={{'--cols': 4}}>
          {featured.map(p => (
            <a
              key={p.id}
              href={`/products/${window.slugify(p.name)}/`}
              className="product-card"
              onClick={(e) => { e.preventDefault(); openProduct(p.id); }}
              style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}
            >
              <SmoothBackground
                className="product-card-img"
                data-label={p.name}
                src={p.image}
                style={{ backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative' }}
                role="img"
                aria-label={`Handmade ${p.name} - Bamboos Culture`}
              >
                <button
                  className={'wishlist-btn-card ' + (wishlist.includes(p.id) ? 'active' : '')}
                  onClick={(e) => {
                    e.stopPropagation();
                    e.preventDefault();
                    toggleWishlist(p.id);
                  }}
                  aria-label="Wishlist"
                >
                  <svg viewBox="0 0 24 24">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                </button>
              </SmoothBackground>
              <div className="product-card-cat">{p.cat}</div>
              <div className="product-card-name">{window.renderProductName ? window.renderProductName(p.name) : p.name}</div>
              <div className="product-card-price">₹{p.price}</div>
            </a>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '48px' }}>
          <button
            className="pd-add"
            style={{ width: 'auto', padding: '14px 32px' }}
            onClick={() => setPage('shop')}
          >
            Explore the Collection
          </button>
        </div>
      </div>
    </section>
  );
}

function AboutStrip({ setPage }) {
  return (
    <section className="about-strip">
      <div className="container">
        <div className="about-inner">
          <div className="about-copy">
            <div className="mono">— Our craft</div>
            <h2>A slower kind of<br/><em className="italic">material.</em></h2>
            <p>Welcome to Bamboos Culture. We design and craft premium, sustainable, and eco friendly bamboo products in India. Our master artisans hand-pick and season only the finest culms to create elegant handmade bamboo products in Nashik.</p>
            <p>Dedicated to delivering quality across the nation, Bamboos Culture brings spiritual harmony, premium kitchenware, and custom home decor to your space using authentic Indian bamboo products seasoned with patience.</p>
            <a href="/about/" className="about-cta" onClick={(e) => { e.preventDefault(); setPage('about'); }}>
              Read our story →
            </a>
          </div>
          <SmoothBackground className="about-visual" src="/about_craft.jpg?v=1" />
        </div>
      </div>
    </section>
  );
}

function Instagram() {
  return (
    <section>
      <div className="container">
        <div className="section-head">
          <div style={{flex:1}}>
            <div className="mono">@bamboosculture</div>
            <h2>From the community.</h2>
          </div>
          <div className="head-side">
            Tag <strong>#lifewithbamboo</strong> to be featured. Every month we send our favorite post a piece from the shelf.
          </div>
        </div>
        <div className="insta-grid">
          {Array.from({ length: 6 }).map((_, i) => <div key={i} className="insta-tile" />)}
        </div>
      </div>
    </section>
  );
}

function ContactStrip({ setPage }) {
  const [name, setName] = React.useState('');
  const [subject, setSubject] = React.useState('');
  const [message, setMessage] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    const text = `Hello BamboosCulture,\n\nI would like to get in touch.\n\n*Name:* ${name}\n*Subject:* ${subject || 'General Inquiry'}\n*Message:* ${message}`;
    const whatsappUrl = `https://wa.me/918856822216?text=${encodeURIComponent(text)}`;
    window.open(whatsappUrl, '_blank');
  };

  return (
    <section className="contact">
      <div className="container">
        <div className="contact-inner">
          <div className="contact-copy">
            <div className="mono">— Get in touch</div>
            <h2>Questions, custom<br/>orders, or just to say hello.</h2>
            <p>Our studio answers within two working days. For wholesale and interior projects, please include measurements and a rough timeline.</p>
            <div className="contact-info">
              <strong>Studio</strong>
              Nashik, Maharashtra, India
              <strong>Email</strong>
              bamboosculture@gmail.com
              <strong>Instagram</strong>
              <a href="https://www.instagram.com/bamboosculture/" target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'underline' }}>bamboosculture</a>
              <strong>WhatsApp / Phone</strong>
              <a href="tel:+918856822216" style={{ color: 'inherit', textDecoration: 'none' }}>+91 8856822216</a><br/>
              <a href="tel:+919145561006" style={{ color: 'inherit', textDecoration: 'none' }}>+91 9145561006</a><br/>
              <a href="tel:+918180083541" style={{ color: 'inherit', textDecoration: 'none' }}>+91 8180083541</a>
            </div>
          </div>
          <form className="contact-form" onSubmit={handleSubmit}>
            <input 
              placeholder="Your name" 
              value={name} 
              onChange={(e) => setName(e.target.value)} 
              required 
            />
            <input 
              placeholder="Subject" 
              value={subject} 
              onChange={(e) => setSubject(e.target.value)} 
            />
            <textarea 
              placeholder="Message" 
              value={message} 
              onChange={(e) => setMessage(e.target.value)} 
              required
            ></textarea>
            <button type="submit">Send message →</button>
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ setPage }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <a href="/" onClick={(e) => { e.preventDefault(); setPage('home'); }} style={{display:'block', cursor:'pointer'}} className="footer-logo">
              <img src="/l.png" alt="Bamboos Culture - Handcrafted Bamboo Products" />
            </a>
            <p style={{opacity:0.6, maxWidth:340, fontSize:14, lineHeight:1.7}}>Bamboos Culture | Handcrafted premium Indian bamboo products and eco-friendly home decor from Nashik, Maharashtra, India.</p>
          </div>
          <div>
            <h4>Shop</h4>
            <ul>
              <li><a href="/collections/kitchenware/" onClick={(e) => { e.preventDefault(); window.navigateTo('/collections/kitchenware/'); }} style={{color:'inherit', textDecoration:'none'}}>Kitchenware</a></li>
              <li><a href="/collections/home-decor/" onClick={(e) => { e.preventDefault(); window.navigateTo('/collections/home-decor/'); }} style={{color:'inherit', textDecoration:'none'}}>Home Decor</a></li>
              <li><a href="/collections/furniture/" onClick={(e) => { e.preventDefault(); window.navigateTo('/collections/furniture/'); }} style={{color:'inherit', textDecoration:'none'}}>Furniture</a></li>
              <li><a href="/collections/textiles/" onClick={(e) => { e.preventDefault(); window.navigateTo('/collections/textiles/'); }} style={{color:'inherit', textDecoration:'none'}}>Textiles</a></li>
            </ul>
          </div>
          <div>
            <h4>Studio</h4>
            <ul>
              <li><a href="/about/" onClick={(e) => { e.preventDefault(); setPage('about'); }} style={{color:'inherit', textDecoration:'none'}}>Our story</a></li>
              <li><a href="/about/" onClick={(e) => { e.preventDefault(); setPage('about'); }} style={{color:'inherit', textDecoration:'none'}}>Sustainability</a></li>
              <li><a href="/about/" onClick={(e) => { e.preventDefault(); setPage('about'); }} style={{color:'inherit', textDecoration:'none'}}>Craft process</a></li>
              <li><a href="/contact/" onClick={(e) => { e.preventDefault(); setPage('contact'); }} style={{color:'inherit', textDecoration:'none'}}>Contact</a></li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul>
              <li>Instagram</li>
              <li>Pinterest</li>
              <li>Journal</li>
              <li>Newsletter</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 Bamboos Culture — Nashik, Maharashtra, India</div>
        </div>
      </div>
    </footer>
  );
}

function HomePage({ setPage, openProduct, wishlist, toggleWishlist }) {
  return (
    <React.Fragment>
      <Hero setPage={setPage} />
      <FeaturedProducts openProduct={openProduct} setPage={setPage} wishlist={wishlist} toggleWishlist={toggleWishlist} />
      <AboutStrip setPage={setPage} />
      <Instagram />
      <ContactStrip setPage={setPage} />
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

Object.assign(window, { HomePage, Footer });