/* MStheory — Auth modal (sign up / sign in) with terms + privacy consent */
const { Button } = window.MStheoryDesignSystem_61eb29;

/* Detailed legal docs shown in-screen when the user taps the blue links.
   Tailored to MStheory: €30 one-time digital product, Firebase + Stripe,
   AI illustrations/translations, AVG/GDPR. Updated 2026-06-21. */
const MS_LEGAL = {
  terms: {
    title: "Algemene voorwaarden",
    updated: "Versie 2026-06-21 · Laatst bijgewerkt: 21 juni 2026",
    sections: [
      ["1. Over deze voorwaarden", [
        "Deze algemene voorwaarden zijn van toepassing op elk gebruik van het platform MStheory (de website mstheory.nl, het MStheory-account en alle bijbehorende onderdelen, samen: de 'Dienst') en op de overeenkomst die je met ons sluit wanneer je een account aanmaakt of toegang koopt.",
        "Door een account aan te maken of de Dienst te gebruiken, verklaar je deze voorwaarden te hebben gelezen en ermee akkoord te gaan. Ga je niet akkoord, gebruik de Dienst dan niet.",
      ]],
      ["2. Definities", [
        "'MStheory', 'wij' of 'ons': de aanbieder van de Dienst.",
        "'Gebruiker' of 'je': de natuurlijke persoon die een account aanmaakt of de Dienst gebruikt.",
        "'Account': je persoonlijke toegang tot de Dienst.",
        "'Inhoud': alle vragen, antwoorden, uitleg, afbeeldingen, vertalingen, interactieve oefeningen en overige materialen in de Dienst.",
      ]],
      ["3. Wie zijn wij & contact", [
        "MStheory is een online platform om te oefenen voor het Nederlandse theorie-examen (CBR). Je kunt ons bereiken via info@mstheory.nl. We reageren zo snel mogelijk, doorgaans binnen enkele werkdagen.",
      ]],
      ["4. De dienst & geen examenzekerheid", [
        "De Dienst biedt oefenexamens met uitleg in meerdere talen, inclusief AI-illustraties, vertalingen en interactieve voorrang-oefeningen. De Dienst is een oefenhulpmiddel.",
        "MStheory is een onafhankelijk platform en is niet verbonden aan, of goedgekeurd door, het CBR. We geven geen enkele garantie dat je slaagt voor het officiële theorie-examen; je resultaat hangt af van je eigen voorbereiding.",
      ]],
      ["5. Account & registratie", [
        "Om de volledige Dienst te gebruiken maak je een account aan met een geldig e-mailadres. Je zorgt dat je gegevens juist en actueel zijn.",
        "Je houdt je wachtwoord geheim en bent verantwoordelijk voor alles wat via je account gebeurt. Vermoed je misbruik? Meld dit direct via info@mstheory.nl.",
        "Een account is persoonlijk en bedoeld voor één persoon. Ben je jonger dan 16 jaar, gebruik de Dienst dan alleen met toestemming van een ouder of voogd.",
      ]],
      ["6. Toegestaan gebruik", [
        "Je gebruikt de Dienst alleen voor je eigen, niet-commerciële oefendoeleinden en in overeenstemming met de wet.",
        "Niet toegestaan is onder meer: het delen, doorverkopen of openbaar maken van je toegang of de Inhoud; het kopiëren, downloaden in bulk of geautomatiseerd uitlezen (scrapen) van de Inhoud; reverse engineering; het omzeilen van de betaal- of beveiligingsmaatregelen; en handelingen die de Dienst kunnen overbelasten of verstoren.",
      ]],
      ["7. Prijs en betaling", [
        "De volledige toegang kost eenmalig € 30 (inclusief btw). Dit is een eenmalige aankoop, geen abonnement; er worden geen periodieke kosten in rekening gebracht.",
        "De betaling wordt veilig afgehandeld door onze betaaldienstverlener Stripe. Wij ontvangen of bewaren zelf geen creditcard- of bankgegevens. Je toegang wordt aan je account gekoppeld zodra de betaling is bevestigd.",
        "'Levenslange toegang' betekent toegang zolang de Dienst wordt aangeboden; zie ook artikel 11.",
      ]],
      ["8. Digitale inhoud, directe levering & herroepingsrecht", [
        "De Dienst betreft digitale inhoud die niet op een materiële drager wordt geleverd en waartoe je direct toegang krijgt.",
        "Door akkoord te gaan verzoek en stem je er uitdrukkelijk mee in dat wij onmiddellijk met de levering beginnen, vóór het einde van de wettelijke bedenktijd. Je erkent en bevestigt dat je hierdoor je recht van ontbinding (herroepingsrecht) van 14 dagen verliest zodra de uitvoering is begonnen / de toegang is verleend.",
        "Zolang je nog geen gebruik hebt gemaakt van de toegang behoud je de bedenktijd van 14 dagen en kun je de overeenkomst kosteloos ontbinden via info@mstheory.nl.",
      ]],
      ["9. Terugbetaling & coulance", [
        "Gelet op de directe levering van digitale inhoud is terugbetaling na verlening van toegang in beginsel niet mogelijk, onverminderd je dwingendrechtelijke consumentenrechten.",
        "Werkt de Dienst aantoonbaar niet door een technisch gebrek dat aan ons te wijten is en lossen we dat niet binnen een redelijke termijn op? Neem dan contact op; we zoeken samen naar een passende oplossing of (gedeeltelijke) terugbetaling.",
      ]],
      ["10. Intellectueel eigendom & licentie", [
        "Alle rechten op de Dienst en de Inhoud (waaronder auteursrechten en merkrechten) berusten bij MStheory of haar licentiegevers.",
        "Wij verlenen je een beperkt, persoonlijk, niet-exclusief, niet-overdraagbaar recht om de Inhoud te gebruiken voor je eigen examenvoorbereiding. Alle andere gebruik is verboden zonder onze voorafgaande schriftelijke toestemming.",
      ]],
      ["11. AI-gegenereerde inhoud", [
        "Een deel van de Inhoud — zoals illustraties, vertalingen en 'moeilijkere' varianten — wordt geheel of gedeeltelijk door kunstmatige intelligentie gegenereerd. Deze kan onvolkomenheden bevatten of afwijken van het officiële lesmateriaal.",
        "Leidend is altijd de actuele, officiële CBR-stof. Gebruik AI-inhoud als aanvullende oefening, niet als enige bron van waarheid.",
      ]],
      ["12. Beschikbaarheid, onderhoud & wijziging", [
        "We streven naar een goed werkende, beschikbare Dienst, maar kunnen geen ononderbroken beschikbaarheid garanderen. Onderhoud, updates of storingen kunnen de Dienst tijdelijk beperken.",
        "We mogen de Dienst en de Inhoud van tijd tot tijd verbeteren, aanpassen of onderdelen beëindigen. We proberen je toegang daarbij zoveel mogelijk in stand te houden.",
      ]],
      ["13. Aansprakelijkheid", [
        "De Dienst wordt aangeboden 'zoals deze is' en 'zoals beschikbaar'. Voor zover wettelijk toegestaan zijn wij niet aansprakelijk voor je examenuitslag, voor indirecte of gevolgschade, of voor schade door onjuiste, onvolledige of AI-gegenereerde Inhoud.",
        "Onze totale aansprakelijkheid is, voor zover wettelijk toegestaan, beperkt tot het door jou betaalde bedrag (€ 30). Niets in deze voorwaarden beperkt aansprakelijkheid die wettelijk niet kan worden uitgesloten (zoals bij opzet of grove schuld).",
      ]],
      ["14. Overmacht", [
        "Wij zijn niet gehouden tot nakoming als wij daartoe verhinderd zijn door overmacht, waaronder storingen of uitval bij toeleveranciers (zoals hosting- of betaaldiensten), internetstoringen, cyberaanvallen of andere omstandigheden buiten onze redelijke controle.",
      ]],
      ["15. Wijziging van de voorwaarden", [
        "We kunnen deze voorwaarden van tijd tot tijd aanpassen. Bij een wezenlijke wijziging informeren we je vooraf via de website of per e-mail. Blijf je de Dienst daarna gebruiken, dan gelden de gewijzigde voorwaarden.",
      ]],
      ["16. Klachten & geschillen", [
        "Heb je een klacht? Mail info@mstheory.nl, dan zoeken we samen een oplossing.",
        "Op deze voorwaarden en de overeenkomst is Nederlands recht van toepassing. Geschillen worden voorgelegd aan de bevoegde Nederlandse rechter. Als consument kun je ook gebruikmaken van het Europese ODR-platform (ec.europa.eu/consumers/odr).",
      ]],
      ["17. Slotbepalingen", [
        "Is een bepaling nietig of vernietigbaar, dan blijven de overige bepalingen van kracht en vervangen we de betreffende bepaling door een geldige bepaling die het doel zo dicht mogelijk benadert. Je mag je rechten en plichten uit de overeenkomst niet zonder onze toestemming aan een ander overdragen.",
      ]],
    ],
  },
  privacy: {
    title: "Privacybeleid",
    updated: "Versie 2026-06-21 · Laatst bijgewerkt: 21 juni 2026",
    sections: [
      ["1. Inleiding & verantwoordelijke", [
        "In dit privacybeleid leggen we uit welke persoonsgegevens MStheory verwerkt, waarom, en welke rechten je hebt. We gaan zorgvuldig met je gegevens om en houden ons aan de Algemene Verordening Gegevensbescherming (AVG/GDPR).",
        "MStheory is de verwerkingsverantwoordelijke. Vragen of een verzoek over je gegevens? Mail info@mstheory.nl.",
      ]],
      ["2. Welke gegevens we verwerken", [
        "Accountgegevens: je naam en e-mailadres, en je versleuteld opgeslagen wachtwoord (beheerd door onze inlogdienst).",
        "Voorkeuren: je taalkeuze en instellingen.",
        "Gebruiks- en voortgangsgegevens: je gemaakte examens, scores, antwoorden en voortgang.",
        "Betaal- en toegangsgegevens: of en wanneer je hebt betaald en je toegangsstatus. De betaling zelf verloopt via Stripe; wij ontvangen of bewaren géén creditcard- of bankgegevens.",
        "Technische gegevens: zoals IP-adres, apparaat-/browserinformatie en logbestanden, nodig voor beveiliging en het goed functioneren van de Dienst.",
        "Communicatie: de inhoud van berichten die je ons stuurt (bijv. per e-mail).",
      ]],
      ["3. Doeleinden en rechtsgrond", [
        "Uitvoeren van de overeenkomst (grondslag: overeenkomst): account aanmaken en beheren, toegang verlenen, je voortgang opslaan en de betaling afhandelen.",
        "Verbeteren en beveiligen van de Dienst (grondslag: gerechtvaardigd belang): foutopsporing, misbruikpreventie en het analyseren van het algemeen gebruik.",
        "Wettelijke verplichtingen (grondslag: wettelijke plicht): zoals fiscale bewaarplicht voor betaalgegevens.",
        "Eventuele optionele communicatie (grondslag: toestemming), die je altijd kunt intrekken.",
      ]],
      ["4. Verwerkers en derden", [
        "We schakelen zorgvuldig geselecteerde partijen in die namens ons gegevens verwerken: Google Firebase (hosting, inloggen, database en opslag), Stripe (betalingsverwerking) en de AI-diensten OpenAI en DeepSeek (genereren van illustraties, vertalingen en oefenvarianten).",
        "Met deze verwerkers zijn verwerkersovereenkomsten gesloten. We verkopen je gegevens nooit aan derden.",
      ]],
      ["5. AI-verwerking", [
        "Voor het genereren van afbeeldingen, vertalingen en varianten sturen we uitsluitend de inhoud van de oefenvraag naar de AI-diensten — geen accountgegevens of andere persoonsgegevens.",
      ]],
      ["6. Bewaartermijnen", [
        "Account- en voortgangsgegevens bewaren we zolang je een account hebt. Na verwijdering van je account worden deze binnen een redelijke termijn verwijderd of geanonimiseerd.",
        "Betaal- en factuurgegevens bewaren we zolang dat wettelijk verplicht is (in Nederland in de regel 7 jaar). Logbestanden bewaren we kort, voor beveiliging en foutopsporing.",
      ]],
      ["7. Beveiliging", [
        "We nemen passende technische en organisatorische maatregelen: versleutelde verbindingen (HTTPS), server-side toegangscontrole en het principe dat gevoelige acties (zoals betaling en het vrijgeven van toegang) uitsluitend aan de serverkant plaatsvinden. Geen enkele dienst is 100% veilig, maar we doen ons uiterste best je gegevens te beschermen.",
      ]],
      ["8. Doorgifte buiten de EER", [
        "Sommige verwerkers (zoals Stripe, OpenAI en Google) kunnen gegevens verwerken buiten de Europese Economische Ruimte, bijvoorbeeld in de Verenigde Staten. Daarbij gelden passende waarborgen, zoals de standaardcontractbepalingen (SCC's) van de Europese Commissie.",
      ]],
      ["9. Jouw rechten (AVG)", [
        "Je hebt het recht op inzage, correctie, verwijdering ('vergetelheid'), beperking van de verwerking, bezwaar tegen verwerking, en gegevensoverdraagbaarheid. Heb je toestemming gegeven, dan kun je die altijd intrekken.",
        "Een verzoek indienen of je gegevens inzien/verwijderen? Mail info@mstheory.nl; we reageren binnen de wettelijke termijn. Ben je het niet eens met hoe we met je gegevens omgaan, dan kun je een klacht indienen bij de Autoriteit Persoonsgegevens (autoriteitpersoonsgegevens.nl).",
      ]],
      ["10. Cookies en lokale opslag", [
        "We gebruiken alleen functionele cookies en lokale opslag (localStorage) die nodig zijn om de Dienst te laten werken — bijvoorbeeld om je ingelogd te houden en je taalvoorkeur te onthouden.",
        "We gebruiken geen tracking-, profilerings- of advertentiecookies en geen externe marketingtrackers.",
      ]],
      ["11. Kinderen", [
        "De Dienst is bedoeld voor wie zich voorbereidt op het theorie-examen. Ben je jonger dan 16 jaar, gebruik de Dienst en deel je gegevens dan alleen met toestemming van een ouder of voogd.",
      ]],
      ["12. Geautomatiseerde besluitvorming", [
        "We nemen geen geautomatiseerde besluiten met rechtsgevolgen voor jou. De AI in de Dienst genereert oefeninhoud en beoordeelt geen personen.",
      ]],
      ["13. Wijzigingen", [
        "We kunnen dit privacybeleid bijwerken. Bij belangrijke wijzigingen informeren we je via de website of per e-mail. De datum onderaan geeft de meest recente versie aan.",
      ]],
    ],
  },
};

