// LegalPages — Privacy, Terms and Cookies, extracted from their old .html
// files into one module. The three pages share the same layout/styles, so they
// live together. Each page's table-of-contents list is given a unique name to
// avoid the `const SECTIONS` collision the separate files used to have.
// Chrome (TopBar/Footer) is supplied by PageShell in app.jsx.

/* ===== Privacy ===== */
const PRIVACY_SECTIONS = [
  { id: "who-we-are",   title: "Who we are" },
  { id: "what-we-collect", title: "What data we collect" },
  { id: "how-we-use",   title: "How we use your data" },
  { id: "legal-basis",  title: "Our legal basis" },
  { id: "cookies",      title: "Cookies & analytics" },
  { id: "sharing",      title: "Who we share data with" },
  { id: "retention",    title: "How long we keep it" },
  { id: "your-rights",  title: "Your rights" },
  { id: "security",     title: "How we protect your data" },
  { id: "changes",      title: "Changes to this policy" },
  { id: "contact",      title: "How to contact us" },
];

const PrivacyPage = () => (
  <main>
    <section className="mm-pagehero">
      <div className="mm-pagehero__inner">
        <div className="mm-pagehero__eyebrow">
          <span className="mm-tick" />
          <span className="mm-mono">LEGAL</span>
        </div>
        <h1 className="mm-pagehero__title">
          Privacy<br /><em>policy.</em>
        </h1>
        <p className="mm-pagehero__sub">
          Straight talk about what we collect, why, and the control you have over it.
          No dark patterns, no selling your data — just the gear advice you came for.
        </p>
        <div className="mm-pagehero__meta">
          <span className="mm-pagehero__chip">UK GDPR <em>· COMPLIANT</em></span>
          <span className="mm-pagehero__chip">UK</span>
        </div>
      </div>
    </section>

    <section className="mm-section" id="privacy">
      <div className="mm-legal__grid">
        <nav className="mm-legal__toc" aria-label="On this page">
          <span className="mm-mono">ON THIS PAGE</span>
          <ol>
            {PRIVACY_SECTIONS.map((s) => (
              <li key={s.id}><a href={`#${s.id}`}>{s.title}</a></li>
            ))}
          </ol>
        </nav>

        <div className="mm-legal__body">
          <p className="mm-legal__intro">
            Motomelli is a women-led motorcycle gear platform. We <em>only</em> collect
            the data we need to answer your questions, run the site and sell our own hoodies.
          </p>
          <p className="mm-legal__updated">Last updated: 1 June 2026</p>

          <h2 className="mm-legal__h2" id="who-we-are"><span className="mm-legal__num">01</span> Who we are</h2>
          <p>
            Motomelli is a trading name of <strong>Align Ops Ltd</strong>, registered in
            England and Wales (Company No. 16090781). Registered office: Suite A, 82 James
            Carter Road, Mildenhall, IP28 7DE, United Kingdom. For the purposes of UK data
            protection law (the UK GDPR and the Data Protection Act 2018), Align Ops Ltd is
            the "data controller" responsible for your personal data.
          </p>
          <p>
            If you have any questions about this policy or how we handle your information,
            you can reach us at <a href="mailto:hello@motomelli.com">hello@motomelli.com</a>.
          </p>

          <h2 className="mm-legal__h2" id="what-we-collect"><span className="mm-legal__num">02</span> What data we collect</h2>
          <p>We keep this deliberately minimal. Depending on how you use the site, we may collect:</p>
          <ul>
            <li><strong>Contact details</strong> — your name and email address when you message us through the contact form or by email.</li>
            <li><strong>Enquiry details</strong> — anything you choose to tell us, such as your usual size or the gear you're asking about.</li>
            <li><strong>Order details</strong> — if you buy Motomelli Originals (our hoodies): your name, delivery address, email and order contents. Card payments are handled by our payment provider — we never see or store your full card number.</li>
            <li><strong>Technical data</strong> — basic information your browser sends automatically, such as IP address, device and browser type, and the pages you visit.</li>
          </ul>
          <p>We do <strong>not</strong> ask for, or knowingly collect, any special-category data (such as health or biometric information).</p>

          <h2 className="mm-legal__h2" id="how-we-use"><span className="mm-legal__num">03</span> How we use your data</h2>
          <p>We use your information to:</p>
          <ul>
            <li>Reply to your enquiries and provide sizing or gear advice.</li>
            <li>Process, fulfil and deliver any hoodie orders you place.</li>
            <li>Send the newsletter — but only if you've actively signed up, and you can unsubscribe at any time.</li>
            <li>Keep the website secure, running and improving over time.</li>
            <li>Meet our legal and accounting obligations.</li>
          </ul>
          <p>We will never sell your personal data, and we don't use it for automated decision-making or profiling.</p>

          <h2 className="mm-legal__h2" id="legal-basis"><span className="mm-legal__num">04</span> Our legal basis</h2>
          <p>Under UK GDPR we rely on the following lawful bases:</p>
          <ul>
            <li><strong>Consent</strong> — for newsletter sign-ups and non-essential cookies. You can withdraw this at any time.</li>
            <li><strong>Contract</strong> — to fulfil an order you've placed with us.</li>
            <li><strong>Legitimate interests</strong> — to respond to enquiries, keep the site secure and understand how it's used, in a way that doesn't override your rights.</li>
            <li><strong>Legal obligation</strong> — to keep records we're required by law to retain.</li>
          </ul>

          <h2 className="mm-legal__h2" id="cookies"><span className="mm-legal__num">05</span> Cookies & analytics</h2>
          <p>
            We use a small number of cookies to make the site work and to understand, in
            aggregate, how visitors use it. Essential cookies are needed for the site to
            function; analytics cookies are only set with your consent. You can clear or
            block cookies in your browser settings at any time, though some features may
            then not work as intended.
          </p>

          <h2 className="mm-legal__h2" id="sharing"><span className="mm-legal__num">06</span> Who we share data with</h2>
          <p>
            We only share your data with trusted service providers who help us run Motomelli,
            and only as far as they need it to do their job. These may include our website
            host, email provider, newsletter platform, payment processor and delivery couriers.
            Every provider is bound to protect your data. We may also disclose information
            where we're legally required to. We never sell or rent your data to third parties.
          </p>

          <h2 className="mm-legal__h2" id="retention"><span className="mm-legal__num">07</span> How long we keep it</h2>
          <p>
            We keep personal data only as long as we need it. Enquiry emails are typically
            kept for up to 24 months; order and accounting records are kept for as long as
            UK tax law requires (currently six years); newsletter data is kept until you
            unsubscribe. After that, we securely delete or anonymise it.
          </p>

          <h2 className="mm-legal__h2" id="your-rights"><span className="mm-legal__num">08</span> Your rights</h2>
          <p>Under UK data protection law, you have the right to:</p>
          <ul>
            <li>Access the personal data we hold about you.</li>
            <li>Ask us to correct anything inaccurate or incomplete.</li>
            <li>Ask us to erase your data ("right to be forgotten").</li>
            <li>Restrict or object to how we use it.</li>
            <li>Request a portable copy of the data you've given us.</li>
            <li>Withdraw consent at any time, where we rely on it.</li>
          </ul>
          <p>
            To exercise any of these, just email us. We'll respond within one month. You also
            have the right to complain to the UK's Information Commissioner's Office (ICO) at{" "}
            <a href="https://ico.org.uk" target="_blank" rel="noopener noreferrer">ico.org.uk</a>,
            though we'd appreciate the chance to put things right first.
          </p>

          <h2 className="mm-legal__h2" id="security"><span className="mm-legal__num">09</span> How we protect your data</h2>
          <p>
            We use appropriate technical and organisational measures — including encryption
            in transit (HTTPS) and access controls — to keep your data safe. No method of
            transmission over the internet is ever 100% secure, but we work hard to protect
            your information and to limit who can access it.
          </p>

          <h2 className="mm-legal__h2" id="changes"><span className="mm-legal__num">10</span> Changes to this policy</h2>
          <p>
            We may update this policy from time to time as our business or the law changes.
            When we do, we'll revise the "last updated" date at the top. Significant changes
            will be made clear on this page.
          </p>

          <h2 className="mm-legal__h2" id="contact"><span className="mm-legal__num">11</span> How to contact us</h2>
          <div className="mm-legal__callout">
            <span className="mm-mono">GET IN TOUCH</span>
            <p>
              Questions about your data or this policy? Email{" "}
              <a href="mailto:hello@motomelli.com">hello@motomelli.com</a> or write to us at
              Align Ops Ltd, Suite A, 82 James Carter Road, Mildenhall, IP28 7DE, UK. You can
              also use our <a href="/contact">contact form</a>.
            </p>
          </div>
        </div>
      </div>
    </section>
  </main>
);

