// AboutPage — extracted from the old About.html inline script.
// Chrome (TopBar/Footer) is supplied by PageShell in app.jsx.

const DO_ITEMS = [
  {
    n: "01", title: "Direct Comparison",
    body: "Compare products side by side — features, safety ratings, pricing and fit in one unbiased table.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="7" height="16"/><rect x="14" y="4" width="7" height="16"/></svg>,
  },
  {
    n: "02", title: "Honest sizing intel",
    body: "We publish the real body measurements each brand cuts for — UK, US and EU — so you can spot which label runs tight before it lands.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7h18M3 12h18M3 17h18M7 4v6M14 9v6M18 4v6"/></svg>,
  },
  {
    n: "03", title: "CE-Rating breakdown",
    body: "We break down EN 17092 — A, AA and AAA — into plain English: how far the gear will slide and what protection you get.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5z"/><path d="m9 12 2 2 4-4"/></svg>,
  },
  {
    n: "04", title: "Women-led review platform",
    body: "Leave reviews and ratings for each product you've tested. A growing community of women riders sharing real wear notes.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 17.3 6.2 20l1.1-6.4-4.6-4.5 6.4-.9L12 2.5l2.9 5.7 6.4.9-4.6 4.5 1.1 6.4z"/></svg>,
  },
  {
    n: "05", title: "A community",
    body: "Tag @motomelli and get featured. We're building a place where women swap gear notes instead of getting talked down to in dealerships.",
    icon: <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20a5.5 5.5 0 0 1 11 0M16 5.2a3.2 3.2 0 0 1 0 6.1M18 20a5.5 5.5 0 0 0-3-4.9"/></svg>,
  },
  {
    n: "06", title: "Motomelli Originals",
    body: "Our own heavyweight 480GSM oversized hoodies — designed by riders, tested by riders. A middle finger to boring streetwear.",
    icon: <svg width="20" height="20" 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>,
  },
];

const VALUES = [
  { n: "01", title: "Impartial and independent", body: "We don't take payment to rank a brand higher. We source information from manufacturers' specs and independent testing — never subjective bias." },
  { n: "02", title: "Safety is non-negotiable", body: "Style matters, but it never outranks a CE rating. We lead with the protection numbers because the right gear is the gear that's still doing its job at 60mph." },
  { n: "03", title: "Sizing you can trust", body: "\"It's a women's cut\" isn't good enough. We list the real body measurements so you order once, not three times." },
  { n: "04", title: "Reviews from the community", body: "We leave a place for you to review and rate gear you've ridden. Real wear notes from women who actually commute, tour and track — not press releases." },
];

const AboutPage = () => (
  <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">ABOUT MOTOMELLI</span>
        </div>
        <h1 className="mm-pagehero__title">
          For the girls<br />who <em>ride.</em>
        </h1>
        <p className="mm-pagehero__sub">
          Motomelli is a women-led motorcycle gear platform — honest reviews, real
          sizing intel and unbiased brand comparisons, so you never buy the wrong
          gear online again.
        </p>
        <div className="mm-pagehero__meta">
          <span className="mm-pagehero__chip">EST. <em>2024</em> · UK</span>
          <span className="mm-pagehero__chip">WOMEN-LED</span>
          <span className="mm-pagehero__chip">INDEPENDENT</span>
        </div>
      </div>
    </section>

    {/* Story */}
    <section className="mm-section" id="story">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">OUR STORY</span>
          <h2 className="mm-section__title">Why we<br />exist.</h2>
        </div>
      </div>

      <div className="mm-story__grid">
        <div className="mm-story__body">
          <p className="mm-about__lead">
            Buying protective riding gear as a woman is still a gamble — <em>wrong
            sizing, "unisex" cuts, and CE ratings nobody explains.</em>
          </p>
          <p style={{ marginTop: "24px" }}>
            Motomelli started with a simple, frustrating experience: ordering gear
            online, waiting a week, and finding it didn't fit, didn't protect
            properly, or wasn't really cut for a woman's body at all. Sound familiar?
          </p>
          <p>
            We're a small, independent team based in <strong>UK</strong>.
            We ride, we commute, we tour — and we got tired of the guesswork. So we
            built the resource we wished existed:  the real body measurements behind every size label, a plain-English breakdown of what a CE rating means and a place to leave reviews from women who actually ride.
          </p>
          <p>
            Our comparisons come from manufacturers specs and independent testing.
            If it's made to fit women, we'll tell you. If it'll save your skin, we'll tell
            you. <strong>That's the whole point.</strong>
          </p>
          <div className="mm-story__sign">
            <div>
              <div className="mm-story__sign-name">The Motomelli Team</div>
              <div className="mm-story__sign-role">For the girls · UK</div>
            </div>
          </div>
        </div>

        <figure className="mm-story__figure">
          <img src="assets/left-bike.webp" alt="A woman rider on her motorcycle" />
          <figcaption className="mm-story__figure-cap">
            <span className="mm-mono">ON THE ROAD</span>
            <span>FIG. 01</span>
          </figcaption>
        </figure>
      </div>
    </section>

    {/* What we do */}
    <section className="mm-section" id="what-we-do">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">WHAT WE DO</span>
          <h2 className="mm-section__title">Six ways<br />we help.</h2>
          <p className="mm-section__sub">From the first search to the gear in your wardrobe — here's what Motomelli actually does for you.</p>
        </div>
      </div>

      <div className="mm-do__grid">
        {DO_ITEMS.map((it) => (
          <article key={it.n} className="mm-do__card">
            <span className="mm-do__num">{it.n}</span>
            <div className="mm-do__icon">{it.icon}</div>
            <h3>{it.title}</h3>
            <p>{it.body}</p>
          </article>
        ))}
      </div>
    </section>

    {/* Values */}
    <section className="mm-section" id="values">
      <div className="mm-section__head">
        <div>
          <span className="mm-mono">WHAT WE STAND FOR</span>
          <h2 className="mm-section__title">Four rules<br />we don't break.</h2>
        </div>
      </div>

      <div className="mm-values__list">
        {VALUES.map((v) => (
          <div key={v.n} className="mm-values__row">
            <span className="mm-values__n">{v.n}</span>
            <div>
              <h3>{v.title}</h3>
              <p>{v.body}</p>
            </div>
          </div>
        ))}
      </div>
    </section>

    {/* CTA */}
    <section className="mm-ctaband">
      <div className="mm-ctaband__inner">
        <span className="mm-mono">READY WHEN YOU ARE</span>
        <h2>Find gear that actually fits.</h2>
        <p>Compare products from four brands side by side - safety, sizing, comfort and price.</p>
        <a href="/compare" className="mm-bigbtn">
          Compare gear <span aria-hidden>→</span>
        </a>
      </div>
    </section>
  </main>
);