import React from 'react';
import Button from '@/components/ui/Button.tsx';
import { useTranslation } from '@/hooks/useI18n.tsx';

interface AdminPanelProps {
  onNavigateToAdmin: () => void;
}

const AdminPanel = ({ onNavigateToAdmin }: AdminPanelProps) => {
  const { t } = useTranslation();

  return (
    <section
      className="bg-background min-h-screen flex items-center justify-center scroll-snap-align-start"
      aria-labelledby="admin-panel-title"
    >
      <div className="mx-auto max-w-6xl px-4 py-16 sm:py-24 w-full">
        <div className="relative rounded-2xl bg-foreground p-8 md:p-12 text-center overflow-hidden">
          <div
            className="absolute -top-1/2 -left-1/2 w-[200%] h-[200%] animate-spin-slow"
            style={{
              backgroundImage:
                'radial-gradient(circle at center, hsl(var(--primary) / 0.15), transparent 40%)',
            }}
            aria-hidden="true"
          />
          <div className="relative z-10 flex flex-col items-center">
            <h2
              id="admin-panel-title"
              className="font-serif text-3xl md:text-4xl font-semibold tracking-tight text-background"
            >
              {t('adminPanel.title')}
            </h2>
            <p className="text-base md:text-lg text-background/70 mt-4 max-w-2xl mx-auto">
              {t('adminPanel.subtitle')}
            </p>
            <div className="mt-8">
              <Button
                size="lg"
                className="bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg"
                onClick={onNavigateToAdmin}
              >
                {t('adminPanel.ctaButton')}
              </Button>
              <p className="text-sm text-background/50 mt-3 max-w-xs mx-auto">
                {t('adminPanel.ctaNote')}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default React.memo(AdminPanel);