/* ===== Terms ===== */
const TERMS_SECTIONS = [
  { id: "acceptance",   title: "Acceptance of terms" },
  { id: "about-us",     title: "About us" },
  { id: "using-site",   title: "Using the website" },
  { id: "reviews",      title: "Reviews & comparisons" },
  { id: "orders",       title: "Hoodie orders & pricing" },
  { id: "delivery",     title: "Delivery" },
  { id: "returns",      title: "Returns & refunds" },
  { id: "ip",           title: "Intellectual property" },
  { id: "user-content", title: "Your content" },
  { id: "liability",    title: "Liability" },
  { id: "links",        title: "Third-party links" },
  { id: "law",          title: "Governing law" },
  { id: "contact",      title: "How to contact us" },
];

const TermsPage = () => (
  <main>
    <section className="mm-pagehero">
      <div className="mm-pagehero__inner">
        <div className="mm-pagehero__eyebrow">
          <span className="mm-tick" />
          <span className="mm-mono">LEGAL</span>
        </div>
        <h1 className="mm-pagehero__title">
          Terms &amp;<br /><em>conditions.</em>
        </h1>
        <p className="mm-pagehero__sub">
          The rules of the road for using Motomelli — our reviews, our comparisons and
          our hoodie store. Plain English wherever we can manage it.
        </p>
        <div className="mm-pagehero__meta">
          <span className="mm-pagehero__chip">ENGLAND &amp; WALES <em>· LAW</em></span>
          <span className="mm-pagehero__chip">UK</span>
        </div>
      </div>
    </section>

    <section className="mm-section" id="terms">
      <div className="mm-legal__grid">
        <nav className="mm-legal__toc" aria-label="On this page">
          <span className="mm-mono">ON THIS PAGE</span>
          <ol>
            {TERMS_SECTIONS.map((s) => (
              <li key={s.id}><a href={`#${s.id}`}>{s.title}</a></li>
            ))}
          </ol>
        </nav>

        <div className="mm-legal__body">
          <p className="mm-legal__intro">
            By using Motomelli you agree to these terms. They're here to keep things fair
            for <em>both</em> of us — please read them before browsing or ordering.
          </p>
          <p className="mm-legal__updated">Last updated: 1 June 2026</p>

          <h2 className="mm-legal__h2" id="acceptance"><span className="mm-legal__num">01</span> Acceptance of terms</h2>
          <p>
            These terms and conditions govern your use of the Motomelli website and your
            purchase of any products from us. By accessing the site or placing an order, you
            confirm that you accept these terms. If you don't agree with them, please don't
            use the site.
          </p>

          <h2 className="mm-legal__h2" id="about-us"><span className="mm-legal__num">02</span> About us</h2>
          <p>
            Motomelli is a trading name of <strong>Align Ops Ltd</strong>, registered in
            England and Wales (Company No. 16090781). Registered office: Suite A, 82 James
            Carter Road, Mildenhall, IP28 7DE, United Kingdom. You can reach us at{" "}
            <a href="mailto:hello@motomelli.com">hello@motomelli.com</a>.
          </p>

          <h2 className="mm-legal__h2" id="using-site"><span className="mm-legal__num">03</span> Using the website</h2>
          <p>You agree to use Motomelli lawfully and not to:</p>
          <ul>
            <li>Use the site in any way that breaches applicable law or regulation.</li>
            <li>Attempt to gain unauthorised access to the site, its servers or any connected systems.</li>
            <li>Copy, scrape or republish our content without permission.</li>
            <li>Introduce malicious code or otherwise interfere with the site's operation.</li>
          </ul>
          <p>We may suspend or withdraw access to the site at any time without notice where we reasonably need to.</p>

          <h2 className="mm-legal__h2" id="reviews"><span className="mm-legal__num">04</span> Reviews & comparisons</h2>
          <p>
            Our gear reviews, sizing notes, brand comparisons and CE-rating explainers are
            provided for general guidance only, based on our own hands-on testing and research.
            They are <strong>not</strong> a substitute for the manufacturer's official
            specifications, fitting advice or safety certifications. Protective equipment must
            be selected, fitted and worn in line with the maker's instructions and relevant
            standards. We do our best to keep information accurate and up to date, but we can't
            guarantee a particular product will suit your body, bike or riding. Always check
            the brand's own details before you buy, and ride within your limits.
          </p>

          <h2 className="mm-legal__h2" id="orders"><span className="mm-legal__num">05</span> Hoodie orders & pricing</h2>
          <p>
            The only products we sell directly are <strong>Motomelli Originals</strong> — our
            own hoodies. Reviewed riding gear is sold by the third-party brands themselves, and
            those purchases are subject to the relevant brand's terms, not ours.
          </p>
          <ul>
            <li>All prices are shown in pounds sterling (GBP) and include VAT where applicable. Delivery costs, if any, are shown at checkout.</li>
            <li>Placing an order is an offer to buy. A contract is only formed once we send you an order confirmation.</li>
            <li>We may refuse or cancel an order — for example, if an item is out of stock or a price was clearly listed in error — and will refund any payment in full.</li>
            <li>We try to keep product images and descriptions accurate, but slight variations in colour or finish can occur.</li>
          </ul>

          <h2 className="mm-legal__h2" id="delivery"><span className="mm-legal__num">06</span> Delivery</h2>
          <p>
            We aim to dispatch orders promptly and will give you an estimated delivery window
            at checkout or by email. Delivery times are estimates, not guarantees, and risk in
            the goods passes to you on delivery. If something goes wrong with your delivery,
            get in touch and we'll help put it right.
          </p>

          <h2 className="mm-legal__h2" id="returns"><span className="mm-legal__num">07</span> Returns & refunds</h2>
          <p>
            If you're a consumer in the UK, you have the right to cancel an order within
            <strong> 14 days</strong> of receiving it under the Consumer Contracts Regulations,
            and a further 14 days to return the item. Goods should be returned unworn, unwashed
            and in their original condition. Once we've received and checked the return, we'll
            refund you within 14 days. This does not affect your statutory rights if an item is
            faulty or not as described. To start a return, email{" "}
            <a href="mailto:hello@motomelli.com">hello@motomelli.com</a>.
          </p>

          <h2 className="mm-legal__h2" id="ip"><span className="mm-legal__num">08</span> Intellectual property</h2>
          <p>
            All content on Motomelli — including the name, logo, wordmark, text, reviews,
            graphics, photography and page design — is owned by or licensed to Align Ops Ltd
            and protected by intellectual property law. You may view and share it for personal,
            non-commercial use, but you may not reproduce, republish or exploit it commercially
            without our written permission. Third-party brand names and logos remain the
            property of their respective owners.
          </p>

          <h2 className="mm-legal__h2" id="user-content"><span className="mm-legal__num">09</span> Your content</h2>
          <p>
            If you send us messages, photos or tag us on social media, you keep ownership of
            your content but grant us a non-exclusive, royalty-free licence to feature it in
            connection with Motomelli (for example, resharing a tagged post). You confirm the
            content is yours to share and doesn't infringe anyone else's rights. We may remove
            any content at our discretion.
          </p>

          <h2 className="mm-legal__h2" id="liability"><span className="mm-legal__num">10</span> Liability</h2>
          <p>
            Nothing in these terms limits our liability for death or personal injury caused by
            our negligence, for fraud, or for anything else that can't be excluded under UK law
            — including your statutory rights as a consumer. Subject to that, Motomelli is
            provided "as is": to the fullest extent permitted by law, we're not liable for any
            indirect or consequential loss, or for decisions you make based on our reviews or
            comparisons. Our total liability in connection with any product you buy from us is
            limited to the price you paid for it.
          </p>

          <h2 className="mm-legal__h2" id="links"><span className="mm-legal__num">11</span> Third-party links</h2>
          <p>
            Our site links out to brand stores and other third-party websites so you can buy
            the gear we review. We don't control those sites and aren't responsible for their
            content, products or practices. Following an external link is at your own risk, and
            their terms and privacy policies will apply.
          </p>

          <h2 className="mm-legal__h2" id="law"><span className="mm-legal__num">12</span> Governing law</h2>
          <p>
            These terms are governed by the laws of England and Wales, and any disputes will be
            subject to the exclusive jurisdiction of the courts of England and Wales. We may
            update these terms from time to time; the version in force is the one published on
            this page, and the "last updated" date shows when it last changed.
          </p>

          <h2 className="mm-legal__h2" id="contact"><span className="mm-legal__num">13</span> How to contact us</h2>
          <div className="mm-legal__callout">
            <span className="mm-mono">GET IN TOUCH</span>
            <p>
              Questions about these terms or an order? Email{" "}
              <a href="mailto:hello@motomelli.com">hello@motomelli.com</a> or write to us at
              Align Ops Ltd, Suite A, 82 James Carter Road, Mildenhall, IP28 7DE, UK. You can
              also use our <a href="/contact">contact form</a>. See our{" "}
              <a href="/privacy">Privacy Policy</a> for how we handle your data.
            </p>
          </div>
        </div>
      </div>
    </section>
  </main>
);

