// About, Cart, Contact pages

const TIMELINE_DATA = [
  {
    year: "1980",
    title: "A Legacy Woven in Bamboo",
    paragraphs: [
      "At the heart of Bamboos Culture is the inspiring journey of our founder, Ms. Farida Bukhari—a born artisan who comes from a family with generations of experience in bamboo craftsmanship.",
      "For her, bamboo was never merely a material. It was a part of her heritage, her identity, and her bloodline.",
      "Coming from a humble and socially disadvantaged background herself, Farida was always deeply fascinated by traditional art, culture, and the incredible possibilities hidden within natural materials. But her vision extended far beyond craftsmanship. She wanted to create a meaningful difference in society—especially for those who had been given fewer opportunities.",
      "Her greatest purpose was to empower women, Adivasis, and underprivileged artisans and labourers by helping them develop skills that could provide them with a sustainable livelihood."
    ]
  },
  {
    year: "1994",
    title: "From Craft to a Purpose",
    paragraphs: [
      "Farida began serving communities by guiding and training Adivasi people, particularly women, in the art of bamboo craftsmanship. She believed that these communities possessed immense talent, creativity, and traditional knowledge—but often lacked the opportunities, resources, and platforms needed to showcase it.",
      "Her dream was therefore much larger than simply teaching a craft.",
      "She wanted to take the beauty of Indian bamboo culture and indigenous craftsmanship to the world. She wanted people to recognise the extraordinary skills of Adivasi artisans and appreciate the richness of India's traditional arts and cultural heritage.",
      "Most importantly, she wanted these artisans to receive the dignity, recognition, and economic independence they deserved."
    ]
  },
  {
    year: "2007",
    title: "Recognition and a Journey of Impact",
    paragraphs: [
      "Her dedication and years of work eventually brought her recognition from the Bamboo Mission, Government of Maharashtra, India, where she was appointed as a bamboo trainer and played an important role in imparting bamboo-craft skills to communities.",
      "Her expertise also led her to work with several prominent corporate organisations, including Tata, among others, helping them fulfil their Corporate Social Responsibility (CSR) initiatives through community development and skill-building programmes.",
      "She also worked closely with various government bodies and institutions, including MIDC and MCD, contributing her knowledge and experience towards initiatives focused on traditional crafts, livelihood generation, and community development."
    ]
  },
  {
    year: "2011",
    title: "Empowerment Through Human Welfare Society",
    paragraphs: [
      "Driven by an even deeper desire to serve society, Farida went on to establish her own NGO, Human Welfare Society, with a strong focus on women’s empowerment and the welfare of Adivasi and underprivileged communities.",
      "Through the organisation, she conducted numerous free training programmes, teaching people practical skills in bamboo craftsmanship and helping them understand how these skills could be transformed into sustainable livelihoods.",
      "Her work was never limited to simply teaching someone how to make a product.",
      "She wanted to teach people how to create, how to earn, and ultimately, how to become self-reliant.",
      "Over the years, she worked extensively with communities across several economically disadvantaged regions, including Peth, Nashik, Surgana, Saputara, Jawhar, Mokhada, Dabgaon, Wagjira, and many other regions across Maharashtra and India.",
      "Through these efforts, she contributed to the development of communities that had traditionally remained on the margins of economic opportunity."
    ]
  },
  {
    year: "2019",
    title: "A Craftswoman Beyond Bamboo",
    paragraphs: [
      "Although bamboo remained closest to her heart, Farida’s expertise has never been confined to a single craft.",
      "Over more than three decades, she has explored and worked extensively with a wide range of traditional art forms and handicrafts, including jute products, macramé articles, ceramics, pottery, weaving, embroidery, and several other forms of indigenous craftsmanship.",
      "This diverse experience gave her a deep understanding of artisans, traditional techniques, natural materials, and the challenges faced by craft communities.",
      "But after more than 35+ years of experience, she felt it was time to take her vision one step further."
    ]
  },
  {
    year: "2026",
    title: "The Beginning of Bamboos Culture",
    paragraphs: [
      "And that is where Bamboos Culture begins.",
      "With decades of experience, countless interactions with artisans, and a lifelong connection with traditional craftsmanship, Ms. Farida Bukhari is now taking her journey into the corporate world with a new venture built around an old passion—bamboo and the people behind it.",
      "Bamboos Culture is more than a brand.",
      "It is an attempt to connect traditional artisans with the modern world, while creating meaningful opportunities for Adivasi communities and women across different regions.",
      "Every product we bring to you carries something that cannot be manufactured by machines—the touch of human hands.",
      "Our products are 100% handmade, crafted patiently by skilled bamboo artisans, many of whom come from economically disadvantaged and rural communities.",
      "Behind every piece is the artisan’s time, patience, skill, effort, sweat, emotion, and expression. Each creation reflects not only their craftsmanship but also a part of their story.",
      "And because bamboo comes directly from nature, every product carries an inherent connection with the natural world."
    ]
  }
];

