// Privacy.jsx — internal privacy notice for the Venoraa site.
//
// Why this exists:
//   The footer used to link out to thetilescompany.com/privacy-notice
//   because the legal entity (The Tiles Company Ltd) already
//   published one there. That external site is being retired, so we
//   need the same notice — adapted for the Venoraa-branded
//   property — served from this app at /#privacy.
//
// Content principle:
//   This is the trading-name front for The Tiles Company Ltd. The
//   data controller is the same legal entity, the registered
//   number / VAT / Wimbledon address are the same. The notice
//   below mirrors the structure of a standard UK ICO-style privacy
//   notice (who we are → what we collect → why → legal basis →
//   sharing → retention → your rights → cookies → contact).
//
// Layout:
//   Single column, narrow measure (~720 px), generous leading,
//   serif H1 + sans H2/body — same typographic feel as the rest of
//   the site. Calm cream background. No hero image, no decoration.

function Privacy({ navigate }) {
  const updated = 'May 2026';

  return (
    <div style={{
      paddingTop: 'var(--nav-h)',
      minHeight: '100vh',
      background: 'var(--cream)',
    }}>
      <div style={{
        maxWidth: '720px',
        margin: '0 auto',
        padding: 'clamp(32px, 5vw, 72px) clamp(20px, 5vw, 40px) clamp(48px, 6vw, 96px)',
      }}>
        {/* ── Header ─────────────────────────────────────────────── */}
        <p className="t-label" style={{
          color: 'var(--terracotta)', marginBottom: '12px',
        }}>
          Legal
        </p>
        <h1 style={{
          fontFamily: 'var(--serif)', fontWeight: 300,
          fontSize: 'clamp(34px, 4.8vw, 56px)',
          lineHeight: 1.05,
          marginBottom: '16px',
        }}>
          Privacy <em>notice</em>
        </h1>
        <p style={{
          fontFamily: 'var(--sans)', fontSize: '12px',
          color: 'var(--dark-mid)', letterSpacing: '0.06em',
          marginBottom: '40px',
        }}>
          Last updated · {updated}
        </p>

        {/* ── Intro ──────────────────────────────────────────────── */}
        <P>
          Venoraa Ceramics is the trading name of <strong>The Tiles Company Ltd</strong>,
          a company registered in England and Wales with its studio
          at 64 Weir Road, Wimbledon, London SW19 8UG. We are the
          data controller for any personal information you provide to
          us through this site.
        </P>
        <P>
          This notice explains what we collect, why we collect it, how
          long we keep it, and the rights you have over it. If anything
          here isn't clear, please email us at{' '}
          <A href="mailto:info@thetilescompany.com">info@thetilescompany.com</A>.
        </P>

        {/* ── Sections ───────────────────────────────────────────── */}
        <H2>What we collect</H2>
        <P>
          We only collect information you give us directly through the
          forms on this site — principally the <em>Request a quote</em> and
          <em> Trade enquiry</em> forms. That typically includes your
          name, email address, phone number, business name (for trade
          enquiries), delivery address (if you provide one), and any
          project notes you choose to share.
        </P>
        <P>
          We do not run third-party advertising, behavioural tracking,
          or analytics fingerprinting on this site. We do not buy
          personal data from third parties.
        </P>

        <H2>Why we use it</H2>
        <Ul items={[
          'To respond to your quote, sample or trade-account enquiry.',
          'To send you pricing, lead times, and project paperwork you have asked for.',
          'To keep a record of our correspondence with you for the lifetime of a project (and afterwards for legitimate reference and accounting purposes).',
          'To meet our legal obligations — for example, retaining sales records for HMRC.',
        ]}/>

        <H2>Legal basis</H2>
        <P>
          Under UK GDPR, our lawful basis for processing your data is
          one of the following, depending on the interaction:
        </P>
        <Ul items={[
          'Your consent, when you submit an enquiry form.',
          'The performance of a contract, when we are preparing a quote or fulfilling an order.',
          'Our legitimate interests in operating a tile studio — responding to trade enquiries, maintaining customer records, and protecting against fraud.',
          'A legal obligation, such as keeping accounting and tax records.',
        ]}/>

        <H2>Who we share it with</H2>
        <P>
          We do not sell your data to anyone. We share it only with
          service providers we rely on to run the studio — for example,
          our email host, our courier partners (when arranging tile
          dispatch), and our accountants — and only where strictly
          necessary to do the job you've asked us for. All such
          providers are bound by data-processing agreements.
        </P>
        <P>
          We may disclose information where we are required to by law,
          by a court order, or by a regulator with appropriate
          authority.
        </P>

        <H2>How long we keep it</H2>
        <P>
          Enquiry correspondence is kept for as long as it is useful to
          the project (typically up to 24 months after our last
          contact). Sales records, invoices and contracts are kept for
          a minimum of 6 years to meet HMRC requirements. After those
          periods, records are securely deleted or anonymised.
        </P>

        <H2>Your rights</H2>
        <P>
          Under UK GDPR you have the right to:
        </P>
        <Ul items={[
          'Ask for a copy of the personal data we hold about you.',
          'Ask us to correct any data that is inaccurate or incomplete.',
          'Ask us to delete your data, where there is no overriding legal reason to keep it.',
          'Ask us to restrict or object to certain processing.',
          'Withdraw any consent you have previously given, at any time.',
          'Lodge a complaint with the Information Commissioner’s Office (ICO) at ico.org.uk.',
        ]}/>
        <P>
          To exercise any of these rights, email{' '}
          <A href="mailto:info@thetilescompany.com">info@thetilescompany.com</A>{' '}
          with the subject "Data request". We aim to respond within
          one calendar month.
        </P>

        <H2>Cookies</H2>
        <P>
          This site uses only the minimum cookies needed for it to
          function. Specifically:
        </P>
        <Ul items={[
          'A single essential cookie called "vid" — a random anonymous identifier (no name, email or other personal data) that lets the site remember which tiles you\'ve added to your selection between visits on the same device. It is HTTP-only (not readable by JavaScript), expires after one year of inactivity, and is never shared with anyone.',
          'No advertising cookies. No analytics cookies. No third-party tracking.',
        ]}/>
        <P>
          The Google Maps preview embedded in our footer is loaded
          directly from Google and may set its own cookies; you can
          read Google's privacy policy at{' '}
          <A href="https://policies.google.com/privacy" external>policies.google.com/privacy</A>.
          If you'd rather no Google cookies were set, your browser's
          "block third-party cookies" setting will prevent the map
          from loading.
        </P>

        <H2>Changes to this notice</H2>
        <P>
          If we change this notice we will update the "Last updated"
          date at the top of the page. Material changes will be flagged
          on the site.
        </P>

        <H2>Contact</H2>
        <P>
          The Tiles Company Ltd — trading as Venoraa Ceramics<br/>
          64 Weir Road, Wimbledon, London SW19 8UG<br/>
          <A href="mailto:info@thetilescompany.com">info@thetilescompany.com</A> ·{' '}
          <A href="tel:02034414711">020 3441 4711</A>
        </P>

        {/* ── Back link ──────────────────────────────────────────── */}
        <div style={{
          marginTop: '56px',
          paddingTop: '24px',
          borderTop: '1px solid var(--cream-deep)',
        }}>
          <button onClick={() => navigate('home')} style={{
            background: 'none', border: 'none', cursor: 'pointer', padding: 0,
            fontFamily: 'var(--sans)', fontSize: '12px',
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--dark)',
          }}>
            ← Back to home
          </button>
        </div>
      </div>
    </div>
  );
}

