import { notFound } from "next/navigation";
import Link from "next/link";
import {
  ArrowLeft,
  Check,
  Calendar,
  Hotel,
  MessageSquare,
  Bell,
  DoorOpen,
  Key,
  BarChart3,
  Lock,
  Shield,
  UserCheck,
  Star,
  CreditCard,
} from "lucide-react";

const pageContent = {
  en: {
    meta: {
      title: "Hotels & Accommodation - WhatsApp Booking Management",
      description:
        "Automate bookings, guest services, and communication for hotels and resorts. Real-time availability, digital check-in, concierge via WhatsApp.",
    },
    hero: {
      title: "Manage Hotel & Accommodation Bookings via WhatsApp",
      subtitle:
        "Automate bookings, guest services, and communication for hotels and resorts",
      description:
        "Transform your property management with WhatsApp-powered booking automation, digital guest services, and intelligent room management.",
      cta: {
        primary: "Get Started",
        secondary: "Schedule a Demo",
      },
    },
    accommodationTypes: {
      title: "Supported Accommodation Types",
      subtitle: "Comprehensive solutions for all accommodation types",
      types: [
        {
          icon: "🏨",
          name: "Hotels",
          description: "From 2-star to 5-star properties",
        },
        {
          icon: "🏖️",
          name: "Resorts",
          description: "Beach and desert resorts",
        },
        {
          icon: "🏢",
          name: "Serviced Apartments",
          description: "Furnished long-stay accommodations",
        },
        {
          icon: "🏠",
          name: "Guest Houses",
          description: "Traditional & modern guest houses",
        },
        {
          icon: "🏕️",
          name: "Tourist Camps",
          description: "Desert & mountain camps",
        },
        {
          icon: "🛏️",
          name: "Hostels & Lodges",
          description: "Budget & mid-range accommodations",
        },
      ],
    },
    features: {
      title: "Key Features",
      booking: {
        title: "Booking Management",
        items: [
          "Instant room & suite booking via WhatsApp",
          "Real-time availability & rates (via PMS/Channel Manager)",
          "Automatic confirmations & .ics calendar invites",
          "Manage modifications & cancellations with policy enforcement",
        ],
      },
      guestServices: {
        title: "Guest Services",
        items: [
          "Room service & concierge via WhatsApp (menus, requests, extras)",
          "Digital check-in/out with secure ID upload (not in chat)",
          "Maintenance/housekeeping tickets with photos/voice notes",
          "Guest loyalty & offers (upgrades, late checkout, breakfast)",
        ],
      },
    },
    howWeHelp: {
      title: "How We Help Your Hotel",
      items: [
        {
          icon: Calendar,
          title: "Reservation Management",
          description: "Inventory, rate plans, upsells, waitlists",
        },
        {
          icon: Key,
          title: "Check-in/Out",
          description:
            "Online pre-arrival, e-registration, ID/KYC via secure link",
        },
        {
          icon: Bell,
          title: "Concierge Service",
          description: "WhatsApp requests routed to teams (HK/ENG/FO)",
        },
        {
          icon: CreditCard,
          title: "Payments",
          description:
            "Deposits, pre-auths, balance on arrival; refunds & credit notes",
        },
        {
          icon: BarChart3,
          title: "Analytics",
          description: "Pickup pace, channel conversion, upsell take-rate",
        },
        {
          icon: Star,
          title: "Guest Satisfaction",
          description: "Post-stay feedback, review nudges, service recovery",
        },
      ],
    },
    workflow: {
      title: "Guest Journey Automation",
      steps: [
        {
          title: "Pre-Arrival",
          description: "Booking confirmation, room preferences, upsell offers",
          icon: MessageSquare,
        },
        {
          title: "Check-In",
          description: "Digital registration, ID verification, room assignment",
          icon: UserCheck,
        },
        {
          title: "In-Stay",
          description: "Room service, concierge requests, issue reporting",
          icon: Bell,
        },
        {
          title: "Check-Out",
          description: "Express checkout, bill settlement, feedback collection",
          icon: DoorOpen,
        },
      ],
    },
    integration: {
      title: "Seamless Integrations",
      subtitle: "Connect with your existing hotel systems",
      systems: [
        {
          category: "Property Management",
          items: ["Opera Cloud", "Cloudbeds", "Hotelogix", "RoomRaccoon"],
        },
        {
          category: "Channel Managers",
          items: ["SiteMinder", "Booking.com", "Expedia", "Agoda"],
        },
        {
          category: "Payment Gateways",
          items: ["Stripe", "Mada", "Apple Pay", "Google Pay"],
        },
        {
          category: "Communication",
          items: ["WhatsApp Business API", "SMS", "Email", "Voice"],
        },
      ],
    },
    security: {
      title: "Security & Privacy",
      description:
        "Data encrypted in transit/at rest, role-based access, audit logs. Sensitive documents shared via secure links—never inside chat.",
      features: [
        {
          icon: Lock,
          title: "Bank-Level Encryption",
          description: "TLS in transit, AES-256 at rest",
        },
        {
          icon: Shield,
          title: "Role-Based Access",
          description: "Granular permissions for staff",
        },
        {
          icon: UserCheck,
          title: "Secure Document Handling",
          description: "IDs & documents via secure links, not in chat",
        },
      ],
    },
    results: {
      title: "Proven Results",
      stats: [
        { value: "70%", label: "Reduction in phone calls" },
        { value: "+25%", label: "Increase in direct bookings" },
        { value: "90%", label: "Guest satisfaction rate" },
        { value: "3h", label: "Daily time saved per staff" },
      ],
    },
    cta: {
      title: "Elevate Your Guest Experience Today",
      subtitle:
        "Join hotels and resorts using Mawidi to cut call volume, fill more nights, and increase ancillaries",
      primaryButton: "Get Started",
      secondaryButton: "Schedule a Demo",
      features: ["14-day free trial", "No setup fees", "24/7 support"],
    },
    navigation: {
      back: "Back to Food, Hospitality & Stays",
    },
  },
  ar: {
    meta: {
      title: "الفنادق والإقامة - إدارة الحجز عبر واتساب",
      description:
        "أتمتة الحجوزات وخدمات الضيوف والتواصل للفنادق والمنتجعات. توفر فوري، تسجيل دخول رقمي، كونسيرج عبر واتساب.",
    },
    hero: {
      title: "إدارة حجوزات الفنادق والإقامة عبر واتساب",
      subtitle: "أتمتة الحجوزات وخدمات الضيوف والتواصل للفنادق والمنتجعات",
      description:
        "حوّل إدارة ممتلكاتك بأتمتة الحجز عبر واتساب، خدمات الضيوف الرقمية، وإدارة الغرف الذكية.",
      cta: {
        primary: "ابدأ الآن",
        secondary: "احجز عرض تجريبي",
      },
    },
    accommodationTypes: {
      title: "أنواع الإقامة المدعومة",
      subtitle: "حلول شاملة لجميع أنواع الإقامة",
      types: [
        { icon: "🏨", name: "فنادق", description: "من نجمتين إلى 5 نجوم" },
        { icon: "🏖️", name: "منتجعات", description: "منتجعات شاطئية وصحراوية" },
        {
          icon: "🏢",
          name: "شقق مفروشة",
          description: "إقامة مفروشة طويلة المدى",
        },
        {
          icon: "🏠",
          name: "بيوت ضيافة",
          description: "بيوت ضيافة تقليدية وحديثة",
        },
        {
          icon: "🏕️",
          name: "مخيمات سياحية",
          description: "مخيمات صحراوية وجبلية",
        },
        {
          icon: "🛏️",
          name: "نُزُل وبيوت شباب",
          description: "إقامة اقتصادية ومتوسطة",
        },
      ],
    },
    features: {
      title: "المميزات الرئيسية",
      booking: {
        title: "إدارة الحجوزات",
        items: [
          "حجز فوري للغرف والأجنحة عبر واتساب",
          "توفر وأسعار بالوقت الفعلي (عبر PMS/Channel Manager)",
          "تأكيدات آلية ودعوات تقويم .ics",
          "إدارة التعديلات والإلغاءات مع تطبيق السياسات",
        ],
      },
      guestServices: {
        title: "خدمات الضيوف",
        items: [
          "خدمة الغرف والكونسيرج عبر واتساب (قوائم، طلبات، إضافات)",
          "تسجيل دخول/خروج رقمي مع رفع هوية آمن (ليس في المحادثة)",
          "تذاكر صيانة/تدبير منزلي مع صور/ملاحظات صوتية",
          "ولاء الضيوف والعروض (ترقيات، تأخير الخروج، إفطار)",
        ],
      },
    },
    howWeHelp: {
      title: "كيف نساعد فندقك",
      items: [
        {
          icon: Calendar,
          title: "إدارة الحجوزات",
          description: "المخزون، خطط الأسعار، البيع الإضافي، قوائم الانتظار",
        },
        {
          icon: Key,
          title: "تسجيل الدخول/الخروج",
          description:
            "ما قبل الوصول عبر الإنترنت، التسجيل الإلكتروني، الهوية/KYC عبر رابط آمن",
        },
        {
          icon: Bell,
          title: "خدمة الكونسيرج",
          description: "طلبات واتساب موجهة للفرق (HK/ENG/FO)",
        },
        {
          icon: CreditCard,
          title: "المدفوعات",
          description:
            "ودائع، تفويضات مسبقة، رصيد عند الوصول؛ مبالغ مستردة وإشعارات دائنة",
        },
        {
          icon: BarChart3,
          title: "التحليلات",
          description: "وتيرة الحجز، تحويل القناة، معدل قبول البيع الإضافي",
        },
        {
          icon: Star,
          title: "رضا الضيوف",
          description:
            "ملاحظات ما بعد الإقامة، تحفيز المراجعات، استرداد الخدمة",
        },
      ],
    },
    workflow: {
      title: "أتمتة رحلة الضيف",
      steps: [
        {
          title: "قبل الوصول",
          description: "تأكيد الحجز، تفضيلات الغرفة، عروض البيع الإضافي",
          icon: MessageSquare,
        },
        {
          title: "تسجيل الدخول",
          description: "التسجيل الرقمي، التحقق من الهوية، تخصيص الغرفة",
          icon: UserCheck,
        },
        {
          title: "أثناء الإقامة",
          description: "خدمة الغرف، طلبات الكونسيرج، الإبلاغ عن المشكلات",
          icon: Bell,
        },
        {
          title: "تسجيل الخروج",
          description: "خروج سريع، تسوية الفاتورة، جمع الملاحظات",
          icon: DoorOpen,
        },
      ],
    },
    integration: {
      title: "تكاملات سلسة",
      subtitle: "اتصل بأنظمة الفندق الموجودة لديك",
      systems: [
        {
          category: "إدارة الممتلكات",
          items: ["Opera Cloud", "Cloudbeds", "Hotelogix", "RoomRaccoon"],
        },
        {
          category: "مديري القنوات",
          items: ["SiteMinder", "Booking.com", "Expedia", "Agoda"],
        },
        {
          category: "بوابات الدفع",
          items: ["Stripe", "مدى", "Apple Pay", "Google Pay"],
        },
        {
          category: "التواصل",
          items: ["واتساب Business API", "رسائل نصية", "بريد إلكتروني", "صوت"],
        },
      ],
    },
    security: {
      title: "الأمان والخصوصية",
      description:
        "البيانات مشفرة أثناء النقل/في حالة السكون، وصول حسب الأدوار، سجلات تدقيق. المستندات الحساسة مشاركة عبر روابط آمنة—ليس داخل المحادثة أبداً.",
      features: [
        {
          icon: Lock,
          title: "تشفير على مستوى البنوك",
          description: "TLS أثناء النقل، AES-256 في حالة السكون",
        },
        {
          icon: Shield,
          title: "وصول حسب الأدوار",
          description: "صلاحيات دقيقة للموظفين",
        },
        {
          icon: UserCheck,
          title: "معالجة آمنة للمستندات",
          description: "الهويات والمستندات عبر روابط آمنة، ليس في المحادثة",
        },
      ],
    },
    results: {
      title: "نتائج مثبتة",
      stats: [
        { value: "70%", label: "تقليل المكالمات الهاتفية" },
        { value: "+25%", label: "زيادة الحجوزات المباشرة" },
        { value: "90%", label: "معدل رضا الضيوف" },
        { value: "3س", label: "وقت يومي موفر لكل موظف" },
      ],
    },
    cta: {
      title: "ارتق بتجربة ضيوفك اليوم",
      subtitle:
        "انضم للفنادق والمنتجعات التي تستخدم ماويدي لتقليل حجم المكالمات، ملء المزيد من الليالي، وزيادة الإضافات",
      primaryButton: "ابدأ الآن",
      secondaryButton: "احجز عرض تجريبي",
      features: ["تجربة مجانية 14 يوم", "بدون رسوم إعداد", "دعم 24/7"],
    },
    navigation: {
      back: "العودة للضيافة والإقامة",
    },
  },
};

