// Remaining sections: Find by Garment, Find by Brand, Brand Comparison Table,
// Hoodies showcase, Footer.

// Find Gear — pick a brand, head to their site.
const FindGear = () => {
  const { BRANDS } = window.MOTO_DATA;
  return (
    <section className="mm-section mm-section--find" id="find">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">FIND GEAR</span>
          <h2 className="mm-section__title">Start browsing.</h2>
          <p className="mm-section__sub">Pick the brand you trust and head straight to their store. Four manufacturers, curated for women who actually ride.</p>
        </div>
      </div>

      <div className="mm-brands">
        {BRANDS.map((b, i) =>
          <a href={b.url} key={b.id} className="mm-brand" style={{ "--c": b.color }} target="_blank" rel="noopener noreferrer">
            <div className="mm-brand__top">
              <span className="mm-mono">{b.country} · EST. {b.founded}</span>
              <span className="mm-brand__dot" />
            </div>
            <div className="mm-brand__wordmark">{b.name.toUpperCase()}</div>
            <div className="mm-brand__tag">{b.tag}</div>
            {b.id === "pandomoto" && (
              <div className="mm-brand__promo mm-mono">
                <span className="mm-brand__promo-tag">Paid link</span>
                Code MOTOMELLI — 10% off
              </div>
            )}
            <div className="mm-brand__bot">
              <span className="mm-mono">{b.focus}</span>
              <span className="mm-brand__arrow">→</span>
            </div>
          </a>
        )}
      </div>
    </section>);

};

// Static — defined once, not recreated per render.
const BRAND_ROWS = [
  { k: "Focus",           v: ["Style and comfort", "Comfortable high performance", "Tech and performance", "Built for her"] },
  { k: "CE rating",       v: ["A–AAA & 1–2", "AA–AAA & 2", "A–AAA & 2", "A–AAA & 2"] },
  { k: "Women's fit",     v: ["Yes", "Yes", "Yes", "Exclusive"] },
  { k: "Size range",      v: ["XS–XXL", "XS–XL", "XS–XXL", "XS–3XL"], isLink: true },
  { k: "Price",           v: ["£££", "£££", "££", "£"] },
  { k: "Armour included", v: ["Shoulder, Elbow, Hip, Knees", "Shoulder, Elbow, Hip, Knees", "Shoulder, Elbow, Hip, Knees", "Shoulder, Elbow, Hip, Knees"] },
  { k: "Back protector?", v: ["No (optional)", "No (optional)", "Armoured Shirts Only", "No (optional)"] },
  { k: "Known for",       v: ["Form fitting comfort", "Discreet protection", "Mesh shirts", "More inclusive sizing"] }
];