function AboutPage({ setPage }) {
  const [expanded, setExpanded] = React.useState({});

  const toggleExpand = (idx) => {
    setExpanded(prev => ({ ...prev, [idx]: !prev[idx] }));
  };

  return (
    <React.Fragment>
      <div className="about-page">
        <div className="container">
          <div className="about-hero">
            <div className="about-hero-left">
              <div className="mono">— Our story</div>
              <h1>We grow <em>slowly.</em> We finish <em>by hand.</em> We send what we would keep.</h1>
            </div>
            <SmoothBackground className="about-hero-img" src="/about_craft.jpg?v=1" />
          </div>


          <div className="about-timeline-wrap">
            <h3 className="timeline-section-title">— Our Journey</h3>
            <div className="about-timeline">
              {TIMELINE_DATA.map((item, idx) => {
                const isExpanded = !!expanded[idx];
                return (
                  <div key={idx} className={`timeline-item ${isExpanded ? 'expanded' : ''}`}>
                    <div className="timeline-year">{item.year}</div>
                    <div className="timeline-dot" onClick={() => toggleExpand(idx)} style={{ cursor: 'pointer' }}></div>
                    <div className="timeline-content">
                      <h4 onClick={() => toggleExpand(idx)} style={{ cursor: 'pointer', display: 'inline-block' }}>
                        {item.title}
                      </h4>
                      <div className={`timeline-paragraphs-wrap ${isExpanded ? 'show' : ''}`}>
                        {item.paragraphs.map((p, pIdx) => (
                          <p key={pIdx}>{p}</p>
                        ))}
                      </div>
                      <button className="timeline-toggle-btn" onClick={() => toggleExpand(idx)}>
                        {isExpanded ? 'Read Less ↑' : 'Read Full Story ↓'}
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          <div className="about-philosophy">
            <h2>Handmade. Sustainable. Rooted in Culture.</h2>
            <div className="philosophy-grid">
              <div className="philosophy-main">
                <p>At Bamboos Culture, we believe that a beautiful product becomes even more meaningful when you know who made it, where it came from, and the purpose behind it.</p>
                <p>Our creations are designed to be eye-catching, sustainable, naturally connected, dependable, and rooted in Indian craftsmanship.</p>
                <p>When you choose a product from Bamboos Culture, you are not simply choosing a handcrafted article.</p>
                <div className="philosophy-support-list">
                  <div className="support-item"><span>—</span> You are supporting a craft.</div>
                  <div className="support-item"><span>—</span> You are supporting an artisan.</div>
                  <div className="support-item"><span>—</span> You are supporting a livelihood.</div>
                </div>
                <p>And, in your own small way, you are helping keep a rich cultural tradition alive.</p>
              </div>
              <div className="philosophy-discover">
                <h3>Discover Who We Are</h3>
                <p>We invite you to explore our website, discover our journey, learn about the people behind our products, and understand the values that guide Bamboos Culture.</p>
                <p>Discover our achievements. Meet our artisans. Explore our craftsmanship. Understand our purpose.</p>
                <p>Because before you decide to bring a piece of Bamboos Culture into your home or workplace, we want you to know who we are, what we stand for, and why every piece we create matters.</p>
                <p className="philosophy-tagline">Bamboos Culture—where tradition meets purpose, craftsmanship meets opportunity, and every creation carries a story.</p>
              </div>
            </div>
          </div>

          <div className="about-gallery-section">
            <h3 className="timeline-section-title">— Empowering Communities</h3>
            <p className="about-gallery-desc">Training and equipping artisans with sustainable skills for a better tomorrow.</p>
            <div className="about-gallery-grid">
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture14.jpg" />
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture15.jpg" />
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture16.jpg" />
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture18.jpg" />
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture19.jpg" />
              <SmoothBackground className="about-gallery-img" src="/about_images/Picture20.jpg" />
            </div>
          </div>
        </div>
      </div>
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

function CartPage({ cart, setCart, setPage, openProduct }) {
  const items = cart.map(c => ({ ...window.BAMBOO_PRODUCTS.find(p => p.id === c.id), qty: c.qty }));
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const total = subtotal;

  const handleCheckout = () => {
    const whatsappNumber = "918856822216";
    let message = "Hello! I would like to place an order from bamboosculture:\n\n*Order Details:*\n";
    items.forEach(item => {
      message += `- ${item.name} (Qty: ${item.qty}) - ₹${item.price * item.qty}\n`;
    });
    message += `\n*Total:* ₹${total}\n\nThank you!`;
    const encodedText = encodeURIComponent(message);
    const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${encodedText}`;
    window.open(whatsappUrl, '_blank');
    setCart([]);
  };

  const updateQty = (id, delta) => {
    setCart(cart.map(c => c.id === id ? { ...c, qty: Math.max(1, c.qty + delta) } : c));
  };
  const remove = (id) => setCart(cart.filter(c => c.id !== id));

  return (
    <React.Fragment>
      <div className="cart">
        <div className="container">
          <h1>Your Cart</h1>
          {items.length === 0 ? (
            <div className="cart-empty">
              <h2>Your cart is empty</h2>
              <p style={{marginBottom:24}}>Something quiet is waiting for you.</p>
              <button className="pd-add" style={{width:'auto', padding:'14px 32px'}} onClick={() => setPage('shop')}>Browse the shop</button>
            </div>
          ) : (
            <div className="cart-grid">
              <div className="cart-items">
                {items.map(i => (
                  <div key={i.id} className="cart-item">
                    <SmoothBackground
                      className="cart-item-img"
                      onClick={() => openProduct(i.id)}
                      src={i.image}
                      style={{ cursor: 'pointer', backgroundSize: 'cover', backgroundPosition: 'center' }}
                      role="img"
                      aria-label={`Handmade ${i.name} - Bamboos Culture`}
                    />
                    <div>
                      <div className="cart-item-cat">{i.cat}</div>
                      <div className="cart-item-name">{window.renderProductName ? window.renderProductName(i.name) : i.name}</div>
                      <div className="cart-item-qty">
                        <button onClick={() => updateQty(i.id, -1)}>−</button>
                        <span>{i.qty}</span>
                        <button onClick={() => updateQty(i.id, 1)}>+</button>
                      </div>
                    </div>
                    <div className="cart-item-right">
                      <div className="cart-item-price">₹{i.price * i.qty}</div>
                      <button className="cart-item-remove" onClick={() => remove(i.id)}>Remove</button>
                    </div>
                  </div>
                ))}
              </div>
              <div className="cart-summary">
                <h3>Order summary</h3>
                <div className="cart-line"><span>Subtotal</span><span>₹{subtotal}</span></div>
                <div className="cart-line total"><span>Total</span><span>₹{total}</span></div>
                <button className="cart-checkout" onClick={handleCheckout}>Checkout →</button>
                <div className="cart-delivery-note">
                  <strong>Worldwide Delivery</strong>
                  <p>We deliver globally — just share your location with us on WhatsApp, and we will handle the rest.</p>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

function ContactPage({ setPage }) {
  return (
    <React.Fragment>
      <div style={{paddingTop:100}}>
        <ContactStrip setPage={setPage} />
      </div>
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

function WishlistPage({ wishlist, toggleWishlist, addToCart, setPage, openProduct }) {
  const items = wishlist.map(id => window.BAMBOO_PRODUCTS.find(p => p.id === id)).filter(Boolean);

  return (
    <React.Fragment>
      <div className="cart">
        <div className="container">
          <h1>Your Wishlist</h1>
          {items.length === 0 ? (
            <div className="wishlist-empty">
              <h2>Your wishlist is empty</h2>
              <p style={{ marginBottom: 24 }}>Save items you love here to easily browse them later.</p>
              <button className="pd-add" style={{ width: 'auto', padding: '14px 32px' }} onClick={() => setPage('shop')}>
                Browse the shop
              </button>
            </div>
          ) : (
            <div className="products-grid" style={{ '--cols': 4, marginTop: 40 }}>
              {items.map(p => (
                <div key={p.id} className="product-card-container">
                  <a
                    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`}
                    />
                    <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 className="wishlist-card-actions">
                    <button className="wishlist-card-add" onClick={() => addToCart(p.id, 1)}>
                      Add to cart
                    </button>
                    <button className="wishlist-card-remove" onClick={() => toggleWishlist(p.id)} aria-label="Remove from 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>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
      <Footer setPage={setPage} />
    </React.Fragment>
  );
}

Object.assign(window, { AboutPage, CartPage, ContactPage, WishlistPage });