// Juridische pagina's — Privacy, Algemene Voorwaarden, Cookies

const LEGAL_PAGES = {
  privacy: {
    title: "Privacyverklaring",
    eyebrow: "Privacy",
    lastUpdated: "Mei 2026",
    sections: [
      {
        h: "Wie zijn wij?",
        p: "Garage DéDé is een autobedrijf gevestigd aan Achterasweg 10-A, 2141 DG Vijfhuizen. We verwerken persoonsgegevens om u onze diensten te kunnen leveren — APK, onderhoud, reparatie, diagnose, airco en banden. Bij vragen over deze verklaring kunt u ons bereiken via info@garage-dede.nl of 023 - 545 1809.",
      },
      {
        h: "Welke gegevens verwerken we?",
        list: [
          "Naam en contactgegevens (e-mail, telefoon, adres) — om afspraken te plannen en u op de hoogte te houden",
          "Voertuiggegevens (kenteken, merk, model, kilometerstand) — voor diagnose en onderhoud",
          "Servicehistorie — om eerdere reparaties te kunnen raadplegen",
          "Inloggegevens (e-mail + gehasht wachtwoord) — voor uw klantportaal",
          "Logboeken (IP-adres, browser-type) — voor beveiliging en foutopsporing",
        ],
      },
      {
        h: "Waarom verwerken we deze gegevens?",
        p: "Wij verwerken uw gegevens uitsluitend op basis van: het uitvoeren van onze overeenkomst (uw afspraak / werkbon), wettelijke verplichtingen (boekhouding, RDW APK rapportage), en uw expliciete toestemming (e-mail reminders).",
      },
      {
        h: "Hoe lang bewaren we ze?",
        p: "Klantgegevens en servicehistorie bewaren we tot 7 jaar na uw laatste afspraak (verplichte bewaartermijn boekhouding). Inactieve klantaccounts kunt u op verzoek direct laten verwijderen.",
      },
      {
        h: "Met wie delen we uw gegevens?",
        list: [
          "RDW — bij APK keuringen (wettelijke verplichting)",
          "Onze hostingpartner (server-infrastructuur, EU-gebaseerd)",
          "Boekhouder / accountant — alleen wat nodig is voor de jaarrekening",
        ],
        p: "Wij verkopen of verhuren uw gegevens nooit aan derden voor marketingdoeleinden.",
      },
      {
        h: "Uw rechten (AVG)",
        list: [
          "Inzage — opvragen welke gegevens we van u hebben",
          "Correctie — onjuiste gegevens laten aanpassen",
          "Verwijdering — uw account en gegevens laten wissen",
          "Beperking — verwerking tijdelijk pauzeren",
          "Dataportabiliteit — uw gegevens in een leesbaar formaat ontvangen",
          "Bezwaar — tegen verwerking op basis van gerechtvaardigd belang",
        ],
        p: "Stuur uw verzoek naar info@garage-dede.nl. We reageren binnen 30 dagen. U kunt ook een klacht indienen bij de Autoriteit Persoonsgegevens.",
      },
      {
        h: "Beveiliging",
        p: "Wachtwoorden worden versleuteld opgeslagen (bcrypt). Communicatie verloopt via HTTPS. We bewaren gevoelige gegevens niet langer dan nodig en houden onze software up-to-date. Bij datalekken die u kunnen raken stellen we u en de Autoriteit Persoonsgegevens op de hoogte binnen 72 uur.",
      },
    ],
  },
  voorwaarden: {
    title: "Algemene Voorwaarden",
    eyebrow: "Voorwaarden",
    lastUpdated: "Mei 2026",
    sections: [
      {
        h: "1. Toepasselijkheid",
        p: "Deze voorwaarden zijn van toepassing op alle aanbiedingen, afspraken en werkzaamheden van Garage DéDé, gevestigd aan Achterasweg 10-A in Vijfhuizen. Door een afspraak te maken of een werkbon te ondertekenen, stemt u in met deze voorwaarden.",
      },
      {
        h: "2. Aanbiedingen en prijzen",
        p: "Onze 'vanaf'-prijzen zijn richtbedragen voor standaard personenauto's. Het exacte bedrag krijgt u in een offerte vooraf. Reparaties die meer kosten dan begroot mogen wij niet uitvoeren zonder uw uitdrukkelijke akkoord.",
      },
      {
        h: "3. Uitvoering van werkzaamheden",
        p: "Wij voeren werkzaamheden uit volgens fabrikant-richtlijnen en met passende vakkennis. Voor reparaties aan hoogspanningssystemen volgen we NEN 9140. APK-keuringen voeren we uit volgens RDW-protocol. Indien een reparatie technisch niet uitvoerbaar of economisch onverantwoord is, geven we dat eerlijk aan.",
      },
      {
        h: "4. Garantie",
        p: "Wij geven 12 maanden garantie op uitgevoerde werkzaamheden en gemonteerde onderdelen, behalve op slijtdelen die binnen die termijn onder normaal gebruik versleten zijn (bv. remblokken bij intensief gebruik). Garantie geldt op vertoon van de werkbon. Modificaties aan de auto na onze reparatie kunnen de garantie doen vervallen.",
      },
      {
        h: "5. Aansprakelijkheid",
        p: "Onze aansprakelijkheid is beperkt tot het door ons uitgevoerde werk en gefactureerde bedrag. We zijn niet aansprakelijk voor gevolgschade (bv. omzetverlies, persoonlijke ongemakken) tenzij sprake is van opzet of grove nalatigheid. Voor schade aan eigendommen die u in de auto laat liggen zijn we niet verantwoordelijk.",
      },
      {
        h: "6. Betaling",
        p: "Betaling vindt plaats bij ophalen van het voertuig, contant of per pin. Bij niet-tijdige betaling kunnen wij uw voertuig achterhouden tot het volledige bedrag is voldaan (retentierecht). Niet-opgehaalde voertuigen brengen we na 30 dagen kosten in rekening voor stalling.",
      },
      {
        h: "7. Annuleren en verzetten",
        p: "Afspraken kunt u kosteloos annuleren of verzetten tot 24 uur vooraf via uw klantportaal of telefonisch. Annuleringen binnen 24 uur kunnen we 25% van het tarief in rekening brengen, behalve bij overmacht.",
      },
      {
        h: "8. Klachten",
        p: "Niet tevreden? Meld het ons binnen 14 dagen na de afspraak schriftelijk via info@garage-dede.nl of per post. Wij doen ons best om samen een passende oplossing te vinden. Komen we er onderling niet uit, dan kan het geschil worden voorgelegd aan de Stichting Geschillencommissie Voertuigen of de bevoegde rechter te Haarlem.",
      },
      {
        h: "9. Toepasselijk recht",
        p: "Op alle overeenkomsten met Garage DéDé is Nederlands recht van toepassing.",
      },
    ],
  },
  cookies: {
    title: "Cookieverklaring",
    eyebrow: "Cookies",
    lastUpdated: "Mei 2026",
    sections: [
      {
        h: "Wat zijn cookies?",
        p: "Cookies zijn kleine tekstbestanden die een website opslaat in uw browser om te onthouden wie u bent en hoe u de site gebruikt. Wij gebruiken cookies alleen waar dat strikt nodig is.",
      },
      {
        h: "Welke cookies plaatsen wij?",
        list: [
          "Functionele cookies (verplicht) — om u ingelogd te houden in uw klantportaal en uw boekingsformulier op te slaan tijdens het invullen. Naam: GARAGEDEDE_SESS. Bewaartermijn: 30 dagen.",
        ],
        p: "We plaatsen GEEN tracking-cookies, GEEN advertentie-cookies en GEEN third-party analytics zoals Google Analytics. Dit is een bewuste keuze voor uw privacy.",
      },
      {
        h: "Cookies uitschakelen",
        p: "U kunt cookies in uw browser uitschakelen of verwijderen via de instellingen. Let op: zonder de functionele sessie-cookie kunt u niet inloggen of een afspraak maken.",
      },
      {
        h: "Externe diensten",
        p: "Op onze contactpagina tonen wij een Google Maps embed om onze locatie te laten zien. Google plaatst hierbij eigen cookies. We hebben geen invloed op de cookies die Google gebruikt; raadpleeg het privacybeleid van Google voor meer informatie.",
      },
      {
        h: "Vragen?",
        p: "Heeft u vragen over deze cookieverklaring? Mail ons via info@garage-dede.nl of bel 023 - 545 1809.",
      },
    ],
  },
};

