import { useNavigate } from 'react-router-dom';
import {
    Box, Card, CardContent, Typography, Divider, Button,
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';

function Section({ title, children }) {
    return (
        <Box sx={{ mb: 3 }}>
            <Typography variant="subtitle1" fontWeight={600} gutterBottom>
                {title}
            </Typography>
            {children}
        </Box>
    );
}

function Line({ label, value }) {
    return (
        <Typography variant="body2" color="text.secondary">
            {label && <strong>{label}: </strong>}
            {value}
        </Typography>
    );
}

export default function ImpressumPage() {
    const navigate = useNavigate();

    return (
        <Box
            sx={{
                minHeight: '100vh',
                bgcolor: 'grey.50',
                display: 'flex',
                justifyContent: 'center',
                py: 6,
                px: 2,
            }}
        >
            <Card sx={{ width: '100%', maxWidth: 680, p: 1, alignSelf: 'flex-start' }}>
                <CardContent>

                    {/* Header */}
                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 3, gap: 1 }}>
                        <Button
                            startIcon={<ArrowBackIcon />}
                            onClick={() => navigate(-1)}
                            size="small"
                            sx={{ mr: 1 }}
                        >
                            Zurück
                        </Button>
                        <Typography variant="h5" fontWeight={600}>
                            Impressum
                        </Typography>
                    </Box>

                    <Typography variant="caption" color="text.disabled" display="block" sx={{ mb: 3 }}>
                        Angaben gemäß § 5 TMG
                    </Typography>

                    <Divider sx={{ mb: 3 }} />

                    {/* Anbieter */}
                    <Section title="Anbieter">
                        <Line value="[Vollständiger Name oder Firmenname]" />
                        <Line value="[Straße und Hausnummer]" />
                        <Line value="[PLZ] [Ort]" />
                        <Line value="[Land]" />
                    </Section>

                    {/* Kontakt */}
                    <Section title="Kontakt">
                        <Line label="Telefon" value="[+49 000 000000]" />
                        <Line label="E-Mail" value="[kontakt@example.com]" />
                    </Section>

                    {/* Vertreten durch */}
                    <Section title="Vertreten durch">
                        <Line value="[Vor- und Nachname des Vertreters / Geschäftsführers]" />
                    </Section>

                    {/* Registereintrag – nur ausfüllen wenn vorhanden */}
                    <Section title="Registereintrag (falls vorhanden)">
                        <Line label="Registergericht" value="[Amtsgericht ...]" />
                        <Line label="Registernummer" value="[HRB / HRA ...]" />
                    </Section>

                    {/* Umsatzsteuer-ID – nur wenn vorhanden */}
                    <Section title="Umsatzsteuer-ID (falls vorhanden)">
                        <Line
                            value="Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG: [DE000000000]"
                        />
                    </Section>

                    <Divider sx={{ mb: 3 }} />

                    {/* Haftungsausschluss */}
                    <Section title="Haftungsausschluss">
                        <Typography variant="body2" color="text.secondary">
                            Die Inhalte dieser Anwendung wurden mit größtmöglicher Sorgfalt erstellt.
                            Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte übernehmen
                            wir jedoch keine Gewähr. Als Diensteanbieter sind wir gemäß § 7 Abs. 1 TMG
                            für eigene Inhalte nach den allgemeinen Gesetzen verantwortlich.
                        </Typography>
                    </Section>

                    {/* Stand */}
                    <Typography variant="caption" color="text.disabled">
                        Stand: [Monat Jahr] — Bitte alle Platzhalter in eckigen Klammern ersetzen.
                    </Typography>

                </CardContent>
            </Card>
        </Box>
    );
}