import { Box, Divider, Typography } from "@mui/material";
import "./pages.css";

export default function Impressum() {
    return (
        <Box className="impressum-container">
            <Typography variant="h4" sx={{ color: 'text.primary', mb: 2 }}>
                Impressum
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 4 }}>
                Hochschule für Technik und Wirtschaft<br />
                des Saarlandes<br />
                Goebenstraße 40<br />
                66117 Saarbrücken<br /><br />
                Telefon: (0681) 58 67 - 0<br />
                Telefax: (0681) 58 67 - 122<br />
                E-Mail: info@htwsaar.de<br /><br />
                Aufsichtsbehörde:<br />
                Ministerium der Finanzen und für Wissenschaft des Saarlandes
            </Typography>

            <Divider className="contact-divider" />

            <Typography variant="h5" sx={{ color: 'text.primary', mt: 4, mb: 2 }}>
                Datenschutzerklärung
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Personenbezogene Daten (nachfolgend zumeist nur „Daten“ genannt) ...
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Gemäß Art. 4 Ziffer 1. der Verordnung (EU) 2016/679, also der Datenschutz-Grundverordnung ...
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Unsere Datenschutzerklärung ist wie folgt gegliedert:<br />
                I. Informationen über uns als Verantwortliche<br />
                II. Rechte der Nutzer und Betroffenen<br />
                III. Informationen zur Datenverarbeitung
            </Typography>

            <Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
                I. Informationen über uns als Verantwortliche
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Verantwortlicher Anbieter dieses Internetauftritts ...
            </Typography>

            <Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
                II. Rechte der Nutzer und Betroffenen
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Mit Blick auf die nachfolgend noch näher beschriebene Datenverarbeitung haben die Nutzer und Betroffenen ...
            </Typography>

            <ul>
                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Auskunft über die verarbeiteten Daten (Art. 15 DSGVO)</Typography></li>
                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</Typography></li>
                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Löschung der Daten (Art. 17 DSGVO)</Typography></li>
                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Einschränkung der Verarbeitung (Art. 18 DSGVO)</Typography></li>
                <li><Typography variant="body2" sx={{ color: 'text.primary' }}>Datenübertragbarkeit (Art. 20 DSGVO)</Typography></li>
            </ul>

            <Typography variant="h6" sx={{ color: 'text.primary', mt: 4, mb: 1 }}>
                III. Informationen zur Datenverarbeitung
            </Typography>

            <Typography variant="body1" sx={{ color: 'text.primary', mb: 2 }}>
                Ihre bei Nutzung unseres Internetauftritts verarbeiteten Daten ...
            </Typography>

            {/* Du kannst einfach alle weiteren Absätze so fortsetzen – copy & paste,
                jeweils in: <Typography variant="body1" sx={{ color: 'text.primary' }}>…</Typography> */}

            <Typography variant="body2" sx={{ color: 'text.primary', mt: 4 }}>
                Mehr Infos unter: <a href="https://www.cloudflare.com/privacypolicy/" target="_blank" rel="noopener noreferrer">CloudFlare Datenschutzerklärung</a>
            </Typography>
        </Box>
    );
}