function AuthModal({ open, onClose, onAuthed, intent }) {
  const [tab, setTab] = React.useState("signup");
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [pw, setPw] = React.useState("");
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState("");
  const [agreed, setAgreed] = React.useState(false);
  const [legal, setLegal] = React.useState(null); // null | "terms" | "privacy"

  React.useEffect(() => { if (open) { setErr(""); setBusy(false); setAgreed(false); setLegal(null); } }, [open]);
  if (!open) return null;

  const submit = async (e) => {
    e.preventDefault();
    if (tab === "signup" && !agreed) { setErr("Vink aan dat je akkoord gaat met de voorwaarden en het privacybeleid."); return; }
    setBusy(true); setErr("");
    try {
      const user = tab === "signup"
        ? await window.MSStore.signUp(email, pw, name)
        : await window.MSStore.signIn(email, pw);
      if (tab === "signup") { try { await window.MSStore.savePref({ termsAcceptedAt: Date.now(), termsVersion: "2026-06-21" }); } catch (x) {} }
      onAuthed && onAuthed(user);
    } catch (ex) { setErr(ex.message || "Er ging iets mis."); setBusy(false); }
  };

  const field = { width: "100%", padding: "13px 15px", background: "var(--surface-sunken)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", color: "var(--text-primary)", fontSize: "var(--text-sm)", outline: "none", fontFamily: "var(--font-body)" };
  const link = { color: "var(--text-gold)", textDecoration: "underline", cursor: "pointer", fontWeight: "var(--fw-semibold)" };
  const openDoc = (which) => (e) => { e.preventDefault(); e.stopPropagation(); setLegal(which); };
  const tabBtn = (k, label) => (
    <button type="button" onClick={() => { setTab(k); setErr(""); }} style={{ flex: 1, padding: "10px", background: "none", border: "none", borderBottom: tab === k ? "2px solid var(--accent)" : "2px solid transparent", color: tab === k ? "var(--text-primary)" : "var(--text-muted)", fontWeight: "var(--fw-semibold)", fontSize: "var(--text-sm)", cursor: "pointer" }}>{label}</button>
  );

  const doc = legal ? MS_LEGAL[legal] : null;

  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 200, display: "flex", alignItems: "center", justifyContent: "center", padding: "20px", background: "color-mix(in oklab, var(--ink-950) 72%, transparent)", backdropFilter: "blur(8px)" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: "relative", width: "100%", maxWidth: "420px", background: "var(--grad-card)", border: "1px solid var(--border-gold)", borderRadius: "var(--radius-xl)", boxShadow: "var(--glow-gold-lg)", overflow: "hidden" }}>
        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <img src="../../assets/logo-wordmark.svg" alt="MStheory" height="28" />
          <button onClick={onClose} style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: "22px", cursor: "pointer" }}>×</button>
        </div>

        {intent === "pay" && (
          <div style={{ padding: "12px 24px", background: "var(--accent-soft)", borderBottom: "1px solid var(--border-gold)", fontSize: "var(--text-xs)", color: "var(--text-gold)", textAlign: "center" }}>
            Maak een account om je toegang van €30 op te slaan
          </div>
        )}

        <div style={{ display: "flex", padding: "0 24px", borderBottom: "1px solid var(--border-subtle)" }}>
          {tabBtn("signup", "Account maken")}
          {tabBtn("signin", "Inloggen")}
        </div>

        <form onSubmit={submit} style={{ padding: "24px", display: "flex", flexDirection: "column", gap: "12px" }}>
          {tab === "signup" && <input style={field} placeholder="Naam" value={name} onChange={(e) => setName(e.target.value)} />}
          <input style={field} type="email" required placeholder="naam@email.com" value={email} onChange={(e) => setEmail(e.target.value)} />
          <input style={field} type="password" required placeholder="Wachtwoord" value={pw} onChange={(e) => setPw(e.target.value)} />

          {tab === "signup" && (
            <label style={{ display: "flex", gap: "9px", alignItems: "flex-start", fontSize: "var(--text-xs)", color: "var(--text-secondary)", lineHeight: "var(--lh-relaxed)", cursor: "pointer" }}>
              <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} style={{ marginTop: "2px", width: "16px", height: "16px", accentColor: "var(--accent)", flexShrink: 0 }} />
              <span>Ik ga akkoord met de <a onClick={openDoc("terms")} style={link}>Algemene voorwaarden</a> en het <a onClick={openDoc("privacy")} style={link}>Privacybeleid</a>, en met onmiddellijke toegang tot de digitale inhoud.</span>
            </label>
          )}

          {err && <div style={{ color: "var(--danger-400)", fontSize: "var(--text-xs)" }}>{err}</div>}
          <Button type="submit" variant="primary" size="lg" fullWidth disabled={busy || (tab === "signup" && !agreed)}>
            {busy ? "Even geduld…" : (tab === "signup" ? "Account maken" : "Inloggen")}
          </Button>
          <p style={{ textAlign: "center", margin: 0, fontSize: "10px", color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>
            {window.MSStore.mode() === "live" ? "FIREBASE · mstheory-93ec6" : "DEMO MODE · admin@mstheory.nl / admin123"}
          </p>
        </form>

        {/* In-screen legal reader, on top of the auth modal */}
        {doc && (
          <div onClick={() => setLegal(null)} style={{ position: "absolute", inset: 0, zIndex: 5, display: "flex", flexDirection: "column", background: "var(--surface-card)" }}>
            <div onClick={(e) => e.stopPropagation()} style={{ display: "flex", flexDirection: "column", height: "100%" }}>
              <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
                <button type="button" onClick={() => setLegal(null)} style={{ background: "none", border: "none", color: "var(--text-gold)", fontSize: "var(--text-sm)", cursor: "pointer", fontWeight: "var(--fw-semibold)" }}>← Terug</button>
                <strong style={{ fontSize: "var(--text-sm)" }}>{doc.title}</strong>
                <button type="button" onClick={() => setLegal(null)} style={{ background: "none", border: "none", color: "var(--text-muted)", fontSize: "20px", cursor: "pointer" }}>×</button>
              </div>
              <div style={{ padding: "18px 22px", overflowY: "auto", flex: 1 }}>
                {doc.sections.map(([h, paras], i) => (
                  <div key={i} style={{ marginBottom: "16px" }}>
                    <h4 style={{ fontSize: "var(--text-sm)", color: "var(--text-primary)", marginBottom: "5px" }}>{h}</h4>
                    {paras.map((p, j) => (
                      <p key={j} style={{ margin: "0 0 6px", fontSize: "var(--text-xs)", color: "var(--text-secondary)", lineHeight: "var(--lh-relaxed)" }}>{p}</p>
                    ))}
                  </div>
                ))}
                <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: "10px", color: "var(--text-muted)" }}>{doc.updated}</p>
              </div>
              <div style={{ padding: "14px 22px", borderTop: "1px solid var(--border-subtle)" }}>
                <Button variant="primary" size="sm" fullWidth onClick={() => { setAgreed(true); setLegal(null); }}>Gelezen en akkoord</Button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
window.AuthModal = AuthModal;