const BrandCompareTable = () => {
  const { BRANDS } = window.MOTO_DATA;
  const isMobile = window.useMobile(640);

  return (
    <section className="mm-section mm-compare" id="compare">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">BRAND COMPARISON TOOL</span>
          <h2 className="mm-section__title">Four brands,<br />one honest table.</h2>
          <p className="mm-section__sub">No bias. Built from hands-on testing, thousands of women's reviews and official statistics.</p>
        </div>
      </div>

      {isMobile && (
        <div className="mm-compare__cards">
          {BRANDS.map((b, bi) => (
            <div key={b.id} className="mm-compare__mobile-card">
              <div className="mm-compare__mobile-head">
                <span className="mm-compare__brand">{b.name}</span>
              </div>
              <span className="mm-mono mm-compare__tag">{b.tag}</span>
              {BRAND_ROWS.map((row) => (
                <div key={row.k} className="mm-compare__mobile-row">
                  <span className="mm-mono">{row.k}</span>
                  {row.k === "CE rating"
                    ? <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
                        {row.v[bi].split('&').map((part, idx) => (
                          <span key={idx} className="mm-compare__ce mm-compare__ce--rating">{part.trim()}</span>
                        ))}
                      </div>
                    : row.isLink
                    ? <span className="mm-compare__mobile-v"><a href="#mm-sizecmp" className="mm-compare__link">{row.v[bi]} ↓</a></span>
                    : <span className="mm-compare__mobile-v">{row.v[bi]}</span>
                  }
                </div>
              ))}
            </div>
          ))}
        </div>
      )}
      {!isMobile && (
        <div className="mm-compare__table">
        <div className="mm-compare__row mm-compare__row--head">
          <div className="mm-compare__k" style={{ display: 'flex', justifyContent: 'left', alignItems: 'center', padding: '6px', alignSelf: 'stretch' }}>
            <img src="assets/bike-icon.png" alt="Motomelli Icon" style={{ width: '65%', height: '65%', objectFit: 'contain', opacity: 0.9, display: 'block' }} />
          </div>
          {BRANDS.map((b) =>
          <div key={b.id} className="mm-compare__v mm-compare__v--head">
              <span className="mm-compare__brand">{b.name}</span>
              <span className="mm-mono mm-compare__tag">{b.tag}</span>
            </div>
          )}
        </div>
        {BRAND_ROWS.map((row, i) =>
        <div key={row.k} className="mm-compare__row">
            <div className="mm-compare__k">{row.k}</div>
            {row.v.map((v, j) =>
          <div key={j} className="mm-compare__v">
                {row.k === "CE rating" ?
                  <div className="mm-compare__ce-group">
                    {v.split('&').map((part, idx) => (
                      <span key={idx} className="mm-compare__ce mm-compare__ce--rating">{part.trim()}</span>
                    ))}
                  </div> :
            row.isLink ?
            <a href="#mm-sizecmp" className="mm-compare__link">See table →</a> :
            v}
              </div>
          )}
          </div>
        )}
      </div>
      )}

      <div className="mm-cmpteaser__cta-row" style={{ justifyContent: 'flex-end' }}>
        <a href="/compare" className="mm-cmpteaser__cta-link">
          See garment comparison <span aria-hidden>→</span>
        </a>
      </div>
    </section>);

};

// Standalone wrapper so the size comparison can live on the homepage on its
// own, carrying the #compare anchor that product pages link to.
const SizeCompareSection = () => (
  <section className="mm-section mm-compare mm-compare--sizeonly" id="compare">
    <SizeCompareTable />
  </section>
);

// Cross-brand size comparison. User picks their size in their preferred
// system (UK / US / EU). We show each brand's internal label PLUS all three
// international equivalents + bust / waist / hip in cm so you can spot which
// brand cuts tight at a glance.

// Static lookup tables — defined once outside the component.
const SIZE_MAP = {
  6:  { UK: "6",  US: "2",  EU: "34" },
  8:  { UK: "8",  US: "4",  EU: "36" },
  10: { UK: "10", US: "6",  EU: "38" },
  12: { UK: "12", US: "8",  EU: "40" },
  14: { UK: "14", US: "10", EU: "42" },
  16: { UK: "16", US: "12", EU: "44" },
  18: { UK: "18", US: "14", EU: "46" },
  20: { UK: "20", US: "16", EU: "48" }
};
const UK_SIZES = [6, 8, 10, 12, 14, 16, 18, 20];

