// Page: Home
const { useState: useStateHome } = React;

function HomePage({ navigate, addToCart, products }) {
  const featured = products.slice(0, 4);
  return (
    <main id="main">
      {/* Hero */}
      <section className="hero">
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="eyebrow">Kirkcaldy · Est. by Heather</div>
              <h1>Where every stitch is made by hand, and made to last.</h1>
              <p className="lede">
                Holibags is a small studio on the High Street making handmade bags, cushions,
                quilts and gifts — and running friendly sewing classes for beginners and beyond.
              </p>
              <div className="hero-ctas">
                <button className="btn btn-primary" onClick={() => navigate("products")}>
                  Browse Products <Icon.Arrow />
                </button>
                <button className="btn btn-secondary" onClick={() => navigate("classes")}>
                  Book a Class
                </button>
              </div>
              <div style={{ display: "flex", gap: 24, marginTop: 36, flexWrap: "wrap" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: "1.6rem", color: "var(--accent)" }}>10+</div>
                  <div style={{ fontSize: ".85rem", color: "var(--muted)" }}>Years sewing</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: "1.6rem", color: "var(--accent)" }}>1:1</div>
                  <div style={{ fontSize: ".85rem", color: "var(--muted)" }}>Classes with Heather</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: "1.6rem", color: "var(--accent)" }}>★ 5.0</div>
                  <div style={{ fontSize: ".85rem", color: "var(--muted)" }}>Local reviews</div>
                </div>
              </div>
            </div>
            <div className="hero-collage">
              <div className="ph stitch-frame"><img src="images/cushion-tartan.jpg" alt="Tartan cushion" /></div>
              <div className="ph"><img src="images/pouch-woodland.jpg" alt="Woodland zip pouch" /></div>
              <div className="ph"><img src="images/cushion-poppy.jpg" alt="Poppy patchwork cushion" /></div>
            </div>
          </div>
        </div>
      </section>

      {/* Intro / about strip */}
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container">
          <hr className="stitch-divider" />
          <div className="two-col" style={{ alignItems: "center" }}>
            <div>
              <div className="eyebrow">A friendly studio</div>
              <h2 style={{ marginTop: 12 }}>Made slowly, on a quiet machine, with good fabric.</h2>
            </div>
            <p style={{ color: "var(--ink-2)", fontSize: "1.05rem" }}>
              Whether you're learning your first running stitch or picking out a gift, you'll be
              welcomed by Heather and her trusty Bernina. Everything is made on-site — no factories,
              no rush, just careful work.
            </p>
          </div>
        </div>
      </section>

      {/* Service tiles */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="tiles">
            <div className="tile" onClick={() => navigate("products")} role="link" tabIndex={0}>
              <div className="tile-icon"><Icon.Heart /></div>
              <h3>Handmade Products</h3>
              <p>Bags, cushions, quilts and gifts, all sewn here in the Kirkcaldy studio.</p>
              <span className="more">Shop the studio →</span>
            </div>
            <div className="tile" onClick={() => navigate("classes")} role="link" tabIndex={0}>
              <div className="tile-icon"><Icon.Needle /></div>
              <h3>Sewing Classes</h3>
              <p>One-to-one and small-group sessions with Heather. Beginner-friendly, project-based.</p>
              <span className="more">Book a class →</span>
            </div>
            <div className="tile" style={{ cursor: "default" }}>
              <div className="tile-icon"><Icon.Scissors /></div>
              <h3>Alterations & Repairs</h3>
              <p>Hems, zips, mending. Pop into the studio if you've got something that needs a fix.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Featured products */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 12, marginBottom: 28 }}>
            <div>
              <div className="eyebrow">From the studio shelf</div>
              <h2 style={{ marginTop: 8 }}>Featured handmade pieces</h2>
            </div>
            <button className="btn btn-ghost" onClick={() => navigate("products")}>
              All products <Icon.Arrow />
            </button>
          </div>
          <div className="grid-products">
            {featured.map((p) => (
              <ProductCard key={p.id} product={p} onAdd={() => addToCart(p)} onOpen={() => navigate("products", { open: p.id })} />
            ))}
          </div>
        </div>
      </section>

      {/* Reviews */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <div className="eyebrow" style={{ justifyContent: "center" }}>Kind words</div>
            <h2 style={{ marginTop: 12 }}>What customers are saying</h2>
          </div>
          <div className="review-grid">
            {REVIEWS.map((r, i) => (
              <article key={i} className="review">
                <Stars n={r.rating} />
                <blockquote>"{r.quote}"</blockquote>
                <div className="who">— <strong>{r.name}</strong>{r.badge && ` (${r.badge})`}</div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* Mailing list */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="stitch-frame" style={{ background: "var(--surface)", padding: 40, borderRadius: 16, border: "1px solid var(--line)" }}>
            <div className="two-col" style={{ alignItems: "center", gap: 24 }}>
              <div>
                <div className="eyebrow">Stay in the loop</div>
                <h2 style={{ marginTop: 8 }}>A friendly note, once in a while.</h2>
                <p style={{ color: "var(--ink-2)", maxWidth: "44ch" }}>
                  New workshops, fresh products, and the occasional sewing tip. No spam — promise.
                </p>
              </div>
              <MailingList />
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

// Reusable product card
function ProductCard({ product, onAdd, onOpen }) {
  const imageUrl = productPrimaryImage(product);
  const extraImages = Array.isArray(product.images) ? Math.max(0, product.images.length - 1) : 0;
  return (
    <article className="product-card" onClick={onOpen}>
      <div className="img-wrap" style={{ position: "relative" }}>
        <img src={imageUrl} alt={product.name} loading="lazy" />
        {extraImages > 0 && (
          <span style={{
            position: "absolute", right: 10, bottom: 10,
            background: "rgba(0,0,0,.55)", color: "#fff",
            fontSize: 12, fontWeight: 600,
            padding: "3px 8px", borderRadius: 999,
          }}>+{extraImages} more</span>
        )}
      </div>
      <div className="body">
        <span className="tag">{product.category}</span>
        <div className="name">{product.name}</div>
        <p className="desc">{product.description}</p>
        <div className="row">
          <span className="price">£{Number(product.price).toFixed(0)}</span>
          <button className="btn btn-secondary btn-sm"
                  onClick={(e) => { e.stopPropagation(); onAdd(); }}>
            <Icon.Plus /> Add to cart
          </button>
        </div>
      </div>
    </article>
  );
}

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