import React from 'react';
import { useTranslation } from 'react-i18next';

import { AdminLayout } from '../components/AdminLayout';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function FaqPage() {
  const { t } = useTranslation('dashboard');

  const entries = [
    {
      question: t('faq.events.question', 'Wie arbeite ich mit Events?'),
      answer: t(
        'faq.events.answer',
        'Wähle dein aktives Event, passe Aufgaben an und lade Gäste über die Einladungsseite ein. Weitere Dokumentation folgt bald.'
      ),
    },
    {
      question: t('faq.uploads.question', 'Wie moderiere ich Uploads?'),
      answer: t(
        'faq.uploads.answer',
        'Sobald Fotos eintreffen, findest du sie in der Galerie-Ansicht deines Events. Von dort kannst du sie freigeben oder zurückweisen.'
      ),
    },
    {
      question: t('faq.support.question', 'Wo erhalte ich Support?'),
      answer: t(
        'faq.support.answer',
        'Dieses FAQ dient als Platzhalter. Bitte nutze vorerst den bekannten Support-Kanal, bis die Wissensdatenbank veröffentlicht wird.'
      ),
    },
  ];

  return (
    <AdminLayout
      title={t('faq.title', 'FAQ & Hilfe')}
      subtitle={t('faq.subtitle', 'Antworten und Hinweise rund um den Tenant Admin.')}
    >
      <Card className="border-slate-200 bg-white/90 shadow-sm dark:border-white/10 dark:bg-white/5">
        <CardHeader>
          <CardTitle>{t('faq.intro.title', 'Was dich erwartet')}</CardTitle>
          <CardDescription>
            {t(
              'faq.intro.description',
              'Wir sammeln aktuell Feedback und erweitern dieses Hilfe-Center Schritt für Schritt.'
            )}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {entries.map((entry) => (
            <div key={entry.question} className="rounded-2xl border border-slate-200/80 p-4 dark:border-white/10">
              <p className="text-sm font-semibold text-slate-900 dark:text-white">{entry.question}</p>
              <p className="mt-2 text-sm text-slate-600 dark:text-slate-300">{entry.answer}</p>
            </div>
          ))}
          <div className="rounded-2xl bg-rose-50/70 p-4 text-sm text-rose-900 dark:bg-rose-200/10 dark:text-rose-100">
            <p className="font-semibold">
              {t('faq.cta.needHelp', 'Fehlt dir etwas?')}
            </p>
            <p className="mt-1 text-sm">
              {t(
                'faq.cta.description',
                'Schreib uns dein Feedback direkt aus dem Admin oder per Support-Mail – wir erweitern dieses FAQ mit deinen Themen.'
              )}
            </p>
            <Button
              size="sm"
              variant="secondary"
              className="mt-3 rounded-full"
              onClick={() => window.open('mailto:hello@fotospiel.app', '_blank')}
            >
              {t('faq.cta.contact', 'Support kontaktieren')}
            </Button>
          </div>
        </CardContent>
      </Card>
    </AdminLayout>
  );
}