// Home.jsx — the homepage composition, moved out of the Motomelli.html inline
// script so the app shell can stay a thin loader shared by index.html/404.html.

/* Headline stats — shown in the Compare teaser's stat band */
const STATS = [
  { n: "23", l: "Products tested" },
  { n: "4", l: "Brands compared" },
  { n: "6–26", l: "Sizes covered" },
  { n: "AAA", l: "CE verified" },
];

/* Compare teaser — 3 popular picks linking to the Compare page */
const CompareTeaser = () => {
  // Mix: 2 popular upper + 1 popular lower
  const popular = window.COMPARE_DATA.PRODUCTS.filter(p => p.popular);
  const upper = popular.filter(p => p.category === "upper").slice(0, 2);
  const lower = popular.filter(p => p.category === "lower").slice(0, 1);
  const picks = [...upper, ...lower];

  // Condense the manufacturer armour string down to its CE protection level(s).
  const armourLevel = (p) => {
    const nums = [...new Set((p.ce.armour.match(/Level\s*[12]/gi) || []).map(s => s.replace(/\D/g, "")))].sort();
    if (!nums.length) return p.ce.armour;
    return nums.length === 1 ? `CE Level ${nums[0]}` : `CE Level ${nums.join("–")}`;
  };

  return (
    <section className="mm-section mm-cmpteaser" id="product-compare">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">PRODUCT COMPARE</span>
          <h2 className="mm-section__title">Compare Products.</h2>
          <p className="mm-section__sub">Pick any two — or three on a bigger screen — and see them side by side. CE rating, sizing, comfort, warranty, stockists. Specs from the manufacturers.</p>
        </div>
        <div className="mm-section__head-r">
          <a href="/compare" className="mm-cmpteaser__cta-btn">
            See full comparison <span aria-hidden>→</span>
          </a>
        </div>
      </div>

      <div className="mm-cmpteaser__cards">
        {picks.map(p => (
          <a key={p.id} href="/compare" className="mm-cmpteaser__card">
            <div className="mm-cmpteaser__img">
              <img src={p.image} alt={`${p.brand} ${p.name}`} />
              <span className="mm-cmpteaser__star">★ POPULAR</span>
            </div>
            <span className="mm-cmpteaser__brand">{p.brand}</span>
            <h3 className="mm-cmpteaser__name">{p.name}</h3>
            <dl className="mm-cmpteaser__specs">
              <div className="mm-cmpteaser__spec">
                <dt>Price</dt>
                <dd>{p.price.GBP}</dd>
              </div>
              <div className="mm-cmpteaser__spec">
                <dt>CE rating</dt>
                <dd><span className={`mm-cmpteaser__ce mm-cmpteaser__ce--${p.ce.rating.toLowerCase()}`}>{p.ce.rating}</span></dd>
              </div>
              <div className="mm-cmpteaser__spec">
                <dt>Armour</dt>
                <dd>{armourLevel(p)}</dd>
              </div>
              <div className="mm-cmpteaser__spec">
                <dt>Sizes</dt>
                <dd>{p.size.range}</dd>
              </div>
            </dl>
          </a>
        ))}
      </div>

      <div className="mm-cmpteaser__statband">
        <div className="mm-cmpteaser__statband-grid">
          {STATS.map((s) => (
            <div key={s.l} className="mm-cmpteaser__statcell">
              <div className="mm-cmpteaser__statn">{s.n}</div>
              <div className="mm-cmpteaser__statl">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* Scroll-reveal — blackbox.ai-style fade-up. Every section below the hero (and
   the footer) is hidden, then slides up as it enters the viewport. Classes are
   added here (not in markup) so content is never stuck hidden if JS fails to
   run. Returns a ref to attach to the home container; observes its sections. */
const useScrollReveal = () => {
  const rootRef = React.useRef(null);
  React.useEffect(() => {
    const root = rootRef.current;
    if (!root) return;
    // Skip the hero (it has its own intro animation) — reveal the rest.
    const targets = root.querySelectorAll(".mm-section, .mm-footer");
    if (!targets.length) return;

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce || typeof IntersectionObserver === "undefined") {
      targets.forEach(t => t.classList.add("mm-reveal", "is-visible"));
      return;
    }

    targets.forEach(t => t.classList.add("mm-reveal"));
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-visible");
          io.unobserve(e.target); // reveal once, then stop watching
        }
      });
    }, { rootMargin: "0px 0px -12% 0px", threshold: 0.12 });

    targets.forEach(t => io.observe(t));
    return () => io.disconnect();
  }, []);
  return rootRef;
};

/* ===== Primary homepage design ===== */
const HomeV1 = () => {
  const revealRef = useScrollReveal();
  return (
    <div data-screen-label="Motomelli Homepage" ref={revealRef}>
      <Hero />
      <CompareTeaser />
      <SizeCompareSection />
      <CESection />
      <FindGear />
      <HoodiesSection />
      <YouAndMotomelliSection />
      <Footer />
    </div>
  );
};