import { Link } from 'react-router-dom'
import { Scale } from 'lucide-react'
import PageReturnButton from '../components/PageReturnButton'
import { SETTINGS_PATH } from '../utils/navReturnContext'

const LEGAL_LINKS = [
  { to: '/impressum', label: 'Impressum', description: 'Angaben zum Betreiber und Verantwortlichen' },
  { to: '/datenschutz', label: 'Datenschutzerklärung', description: 'Verarbeitung personenbezogener Daten' },
  { to: '/nutzungsbedingungen', label: 'Nutzungsbedingungen', description: 'Regeln für die Nutzung der Plattform' },
  { to: '/medienrichtlinie', label: 'Medienrichtlinie', description: 'Urheberrecht, Rechte am eigenen Bild, Sichtbarkeit' },
]

function SettingsLegalPage() {
  return (
    <div className="page-padding app-page" style={{ padding: '1rem' }}>
      <p style={{ marginBottom: '0.75rem' }}>
        <PageReturnButton fallbackPath={SETTINGS_PATH} fallbackLabel="Zurück zu Einstellungen" />
      </p>

      <h1 style={{ marginBottom: '0.35rem', fontSize: '1.5rem' }}>Rechtliches</h1>
      <p
        style={{
          color: 'var(--text2)',
          marginBottom: '1.25rem',
          fontSize: '0.95rem',
          lineHeight: 1.5,
          maxWidth: '40rem',
        }}
      >
        Rechtstexte und Richtlinien der Plattform.
        Die Inhalte befinden sich noch in redaktioneller Prüfung.
      </p>

      <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
        {LEGAL_LINKS.map((item, idx) => (
          <Link
            key={item.to}
            to={item.to}
            style={{
              display: 'flex',
              alignItems: 'center',
              gap: '0.85rem',
              padding: '1rem 1.1rem',
              borderBottom: idx < LEGAL_LINKS.length - 1 ? '1px solid var(--border)' : 'none',
              textDecoration: 'none',
              color: 'inherit',
            }}
          >
            <Scale size={18} style={{ color: 'var(--text3)', flexShrink: 0 }} />
            <div>
              <div style={{ fontWeight: 500, color: 'var(--text1)', fontSize: '0.95rem' }}>
                {item.label}
              </div>
              <div style={{ fontSize: '0.8rem', color: 'var(--text3)', marginTop: '0.15rem' }}>
                {item.description}
              </div>
            </div>
            <span style={{ marginLeft: 'auto', color: 'var(--text3)', fontSize: '1.1rem' }}>›</span>
          </Link>
        ))}
      </div>
    </div>
  )
}

export default SettingsLegalPage