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

export const revalidate = SITE.revalidateSeconds;

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

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const t = UI[params.lang].t;
  const title = t.hotelsTitle;
  const description = t.hotelsHeroSubline;

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

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

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Hero Section - Editorial Light Style */}
      <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(to right, #10B981 1px, transparent 1px), linear-gradient(to bottom, #10B981 1px, transparent 1px)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-28">
          {/* Badge */}
          <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">
              {isAr ? "للفنادق والشقق الفندقية" : "For Hotels & Accommodation"}
            </span>
          </div>

          <div className="max-w-4xl">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight mb-6">
              {t.hotelsHeroTitle}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-12 leading-relaxed max-w-3xl">
              {t.hotelsHeroSubline}
            </p>

            {/* Stats Grid - Editorial Style */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200 mb-12">
              {[
                {
                  value: "+35%",
                  label: isAr ? "حجوزات مباشرة" : "Direct Bookings",
                  sub: isAr
                    ? "عبر واتساب والويب والصوت"
                    : "Via WhatsApp, Web & Voice",
                },
                {
                  value: "24/7",
                  label: isAr ? "خدمة متواصلة" : "Always Available",
                  sub: isAr ? "وكلاء ذكاء اصطناعي" : "AI-Powered Agents",
                },
                {
                  value: "+22%",
                  label: isAr ? "إيرادات إضافية" : "Revenue Uplift",
                  sub: isAr
                    ? "عبر البيع الإضافي الذكي"
                    : "Smart Upsell Automation",
                },
              ].map((stat, idx) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <div className="flex items-center gap-3 mb-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#64748B] text-sm">{stat.label}</span>
                  </div>
                  <div className="text-4xl font-bold text-[#1E293B] mb-2">
                    {stat.value}
                  </div>
                  <p className="text-sm text-[#64748B]">{stat.sub}</p>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                </div>
              ))}
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <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 border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
              >
                {t.scheduleDemo}
              </Link>
              <a
                href={`https://wa.me/${SITE.contact.whatsapp}`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#1E293B] hover:bg-slate-100 transition-colors"
              >
                {isAr ? "استشارة واتساب" : "WhatsApp Consultation"}
              </a>
            </div>

            {/* Trust Badge */}
            <p className="text-sm text-[#64748B]">
              {isAr
                ? "موثوق من 200+ فندق ومنشأة في الخليج"
                : "Trusted by 200+ hotels & properties in GCC"}
            </p>
          </div>
        </div>
      </section>

      {/* Section 02: WhatsApp Booking */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <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]">
                {t.hotelsWhatsappHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsWhatsappDescription}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            {/* Features List */}
            <div className="bg-[#FAFAFA] p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  02.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.hotelsWhatsappTitle}
                </h3>
              </div>
              <ul className="space-y-4">
                {t.hotelsWhatsappFeatures
                  .split("\n")
                  .map((feature: string, idx: number) => (
                    <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]">{feature}</span>
                    </li>
                  ))}
              </ul>
            </div>

            {/* Booking Flow Steps */}
            <div className="bg-[#10B981]/[0.03] p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  02.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "مسار الحجز" : "Booking Flow"}
                </h3>
              </div>
              <div className="space-y-4">
                {[
                  {
                    step: "01",
                    title: isAr ? "استفسار الضيف" : "Guest Inquiry",
                  },
                  {
                    step: "02",
                    title: isAr ? "عرض الغرف المتاحة" : "Show Available Rooms",
                  },
                  {
                    step: "03",
                    title: isAr ? "اختيار وتأكيد" : "Select & Confirm",
                  },
                  { step: "04", title: isAr ? "دفع آمن" : "Secure Payment" },
                  {
                    step: "05",
                    title: isAr ? "تأكيد فوري" : "Instant Confirmation",
                  },
                ].map((item) => (
                  <div
                    key={item.step}
                    className="bg-white p-4 border border-slate-200"
                  >
                    <div className="flex items-center gap-3">
                      <span
                        className="text-[#10B981] font-mono text-xs"
                        dir="ltr"
                      >
                        {item.step}
                      </span>
                      <span className="text-[#1E293B] font-medium">
                        {item.title}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 03: Availability & Rates */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <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]">
                {t.hotelsAvailabilityHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsAvailabilityDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsAvailabilityFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 04: Payment Solutions */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <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]">
                {t.hotelsPaymentHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsPaymentDescription}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {t.hotelsPaymentFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 05: Upsells & Add-ons */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <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]">
                {t.hotelsUpsellsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsUpsellsDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsUpsellsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 06: Check-in Process */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsCheckinHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsCheckinDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsCheckinFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 07: Cancellations & Changes */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsCancellationsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsCancellationsDescription}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {t.hotelsCancellationsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 08: Guest CRM */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsCRMHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsCRMDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsCRMFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 09: Communications */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsCommunicationsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsCommunicationsDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsCommunicationsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 10: Voice Agent */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsVoiceHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsVoiceDescription}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            {/* Voice Features */}
            <div className="bg-[#FAFAFA] p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  10.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.hotelsVoiceTitle}
                </h3>
              </div>
              <ul className="space-y-4">
                {t.hotelsVoiceFeatures
                  .split("\n")
                  .map((feature: string, idx: number) => (
                    <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]">{feature}</span>
                    </li>
                  ))}
              </ul>
            </div>

            {/* Voice Capabilities */}
            <div className="bg-[#10B981]/[0.03] p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  10.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "قدرات المساعد الصوتي" : "Voice Agent Capabilities"}
                </h3>
              </div>
              <div className="space-y-4">
                {[
                  {
                    num: "01",
                    title: isAr ? "الرد على الاستفسارات" : "Answer Inquiries",
                  },
                  { num: "02", title: isAr ? "حجز الغرف" : "Book Rooms" },
                  {
                    num: "03",
                    title: isAr ? "تعديل الحجوزات" : "Modify Bookings",
                  },
                  {
                    num: "04",
                    title: isAr ? "تحويل للموظفين" : "Transfer to Staff",
                  },
                ].map((item) => (
                  <div
                    key={item.num}
                    className="bg-white p-4 border border-slate-200"
                  >
                    <div className="flex items-center gap-3">
                      <span
                        className="text-[#10B981] font-mono text-xs"
                        dir="ltr"
                      >
                        {item.num}
                      </span>
                      <span className="text-[#1E293B] font-medium">
                        {item.title}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 11: Operations */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                11
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsOperationsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsOperationsDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsOperationsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 12: Analytics */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                12
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsAnalyticsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsAnalyticsDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsAnalyticsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 13: Integrations */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                13
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsIntegrationsHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsIntegrationsDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {t.hotelsIntegrationsFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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]">{feature}</h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 14: Security */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                14
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.hotelsSecurityHeading}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.hotelsSecurityDescription}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {t.hotelsSecurityFeatures
              .split("\n")
              .map((feature: string, idx: number) => (
                <div
                  key={idx}
                  className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
                >
                  <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-sm">
                      {feature}
                    </h3>
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
          </div>
        </div>
      </section>

      {/* Section 15: Final CTA */}
      <section className="py-24 bg-[#FAFAFA]">
        <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"
            >
              15
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
            {t.hotelsCTATitle}
          </h2>
          <p className="text-xl text-[#64748B] mb-12">
            {t.hotelsCTADescription}
          </p>

          {/* ROI Stat */}
          <div className="inline-block bg-[#10B981]/[0.05] p-8 mb-12">
            <h3 className="font-semibold text-[#1E293B] mb-2">
              {isAr
                ? "متوسط العائد على الاستثمار"
                : "Average ROI for Our Clients"}
            </h3>
            <div className="text-6xl font-bold text-[#10B981] mb-2">240%</div>
            <p className="text-sm text-[#64748B]">
              {isAr ? "خلال أول 6 شهور" : "Within the first 6 months"}
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <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 border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
            >
              {t.scheduleDemo}
            </Link>
          </div>

          <p className="text-sm text-[#64748B]">
            {isAr
              ? "لا يلزم بطاقة ائتمان • إعداد فوري • دعم 24/7"
              : "No credit card required • Instant setup • 24/7 support"}
          </p>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd industry="hotels-accommodation" lang={params.lang} />
    </main>
  );
}