import { useSeoMeta } from '@unhead/react';
import { Link } from 'react-router-dom';
import { ArrowLeft, Calculator } from 'lucide-react';
import { useTranslation } from '@/contexts/language';
import { DeckCostCalculator } from '@/components/DeckCostCalculator';

/** DIY tool page — the self-contained deck cost calculator. */
export default function DeckCostPage() {
  const { t } = useTranslation();

  useSeoMeta({
    title: t('seoUi.deckCostTitle'),
    description: t('seoUi.deckCostDesc'),
  });

  return (
    <div className="container mx-auto max-w-4xl px-4 py-8">
      <Link to="/diy" className="mb-4 inline-flex items-center text-sm text-muted-foreground transition-colors hover:text-foreground">
        <ArrowLeft className="mr-2 h-4 w-4" />
        {t('diyUi.backToDiy')}
      </Link>

      <header className="mb-6">
        <h1 className="flex items-center gap-2 text-2xl md:text-3xl font-black uppercase tracking-tight text-white">
          <Calculator className="h-6 w-6 text-[#ccff00]" />
          {t('diyUi.calc.title')}
        </h1>
        <p className="mt-2 max-w-2xl text-sm text-gray-400">{t('diyUi.calc.intro')}</p>
      </header>

      <DeckCostCalculator />
    </div>
  );
}