import React from 'react';
import { Typography } from '@mui/material';
import LegalPage from './LegalPage.js';
import { useTranslation } from 'react-i18next';

const Batteriegesetzhinweise = () => {
  const { t } = useTranslation('legal-batterie');
  
  const content = (
    <>
      <Typography variant="body1" paragraph>
        {t ? t('intro') : 'Im Zusammenhang mit dem Vertrieb von Batterien oder mit der Lieferung von Geräten, die Batterien enthalten, sind wir verpflichtet, Sie auf folgendes hinzuweisen:'}
      </Typography>
      
      <Typography variant="body1" paragraph>
        {t ? t('returnObligation') : 'Sie sind zur Rückgabe gebrauchter Batterien als Endnutzer gesetzlich verpflichtet. Sie können Altbatterien, die wir als Neubatterien im Sortiment führen oder geführt haben, unentgeltlich an unserem Versandlager (Versandadresse) zurückgeben.'}
      </Typography>
      
      <Typography variant="body1" paragraph>
        {t ? t('symbolsInfo') : 'Die auf den Batterien abgebildeten Symbole haben folgende Bedeutung:'}
      </Typography>
      
      <Typography variant="body1" paragraph>
        {t ? t('wasteSymbol') : 'Das Symbol der durchgekreuzten Mülltonne bedeutet, dass die Batterie nicht in den Hausmüll gegeben werden darf.'}
      </Typography>
      
      <Typography variant="body1" sx={{ ml: 2 }} paragraph>
        {t ? t('chemicalSymbols') : 'Pb = Batterie enthält mehr als 0,004 Masseprozent Blei\nCd = Batterie enthält mehr als 0,002 Masseprozent Cadmium\nHg = Batterie enthält mehr als 0,0005 Masseprozent Quecksilber.'}
      </Typography>
    </>
  );

  return <LegalPage title={t ? t('title') : 'Batteriegesetzhinweise'} content={content} />;
};

export default Batteriegesetzhinweise;