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;

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

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

  // Pain points data
  const painPoints = [
    {
      icon: "💸",
      title: t.foodLeisurePain1Title,
      desc: t.foodLeisurePain1Desc,
      impact: t.foodLeisurePain1Impact,
    },
    {
      icon: "📞",
      title: t.foodLeisurePain2Title,
      desc: t.foodLeisurePain2Desc,
      impact: t.foodLeisurePain2Impact,
    },
    {
      icon: "😰",
      title: t.foodLeisurePain3Title,
      desc: t.foodLeisurePain3Desc,
      impact: t.foodLeisurePain3Impact,
    },
  ];

  // Solutions data
  const solutions = [
    {
      icon: "💬",
      title: t.foodLeisureSolution1Title,
      desc: t.foodLeisureSolution1Desc,
      points: [
        t.foodLeisureSolution1Point1,
        t.foodLeisureSolution1Point2,
        t.foodLeisureSolution1Point3,
      ],
    },
    {
      icon: "🛡️",
      title: t.foodLeisureSolution2Title,
      desc: t.foodLeisureSolution2Desc,
      points: [
        t.foodLeisureSolution2Point1,
        t.foodLeisureSolution2Point2,
        t.foodLeisureSolution2Point3,
      ],
    },
    {
      icon: "📞",
      title: t.foodLeisureSolution3Title,
      desc: t.foodLeisureSolution3Desc,
      points: [
        t.foodLeisureSolution3Point1,
        t.foodLeisureSolution3Point2,
        t.foodLeisureSolution3Point3,
      ],
    },
  ];

  // Features data
  const features = [
    {
      icon: "🗓️",
      title: t.foodLeisureFeature1Title,
      desc: t.foodLeisureFeature1Desc,
      benefit: t.foodLeisureFeature1Benefit,
    },
    {
      icon: "💳",
      title: t.foodLeisureFeature2Title,
      desc: t.foodLeisureFeature2Desc,
      benefit: t.foodLeisureFeature2Benefit,
    },
    {
      icon: "⏱️",
      title: t.foodLeisureFeature3Title,
      desc: t.foodLeisureFeature3Desc,
      benefit: t.foodLeisureFeature3Benefit,
    },
    {
      icon: "📱",
      title: t.foodLeisureFeature4Title,
      desc: t.foodLeisureFeature4Desc,
      benefit: t.foodLeisureFeature4Benefit,
    },
  ];

  // ROI stats
  const roiStats = [
    { value: "85%", label: t.foodLeisureROI1 },
    { value: "+35%", label: t.foodLeisureROI2 },
    { value: "4-6h", label: t.foodLeisureROI3 },
    { value: "92%", label: t.foodLeisureROI4 },
  ];

  // Social proof stats
  const proofStats = [
    { value: "300+", label: t.foodLeisureProof1 },
    { value: "50K+", label: t.foodLeisureProof2 },
    { value: "6", label: t.foodLeisureProof3 },
    { value: "24/7", label: t.foodLeisureProof4 },
  ];

  // Steps data
  const steps = [
    {
      icon: "⚡",
      title: t.foodLeisureStep1Title,
      desc: t.foodLeisureStep1Desc,
    },
    {
      icon: "📅",
      title: t.foodLeisureStep2Title,
      desc: t.foodLeisureStep2Desc,
    },
    {
      icon: "💰",
      title: t.foodLeisureStep3Title,
      desc: t.foodLeisureStep3Desc,
    },
  ];

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* Hero Section - Editorial 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: "60px 60px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32">
          <div className="max-w-4xl">
            {/* 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">
                {t.foodLeisureIncludes}
              </span>
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E293B] tracking-tight mb-6 leading-[1.1]">
              {t.foodLeisureHeroTitle}
            </h1>

            <p className="text-xl text-[#64748B] mb-10 leading-relaxed max-w-3xl">
              {t.foodLeisureHeroSubline}
            </p>

            {/* Key Stats - Editorial Grid */}
            <div className="grid sm:grid-cols-3 gap-px bg-slate-200 mb-10 max-w-2xl">
              <div className="bg-white p-6">
                <div className="text-3xl font-bold text-[#1E293B] mb-1">
                  30%
                </div>
                <div className="text-sm text-[#64748B]">
                  {t.foodLeisureStat1}
                </div>
              </div>
              <div className="bg-white p-6">
                <div className="text-3xl font-bold text-[#1E293B] mb-1">
                  4-6h
                </div>
                <div className="text-sm text-[#64748B]">
                  {t.foodLeisureStat2}
                </div>
              </div>
              <div className="bg-white p-6">
                <div className="text-3xl font-bold text-[#1E293B] mb-1">
                  25%
                </div>
                <div className="text-sm text-[#64748B]">
                  {t.foodLeisureStat3}
                </div>
              </div>
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href={`/${params.lang}/demo`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden transition-all"
              >
                <span className="relative z-10">{t.foodLeisureCTADemo}</span>
                <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </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 border-2 border-[#1E293B] text-[#1E293B] hover:bg-[#1E293B] hover:text-white transition-colors"
              >
                {t.foodLeisureCTAWhatsApp}
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Pain Points 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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-red-50 text-red-600 text-sm font-medium mb-3">
                {t.foodLeisurePainBadge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisurePainTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.foodLeisurePainSubtitle}
              </p>
            </div>
          </div>

          {/* Pain Points Grid */}
          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {painPoints.map((pain, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-red-50/50 transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-red-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-3xl">{pain.icon}</span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {pain.title}
                </h3>
                <p className="text-[#64748B] mb-4">{pain.desc}</p>
                <div className="bg-red-50 border-l-2 border-red-400 p-4">
                  <p className="text-sm text-red-700 font-medium">
                    {pain.impact}
                  </p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-red-400 mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Solution 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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-sm font-medium mb-3">
                {t.foodLeisureSolutionBadge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisureSolutionTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.foodLeisureSolutionSubtitle}
              </p>
            </div>
          </div>

          {/* Solutions Grid */}
          <div className="grid lg:grid-cols-3 gap-px bg-slate-200">
            {solutions.map((solution, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F0FDF4] 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>
                  <span className="text-3xl">{solution.icon}</span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {solution.title}
                </h3>
                <p className="text-[#64748B] mb-6">{solution.desc}</p>
                <ul className="space-y-3">
                  {solution.points.map((point, pIdx) => (
                    <li key={pIdx} className="flex items-start gap-3">
                      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span className="text-sm text-[#64748B]">{point}</span>
                    </li>
                  ))}
                </ul>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Features 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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <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-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisureFeaturesTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.foodLeisureFeaturesSubtitle}
              </p>
            </div>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {features.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex items-start gap-4 mb-6">
                  <span className="text-4xl">{feature.icon}</span>
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <span
                        className="text-[#10B981] font-mono text-xs"
                        dir="ltr"
                      >
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                      <h3 className="text-xl font-bold text-[#1E293B]">
                        {feature.title}
                      </h3>
                    </div>
                    <p className="text-[#64748B]">{feature.desc}</p>
                  </div>
                </div>
                <div className="bg-[#F0FDF4] border-l-2 border-[#10B981] p-4">
                  <p className="text-sm font-semibold text-[#059669]">
                    {feature.benefit}
                  </p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROI 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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium mb-3">
                {t.foodLeisureROIBadge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisureROITitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.foodLeisureROISubtitle}
              </p>
            </div>
          </div>

          {/* ROI Stats Grid */}
          <div className="grid md:grid-cols-4 gap-px bg-slate-200 mb-16">
            {roiStats.map((stat, idx) => (
              <div key={idx} className="bg-white p-8 text-center">
                <div className="text-4xl font-bold text-[#10B981] mb-2">
                  {stat.value}
                </div>
                <p className="text-[#64748B] text-sm">{stat.label}</p>
              </div>
            ))}
          </div>

          {/* Testimonial */}
          <div className="bg-[#FAFAFA] p-8 md:p-12 max-w-4xl mx-auto">
            <div className="flex items-center gap-3 mb-6">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                TESTIMONIAL
              </span>
              <div className="w-8 h-px bg-[#10B981]" />
            </div>
            <blockquote className="text-xl md:text-2xl text-[#1E293B] font-medium mb-6 leading-relaxed">
              &ldquo;{t.foodLeisureTestimonialQuote}&rdquo;
            </blockquote>
            <div className="flex items-center gap-4">
              <div className="w-12 h-12 bg-[#10B981]/10 rounded-full flex items-center justify-center">
                <span className="text-[#10B981] font-bold text-lg">
                  {t.foodLeisureTestimonialName.charAt(0)}
                </span>
              </div>
              <div>
                <p className="font-semibold text-[#1E293B]">
                  {t.foodLeisureTestimonialName}
                </p>
                <p className="text-sm text-[#64748B]">
                  {t.foodLeisureTestimonialRole}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Social Proof */}
      <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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <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-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisureSocialProofTitle}
              </h2>
              <p className="text-lg text-[#64748B]">
                {t.foodLeisureSocialProofSubtitle}
              </p>
            </div>
          </div>

          {/* Proof Stats */}
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {proofStats.map((stat, idx) => (
              <div key={idx} className="bg-white p-8 text-center">
                <div className="text-3xl font-bold text-[#1E293B] mb-2">
                  {stat.value}
                </div>
                <p className="text-[#64748B] text-sm">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How It Works */}
      <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-12">
            <div className="flex items-center gap-3 flex-shrink-0 pt-2">
              <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-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.foodLeisureHowItWorksTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.foodLeisureHowItWorksSubtitle}
              </p>
            </div>
          </div>

          {/* Steps */}
          <div className="grid md:grid-cols-3 gap-8 max-w-5xl">
            {steps.map((step, idx) => (
              <div
                key={idx}
                className="group relative bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="w-10 h-10 bg-[#10B981] text-white flex items-center justify-center font-bold text-lg">
                    {idx + 1}
                  </span>
                  <span className="text-3xl">{step.icon}</span>
                </div>
                <h3 className="text-xl font-bold text-[#1E293B] mb-3">
                  {step.title}
                </h3>
                <p className="text-[#64748B]">{step.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

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

          <h2 className="text-3xl md:text-5xl font-bold text-white mb-6">
            {t.foodLeisureFinalCTATitle}
          </h2>
          <p className="text-xl text-slate-300 mb-12 leading-relaxed">
            {t.foodLeisureFinalCTASubtitle}
          </p>

          <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-10 py-5 text-xl font-semibold bg-[#10B981] text-white overflow-hidden transition-all"
            >
              <span className="relative z-10">{t.foodLeisureFinalCTA1}</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-10 py-5 text-xl font-semibold border-2 border-white/20 text-white hover:bg-white/10 transition-colors"
            >
              {t.foodLeisureFinalCTA2}
            </Link>
          </div>

          <p className="text-sm text-slate-400">{t.foodLeisureFinalCTANote}</p>
        </div>
      </section>

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