// Manufacturer-declared body measurements (cm) per brand per UK size.
const SIZE_TABLE = {
  6:  { pandomoto: { label: "XS / W24", bust: 79, waist: 62, hip: 85 },
        bowtex:    { label: "XS",      bust: 0,  waist: 64, hip: 0   },
        knox:      { label: "—",       bust: 0,  waist: 0,  hip: 0   },
        motogirl:  { label: "UK 6 / 2XS", bust: 80, waist: 66, hip: 94 } },
  8:  { pandomoto: { label: "S / W26", bust: 85, waist: 66, hip: 90 },
        bowtex:    { label: "S",       bust: 0,  waist: 69, hip: 0   },
        knox:      { label: "XS",      bust: 84, waist: 66, hip: 90  },
        motogirl:  { label: "UK 8 / XS",  bust: 85, waist: 71, hip: 98 } },
  10: { pandomoto: { label: "M / W28", bust: 91, waist: 70, hip: 95 },
        bowtex:    { label: "M",       bust: 0,  waist: 74, hip: 0   },
        knox:      { label: "S",       bust: 89, waist: 71, hip: 95  },
        motogirl:  { label: "UK 10 / S", bust: 90, waist: 76, hip: 102 } },
  12: { pandomoto: { label: "L / W30", bust: 97, waist: 74, hip: 100 },
        bowtex:    { label: "L",       bust: 0,  waist: 79, hip: 0   },
        knox:      { label: "M",       bust: 94, waist: 76, hip: 100 },
        motogirl:  { label: "UK 12 / M", bust: 95, waist: 81, hip: 106 } },
  14: { pandomoto: { label: "XL / W32", bust: 103, waist: 78, hip: 105 },
        bowtex:    { label: "XL",      bust: 0,  waist: 86, hip: 0   },
        knox:      { label: "L",       bust: 99, waist: 81, hip: 105 },
        motogirl:  { label: "UK 14 / L", bust: 100, waist: 86, hip: 110 } },
  16: { pandomoto: { label: "—",       bust: 0,   waist: 0,  hip: 0   },
        bowtex:    { label: "2XL",     bust: 0,  waist: 91, hip: 0   },
        knox:      { label: "XL",      bust: 104, waist: 86, hip: 110 },
        motogirl:  { label: "UK 16 / XL", bust: 105, waist: 91, hip: 114 } },
  18: { pandomoto: { label: "—",       bust: 0,   waist: 0,  hip: 0   },
        bowtex:    { label: "—",       bust: 0,  waist: 0,  hip: 0   },
        knox:      { label: "2XL",     bust: 109, waist: 91, hip: 115 },
        motogirl:  { label: "UK 18 / 2XL", bust: 110, waist: 97, hip: 118 } },
  20: { pandomoto: { label: "—",        bust: 0,  waist: 0,  hip: 0   },
        bowtex:    { label: "—",       bust: 0,  waist: 0,  hip: 0   },
        knox:      { label: "3XL",     bust: 114, waist: 96, hip: 120 },
        motogirl:  { label: "UK 20 / 3XL", bust: 115, waist: 102, hip: 122 } }
};