export async function generateStaticParams() {
  return [{ lang: "en" }, { lang: "ar" }];
}

export default function HotelsAccommodationPage({
  params,
}: {
  params: { lang: "en" | "ar" };
}) {
  if (!["en", "ar"].includes(params.lang)) {
    notFound();
  }

  const content = pageContent[params.lang];
  const isRTL = params.lang === "ar";

  return (
    <main className="min-h-screen bg-gradient-to-b from-white via-brand-sand/5 to-white dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
      {/* Back Navigation */}
      <div className="max-w-7xl mx-auto px-4 pt-6">
        <Link
          href={`/${params.lang}/industries/food-hospitality-stays`}
          className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-brand-green transition-colors"
        >
          <ArrowLeft className={`h-4 w-4 ${isRTL ? "rotate-180" : ""}`} />
          <span>{content.navigation.back}</span>
        </Link>
      </div>

      {/* Hero Section */}
      <section className="relative py-20 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-brand-green/10 text-brand-green text-sm font-medium mb-6">
            <Hotel className="h-4 w-4" />
            Hotels & Accommodation
          </div>

          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            {content.hero.title}
          </h1>

          <p className="text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto">
            {content.hero.subtitle}
          </p>

          <p className="text-lg text-gray-700 dark:text-gray-300 mb-10 max-w-4xl mx-auto">
            {content.hero.description}
          </p>

          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/signup`}
              className="px-8 py-4 bg-brand-green text-white rounded-lg hover:bg-brand-green/90 transition-all transform hover:scale-105 font-medium shadow-lg"
            >
              {content.hero.cta.primary}
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-white dark:bg-gray-800 text-brand-green border-2 border-brand-green rounded-lg hover:bg-brand-green/5 dark:hover:bg-brand-green/20 transition-all font-medium"
            >
              {content.hero.cta.secondary}
            </Link>
          </div>
        </div>
      </section>

      {/* Accommodation Types */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
            {content.accommodationTypes.title}
          </h2>
          <p className="text-xl text-center text-gray-600 dark:text-gray-400 mb-12">
            {content.accommodationTypes.subtitle}
          </p>

          <div className="grid grid-cols-2 md:grid-cols-3 gap-6">
            {content.accommodationTypes.types.map((type, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-700 rounded-xl p-6 text-center hover:shadow-lg transition-all"
              >
                <div className="text-4xl mb-3">{type.icon}</div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {type.name}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {type.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Key Features */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.features.title}
          </h2>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Booking Management */}
            <div className="bg-white dark:bg-gray-800 rounded-xl p-8">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
                <Calendar className="h-6 w-6 text-brand-green" />
                {content.features.booking.title}
              </h3>
              <div className="space-y-3">
                {content.features.booking.items.map((item, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <Check className="h-5 w-5 text-brand-green flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700 dark:text-gray-300">
                      {item}
                    </span>
                  </div>
                ))}
              </div>
            </div>

            {/* Guest Services */}
            <div className="bg-white dark:bg-gray-800 rounded-xl p-8">
              <h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
                <Bell className="h-6 w-6 text-brand-green" />
                {content.features.guestServices.title}
              </h3>
              <div className="space-y-3">
                {content.features.guestServices.items.map((item, index) => (
                  <div key={index} className="flex items-start gap-3">
                    <Check className="h-5 w-5 text-brand-green flex-shrink-0 mt-0.5" />
                    <span className="text-gray-700 dark:text-gray-300">
                      {item}
                    </span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How We Help */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.howWeHelp.title}
          </h2>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {content.howWeHelp.items.map((item, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-700 rounded-xl p-6 hover:shadow-lg transition-all"
              >
                <div className="p-3 bg-brand-green/10 rounded-lg w-fit mb-4">
                  <item.icon className="h-6 w-6 text-brand-green" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
                  {item.title}
                </h3>
                <p className="text-gray-600 dark:text-gray-400">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Guest Journey Workflow */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.workflow.title}
          </h2>

          <div className="grid md:grid-cols-4 gap-4">
            {content.workflow.steps.map((step, index) => (
              <div key={index} className="relative">
                <div className="bg-white dark:bg-gray-800 rounded-xl p-6 text-center hover:shadow-lg transition-all">
                  <div className="p-3 bg-brand-green/10 rounded-full w-fit mx-auto mb-4">
                    <step.icon className="h-8 w-8 text-brand-green" />
                  </div>
                  <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                    {step.title}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    {step.description}
                  </p>
                </div>
                {index < content.workflow.steps.length - 1 && (
                  <div className="hidden md:block absolute top-1/2 -right-2 transform -translate-y-1/2">
                    <ArrowLeft className="h-5 w-5 text-gray-300 rotate-180" />
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Integrations */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
            {content.integration.title}
          </h2>
          <p className="text-xl text-center text-gray-600 dark:text-gray-400 mb-12">
            {content.integration.subtitle}
          </p>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {content.integration.systems.map((system, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-700 rounded-xl p-6"
              >
                <h3 className="font-semibold text-gray-900 dark:text-white mb-4">
                  {system.category}
                </h3>
                <div className="space-y-2">
                  {system.items.map((item, idx) => (
                    <div key={idx} className="flex items-center gap-2">
                      <Check className="h-4 w-4 text-brand-green" />
                      <span className="text-sm text-gray-600 dark:text-gray-400">
                        {item}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Security */}
      <section className="py-16 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-4">
            {content.security.title}
          </h2>
          <p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-12 max-w-3xl mx-auto">
            {content.security.description}
          </p>

          <div className="grid md:grid-cols-3 gap-6">
            {content.security.features.map((feature, index) => (
              <div
                key={index}
                className="bg-white dark:bg-gray-800 rounded-xl p-6 text-center"
              >
                <div className="p-3 bg-brand-green/10 rounded-lg w-fit mx-auto mb-4">
                  <feature.icon className="h-6 w-6 text-brand-green" />
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-white mb-2">
                  {feature.title}
                </h3>
                <p className="text-sm text-gray-600 dark:text-gray-400">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Results */}
      <section className="py-16 px-4 bg-gray-50 dark:bg-gray-800">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white mb-12">
            {content.results.title}
          </h2>

          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {content.results.stats.map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-3xl font-bold text-brand-green mb-2">
                  {stat.value}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400">
                  {stat.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="py-20 px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
            {content.cta.title}
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-400 mb-8">
            {content.cta.subtitle}
          </p>

          <div className="flex flex-wrap justify-center gap-4 mb-8">
            <Link
              href={`/${params.lang}/signup`}
              className="px-8 py-4 bg-brand-green text-white rounded-lg hover:bg-brand-green/90 transition-all transform hover:scale-105 font-medium shadow-lg"
            >
              {content.cta.primaryButton}
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="px-8 py-4 bg-white dark:bg-gray-800 text-brand-green border-2 border-brand-green rounded-lg hover:bg-brand-green/5 dark:hover:bg-brand-green/20 transition-all font-medium"
            >
              {content.cta.secondaryButton}
            </Link>
          </div>

          <div className="flex flex-wrap justify-center gap-6 text-sm text-gray-600 dark:text-gray-400">
            {content.cta.features.map((feature, index) => (
              <div key={index} className="flex items-center gap-2">
                <Check className="h-4 w-4 text-brand-green" />
                <span>{feature}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}
