// Motomelli Compare Page — Apple-style "compare" picker.
// Auto-scales: 2 columns on mobile, 3 on tablet+ (>=900px). No manual toggle.
// Spec rows are rendered as horizontal grids — every row aligns across all columns.

const PRICE_SYSTEMS = [
  { code: "GBP", label: "GBP" },
  { code: "USD", label: "USD" },
  { code: "EUR", label: "EUR" }
];

// Returns a price string with `pct`% removed, preserving the currency symbol.
// e.g. discountPrice("£240", 10) -> "£216", discountPrice("$309", 10) -> "$278.10"
const discountPrice = (priceStr, pct) => {
  const m = String(priceStr).match(/^(\D*)([\d.,]+)(.*)$/);
  if (!m) return null;
  const [, symbol, digits, suffix] = m;
  const num = parseFloat(digits.replace(/,/g, ""));
  if (!isFinite(num)) return null;
  const off = num * (1 - pct / 100);
  const rounded = Math.round(off * 100) / 100;
  const display = Number.isInteger(rounded) ? String(rounded) : rounded.toFixed(2);
  return `${symbol}${display}${suffix}`;
};

// ──────────────────────────────────────────────────────────────────────
// Icons
// ──────────────────────────────────────────────────────────────────────
const IconShield = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 3 4 6v6c0 4.5 3.2 8.4 8 9 4.8-.6 8-4.5 8-9V6l-8-3z"/>
    <path d="M9 12l2 2 4-4"/>
  </svg>
);
const IconRuler = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <rect x="2.5" y="9" width="19" height="6" rx="1"/>
    <path d="M6 9v3M9 9v4M12 9v3M15 9v4M18 9v3"/>
  </svg>
);
const IconFeather = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20.2 4a6 6 0 0 0-8.5 0L4 11.7V20h8.3L20.2 12a6 6 0 0 0 0-8z"/>
    <path d="M14 6 6 14"/><path d="M16 16 8 16"/>
  </svg>
);
const IconSpark = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/>
  </svg>
);
const IconWarranty = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <circle cx="12" cy="9" r="5"/>
    <path d="M9 13l-2 7 5-3 5 3-2-7"/>
  </svg>
);
const IconStore = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M3 7h18l-1.5 4H4.5L3 7z"/>
    <path d="M5 11v9h14v-9"/>
    <path d="M9 20v-5h6v5"/>
  </svg>
);
const IconChat = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z"/>
  </svg>
);