// ─── Tiny presentational primitives ────────────────────────────────
// Keep the body markup readable. These are scoped to this file —
// not exported — and only contain the inline styles that the rest of
// the privacy notice shares.

function H2({ children }) {
  return (
    <h2 style={{
      fontFamily: 'var(--serif)', fontWeight: 400,
      fontSize: 'clamp(20px, 2vw, 24px)',
      lineHeight: 1.2,
      marginTop: '40px', marginBottom: '14px',
      color: 'var(--dark)',
    }}>
      {children}
    </h2>
  );
}

function P({ children }) {
  return (
    <p style={{
      fontFamily: 'var(--sans)', fontWeight: 400,
      fontSize: '15px', lineHeight: 1.75,
      color: 'var(--dark)',
      margin: '0 0 16px',
    }}>
      {children}
    </p>
  );
}

function Ul({ items }) {
  return (
    <ul style={{
      fontFamily: 'var(--sans)', fontSize: '15px', lineHeight: 1.75,
      color: 'var(--dark)',
      margin: '0 0 16px',
      paddingLeft: '22px',
    }}>
      {items.map((t, i) => (
        <li key={i} style={{ marginBottom: '6px' }}>{t}</li>
      ))}
    </ul>
  );
}

function A({ href, external, children }) {
  return (
    <a
      href={href}
      {...(external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
      style={{
        color: 'var(--terracotta)',
        textDecoration: 'underline',
        textUnderlineOffset: '3px',
        textDecorationThickness: '1px',
      }}
    >
      {children}
    </a>
  );
}

Object.assign(window, { Privacy });