/* global React, ProductCard, Icon, HeroFader */

// ── Shop (home) ──────────────────────────────────────────────────────
const ShopPage = ({ products }) =>
<main>
    <section className="wrap hero-simple">
      <HeroFader products={products} />
      <div className="hero-eyebrow"><span className="eyebrow">Handmade · Natural Stones</span></div>
      <h1 className="h-display">
        Little <em>treasures</em>,<br />made by two sisters.
      </h1>
      <p className="lead hero-lead">Necklaces, earring sets, and bracelets, each one handcrafted from natural stones, beads, and high-quality materials. Beautiful, durable, and made with love.


    </p>
      <button className="btn"
    onClick={() => document.getElementById("collection")?.scrollIntoView({ behavior: "smooth" })}>
        Shop the collection <Icon name="arrowSm" size={14} />
      </button>
    </section>

    <section id="collection" className="wrap section">
      {window.SS_GROUPS.map((g) => {
        const items = products.filter((p) => p.group === g.id);
        if (!items.length) return null;
        return (
          <div className="collection-group" key={g.id}>
            <div className="section-head">
              <div>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{g.eyebrow}</div>
                <h2 className="h-display" dangerouslySetInnerHTML={{ __html: g.title }} />
              </div>
              <div className="right">
                <span className="group-count">{items.length} {items.length === 1 ? "piece" : "pieces"}</span>
              </div>
            </div>
            <div className="grid-products">
              {items.map((p) => <ProductCard key={p.id} p={p} />)}
            </div>
          </div>
        );
      })}
    </section>
  </main>;


// ── About Us ─────────────────────────────────────────────────────────
const AboutPage = ({ about, setRoute }) =>
<main>
    <section className="wrap about-hero">
      <div className="eyebrow" style={{ marginBottom: 24 }}>Our Story</div>
      <h1 className="h-display">Two <em>sisters</em>,<br />one little studio.</h1>
      <p className="lead">Sparkle ’n’ Shine is handmade by Sia and Kaavya: sisters who turned an idea from an entrepreneurship camp into a real jewelry business built on natural stones, careful craftsmanship, and pieces made to last.



    </p>
    </section>

    <section className="wrap section" style={{ paddingTop: 24 }}>
      <div className="stories">
        {about.map((person, i) =>
      <div className="story-block" key={i}>
            <div className="story-initial">{person.name.charAt(0)}</div>
            <div className="story-name">{person.name}</div>
            <div className="story-role">{person.role}</div>
            {person.paras.map((para, j) => <p key={j}>{para}</p>)}
          </div>
      )}
      </div>
    </section>

    <section className="wrap section" style={{ paddingTop: 0, paddingBottom: 96 }}>
      <div className="about-cta">
        <h2 className="h-display">Find your <em>favorite</em>.</h2>
        <button className="btn" onClick={() => setRoute("shop")}>
          Shop the collection <Icon name="arrowSm" size={14} />
        </button>
      </div>
    </section>
  </main>;


// ── Events (2-Year Anniversary Sale) ─────────────────────────────────
const EventsPage = ({ setRoute }) =>
<main>
    <section className="wrap anniv-hero">
      <div className="eyebrow" style={{ marginBottom: 24 }}>Celebrating Two Years</div>
      <h1 className="h-display">Our 2nd Anniversary<br /><em>Sale</em>.</h1>
      <p className="lead">
        Celebrate Sparkle ’n’ Shine's 2nd birthday with us! We're marking two
        years of handmade jewelry with special discounts and brand-new designs.
      </p>
      <div className="anniv-cta">
        <button className="btn" onClick={() => setRoute("shop")}>
          Shop the sale <Icon name="arrowSm" size={14} />
        </button>
        <a className="btn btn-ghost" href="mailto:sparkleNshineBySK@outlook.com?subject=Anniversary%20Sale">
          Ask us a question
        </a>
      </div>
    </section>

    <section className="wrap section" style={{ paddingTop: 8 }}>
      <div className="anniv-highlights">
        <div className="occasion-card">
          <div className="occasion-glyph">%</div>
          <h3 className="occasion-name">Special Discounts</h3>
          <p className="occasion-blurb">Enjoy anniversary pricing across our handmade collection while the celebration lasts.</p>
        </div>
        <div className="occasion-card">
          <div className="occasion-glyph">✦</div>
          <h3 className="occasion-name">Brand-New Designs</h3>
          <p className="occasion-blurb">Fresh pieces just added to the shop — new stones, new sets, new favorites to discover.</p>
        </div>
        <div className="occasion-card">
          <div className="occasion-glyph">♡</div>
          <h3 className="occasion-name">Two Years of Sparkle</h3>
          <p className="occasion-blurb">Thank you for two years of support — every order helps our little sisters' business grow.</p>
        </div>
      </div>
    </section>

    <section className="wrap section" style={{ paddingTop: 0, paddingBottom: 96 }}>
      <div className="about-cta">
        <h2 className="h-display">Come celebrate <em>with us</em>.</h2>
        <button className="btn" onClick={() => setRoute("shop")}>
          Shop the collection <Icon name="arrowSm" size={14} />
        </button>
      </div>
    </section>
  </main>;


// ── Gallery ──────────────────────────────────────────────────────────
const GalleryPage = ({ setRoute }) =>
<main>
    <section className="wrap about-hero">
      <div className="eyebrow" style={{ marginBottom: 24 }}>Behind the Scenes</div>
      <h1 className="h-display">Events <em>Gallery</em>.</h1>
    </section>

    <section className="wrap section" style={{ paddingTop: 24, paddingBottom: 96 }}>
      <div className="gallery-grid">
        {window.SS_GALLERY.map((g, i) =>
      <figure className="gallery-item" key={i}>
            <img src={g.img} alt={g.caption} />
            <figcaption>{g.caption}</figcaption>
          </figure>
      )}
      </div>
    </section>
  </main>;


Object.assign(window, { ShopPage, AboutPage, EventsPage, GalleryPage });