// ──────────────────────────────────────────────────────────────────────
// Picker — grouped dropdown, popular pinned to top of each section
// ──────────────────────────────────────────────────────────────────────
const ProductPicker = ({ value, onChange }) => {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  const all = window.COMPARE_DATA.PRODUCTS;
  const selected = all.find(p => p.id === value);

  React.useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("touchstart", onDoc, { passive: true });
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("touchstart", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const groups = [
    {
      label: "Upper Body",
      popular: all.filter(p => p.category === "upper" && p.popular),
      rest:    all.filter(p => p.category === "upper" && !p.popular)
    },
    {
      label: "Lower Body",
      popular: all.filter(p => p.category === "lower" && p.popular),
      rest:    all.filter(p => p.category === "lower" && !p.popular)
    }
  ];

  return (
    <div className={`mm-cmp__picker ${open ? "is-open" : ""}`} ref={ref}>
      <button
        className="mm-cmp__picker-btn"
        onClick={() => setOpen(o => !o)}
        aria-expanded={open}
        aria-haspopup="listbox"
      >
        <span className="mm-cmp__picker-name">
          {selected ? <>
            <span className="mm-cmp__picker-brand">{selected.brand}</span>
            <span className="mm-cmp__picker-prod">{selected.name}{selected.popular && <span className="mm-cmp__star" aria-label="popular">★</span>}</span>
          </> : <span style={{color: "var(--mm-light-dim)"}}>Pick a product…</span>}
        </span>
        <span className="mm-cmp__picker-caret" aria-hidden>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <polyline points="6 9 12 15 18 9"/>
          </svg>
        </span>
      </button>

      {open && (
        <div className="mm-cmp__picker-menu" role="listbox">
          {groups.map(g => (
            <div key={g.label} className="mm-cmp__picker-group">
              <div className="mm-cmp__picker-group-label">
                <span className="mm-mono">{g.label.toUpperCase()}</span>
              </div>
              {g.popular.length > 0 && (
                <div className="mm-cmp__picker-popular">
                  <span className="mm-mono mm-cmp__picker-popular-l">★ POPULAR</span>
                  {g.popular.map(p => (
                    <button
                      key={p.id}
                      role="option"
                      aria-selected={p.id === value}
                      className={`mm-cmp__picker-opt ${p.id === value ? "is-on" : ""}`}
                      onClick={() => { onChange(p.id); setOpen(false); }}
                    >
                      <span className="mm-cmp__picker-opt-brand">{p.brand}</span>
                      <span className="mm-cmp__picker-opt-name">{p.name}</span>
                      <span className="mm-mono mm-cmp__picker-opt-ce">{p.ce.rating}</span>
                    </button>
                  ))}
                </div>
              )}
              {g.rest.map(p => (
                <button
                  key={p.id}
                  role="option"
                  aria-selected={p.id === value}
                  className={`mm-cmp__picker-opt ${p.id === value ? "is-on" : ""}`}
                  onClick={() => { onChange(p.id); setOpen(false); }}
                >
                  <span className="mm-cmp__picker-opt-brand">{p.brand}</span>
                  <span className="mm-cmp__picker-opt-name">{p.name}</span>
                  <span className="mm-mono mm-cmp__picker-opt-ce">{p.ce.rating}</span>
                </button>
              ))}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ──────────────────────────────────────────────────────────────────────
// Cell renderers — each row is rendered for every column inside one
// horizontal grid row, so they align perfectly.
// ──────────────────────────────────────────────────────────────────────
const EmptyCell = ({ children }) => (
  <div className="mm-cmp__cell mm-cmp__cell--empty">
    {children || <span className="mm-mono">—</span>}
  </div>
);

const HeroCell = ({ product, currency, onCurrency }) => {
  if (!product) return (
    <EmptyCell>
      <div className="mm-cmp__empty">
        <span className="mm-mono">SELECT A PRODUCT ABOVE</span>
      </div>
    </EmptyCell>
  );
  return (
    <div className="mm-cmp__cell mm-cmp__cell--hero">
      <div className="mm-cmp__img">
        <img src={product.image} alt={`${product.brand} ${product.name}`} />
        {product.popular && <span className="mm-cmp__hero-star" aria-label="popular">★ POPULAR</span>}
        {product.stub && <span className="mm-mono mm-cmp__stub">STUB DATA</span>}
      </div>
      <div className="mm-cmp__id">
        <span className="mm-mono mm-cmp__id-cat">{product.category === "upper" ? "UPPER BODY" : "LOWER BODY"}</span>
        <h3 className="mm-cmp__id-name"><span className="mm-cmp__id-brand">{product.brand}</span> {product.name}</h3>
        <p className="mm-cmp__id-type">{product.type}</p>
      </div>
      <div className="mm-cmp__price">
        <div className="mm-cmp__price-head">
          <span className="mm-mono">PRICE</span>
          <div className="mm-cmp__price-toggle" role="tablist">
            {PRICE_SYSTEMS.map(s => (
              <button
                key={s.code}
                role="tab"
                aria-selected={currency === s.code}
                className={`mm-cmp__price-toggle-btn ${currency === s.code ? "is-on" : ""}`}
                onClick={() => onCurrency(s.code)}
              >{s.label}</button>
            ))}
          </div>
        </div>
        {product.shopUrl.includes("pandomoto.com") ? (
          <div className="mm-cmp__price-row mm-cmp__price-row--promo">
            <div className="mm-cmp__price-vwrap">
              <span className="mm-cmp__price-v">{product.price[currency]}</span>
              <span className="mm-cmp__price-disc">
                {discountPrice(product.price[currency], 10)} <span className="mm-mono">Discounted</span>
              </span>
            </div>
            <div className="mm-cmp__buy-group">
              <div className="mm-cmp__buy-line">
                <span className="mm-mono mm-cmp__promo-tag">Paid link</span>
                <a href={product.shopUrl} target="_blank" rel="noopener noreferrer" className="mm-cmp__buy">
                  Go to {product.brand} <span aria-hidden>↗</span>
                </a>
              </div>
              <p className="mm-cmp__promo">
                Use code <strong>MOTOMELLI</strong> at checkout for 10% off.
              </p>
            </div>
          </div>
        ) : (
          <div className="mm-cmp__price-row">
            <span className="mm-cmp__price-v">{product.price[currency]}</span>
            <a href={product.shopUrl} target="_blank" rel="noopener noreferrer" className="mm-cmp__buy">
              Go to {product.brand} <span aria-hidden>↗</span>
            </a>
          </div>
        )}
      </div>
    </div>
  );
};

const ReviewsCell = ({ product, onOpenReviews, onOpenLeaveReview }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <div className="mm-cmp__reviews-empty">
        <p>No verified reviews yet for {product.brand} {product.name}.</p>
      </div>
      <div className="mm-cmp__reviews-actions">
        <button className="mm-cmp__btn mm-cmp__btn--ghost" onClick={() => onOpenReviews(product)}>Read all</button>
        <button className="mm-cmp__btn mm-cmp__btn--primary" onClick={() => onOpenLeaveReview(product)}>Leave a review</button>
      </div>
    </div>
  );
};

const CECell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <div className="mm-cmp__ce-big">
        <span className={`mm-cmp__ce-pill mm-cmp__ce-pill--${product.ce.rating.toLowerCase()}`}>{product.ce.rating}</span>
      </div>
      <dl className="mm-cmp__dl">
        <div><dt>Abrasive fabric</dt><dd>{product.ce.fabric}</dd></div>
        <div><dt>Armour</dt><dd>{product.ce.armour}</dd></div>
        <div><dt>Optional protection</dt><dd>{product.ce.optional}</dd></div>
      </dl>
    </div>
  );
};

const SizeCell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <div className="mm-cmp__size-range">{product.size.range}</div>
      <dl className="mm-cmp__dl">
        <div><dt>Stretch</dt><dd>{product.size.stretch}</dd></div>
        <div><dt>Sizing note</dt><dd>{product.size.sizingNote}</dd></div>
      </dl>
      <a href={product.size.sizeTableUrl} className="mm-cmp__inline-link">See size table →</a>
    </div>
  );
};

const ComfortCell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <dl className="mm-cmp__dl">
        <div><dt>Material</dt><dd>{product.comfort.material}</dd></div>
        <div><dt>Layers</dt><dd>{product.comfort.layers}</dd></div>
        <div><dt>Armour flexibility</dt><dd>{product.comfort.armourFlex}</dd></div>
      </dl>
    </div>
  );
};

const UniqueCell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <ul className="mm-cmp__bullets">
        {product.unique.map((u, i) => <li key={i}>{u}</li>)}
      </ul>
    </div>
  );
};

