import { SITE, UI, type Lang, LANGS } from "@/lib/config";
import Link from "next/link";
import type { Metadata } from "next";

export const revalidate = SITE.revalidateSeconds;

export function generateStaticParams() {
  return LANGS.map((lang) => ({ lang }));
}

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const title =
    params.lang === "ar"
      ? "المطاعم والضيافة والإقامة"
      : "Food, Hospitality & Stays";
  const description =
    params.lang === "ar"
      ? "حلول مواويد للمطاعم، المقاهي، الفنادق والشقق المفروشة"
      : "Mawidi solutions for restaurants, cafes, hotels and serviced apartments";

  return {
    title: `${title} | ${SITE.brand}`,
    description,
    openGraph: {
      title: `${title} | ${SITE.brand}`,
      description,
      type: "website",
    },
  };
}

export default function FoodHospitalityStaysPage({
  params,
}: {
  params: { lang: Lang };
}) {
  const t = UI[params.lang].t;
  const dir = UI[params.lang].dir;
  const isAr = params.lang === "ar";

  const serviceTypes = [
    {
      titleEn: "Restaurants",
      titleAr: "المطاعم",
      descEn: "Table booking, order management, and waitlist automation",
      descAr: "حجز الطاولات وإدارة الطلبات وأتمتة قوائم الانتظار",
    },
    {
      titleEn: "Cafes & Coffee Shops",
      titleAr: "المقاهي",
      descEn: "Pre-orders, loyalty programs, and peak hour management",
      descAr: "الطلبات المسبقة وبرامج الولاء وإدارة ساعات الذروة",
    },
    {
      titleEn: "Hotels",
      titleAr: "الفنادق",
      descEn: "Room reservations, guest services, and concierge automation",
      descAr: "حجز الغرف وخدمات الضيوف وأتمتة خدمة الكونسيرج",
    },
    {
      titleEn: "Serviced Apartments",
      titleAr: "الشقق المفروشة",
      descEn:
        "Long-stay bookings, maintenance requests, and guest communication",
      descAr: "حجوزات الإقامة الطويلة وطلبات الصيانة والتواصل مع الضيوف",
    },
    {
      titleEn: "Catering Services",
      titleAr: "خدمات التموين",
      descEn: "Event bookings, menu customization, and delivery coordination",
      descAr: "حجز الفعاليات وتخصيص القوائم وتنسيق التوصيل",
    },
    {
      titleEn: "Cloud Kitchens",
      titleAr: "المطابخ السحابية",
      descEn: "Multi-brand order management and delivery optimization",
      descAr: "إدارة طلبات العلامات المتعددة وتحسين التوصيل",
    },
  ];

  const keyFeatures = {
    bookingOrders: [
      {
        en: "Instant table and room reservations via WhatsApp",
        ar: "حجز فوري للطاولات والغرف عبر واتساب",
      },
      {
        en: "Pre-order food and beverages before arrival",
        ar: "طلب مسبق للطعام والمشروبات قبل الوصول",
      },
      {
        en: "Smart waitlist with real-time updates",
        ar: "قائمة انتظار ذكية مع تحديثات فورية",
      },
      {
        en: "Automatic booking confirmations and reminders",
        ar: "تأكيدات تلقائية للحجوزات والتذكيرات",
      },
    ],
    guestServices: [
      {
        en: "Secure payment processing with multiple options",
        ar: "معالجة آمنة للمدفوعات بخيارات متعددة",
      },
      {
        en: "Room service requests via chat",
        ar: "طلبات خدمة الغرف عبر المحادثة",
      },
      {
        en: "Automated check-in/check-out reminders",
        ar: "تذكيرات تلقائية لتسجيل الدخول والخروج",
      },
      {
        en: "Guest feedback collection and reviews",
        ar: "جمع آراء الضيوف والتقييمات",
      },
    ],
  };

  const useCases = [
    {
      titleEn: "Table Reservations",
      titleAr: "حجز الطاولات",
      descEn: "Let guests book tables 24/7 with real-time availability",
      descAr: "دع الضيوف يحجزون الطاولات على مدار الساعة مع توفر فوري",
    },
    {
      titleEn: "Room Bookings",
      titleAr: "حجز الغرف",
      descEn: "Streamlined hotel and apartment reservations",
      descAr: "حجوزات مبسطة للفنادق والشقق",
    },
    {
      titleEn: "Digital Menus",
      titleAr: "القوائم الرقمية",
      descEn: "Interactive menus with instant ordering capability",
      descAr: "قوائم تفاعلية مع إمكانية الطلب الفوري",
    },
    {
      titleEn: "Room Service",
      titleAr: "خدمة الغرف",
      descEn: "Instant room service requests via WhatsApp",
      descAr: "طلبات خدمة الغرف الفورية عبر واتساب",
    },
    {
      titleEn: "Payments & Billing",
      titleAr: "المدفوعات والفواتير",
      descEn: "Secure payment links and digital receipts",
      descAr: "روابط دفع آمنة وإيصالات رقمية",
    },
    {
      titleEn: "Reviews & Feedback",
      titleAr: "التقييمات والملاحظات",
      descEn: "Automated guest satisfaction surveys",
      descAr: "استطلاعات رضا الضيوف الآلية",
    },
  ];

  const stats = [
    { value: "35%", labelEn: "More bookings", labelAr: "زيادة في الحجوزات" },
    { value: "60%", labelEn: "Less no-shows", labelAr: "انخفاض في عدم الحضور" },
    { value: "24/7", labelEn: "Availability", labelAr: "توفر على مدار الساعة" },
  ];

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* Hero Section - Editorial Style with Light Background */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        {/* Subtle grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage:
              "linear-gradient(#1E293B 1px, transparent 1px), linear-gradient(90deg, #1E293B 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-24 md:py-32">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left Column - Content */}
            <div>
              {/* Section indicator */}
              <div className="flex items-center gap-3 mb-8">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  01
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="text-[#64748B] text-sm font-medium uppercase tracking-wider">
                  {isAr ? "قطاع الضيافة" : "Hospitality Sector"}
                </span>
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E293B] leading-[1.1] mb-6">
                {isAr
                  ? "حجوزات المطاعم والإقامة عبر واتساب"
                  : "Restaurant & Accommodation Bookings via WhatsApp"}
              </h1>

              <p className="text-xl text-[#64748B] leading-relaxed mb-10 max-w-xl">
                {isAr
                  ? "أتمتة حجوزات الطاولات والغرف والطلبات والمدفوعات للمطاعم والفنادق والشقق المفروشة"
                  : "Automate table, room, order and payment bookings for restaurants, hotels and serviced apartments"}
              </p>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 mb-10">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
                >
                  <span className="relative z-10">{t.getStarted}</span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#1E293B] border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
                >
                  {t.scheduleDemo}
                </Link>
              </div>

              {/* Stats Row */}
              <div className="flex flex-wrap gap-8">
                {stats.map((stat, idx) => (
                  <div key={idx} className="text-center">
                    <div className="text-3xl font-bold text-[#10B981] font-mono">
                      {stat.value}
                    </div>
                    <div className="text-sm text-[#64748B]">
                      {isAr ? stat.labelAr : stat.labelEn}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right Column - Visual Element */}
            <div className="hidden lg:block relative">
              <div className="absolute -inset-4 bg-gradient-to-br from-[#10B981]/5 to-transparent rounded-3xl" />
              <div className="relative bg-white border border-[#E2E8F0] rounded-2xl p-8 shadow-sm">
                {/* Mock booking interface */}
                <div className="space-y-6">
                  <div className="flex items-center gap-3 pb-4 border-b border-[#E2E8F0]">
                    <div className="w-10 h-10 rounded-full bg-[#10B981]/10 flex items-center justify-center">
                      <span className="text-[#10B981]">📱</span>
                    </div>
                    <div>
                      <div className="font-semibold text-[#1E293B]">
                        WhatsApp Booking
                      </div>
                      <div className="text-sm text-[#64748B]">
                        {isAr ? "حجز فوري" : "Instant reservation"}
                      </div>
                    </div>
                  </div>

                  {/* Sample conversation bubbles */}
                  <div className="space-y-3">
                    <div className="bg-[#F8FAFC] rounded-lg p-3 text-sm text-[#1E293B] max-w-[80%]">
                      {isAr
                        ? "مرحباً، أريد حجز طاولة لـ 4 أشخاص"
                        : "Hi, I want to book a table for 4"}
                    </div>
                    <div
                      className={`bg-[#10B981]/10 rounded-lg p-3 text-sm text-[#1E293B] max-w-[80%] ${isAr ? "mr-auto" : "ml-auto"}`}
                    >
                      {isAr
                        ? "تم الحجز! طاولة #12 الساعة 8 مساءً"
                        : "Booked! Table #12 at 8 PM"}
                    </div>
                  </div>

                  <div className="pt-4 border-t border-[#E2E8F0]">
                    <div className="flex items-center gap-2 text-sm text-[#64748B]">
                      <div className="w-2 h-2 rounded-full bg-[#10B981] animate-pulse" />
                      {isAr ? "متصل الآن" : "Online now"}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Service Types - Editorial Grid */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {isAr ? "الأعمال المدعومة" : "Supported Businesses"}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "حلول شاملة لقطاع الضيافة والطعام في منطقة الخليج"
                  : "Comprehensive solutions for the hospitality and food sector across the GCC"}
              </p>
            </div>
          </div>

          {/* Editorial Grid with 1px lines */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0]">
            {serviceTypes.map((service, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="font-semibold text-[#1E293B] text-lg">
                    {isAr ? service.titleAr : service.titleEn}
                  </h3>
                </div>
                <p className="text-[#64748B] mb-6 leading-relaxed">
                  {isAr ? service.descAr : service.descEn}
                </p>
                {/* Hover underline animation */}
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Key Features Section */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {isAr ? "المميزات الأساسية" : "Key Features"}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "كل ما تحتاجه لإدارة حجوزات الضيافة بكفاءة"
                  : "Everything you need to manage hospitality bookings efficiently"}
              </p>
            </div>
          </div>

          {/* Two Column Feature Cards */}
          <div className="grid lg:grid-cols-2 gap-8">
            {/* Booking & Orders */}
            <div className="group bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                  03.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "الحجز والطلبات" : "Booking & Orders"}
                </h3>
              </div>
              <ul className="space-y-4">
                {keyFeatures.bookingOrders.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">
                      {isAr ? feature.ar : feature.en}
                    </span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Guest Services */}
            <div className="group bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                  03.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "خدمة الضيوف" : "Guest Services"}
                </h3>
              </div>
              <ul className="space-y-4">
                {keyFeatures.guestServices.map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                    <span className="text-[#64748B]">
                      {isAr ? feature.ar : feature.en}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases Section */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {isAr ? "حالات الاستخدام" : "Use Cases"}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "كيف يستخدم عملاؤنا مواويد في أعمالهم"
                  : "How our customers use Mawidi in their businesses"}
              </p>
            </div>
          </div>

          {/* Use Cases Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0]">
            {useCases.map((useCase, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="font-semibold text-[#1E293B]">
                    {isAr ? useCase.titleAr : useCase.titleEn}
                  </h3>
                </div>
                <p className="text-[#64748B] text-sm leading-relaxed mb-6">
                  {isAr ? useCase.descAr : useCase.descEn}
                </p>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WhatsApp Integration Highlight */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {isAr ? "تكامل واتساب" : "WhatsApp Integration"}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "استقبل الحجوزات والطلبات على القناة التي يفضلها عملاؤك"
                  : "Receive bookings and orders on the channel your customers prefer"}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-8">
            {[
              {
                numEn: "01",
                titleEn: "Automated Responses",
                titleAr: "ردود تلقائية",
                descEn:
                  "24/7 instant responses to booking inquiries with AI-powered chat",
                descAr:
                  "ردود فورية على استفسارات الحجز على مدار الساعة مع محادثة مدعومة بالذكاء الاصطناعي",
              },
              {
                numEn: "02",
                titleEn: "Smart Notifications",
                titleAr: "إشعارات ذكية",
                descEn: "Automatic confirmations, reminders, and follow-ups",
                descAr: "تأكيدات وتذكيرات ومتابعات تلقائية",
              },
              {
                numEn: "03",
                titleEn: "Seamless Payments",
                titleAr: "مدفوعات سلسة",
                descEn: "Send payment links directly in WhatsApp conversations",
                descAr: "أرسل روابط الدفع مباشرة في محادثات واتساب",
              },
            ].map((item, idx) => (
              <div
                key={idx}
                className="group relative bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-all duration-300"
              >
                <span
                  className="text-[#10B981] font-mono text-5xl font-bold opacity-10 absolute top-4 right-4"
                  dir="ltr"
                >
                  {item.numEn}
                </span>
                <h3 className="text-xl font-bold text-[#1E293B] mb-4 relative">
                  {isAr ? item.titleAr : item.titleEn}
                </h3>
                <p className="text-[#64748B] relative leading-relaxed">
                  {isAr ? item.descAr : item.descEn}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial / Social Proof */}
      <section className="py-24 bg-[#F8FAFC]">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="flex items-center justify-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              06
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <blockquote className="text-2xl md:text-3xl font-medium text-[#1E293B] leading-relaxed mb-8">
            {isAr
              ? '"مواويد غيّر طريقة إدارة حجوزاتنا. الآن نستقبل 40% حجوزات أكثر مع جهد أقل."'
              : '"Mawidi transformed how we manage bookings. We now receive 40% more reservations with less effort."'}
          </blockquote>

          <div className="flex items-center justify-center gap-4">
            <div className="w-12 h-12 rounded-full bg-[#10B981]/10 flex items-center justify-center text-[#10B981] font-bold">
              {isAr ? "م" : "M"}
            </div>
            <div className={`text-${isAr ? "right" : "left"}`}>
              <div className="font-semibold text-[#1E293B]">
                {isAr ? "محمد الشمري" : "Mohammed Al-Shammari"}
              </div>
              <div className="text-sm text-[#64748B]">
                {isAr
                  ? "مدير عمليات، مطاعم النخبة"
                  : "Operations Manager, Elite Restaurants"}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section - Editorial Style */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="bg-[#FAFAFA] border border-[#E2E8F0] p-12 md:p-16">
            <div className="max-w-3xl mx-auto text-center">
              <div className="flex items-center justify-center gap-3 mb-8">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  07
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>

              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
                {isAr
                  ? "حسّن تجربة ضيوفك اليوم"
                  : "Enhance Your Guest Experience Today"}
              </h2>

              <p className="text-xl text-[#64748B] mb-10 leading-relaxed">
                {isAr
                  ? "انضم إلى المطاعم والفنادق الرائدة التي تستخدم مواويد لإدارة حجوزاتها"
                  : "Join leading restaurants and hotels using Mawidi to manage their bookings"}
              </p>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative inline-flex items-center justify-center px-10 py-5 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
                >
                  <span className="relative z-10">{t.getStarted}</span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>
                <Link
                  href={`/${params.lang}/contact`}
                  className="inline-flex items-center justify-center px-10 py-5 text-lg font-semibold text-[#1E293B] border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
                >
                  {t.contactUs}
                </Link>
              </div>

              {/* Trust indicators */}
              <div className="mt-10 pt-10 border-t border-[#E2E8F0]">
                <p className="text-sm text-[#64748B] mb-4">
                  {isAr
                    ? "موثوق من قادة الضيافة في الخليج"
                    : "Trusted by hospitality leaders across the GCC"}
                </p>
                <div className="flex items-center justify-center gap-8 text-[#64748B]/50 font-medium">
                  <span>Hilton</span>
                  <span>Marriott</span>
                  <span>Rotana</span>
                  <span>Accor</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}