// HoodiesPage — the Motomelli Originals storefront, extracted from the old
// hoodies.html inline script. Chrome (TopBar/Footer) is supplied by PageShell.
// Storefront cards link to the product route at /product?id=<id>.

/* Star rating — averaged from a hoodie's review list */
const CardStars = ({ reviews }) => {
  if (!reviews?.length) {
    return <span className="mm-store__rating-count mm-store__rating--empty">No reviews yet</span>;
  }
  const avg = reviews.reduce((s, r) => s + r.stars, 0) / reviews.length;
  const full = Math.round(avg);
  return (
    <React.Fragment>
      <span className="mm-store__stars" aria-label={`${avg.toFixed(1)} out of 5 stars`}>
        {[1, 2, 3, 4, 5].map(i => (
          <span key={i} className={`mm-store__star${i <= full ? " is-on" : ""}`}>★</span>
        ))}
      </span>
      <span className="mm-store__rating-count">
        {avg.toFixed(1)} · {reviews.length} REVIEW{reviews.length === 1 ? "" : "S"}
      </span>
    </React.Fragment>
  );
};

/* Storefront product card — clean collection-grid tile */
const HoodieCard = ({ hoodie }) => {
  const inStock = !!hoodie.shopifyId;
  const badge = hoodie.id === "therapy" ? "The OG" : inStock ? null : "Coming soon";
  return (
    <a href={`/product?id=${hoodie.id}`} className="mm-store__card">
      <div className="mm-store__img">
        <img src={hoodie.image} alt={hoodie.name} loading="lazy" />
        {badge && (
          <span className={`mm-store__badge${inStock ? "" : " mm-store__badge--soon"}`}>
            {badge}
          </span>
        )}
      </div>
      <div className="mm-store__body">
        <h3 className="mm-store__name">{hoodie.name}</h3>
        <div className="mm-store__rating">
          <CardStars reviews={hoodie.reviews} />
        </div>
        <span className="mm-store__price">{hoodie.price}</span>
      </div>
    </a>
  );
};

/* Feature cards — drawn from the original Therapy Dropout storefront */
const FEATURES = [
  {
    n: "01", title: "Oversized boxy fit",
    body: "A unisex, true-to-size oversized cut that layers clean over your leathers on a cold morning commute — and still looks right off the bike.",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3 4 6v5l3 1v9h10v-9l3-1V6l-4-3-4 3z"/></svg>,
  },
  {
    n: "02", title: "Internal phone pocket",
    body: "A hidden inner pocket keeps your phone secure and out of the way — no flapping zips, no rattling at speed.",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 6h2"/></svg>,
  },
  {
    n: "03", title: "Drawstring-free hood",
    body: "No drawstrings means nothing to snag, whip or catch the wind at 70mph. Designed for riders, not for the catwalk.",
    icon: <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 9a7 7 0 0 1 14 0v4a5 5 0 0 1-5 5h-4a5 5 0 0 1-5-5z"/><path d="M9 18v2M15 18v2"/></svg>,
  },
];

/* "And there's more" promise cells — from the Therapy Dropout homepage */
const PROMISES = [
  {
    em: "✅", title: "Premium quality",
    body: "Heavyweight 480GSM cotton-rich fabric and state-of-the-art DTG printing. Every supplier and print style is personally quality-tested so you get nothing but the best.",
  },
  {
    em: "🌎", title: "Worldwide express shipping",
    body: "Shipped worldwide, printed to order — and free express tracked shipping for all our UK bikers.",
  },
  {
    em: "🇬🇧", title: "UK based",
    body: "Stored, printed and shipped from right here in the UK. Designed by @motomelli, worn by the bold.",
  },
];

const HoodiesStore = () => {
  const { MOTOMELLI_HOODIES } = window.MOTO_DATA;
  const total = MOTOMELLI_HOODIES.length;

  return (
    <main>
      {/* Dark page hero */}
      <section className="mm-pagehero">
        <div className="mm-pagehero__inner">
          <div className="mm-pagehero__eyebrow">
            <span className="mm-tick" />
            <span className="mm-mono">MOTOMELLI ORIGINALS</span>
          </div>
          <h1 className="mm-pagehero__title">
            A middle finger to<br />boring <em>streetwear.</em>
          </h1>
          <p className="mm-pagehero__sub">
            For the misfits, dropouts and riders who don't play by the rules. Born
            from city streets and twisty lanes — heavyweight, oversized, drawstring-free
            hoodies, designed and tested by biker girls.
          </p>
          <div className="mm-pagehero__meta">
            <span className="mm-pagehero__chip">480GSM <em>HEAVYWEIGHT</em></span>
            <span className="mm-pagehero__chip">OVERSIZED BOXY FIT</span>
            <span className="mm-pagehero__chip">DESIGNED BY <em>@MOTOMELLI</em></span>
            <span className="mm-pagehero__chip">UK PRINTED &amp; SHIPPED</span>
          </div>
        </div>
      </section>

      {/* Storefront grid */}
      <section className="mm-section" id="shop">
        <div className="mm-section__head">
          <div>
            <span className="mm-mono">THE COLLECTION</span>
            <h2 className="mm-section__title">Pick your<br />hoodie.</h2>
            <p className="mm-section__sub">
              {total} designs, one heavyweight build. Tap any hoodie for sizes, the
              full size guide and checkout.
            </p>
          </div>
        </div>

        <div className="mm-store__grid">
          {MOTOMELLI_HOODIES.map((h) => (
            <HoodieCard key={h.id} hoodie={h} />
          ))}
        </div>
      </section>

      {/* Why they're different */}
      <section className="mm-section" id="details">
        <div className="mm-section__head">
          <div>
            <span className="mm-mono">WHY THEY'RE DIFFERENT</span>
            <h2 className="mm-section__title">Designed on<br />the bike.</h2>
            <p className="mm-section__sub">Every detail comes from real riding — not a mood board.</p>
          </div>
        </div>

        <div className="mm-feat__grid">
          {FEATURES.map((f) => (
            <article key={f.n} className="mm-feat__card">
              <span className="mm-feat__num">{f.n}</span>
              <div className="mm-feat__icon">{f.icon}</div>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
            </article>
          ))}
        </div>
      </section>

      {/* And there's more — dark promise band */}
      <section className="mm-promise">
        <div className="mm-promise__inner">
          <div className="mm-promise__head">
            <span className="mm-mono">AND THERE'S MORE</span>
            <h2>What every order gets you.</h2>
          </div>
          <div className="mm-promise__grid">
            {PROMISES.map((p) => (
              <div key={p.title} className="mm-promise__cell">
                <span className="mm-promise__cell-em" aria-hidden>{p.em}</span>
                <h3>{p.title}</h3>
                <p>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="mm-ctaband">
        <div className="mm-ctaband__inner">
          <span className="mm-mono">STUCK BETWEEN SIZES?</span>
          <h2>We'll help you get the fit right.</h2>
          <p>The hoodies run oversized and true to size — but if you're not sure, ask. A real rider will answer.</p>
          <a href="/contact" className="mm-bigbtn">
            Ask about sizing <span aria-hidden>→</span>
          </a>
        </div>
      </section>
    </main>
  );
};