const WarrantyCell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <div className="mm-cmp__warranty-yr">{product.warranty.years}</div>
      <p className="mm-cmp__warranty-note">{product.warranty.note}</p>
    </div>
  );
};

const StockistsCell = ({ product }) => {
  if (!product) return <EmptyCell />;
  return (
    <div className="mm-cmp__cell">
      <ul className="mm-cmp__chips">
        {product.stockists.map((s, i) => <li key={i} className="mm-cmp__chip">{s}</li>)}
      </ul>
      <p className="mm-cmp__stockist-foot mm-mono">* CHECK INDIVIDUAL STORES BY COUNTRY</p>
    </div>
  );
};

// Row wrapper — renders the row label once on the left, then one Cell per column.
const SpecRow = ({ icon, label, products, render }) => (
  <section className="mm-cmp__row">
    <header className="mm-cmp__row-head">
      <span className="mm-cmp__row-icon">{icon}</span>
      <span className="mm-mono">{label}</span>
    </header>
    <div className="mm-cmp__row-cells">
      {products.map((p, i) => <React.Fragment key={i}>{render(p, i)}</React.Fragment>)}
    </div>
  </section>
);

// ──────────────────────────────────────────────────────────────────────
// Modals (unchanged)
// ──────────────────────────────────────────────────────────────────────
const ReviewsReadModal = ({ product, onClose, onLeave }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  return (
    <div className="mm-cmp__modal" role="dialog" aria-modal="true" aria-label={`Reviews for ${product.brand} ${product.name}`}>
      <div className="mm-cmp__modal-overlay" onClick={onClose} />
      <div className="mm-cmp__modal-panel">
        <div className="mm-cmp__modal-head">
          <div>
            <span className="mm-mono">WHAT THE GIRLS ARE SAYING</span>
            <h3>{product.brand} {product.name}</h3>
          </div>
          <button className="mm-cmp__modal-close" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="mm-cmp__modal-body">
          <div className="mm-cmp__reviews-empty mm-cmp__reviews-empty--lg">
            <p>No verified reviews yet for this product.</p>
            <p className="mm-cmp__reviews-empty-sub">Be the first to share how it fits, how it rides, and what to know before buying.</p>
            <button className="mm-cmp__btn mm-cmp__btn--primary" onClick={onLeave}>Leave a review</button>
          </div>
        </div>
      </div>
    </div>
  );
};