const SizeCompareTable = () => {
  const { BRANDS } = window.MOTO_DATA;
  const [system, setSystem] = React.useState("UK"); // UK | US | EU
  const [uk, setUk] = React.useState(10); // we always index our data by UK

  const row = SIZE_TABLE[uk];
  const conv = SIZE_MAP[uk];

  return (
    <div className="mm-sizecmp" id="mm-sizecmp">
      <div className="mm-sizecmp__head">
        <div>
          <span className="mm-mono">YOUR SIZE</span>
          <h3 className="mm-sizecmp__title">Your size, across all four.</h3>
          <p className="mm-sizecmp__sub">
            Pick your size in UK, US or EU. See what each brand calls it — and the exact body measurements they cut it for. If a brand runs small, you'll spot it in the cm.
          </p>
        </div>
        <div className="mm-sizecmp__controls">
          <div className="mm-sizecmp__sys" role="tablist" aria-label="Size system">
            {["UK", "US", "EU"].map((s) =>
            <button
              key={s}
              role="tab"
              aria-selected={system === s}
              className={`mm-sizecmp__sys-btn ${system === s ? "is-on" : ""}`}
              onClick={() => setSystem(s)}>

                <span className="mm-mono">{s}</span>
                <span className="mm-sizecmp__sys-v">{conv[s]}</span>
              </button>
            )}
          </div>
          <div className="mm-sizecmp__picker" role="radiogroup" aria-label={`Pick a ${system} size`}>
            {UK_SIZES.map((s) =>
            <button
              key={s}
              role="radio"
              aria-checked={uk === s}
              className={`mm-sizecmp__chip ${uk === s ? "is-on" : ""}`}
              onClick={() => setUk(s)}>

                <span className="mm-mono">{system}</span>
                <span className="mm-sizecmp__chip-n">{SIZE_MAP[s][system]}</span>
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="mm-sizecmp__grid">
        {BRANDS.map((b) => {
          const d = row[b.id];
          const unavail = !d || d.label === "—";
          return (
            <div key={b.id} className={`mm-sizecmp__card ${unavail ? "is-unavail" : ""}`}>
              <div className="mm-sizecmp__card-head">
                <span className="mm-mono mm-sizecmp__card-brand">{b.name.toUpperCase()}</span>
                <span className="mm-sizecmp__card-label">
                  {unavail ? "—" : d.label}
                </span>
              </div>
              {unavail ?
              <div className="mm-sizecmp__unavail">
                  <span className="mm-mono">NOT AVAILABLE</span>
                  <p>This brand doesn't cut a {system} {conv[system]} equivalent.</p>
                </div> :

              <div className="mm-sizecmp__measures">
                  <Measure label="BUST" cm={d.bust} min={78} max={118} />
                  <Measure label="WAIST" cm={d.waist} min={60} max={100} />
                  <Measure label="HIP" cm={d.hip} min={86} max={126} />
                </div>
              }
            </div>);

        })}
      </div>
      <p className="mm-sizecmp__foot">
        <span className="mm-mono">NOTE</span>
       Measurements are the brand's published "body fit" — not the actual garment size. Make sure to read women's reviews for your body type!
      </p>
    </div>);

};

const Measure = React.memo(({ label, cm, min, max }) => {
  const published = cm > 0;
  const pct = Math.max(0, Math.min(1, (cm - min) / (max - min))) * 100;
  const inches = published ? (cm / 2.54).toFixed(1) : null;
  return (
    <div className={`mm-measure${published ? "" : " is-unpublished"}`}>
      <div className="mm-measure__top">
        <span className="mm-mono mm-measure__l">{label}</span>
        <span className="mm-measure__v">
          {published ? (
            <>
              {cm}<span className="mm-measure__u">cm</span>
              <span className="mm-measure__sep">·</span>
              {inches}<span className="mm-measure__u">in</span>
            </>
          ) : (
            <span className="mm-measure__np">not published</span>
          )}
        </span>
      </div>
      {published && (
        <div className="mm-measure__bar">
          <div className="mm-measure__bar-fill" style={{ width: `${pct}%` }} />
          <div className="mm-measure__bar-mark" style={{ left: `${pct}%` }} />
        </div>
      )}
    </div>
  );
});

const HoodieCardRating = ({ reviews }) => {
  if (!reviews?.length) return null;
  const avg = reviews.reduce((s, r) => s + r.stars, 0) / reviews.length;
  const full = Math.round(avg);
  return (
    <div className="mm-hoodie__rating">
      <span className="mm-hoodie__stars">
        {[1, 2, 3, 4, 5].map(i => (
          <span key={i} className={`mm-hoodie__star${i <= full ? ' is-on' : ''}`}>★</span>
        ))}
      </span>
      <span className="mm-mono mm-hoodie__rating-count">({reviews.length})</span>
    </div>
  );
};

const HoodiesSection = () => {
  const { MOTOMELLI_HOODIES } = window.MOTO_DATA;
  return (
    <section className="mm-section mm-hoodies" id="hoodies">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">MOTOMELLI ORIGINALS</span>
          <h2 className="mm-section__title">Hoodies.<br />A middle finger to boring streetwear.</h2>
          <p className="mm-section__sub">Heavyweight oversized hoodies with state of the art DTG printing. Designed, tried and tested by bikers</p>
        </div>
        <div className="mm-section__head-r mm-hoodies__head-r">
          <span className="mm-mono mm-hoodies__stat">480GSM * OVERSIZED * UNISEX</span>
          <a href="/hoodies" className="mm-hoodies__see-all">
            <span className="mm-mono">SEE ALL</span>
            <span className="mm-hoodies__see-all-arrow">→</span>
          </a>
        </div>
      </div>

      <div className="mm-hoodies__grid">
        {MOTOMELLI_HOODIES.map((h, i) => (
          <a key={h.id} href={`/product?id=${h.id}`}
            className={`mm-hoodie${i === 1 ? " mm-hoodie--feat" : ""}`}>
            <div className="mm-hoodie__img">
              <img src={h.image} alt={h.name} />
              <span className="mm-mono mm-hoodie__idx">{String(i + 1).padStart(2, '0')} / {String(MOTOMELLI_HOODIES.length).padStart(2, '0')}</span>
              {i === 1 && <span className="mm-hoodie__badge"><span className="mm-mono">THE OG</span></span>}
            </div>
            <div className="mm-hoodie__meta">
              <div>
                <span className="mm-mono mm-hoodie__tag">{h.tag}</span>
                <h3>{h.name}</h3>
                <p>{h.subtitle}</p>
                <HoodieCardRating reviews={h.reviews} />
              </div>
              <div className="mm-hoodie__buy">
                <span className="mm-hoodie__price">{h.price}</span>
                <span className="mm-hoodie__add">{h.shopifyId ? "SHOP →" : "SOON"}</span>
              </div>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

const YouAndMotomelliSection = () => {
  const { UGC_PHOTOS } = window.MOTO_DATA;
  // Probe each photo. Section renders only after all images have settled
  // (loaded or failed). Failed ones are dropped so we never show broken icons.
  // If none load, the whole section is skipped.
  const [status, setStatus] = React.useState(() => new Map());
  if (!UGC_PHOTOS?.length) return null;

  const mark = (id, ok) => setStatus(m => { const n = new Map(m); n.set(id, ok); return n; });
  const settled = status.size === UGC_PHOTOS.length;
  const ok = UGC_PHOTOS.filter(p => status.get(p.id) === true);

  if (settled && !ok.length) return null;

  return (
    <section className="mm-section mm-ugc" id="you-and-motomelli">
      <div className="mm-ugc__head">
        <h2 className="mm-section__title">You + Motomelli</h2>
        <p>Tag @motomelli on Instagram for a chance to get featured 🔥</p>
      </div>
      <div className="mm-ugc__grid">
        {UGC_PHOTOS.map((photo) => (
          <a
            href={photo.instagramUrl}
            key={photo.id}
            target="_blank"
            rel="noopener noreferrer"
            className="mm-ugc__photo"
            style={status.get(photo.id) === false ? { display: 'none' } : null}
          >
            <img
              src={photo.image}
              alt={photo.alt || "User submitted photo"}
              loading="lazy"
              onLoad={() => mark(photo.id, true)}
              onError={() => mark(photo.id, false)}
            />
            <div className="mm-ugc__photo-overlay">
              <span className="mm-ugc__photo-credit">@{photo.credit}</span>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

const Footer = () => {
  const year = new Date().getFullYear();
  const SOCIAL = {
    instagram: "https://www.instagram.com/motomelli/",
    tiktok:    "https://www.tiktok.com/@motomelli",
    facebook:  "https://www.facebook.com/profile.php?id=61566404001810",
  };
  return (
  <footer className="mm-footer">
    <div className="mm-footer__top">
      <div className="mm-footer__brand">
        <div className="mm-logo mm-logo--lg">
          <MotomelliWordmark height={36} />
        </div>
        <div className="mm-footer__socials">
          <span className="mm-footer__follow">Give us a follow</span>
          <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none"/>
            </svg>
          </a>
          <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.6c0-.87.27-1.46 1.5-1.46H16.5V4.4c-.3-.04-1.3-.13-2.46-.13-2.44 0-4.04 1.49-4.04 4.21v2.02H7.5v3H10V21h3.5z"/>
            </svg>
          </a>
          <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
              <path d="M16.5 3h-2.7v12.1c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7c.3 0 .58.05.85.13v-2.78a5.5 5.5 0 0 0-.85-.07A5.43 5.43 0 0 0 5.7 15.1 5.43 5.43 0 0 0 11.1 20.5a5.43 5.43 0 0 0 5.4-5.4V8.83a7.4 7.4 0 0 0 4.3 1.37V7.43c-2.36 0-4.3-1.94-4.3-4.43z"/>
            </svg>
          </a>
        </div>
        <p className="mm-footer__mission">
          Specialist motorcycle gear platform. For the girls who ride, commute, tour and send it — women-led reviews, honest sizing and brands we'd wear ourselves.
        </p>
      </div>
      <div className="mm-footer__cols">
        <div>
          <span className="mm-mono">FIND GEAR</span>
          <a href="/compare">Compare Garment</a>
          <a href="/#mm-sizecmp">Compare Sizes</a>
          <a href="/#ce-ratings">CE Ratings</a>
          <a href="/#find">Ready to buy?</a>
        </div>
        <div>
          <span className="mm-mono">MOTOMELLI</span>
          <a href="/hoodies">Hoodies</a>
          <a href="/about">About</a>
          <a href="/contact">Contact</a>
        </div>
        <div>
          <span className="mm-mono">NEWSLETTER</span>
          <p className="mm-footer__news">New reviews, sizing notes, drops. Once a fortnight.</p>
          <form className="mm-footer__form" onSubmit={(e) => e.preventDefault()}>
            <input placeholder="you@hotmail.com" />
            <button>→</button>
          </form>
        </div>
      </div>
    </div>
    <div className="mm-footer__bot">
      <div className="mm-footer__links">
        <a href="/privacy">Privacy Policy</a>
        <a href="/cookies">Cookies Policy</a>
        <a href="/terms">Terms &amp; Conditions</a>
      </div>
      <span className="mm-mono">FOR THE GIRLS</span>
      <span className="mm-mono mm-footer__legal">
        © MOTOMELLI {year}. All Rights Reserved.<br />
        MotoMelli is a trading name of Align Ops Ltd. Registered in England and Wales No. 16090781.<br />
        Registered Office: Suite A, 82 James Carter Road, Mildenhall, IP28 7DE.
      </span>
    </div>
  </footer>
  );
};


// ── CE RATINGS SECTION ─────────────────────────────────────────────────────

const CESection = () => {
  const badges = [
    { level: 'AAA', img: 'assets/ce-rating-aaa.png', speeds: ['75mph', '46mph', '28mph'] },
    { level: 'AA',  img: 'assets/ce-rating-aa.png',  speeds: ['43mph', '28mph', '15mph'] },
    { level: 'A',   img: 'assets/ce-rating-a.png',   speeds: ['28mph', '15mph', null]    }
  ];
  const slideRows = [
    { label: 'AAA', dist: '70m', width: '100%' },
    { label: 'AA',  dist: '46m', width: '66%' },
    { label: 'A',   dist: '16m', width: '23%' }
  ];
  const timelineMarks = [
    { pos: '23%',  label: 'A level',   time: '2.5 sec' },
    { pos: '66%',  label: 'AA level',  time: '5.2 sec' },
    { pos: '100%', label: 'AAA level', time: '6 sec'   }
  ];

  return (
    <section className="mm-section mm-ce" id="ce-ratings">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">CE RATINGS EXPLAINED</span>
          <h2 className="mm-section__title">What the rating<br />actually means.</h2>
          <p className="mm-section__sub">CE Ratings defines three protection levels — A, AA and AAA — testing abrasion resistance, seam strength and impact absorption. Here's how each level breaks down across your body.</p>
        </div>
      </div>

      <div className="mm-ce__grid">
        {/* LEFT: Zones legend + placeholder for body-zone figure image (cutout to be imported later) */}
        <div className="mm-ce__zones">
          <div className="mm-ce__legend">
            <div className="mm-ce__legend-item">
              <div className="mm-ce__legend-swatch mm-ce__legend-swatch--z1" />
              <span className="mm-ce__legend-label">Zone 1</span>
            </div>
            <div className="mm-ce__legend-item">
              <div className="mm-ce__legend-swatch mm-ce__legend-swatch--z2" />
              <span className="mm-ce__legend-label">Zone 2</span>
            </div>
            <div className="mm-ce__legend-item">
              <div className="mm-ce__legend-swatch mm-ce__legend-swatch--z3" />
              <span className="mm-ce__legend-label">Zone 3</span>
            </div>
          </div>
          <div className="mm-ce__figure-slot">
            <img
              className="mm-ce__figure-img"
              src="assets/ce-body-compare.png"
              alt="Front, side and back views of a rider showing CE protection zones across the body"
            />
          </div>
        </div>

        {/* Armour note — sits under the figure on mobile, spans full width on desktop */}
        <div className="mm-ce__armour-note">
          <div className="mm-ce__armour-note-badges">
            <img className="mm-ce__armour-note-badge" src="assets/ce-level-1.png" alt="CE Level 1 armour badge" />
            <img className="mm-ce__armour-note-badge" src="assets/ce-level-2.png" alt="CE Level 2 armour badge" />
          </div>
          <div className="mm-ce__armour-note-body">
            <h4 className="mm-ce__armour-note-title">Level 1 vs Level 2 Armour</h4>
            <p className="mm-ce__armour-note-line">
              <span className="mm-ce__armour-note-tag">Impact:</span> Level 1 is typically tested at 30mph and is good, lightweight impact protection. Level 2 transmits up to 50% less force than Level 1 and is primarily used in CE AAA products.
            </p>
            <p className="mm-ce__armour-note-line">
              <span className="mm-ce__armour-note-tag">Slide:</span> Level 1 CE A must survive 28mph, and CE AA must survive 46 mph. Level 2 CE AAA must survive 75mph. Based on Darmstadt Machine test.
            </p>
          </div>
        </div>

        {/* RIGHT: Rating badges + slide-distance chart */}
        <div className="mm-ce__right">
          <div className="mm-ce__badges">
            {badges.map(b => (
              <div key={b.level} className="mm-ce__badge">
                <div className="mm-ce__badge-left">
                  <img className="mm-ce__badge-img" src={b.img} alt={`CE ${b.level} rating badge — EN 17092`} />
                </div>
                <div className="mm-ce__badge-bars">
                  {b.speeds.map((s, i) => (
                    <div
                      key={i}
                      className={`mm-ce__badge-bar mm-ce__badge-bar--z${i + 1}${s ? '' : ' mm-ce__badge-bar--empty'}`}
                    >
                      {s || ''}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="mm-ce__slide">
            <h3 className="mm-ce__slide-title">HOW FAR CAN IT SLIDE?</h3>
            <div className="mm-ce__slide-rows">
              {slideRows.map(r => (
                <div key={r.label} className="mm-ce__slide-row">
                  <div className="mm-ce__slide-label">{r.label}: {r.dist}</div>
                  <div className="mm-ce__slide-track">
                    <div className="mm-ce__slide-bar" style={{ width: r.width }} />
                    <div className="mm-ce__slide-fig" style={{ left: r.width }}>
                      <img className="mm-ce__slide-fig-img" src="assets/ce-slide-biker.png" alt="" aria-hidden="true" />
                    </div>
                  </div>
                </div>
              ))}
            </div>

            <div className="mm-ce__timeline">
              <div className="mm-ce__timeline-bar" />
              {timelineMarks.map(m => (
                <div key={m.label} className="mm-ce__timeline-mark" style={{ left: m.pos }}>
                  <div className="mm-ce__timeline-tick" />
                  <span className="mm-ce__timeline-l">{m.label}</span>
                  <span className="mm-ce__timeline-sub">{m.time}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>);
};

Object.assign(window, { FindGear, BrandCompareTable, SizeCompareTable, SizeCompareSection, Measure, HoodiesSection, YouAndMotomelliSection, Footer, CESection });