/* global React, CONTACT */

function Privacy({ navigate }) {
  return (
    <React.Fragment>
      {/* Hero */}
      <section style={{padding: "var(--pad)", paddingTop: "clamp(118px, 13vw, 170px)", paddingBottom: "clamp(56px, 6vw, 90px)", background: "var(--slate)", color: "white"}}>
        <div className="container">
          <div className="kicker" style={{color: "#7CC3D8", marginBottom: 24}}>Privacy &amp; Cookies</div>
          <h1 className="display" style={{color: "white", maxWidth: 900}}>
            How we handle<br /><em className="pull" style={{color: "#7CC3D8"}}>your information.</em>
          </h1>
          <p className="lede" style={{color: "rgba(255,255,255,0.78)", maxWidth: 640, marginTop: 28, fontSize: 17}}>
            Plain language, no legal jargon. If anything here isn't clear, ring the workshop and ask — that's the fastest way to a straight answer.
          </p>
          <p style={{color: "rgba(255,255,255,0.55)", marginTop: 18, fontSize: 13}}>Last updated August 2026</p>
        </div>
      </section>

      <section className="section">
        <div className="container" style={{maxWidth: 780}}>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>Who we are</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 40}}>
            {CONTACT.addressLines.join(", ")}. If you have any question about your information or want to exercise any of the rights below, email{" "}
            <a href={`mailto:${CONTACT.email}`} style={{color: "var(--teal)"}}>{CONTACT.email}</a> or ring{" "}
            <a href={CONTACT.phoneHref} style={{color: "var(--teal)"}}>{CONTACT.phoneDisplay}</a>.
          </p>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>What we collect</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 14}}>
            When you request a quote, book a showroom visit, or we carry out your job, we collect:
          </p>
          <ul style={{fontSize: 16, lineHeight: 1.8, color: "var(--grey)", marginBottom: 40, paddingLeft: 22}}>
            <li>Your name, phone number, email address and property address/Eircode</li>
            <li>Details of the job — room type, material and colour, dimensions, any plan or photo you upload with your enquiry</li>
            <li>Photos taken on site during measuring and fitting, and of the finished job</li>
            <li>Notes from our team — site access, snags, anything relevant to doing the job properly</li>
            <li>If you book a showroom visit, the date/time and reason for the visit</li>
            <li>Pricing and payment amounts tied to your job (we don't process card payments ourselves, so we don't collect or store your card details)</li>
          </ul>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>Why we collect it</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 14}}>
            To give you a quote, carry out and manage the job you've asked us to do, and to contact you about it — measure dates, fit dates, and checking everything's ready before we arrive. This is what's called a "contractual" basis: we need this information to actually do the job you've asked for.
          </p>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 40}}>
            We may also use a photo of your finished job on our website or social media, to show the standard of our work to future customers. If we've done this and you'd rather we hadn't, contact us and we'll take it down — no explanation needed.
          </p>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>Who we share it with</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 14}}>
            We don't sell your information to anyone. It's stored and processed using a small number of trusted tools that run our business day-to-day:
          </p>
          <ul style={{fontSize: 16, lineHeight: 1.8, color: "var(--grey)", marginBottom: 40, paddingLeft: 22}}>
            <li>Airtable — where your job record is stored</li>
            <li>Resend — sends the emails we send you about your job</li>
            <li>Vercel — hosts this website and stores photos related to your job</li>
            <li>Google / Mapbox — turns your address into a map location so our team can plan routes</li>
            <li>Microsoft — our shared showroom booking calendar, if you book a visit online</li>
          </ul>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>How long we keep it</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 40}}>
            For as long as we need it to complete your job, plus our normal business record-keeping period afterwards — up to 6 years, in line with Irish Revenue requirements for business records. You can ask us to delete your information sooner; see below.
          </p>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>Your rights</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 14}}>You can ask us, at any time, to:</p>
          <ul style={{fontSize: 16, lineHeight: 1.8, color: "var(--grey)", marginBottom: 14, paddingLeft: 22}}>
            <li>Send you a copy of the information we hold about you</li>
            <li>Correct anything that's wrong or out of date</li>
            <li>Delete your information — we'll do this unless we're required to keep it (for example, for tax records)</li>
            <li>Stop using a photo of your job on our website or social media</li>
          </ul>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 40}}>
            Email <a href={`mailto:${CONTACT.email}`} style={{color: "var(--teal)"}}>{CONTACT.email}</a> and we'll sort it. If you're ever unhappy with how we've handled your information, you can also complain to the Data Protection Commission at{" "}
            <a href="https://www.dataprotection.ie" target="_blank" rel="noopener noreferrer" style={{color: "var(--teal)"}}>dataprotection.ie</a>.
          </p>

          <h2 className="title" style={{color: "var(--navy)", fontSize: 24, marginBottom: 14}}>Cookies</h2>
          <p style={{fontSize: 16, lineHeight: 1.7, color: "var(--grey)", marginBottom: 40}}>
            This site doesn't use tracking or advertising cookies, and there's no Google Analytics or Facebook Pixel running on it. The only thing saved on your device is a temporary copy of your in-progress quote form (so you don't lose your place if you navigate away) — it's cleared automatically once you submit, and never leaves your device before then. We also use a lightweight, cookie-free performance tool to check the site's loading properly.
          </p>

        </div>
      </section>
    </React.Fragment>
  );
}

window.Privacy = Privacy;