const LeaveReviewModal = ({ product, onClose }) => {
  const [stars, setStars] = React.useState(0);
  const [submitted, setSubmitted] = React.useState(false);

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);

  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <div className="mm-cmp__modal" role="dialog" aria-modal="true">
      <div className="mm-cmp__modal-overlay" onClick={onClose} />
      <div className="mm-cmp__modal-panel">
        <div className="mm-cmp__modal-head">
          <div>
            <span className="mm-mono">LEAVE A REVIEW</span>
            <h3>{product.brand} {product.name}</h3>
          </div>
          <button className="mm-cmp__modal-close" onClick={onClose} aria-label="Close">✕</button>
        </div>
        <div className="mm-cmp__modal-body">
          {submitted ? (
            <div className="mm-cmp__review-thanks">
              <span className="mm-mono">RECEIVED</span>
              <h4>Thank you.</h4>
              <p>Your review will be verified by the Motomelli team before it goes live.</p>
              <button className="mm-cmp__btn mm-cmp__btn--ghost" onClick={onClose}>Close</button>
            </div>
          ) : (
            <form className="mm-cmp__review-form" onSubmit={submit}>
              <label className="mm-cmp__field">
                <span className="mm-mono">YOUR NAME</span>
                <input type="text" required placeholder="First name + last initial" />
              </label>
              <label className="mm-cmp__field">
                <span className="mm-mono">YOUR EMAIL</span>
                <input type="email" required placeholder="for verification only — not published" />
              </label>
              <div className="mm-cmp__field">
                <span className="mm-mono">RATING</span>
                <div className="mm-cmp__stars-input" role="radiogroup" aria-label="Rating">
                  {[1,2,3,4,5].map(n => (
                    <button
                      type="button"
                      key={n}
                      role="radio"
                      aria-checked={stars === n}
                      className={`mm-cmp__star-btn ${stars >= n ? "is-on" : ""}`}
                      onClick={() => setStars(n)}
                    >★</button>
                  ))}
                </div>
              </div>
              <div className="mm-cmp__field-grid">
                <label className="mm-cmp__field">
                  <span className="mm-mono">YOUR HEIGHT</span>
                  <input type="text" placeholder="e.g. 5'6'' / 168cm" />
                </label>
                <label className="mm-cmp__field">
                  <span className="mm-mono">YOUR USUAL SIZE</span>
                  <input type="text" placeholder="e.g. UK 10" />
                </label>
                <label className="mm-cmp__field">
                  <span className="mm-mono">SIZE BOUGHT</span>
                  <input type="text" placeholder="e.g. M" />
                </label>
                <label className="mm-cmp__field">
                  <span className="mm-mono">YOUR BIKE</span>
                  <input type="text" placeholder="e.g. MT-07, daily commuter" />
                </label>
              </div>
              <label className="mm-cmp__field">
                <span className="mm-mono">YOUR REVIEW</span>
                <textarea rows="5" required placeholder="Fit, comfort, what worked, what didn't…" />
              </label>
              <p className="mm-cmp__review-disclaim">
                Reviews are moderated by the Motomelli team. We verify each submission before it goes live. We don't edit or alter your words.
              </p>
              <div className="mm-cmp__review-actions">
                <button type="button" className="mm-cmp__btn mm-cmp__btn--ghost" onClick={onClose}>Cancel</button>
                <button type="submit" className="mm-cmp__btn mm-cmp__btn--primary" disabled={stars === 0}>Submit review</button>
              </div>
            </form>
          )}
        </div>
      </div>
    </div>
  );
};