/* ===== Cookies ===== */
const COOKIES_SECTIONS = [
  { id: "what-are-cookies", title: "What cookies are" },
  { id: "why-we-use",       title: "Why we use cookies" },
  { id: "types",            title: "Types of cookies we use" },
  { id: "third-party",      title: "Third-party cookies" },
  { id: "managing",         title: "Managing your cookies" },
  { id: "do-not-track",     title: "Do Not Track" },
  { id: "changes",          title: "Changes to this policy" },
  { id: "contact",          title: "How to contact us" },
];

const CookiesPage = () => (
  <main>
    <section className="mm-pagehero">
      <div className="mm-pagehero__inner">
        <div className="mm-pagehero__eyebrow">
          <span className="mm-tick" />
          <span className="mm-mono">LEGAL</span>
        </div>
        <h1 className="mm-pagehero__title">
          Cookies<br /><em>policy.</em>
        </h1>
        <p className="mm-pagehero__sub">
          The small files that keep the site working — what we set, why, and how
          to switch the optional ones off. No tricks, no selling your data.
        </p>
        <div className="mm-pagehero__meta">
          <span className="mm-pagehero__chip">UK GDPR <em>· COMPLIANT</em></span>
          <span className="mm-pagehero__chip">PECR</span>
          <span className="mm-pagehero__chip">UK</span>
        </div>
      </div>
    </section>

    <section className="mm-section" id="cookies">
      <div className="mm-legal__grid">
        <nav className="mm-legal__toc" aria-label="On this page">
          <span className="mm-mono">ON THIS PAGE</span>
          <ol>
            {COOKIES_SECTIONS.map((s) => (
              <li key={s.id}><a href={`#${s.id}`}>{s.title}</a></li>
            ))}
          </ol>
        </nav>

        <div className="mm-legal__body">
          <p className="mm-legal__intro">
            Motomelli uses only a handful of cookies. The essential ones keep the
            site working; anything else is <em>optional</em> and set only with your consent.
          </p>
          <p className="mm-legal__updated">Last updated: 1 June 2026</p>

          <h2 className="mm-legal__h2" id="what-are-cookies"><span className="mm-legal__num">01</span> What cookies are</h2>
          <p>
            Cookies are small text files that a website stores on your device when you
            visit. They let the site remember things between pages and visits — like
            whether you've accepted this notice. We also use similar technologies, such
            as local storage, in the same way; we refer to them all as "cookies" here.
          </p>
          <p>
            This policy should be read alongside our{" "}
            <a href="/privacy">Privacy Policy</a>, which explains how we handle
            personal data more generally.
          </p>

          <h2 className="mm-legal__h2" id="why-we-use"><span className="mm-legal__num">02</span> Why we use cookies</h2>
          <p>We keep this deliberately minimal. We use cookies to:</p>
          <ul>
            <li>Make the site work and keep it secure.</li>
            <li>Remember your cookie choices so we don't keep asking.</li>
            <li>Understand, in aggregate, how visitors use the site so we can improve it.</li>
          </ul>
          <p>We do <strong>not</strong> use cookies to sell your data or to build advertising profiles about you.</p>

          <h2 className="mm-legal__h2" id="types"><span className="mm-legal__num">03</span> Types of cookies we use</h2>
          <table className="mm-legal__table">
            <thead>
              <tr><th>Type</th><th>Purpose</th><th>Consent</th></tr>
            </thead>
            <tbody>
              <tr>
                <td data-label="Type"><strong>Essential</strong></td>
                <td data-label="Purpose">Needed for the site to function — page navigation, security, and remembering your cookie preferences.</td>
                <td data-label="Consent">Always on</td>
              </tr>
              <tr>
                <td data-label="Type"><strong>Analytics</strong></td>
                <td data-label="Purpose">Help us see, in aggregate, which pages are useful and where things break, so we can improve.</td>
                <td data-label="Consent">Optional</td>
              </tr>
              <tr>
                <td data-label="Type"><strong>Preference</strong></td>
                <td data-label="Purpose">Remember choices you make, such as dismissed notices, to give you a smoother experience.</td>
                <td data-label="Consent">Optional</td>
              </tr>
            </tbody>
          </table>
          <p>
            Essential cookies don't require consent because the site can't work without
            them. Analytics and preference cookies are only set after you agree, and you
            can change your mind at any time.
          </p>

          <h2 className="mm-legal__h2" id="third-party"><span className="mm-legal__num">04</span> Third-party cookies</h2>
          <p>
            Some cookies may be set by trusted providers who help us run Motomelli — for
            example our analytics provider, or our payment processor when you buy a hoodie.
            These providers are only allowed to use cookies as far as they need to do their
            job, and they're bound to protect your data. We never sell or rent your data
            to third parties.
          </p>

          <h2 className="mm-legal__h2" id="managing"><span className="mm-legal__num">05</span> Managing your cookies</h2>
          <p>You're in control of cookies in two ways:</p>
          <ul>
            <li><strong>On our site</strong> — accept or decline optional cookies through our cookie notice when it appears.</li>
            <li><strong>In your browser</strong> — block or delete cookies in your browser settings at any time. Most browsers let you clear existing cookies and refuse new ones.</li>
          </ul>
          <p>
            Blocking essential cookies may mean some parts of the site no longer work as
            intended. Guidance for the main browsers is available at{" "}
            <a href="https://www.aboutcookies.org" target="_blank" rel="noopener noreferrer">aboutcookies.org</a>.
          </p>

          <h2 className="mm-legal__h2" id="do-not-track"><span className="mm-legal__num">06</span> Do Not Track</h2>
          <p>
            Some browsers offer a "Do Not Track" signal. There's no agreed industry
            standard for how sites should respond to it, so we don't currently react to
            Do Not Track signals — but we keep our use of optional cookies to a minimum
            and only set them with your consent.
          </p>

          <h2 className="mm-legal__h2" id="changes"><span className="mm-legal__num">07</span> Changes to this policy</h2>
          <p>
            We may update this policy from time to time as our business or the law changes.
            When we do, we'll revise the "last updated" date at the top. Significant changes
            will be made clear on this page.
          </p>

          <h2 className="mm-legal__h2" id="contact"><span className="mm-legal__num">08</span> How to contact us</h2>
          <div className="mm-legal__callout">
            <span className="mm-mono">GET IN TOUCH</span>
            <p>
              Questions about cookies or this policy? Email{" "}
              <a href="mailto:hello@motomelli.com">hello@motomelli.com</a> or write to us at
              Align Ops Ltd, Suite A, 82 James Carter Road, Mildenhall, IP28 7DE, UK. You can
              also use our <a href="/contact">contact form</a>.
            </p>
          </div>
        </div>
      </div>
    </section>
  </main>
);