function Legal({ slug, onNav }) {
  const page = LEGAL_PAGES[slug] || LEGAL_PAGES.privacy;
  return (
    <div>
      <section style={{ borderBottom: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ maxWidth: 880, margin: "0 auto", padding: "80px 32px 56px" }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{page.eyebrow}</div>
          <h1 className="display" style={{ fontSize: 56, marginBottom: 16 }}>{page.title}</h1>
          <div className="text-muted" style={{ fontSize: 14 }}>Laatst bijgewerkt: {page.lastUpdated}</div>
        </div>
      </section>

      <section style={{ padding: "64px 32px 80px" }}>
        <div style={{ maxWidth: 760, margin: "0 auto" }}>
          {page.sections.map((s, i) => (
            <div key={i} style={{ marginBottom: 40 }}>
              <h2 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.015em", marginBottom: 12 }}>{s.h}</h2>
              {s.p && <p style={{ fontSize: 15, lineHeight: 1.7, color: "var(--text)", margin: 0, marginBottom: s.list ? 16 : 0 }}>{s.p}</p>}
              {s.list && (
                <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 8 }}>
                  {s.list.map((it, j) => (
                    <li key={j} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 15, lineHeight: 1.6 }}>
                      <I.Check size={14} style={{ color: "var(--accent)", marginTop: 5, flexShrink: 0 }}/>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}

          <div style={{ marginTop: 56, padding: 28, borderRadius: 14, background: "var(--surface)",
                        border: "1px solid var(--border)", display: "flex", justifyContent: "space-between",
                        alignItems: "center", flexWrap: "wrap", gap: 16 }}>
            <div>
              <div style={{ fontWeight: 700, marginBottom: 4 }}>Vragen over deze pagina?</div>
              <div className="text-muted" style={{ fontSize: 14 }}>Neem contact op via info@garage-dede.nl of 023 - 545 1809</div>
            </div>
            <button className="btn btn-ghost" onClick={() => onNav("over")}>
              <I.Mail size={14}/> Contact
            </button>
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 16, justifyContent: "center", fontSize: 13 }}>
            <a onClick={() => onNav("privacy")} style={{ color: slug === "privacy" ? "var(--accent)" : "var(--text-muted)", cursor: "pointer", textDecoration: "none" }}>Privacy</a>
            <span className="text-muted">·</span>
            <a onClick={() => onNav("voorwaarden")} style={{ color: slug === "voorwaarden" ? "var(--accent)" : "var(--text-muted)", cursor: "pointer", textDecoration: "none" }}>Algemene voorwaarden</a>
            <span className="text-muted">·</span>
            <a onClick={() => onNav("cookies")} style={{ color: slug === "cookies" ? "var(--accent)" : "var(--text-muted)", cursor: "pointer", textDecoration: "none" }}>Cookies</a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.Legal = Legal;