'use client';

import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import PageHeader from '@/components/PageHeader';
import CateringPackageCard from '@/components/CateringPackageCard';
import {
  cateringPackages,
  CATERING_DISH_CATALOG,
  CATERING_CATEGORY_ORDER,
} from '@/lib/catering-data';
import { useLanguage } from '@/lib/language-context';
import { getTranslation } from '@/lib/translations';
import { container } from '@/infrastructure/di/container';
import { Sparkles } from 'lucide-react';

export default function CateringPage() {
  const { language } = useLanguage();
  const t = getTranslation(language);

  const handleSendInquiry = () => {
    container.messagingGateway.openWhatsApp(t.catering.inquiryMessage);
  };

  return (
    <div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
      <Navbar />

      <main>
        <PageHeader
          eyebrow={t.catering.badge}
          title={t.catering.title}
          subtitle={t.catering.subtitle}
        />

        {/* Packages grid */}
        <section className="max-w-7xl mx-auto px-6 pb-16">
          <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
            {cateringPackages.map((pkg, index) => (
              <CateringPackageCard key={pkg.id} pkg={pkg} index={index} />
            ))}
          </div>
        </section>

        {/* Full dish catalog reference */}
        <section className="border-y border-[#EDE6D9] bg-[#fffdf8] px-6 py-12">
          <div className="mx-auto max-w-7xl">
            <div className="mb-8">
              <div className="mb-3 flex items-center gap-2 text-xs font-bold uppercase tracking-[0.2em] text-[#c99a2e]">
                <Sparkles className="h-3.5 w-3.5" />
                {t.catering.catalogBadge}
              </div>
              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
                <div className="min-w-0 flex-1">
                  <h2 className="text-xl sm:text-[1.35rem] tracking-[-0.4px] text-[#101724]">
                    {t.catering.catalogTitle}
                  </h2>
                  <p className="mt-1.5 max-w-xl text-sm leading-relaxed text-[#6B665F]">
                    {t.catering.catalogSubtitle}
                  </p>
                </div>
                <button
                  type="button"
                  onClick={handleSendInquiry}
                  className="btn-primary inline-flex shrink-0 items-center justify-center self-start rounded-full px-7 py-3 text-sm font-bold tracking-wide sm:self-center"
                >
                  {t.catering.sendInquiry}
                </button>
              </div>
            </div>

            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
              {CATERING_CATEGORY_ORDER.map((category) => {
                const dishes = CATERING_DISH_CATALOG.filter((d) => d.category === category);
                const categoryLabel =
                  (t.catering.categories as Record<string, string>)?.[category] ?? category;

                return (
                  <div
                    key={category}
                    className="rounded-2xl border border-[#EDE6D9] bg-white p-5 shadow-sm"
                  >
                    <h3 className="mb-3 text-xs font-bold uppercase tracking-[0.2em] text-[#8a6a25]">
                      {categoryLabel}
                    </h3>
                    <ul className="space-y-2">
                      {dishes.map((dish) => (
                        <li
                          key={dish.id}
                          className="text-sm font-medium text-[#101724]"
                        >
                          {dish.name}
                        </li>
                      ))}
                    </ul>
                  </div>
                );
              })}
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
}