// ──────────────────────────────────────────────────────────────────────
// Main page — auto column count based on viewport
// ──────────────────────────────────────────────────────────────────────
const ComparePage = () => {
  // Count columns by viewport: 2 on mobile, 3 on >=900px. No manual toggle.
  const [columnCount, setColumnCount] = React.useState(() => window.innerWidth >= 900 ? 3 : 2);

  React.useEffect(() => {
    const fn = () => setColumnCount(window.innerWidth >= 900 ? 3 : 2);
    window.addEventListener("resize", fn);
    return () => window.removeEventListener("resize", fn);
  }, []);

  // Initial random pair/triple from starred products.
  const initial = React.useMemo(() => {
    const upperPop = window.COMPARE_DATA.upper().filter(p => p.popular);
    const lowerPop = window.COMPARE_DATA.lower().filter(p => p.popular);
    const shuffled = [...upperPop, ...lowerPop];
    for (let i = shuffled.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
    }
    return [shuffled[0]?.id || null, shuffled[1]?.id || null, shuffled[2]?.id || null];
  }, []);

  const [ids, setIds] = React.useState(initial);
  const [currency, setCurrency] = React.useState("GBP");
  const [reviewsModal, setReviewsModal] = React.useState(null);
  const [leaveModal, setLeaveModal] = React.useState(null);

  const setColumn = (i, id) => {
    const next = [...ids];
    next[i] = id;
    setIds(next);
  };

  const visibleIds = ids.slice(0, columnCount);
  const products = visibleIds.map(id => window.COMPARE_DATA.byId(id) || null);

  return (
    <div data-screen-label="Compare Page" className="mm-cmp-page">
      {/* Page hero header */}
      <header className="mm-cmp__hero-head">
        <div className="mm-cmp__hero-head-inner">
          <span className="mm-mono">COMPARE</span>
          <h1 className="mm-cmp__title">Compare Products.</h1>
          <p className="mm-cmp__subtitle">Pick {columnCount === 3 ? "three" : "two"} and see them side by side. Specs are pulled from the manufacturers. Reviews come from women who actually ride.</p>
        </div>
      </header>

      {/* Sticky picker bar */}
      <div className="mm-cmp__sticky-pickers">
        <div className={`mm-cmp__pickers mm-cmp__pickers--${columnCount}`}>
          {visibleIds.map((id, i) => (
            <ProductPicker
              key={i}
              value={id}
              onChange={(newId) => setColumn(i, newId)}
            />
          ))}
        </div>
      </div>

      {/* Comparison body — every spec is rendered as one wide row that
          contains N cells, one per column. Headers are shared. */}
      <div className={`mm-cmp__body mm-cmp__body--${columnCount}`}>
        {/* Hero row — image, identity, price (no row header) */}
        <section className="mm-cmp__row mm-cmp__row--hero">
          <div className="mm-cmp__row-cells">
            {products.map((p, i) => (
              <HeroCell key={i} product={p} currency={currency} onCurrency={setCurrency} />
            ))}
          </div>
        </section>

        <SpecRow
          icon={<IconChat />}
          label="WHAT THE GIRLS ARE SAYING"
          products={products}
          render={(p, i) => (
            <ReviewsCell
              key={i}
              product={p}
              onOpenReviews={(prod) => setReviewsModal(prod)}
              onOpenLeaveReview={(prod) => setLeaveModal(prod)}
            />
          )}
        />

        <SpecRow icon={<IconShield />} label="CE RATING" products={products}
          render={(p, i) => <CECell key={i} product={p} />} />

        <SpecRow icon={<IconRuler />} label="SIZE" products={products}
          render={(p, i) => <SizeCell key={i} product={p} />} />

        <SpecRow icon={<IconFeather />} label="COMFORT" products={products}
          render={(p, i) => <ComfortCell key={i} product={p} />} />

        <SpecRow icon={<IconSpark />} label="UNIQUE FEATURES" products={products}
          render={(p, i) => <UniqueCell key={i} product={p} />} />

        <SpecRow icon={<IconWarranty />} label="WARRANTY" products={products}
          render={(p, i) => <WarrantyCell key={i} product={p} />} />

        <SpecRow icon={<IconStore />} label="STOCKED BY" products={products}
          render={(p, i) => <StockistsCell key={i} product={p} />} />
      </div>

      {/* Footer CTA */}
      <section className="mm-cmp__cta">
        <div>
          <span className="mm-mono">SIZE GUIDE</span>
          <h2>Wondering what's your size?</h2>
          <p>Check our comprehensive size table to find your fit across all brands we compare.</p>
        </div>
        <a href="Motomelli.html#mm-sizecmp" className="mm-cmp__btn mm-cmp__btn--primary mm-cmp__btn--lg">
          View size table <span aria-hidden>→</span>
        </a>
      </section>

      {reviewsModal && <ReviewsReadModal
        product={reviewsModal}
        onClose={() => setReviewsModal(null)}
        onLeave={() => { setLeaveModal(reviewsModal); setReviewsModal(null); }}
      />}
      {leaveModal && <LeaveReviewModal
        product={leaveModal}
        onClose={() => setLeaveModal(null)}
      />}
    </div>
  );
};

window.ComparePage = ComparePage;