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.propertyFacilitiesTitle} | ${SITE.brand}`,
    description: t.propertyFacilitiesHeroSubline,
    openGraph: {
      title: `${t.propertyFacilitiesTitle} | ${SITE.brand}`,
      description: t.propertyFacilitiesHeroSubline,
      type: "website",
    },
  };
}

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

  // Hero selling points
  const sellingPoints = [
    { icon: "💬", text: t.pfCtaWhatsApp },
    { icon: "📅", text: t.pfCtaBookViewing },
    { icon: "📄", text: t.pfCtaStartApplication },
    { icon: "🔧", text: t.pfCtaReportIssue },
  ];

  // Section 1 features
  const section1Features = [
    t.pfSection1Feature1,
    t.pfSection1Feature2,
    t.pfSection1Feature3,
    t.pfSection1Feature4,
  ];

  // Quick replies
  const quickReplies = [
    t.pfQuickReply1,
    t.pfQuickReply2,
    t.pfQuickReply3,
    t.pfQuickReply4,
  ];

  // Section 2 flow
  const bookingFlow = [
    { icon: "📅", text: t.pfSection2Flow1 },
    { icon: "🪪", text: t.pfSection2Flow2 },
    { icon: "✓", text: t.pfSection2Flow3 },
    { icon: "🔔", text: t.pfSection2Flow4 },
    { icon: "💳", text: t.pfSection2Flow5 },
  ];

  // Section 3 questions
  const videoQuestions = [t.pfSection3Question1, t.pfSection3Question2];

  // Section 4 steps
  const rentalSteps = [
    { title: t.pfSection4Step1Title, desc: t.pfSection4Step1Desc },
    { title: t.pfSection4Step2Title, desc: t.pfSection4Step2Desc },
    { title: t.pfSection4Step3Title, desc: t.pfSection4Step3Desc },
    { title: t.pfSection4Step4Title, desc: t.pfSection4Step4Desc },
    { title: t.pfSection4Step5Title, desc: t.pfSection4Step5Desc },
    { title: t.pfSection4Step6Title, desc: t.pfSection4Step6Desc },
    { title: t.pfSection4Step7Title, desc: t.pfSection4Step7Desc },
  ];

  // Section 5 steps
  const maintenanceSteps = [
    t.pfSection5Step1,
    t.pfSection5Step2,
    t.pfSection5Step3,
  ];

  // Section 6 features
  const spaceFeatures = [
    t.pfSection6Feature1,
    t.pfSection6Feature2,
    t.pfSection6Feature3,
    t.pfSection6Feature4,
  ];

  // Section 7 capabilities
  const voiceCapabilities = [
    t.pfSection7Cap1,
    t.pfSection7Cap2,
    t.pfSection7Cap3,
    t.pfSection7Cap4,
  ];

  // Section 8 methods
  const paymentMethods = [
    t.pfSection8Method1,
    t.pfSection8Method2,
    t.pfSection8Method3,
    t.pfSection8Method4,
  ];

  // Section 9 features
  const crmFeatures = [
    t.pfSection9Feature1,
    t.pfSection9Feature2,
    t.pfSection9Feature3,
    t.pfSection9Feature4,
  ];

  // Section 10 features
  const securityFeatures = [
    t.pfSection10Encryption,
    t.pfSection10RBAC,
    t.pfSection10KYC,
    t.pfSection10DataRetention,
    t.pfSection10DataRights,
    t.pfSection10ComplianceGCC,
  ];

  // Section 11 metrics
  const analyticsMetrics = [
    t.pfSection11Metric1,
    t.pfSection11Metric2,
    t.pfSection11Metric3,
    t.pfSection11Metric4,
    t.pfSection11Metric5,
    t.pfSection11Metric6,
  ];

  // FAQs
  const faqs = [
    { q: t.pfFAQ1Q, a: t.pfFAQ1A },
    { q: t.pfFAQ2Q, a: t.pfFAQ2A },
    { q: t.pfFAQ3Q, a: t.pfFAQ3A },
    { q: t.pfFAQ4Q, a: t.pfFAQ4A },
    { q: t.pfFAQ5Q, a: t.pfFAQ5A },
  ];

  // Setup steps
  const setupSteps = [
    t.pfSection13Setup1,
    t.pfSection13Setup2,
    t.pfSection13Setup3,
    t.pfSection13Setup4,
    t.pfSection13Setup5,
  ];

  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-28">
          <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-3xl">🏢</span>
              <span className="text-[#64748B] text-sm font-medium">
                {t.propertyFacilitiesTitle}
              </span>
            </div>

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

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

            {/* Selling Points - Editorial Grid */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200 mb-10">
              {sellingPoints.map((point, idx) => (
                <div key={idx} className="bg-white p-4 flex items-center gap-3">
                  <span className="text-2xl">{point.icon}</span>
                  <span className="text-sm font-medium text-[#1E293B]">
                    {point.text}
                  </span>
                </div>
              ))}
            </div>

            {/* CTA */}
            <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 transition-all"
            >
              <span className="relative z-10">
                {isAr ? "ابدأ مجاناً" : "Get Started Free"}
              </span>
              <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
          </div>
        </div>
      </section>

      {/* Section 1 - WhatsApp Property Concierge */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <div>
              {/* Section Header */}
              <div className="flex items-center gap-3 mb-6">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  02
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="inline-block px-3 py-1 bg-[#10B981]/10 text-[#10B981] text-sm font-medium">
                  {t.pfSection1Badge}
                </span>
              </div>

              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-6">
                {t.pfSection1Title}
              </h2>
              <p className="text-lg text-[#64748B] mb-8">{t.pfSection1Desc}</p>

              {/* Features */}
              <ul className="space-y-4 mb-8">
                {section1Features.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]">{feature}</span>
                  </li>
                ))}
              </ul>

              {/* Sample Chat */}
              <div className="bg-white border border-slate-200 p-6">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    SAMPLE
                  </span>
                  <div className="w-8 h-px bg-[#10B981]" />
                  <span className="text-sm text-[#64748B]">
                    {t.pfSampleChat}
                  </span>
                </div>
                <div className="space-y-3">
                  <div
                    className={`${isAr ? "text-right" : "text-left"} bg-blue-50 p-3`}
                  >
                    <p className="text-sm text-blue-900">{t.pfChat1Guest}</p>
                  </div>
                  <div
                    className={`${isAr ? "text-left" : "text-right"} bg-[#F0FDF4] p-3`}
                  >
                    <p className="text-sm text-[#059669]">{t.pfChat1Agent}</p>
                  </div>
                </div>
              </div>

              {/* Quick Replies */}
              <div className="mt-6">
                <p className="text-sm font-medium text-[#1E293B] mb-3">
                  {t.pfQuickReplies}
                </p>
                <div className="flex flex-wrap gap-2">
                  {quickReplies.map((reply, idx) => (
                    <span
                      key={idx}
                      className="inline-flex items-center px-3 py-1 text-sm bg-white border border-slate-200 text-[#64748B]"
                    >
                      {reply}
                    </span>
                  ))}
                </div>
              </div>
            </div>

            {/* Visual placeholder */}
            <div className="bg-[#F0FDF4] aspect-square flex items-center justify-center">
              <span className="text-[120px] opacity-20">💬</span>
            </div>
          </div>
        </div>
      </section>

      {/* Section 2 - Book a Viewing */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            {/* Flow Card */}
            <div className="order-2 lg:order-1 bg-[#FAFAFA] p-8">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                  FLOW
                </span>
                <div className="w-8 h-px bg-[#10B981]" />
              </div>
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection2FlowTitle}
              </h3>
              <div className="space-y-4">
                {bookingFlow.map((item, idx) => (
                  <div key={idx} className="flex items-start gap-4">
                    <div className="w-10 h-10 bg-white flex items-center justify-center flex-shrink-0">
                      <span className="text-xl">{item.icon}</span>
                    </div>
                    <p className="text-[#64748B] pt-2">{item.text}</p>
                  </div>
                ))}
              </div>

              <div className="mt-8 bg-amber-50 border-l-2 border-amber-400 p-4">
                <p className="text-sm text-amber-800">
                  {t.pfSection2Microcopy}
                </p>
              </div>
            </div>

            {/* Content */}
            <div className="order-1 lg:order-2">
              <div className="flex items-center gap-3 mb-6">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  03
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-medium">
                  {t.pfSection2Badge}
                </span>
              </div>

              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-6">
                {t.pfSection2Title}
              </h2>
              <p className="text-lg text-[#64748B] mb-8">{t.pfSection2Desc}</p>

              <div className="bg-[#F0FDF4] border-l-2 border-[#10B981] p-4">
                <h4 className="font-semibold text-[#059669] mb-2">
                  {t.pfSection2OnSiteTitle}
                </h4>
                <p className="text-sm text-[#059669]/80">
                  {t.pfSection2OnSiteDesc}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 3 - Video Tour */}
      <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>
              <span className="inline-block px-3 py-1 bg-purple-50 text-purple-600 text-sm font-medium mb-3">
                {t.pfSection3Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.pfSection3Title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-3xl">
                {t.pfSection3Desc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {/* Questions Card */}
            <div className="group bg-white p-8">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-purple-500 font-mono text-xs" dir="ltr">
                  01
                </span>
                <h3 className="text-xl font-bold text-[#1E293B]">
                  {t.pfSection3QuestionsTitle}
                </h3>
              </div>
              <div className="space-y-3">
                {videoQuestions.map((question, idx) => (
                  <div key={idx} className="flex items-start gap-3">
                    <span className="text-purple-500">?</span>
                    <span className="text-[#64748B] text-sm">{question}</span>
                  </div>
                ))}
              </div>
              <div className="w-0 group-hover:w-12 h-0.5 bg-purple-400 mt-6 transition-all duration-300" />
            </div>

            {/* Compliance Card */}
            <div className="group bg-white p-8">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-purple-500 font-mono text-xs" dir="ltr">
                  02
                </span>
                <h3 className="text-xl font-bold text-[#1E293B]">
                  {t.pfSection3ComplianceTitle}
                </h3>
              </div>
              <p className="text-[#64748B] text-sm">
                {t.pfSection3ComplianceText}
              </p>
              <div className="w-0 group-hover:w-12 h-0.5 bg-purple-400 mt-6 transition-all duration-300" />
            </div>
          </div>
        </div>
      </section>

      {/* Section 4 - Renting/Leasing End-to-End */}
      <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-indigo-50 text-indigo-600 text-sm font-medium mb-3">
                {t.pfSection4Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.pfSection4Title}
              </h2>
              <p className="text-lg text-[#64748B]">{t.pfSection4Subtitle}</p>
            </div>
          </div>

          {/* Steps Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200 mb-8">
            {rentalSteps.map((step, idx) => (
              <div key={idx} className="group bg-white p-6">
                <div className="flex items-center gap-3 mb-3">
                  <span className="w-8 h-8 bg-indigo-100 text-indigo-600 flex items-center justify-center font-bold text-sm">
                    {idx + 1}
                  </span>
                  <h3 className="font-semibold text-[#1E293B]">{step.title}</h3>
                </div>
                <p className="text-sm text-[#64748B]">{step.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-indigo-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Upsell */}
          <div className="bg-[#F0FDF4] border-l-2 border-[#10B981] p-6">
            <h3 className="font-bold text-[#059669] mb-2">
              {t.pfSection4UpsellTitle}
            </h3>
            <p className="text-[#059669]/80">{t.pfSection4UpsellText}</p>
          </div>
        </div>
      </section>

      {/* Section 5 - Maintenance Requests */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <div>
              {/* Section Header */}
              <div className="flex items-center gap-3 mb-6">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  06
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="inline-block px-3 py-1 bg-orange-50 text-orange-600 text-sm font-medium">
                  {t.pfSection5Badge}
                </span>
              </div>

              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-6">
                {t.pfSection5Title}
              </h2>
              <p className="text-lg text-[#64748B] mb-8">{t.pfSection5Desc}</p>

              {/* How It Works */}
              <h3 className="text-xl font-semibold text-[#1E293B] mb-4">
                {t.pfSection5HowItWorksTitle}
              </h3>
              <ul className="space-y-4 mb-8">
                {maintenanceSteps.map((step, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <span className="w-6 h-6 bg-orange-100 text-orange-600 flex items-center justify-center font-bold text-xs flex-shrink-0">
                      {idx + 1}
                    </span>
                    <span className="text-[#64748B]">{step}</span>
                  </li>
                ))}
              </ul>

              {/* Example */}
              <div className="bg-white border border-slate-200 p-6">
                <h4 className="font-semibold text-[#1E293B] mb-3">
                  {t.pfSection5ExampleTitle}
                </h4>
                <p className="text-sm text-[#64748B] mb-3">
                  {t.pfSection5ExampleIssue}
                </p>
                <div className="bg-orange-50 border-l-2 border-orange-400 p-3">
                  <p className="text-sm text-orange-800">
                    {t.pfSection5ExampleAI}
                  </p>
                </div>
              </div>
            </div>

            {/* Features Card */}
            <div className="bg-white border border-slate-200 p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection5FeaturesTitle}
              </h3>
              <ul className="space-y-4">
                {[
                  t.pfSection5Feature1,
                  t.pfSection5Feature2,
                  t.pfSection5Feature3,
                ].map((feature, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <div className="w-1.5 h-1.5 bg-orange-500 mt-2 flex-shrink-0" />
                    <span className="text-[#64748B] text-sm">{feature}</span>
                  </li>
                ))}
              </ul>

              <div className="mt-6 bg-red-50 border-l-2 border-red-400 p-4">
                <p className="text-sm text-red-800">
                  <strong>{t.pfSection5SafetyTitle}:</strong>{" "}
                  {t.pfSection5SafetyText}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 6 - Office Hire / Meeting Rooms */}
      <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>
              <span className="inline-block px-3 py-1 bg-cyan-50 text-cyan-600 text-sm font-medium mb-3">
                {t.pfSection6Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.pfSection6Title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-3xl">
                {t.pfSection6Desc}
              </p>
            </div>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200 mb-8">
            {spaceFeatures.map((feature, idx) => (
              <div key={idx} className="group bg-white p-6">
                <div className="flex items-center gap-3 mb-3">
                  <span className="text-cyan-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </div>
                <p className="text-[#64748B] text-sm">{feature}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-cyan-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Upsells */}
          <div className="bg-cyan-50 border-l-2 border-cyan-400 p-6">
            <h3 className="font-bold text-cyan-800 mb-2">
              {t.pfSection6UpsellsTitle}
            </h3>
            <p className="text-cyan-700">{t.pfSection6UpsellsText}</p>
          </div>
        </div>
      </section>

      {/* Section 7 - Voice Agent */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-12 items-start">
            <div>
              {/* Section Header */}
              <div className="flex items-center gap-3 mb-6">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  08
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
                <span className="inline-block px-3 py-1 bg-rose-50 text-rose-600 text-sm font-medium">
                  {t.pfSection7Badge}
                </span>
              </div>

              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-6">
                {t.pfSection7Title}
              </h2>
              <p className="text-lg text-[#64748B] mb-8">{t.pfSection7Desc}</p>

              {/* Capabilities */}
              <div className="bg-white border border-slate-200 p-6 mb-6">
                <h3 className="font-semibold text-[#1E293B] mb-4">
                  {t.pfSection7FeaturesTitle}
                </h3>
                <ul className="space-y-3">
                  {voiceCapabilities.map((cap, idx) => (
                    <li key={idx} className="flex items-start gap-3">
                      <div className="w-1.5 h-1.5 bg-rose-500 mt-2 flex-shrink-0" />
                      <span className="text-[#64748B] text-sm">{cap}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Opener */}
              <div className="bg-slate-100 p-4">
                <p className="text-sm font-semibold text-[#1E293B] mb-2">
                  {t.pfSection7OpenersTitle}
                </p>
                <p className="text-sm text-[#64748B] italic">
                  {isAr ? t.pfSection7OpenerAr : t.pfSection7OpenerEn}
                </p>
              </div>
            </div>

            {/* Visual placeholder */}
            <div className="bg-rose-50 aspect-square flex items-center justify-center">
              <span className="text-[120px] opacity-20">📞</span>
            </div>
          </div>
        </div>
      </section>

      {/* Section 8 - Payments & Deposits */}
      <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"
              >
                09
              </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.pfSection8Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] mb-4">
                {t.pfSection8Title}
              </h2>
              <p className="text-lg text-[#64748B] max-w-3xl">
                {t.pfSection8Desc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {/* Payment Types */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection8PaymentTypesTitle}
              </h3>
              <ul className="space-y-3">
                {paymentMethods.map((method, 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]">{method}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Process */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection8ProcessTitle}
              </h3>
              <p className="text-[#64748B] mb-4">{t.pfSection8ProcessDesc}</p>
              <div className="bg-[#F0FDF4] border-l-2 border-[#10B981] p-4">
                <p className="text-sm text-[#059669]">
                  {t.pfSection8DisplayLine}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 9 - CRM, Comms & Broadcasts */}
      <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"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-purple-50 text-purple-600 text-sm font-medium mb-3">
                {t.pfSection9Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                {t.pfSection9Title}
              </h2>
            </div>
          </div>

          {/* Features Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200">
            {crmFeatures.map((feature, idx) => (
              <div key={idx} className="group bg-white p-6">
                <span className="text-purple-500 font-mono text-xs" dir="ltr">
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <p className="text-[#64748B] text-sm mt-3">{feature}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-purple-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 10 - Security, Privacy & Compliance */}
      <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"
              >
                11
              </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.pfSection10Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                {t.pfSection10Title}
              </h2>
            </div>
          </div>

          {/* Security Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200 mb-8">
            {securityFeatures.map((feature, idx) => (
              <div key={idx} className="group bg-white p-6">
                <div className="flex items-center gap-3 mb-3">
                  <span className="text-red-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-xl">🛡️</span>
                </div>
                <p className="text-[#64748B] text-sm">{feature}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-red-400 mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          <div className="bg-red-50 border-l-2 border-red-400 p-6 text-center">
            <p className="text-red-800 font-semibold">
              {t.pfSection10SafetyNote}
            </p>
          </div>
        </div>
      </section>

      {/* Section 11 - Analytics & Owner Digest */}
      <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"
              >
                12
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <span className="inline-block px-3 py-1 bg-indigo-50 text-indigo-600 text-sm font-medium mb-3">
                {t.pfSection11Badge}
              </span>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                {t.pfSection11Title}
              </h2>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {/* Metrics */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection11MetricsTitle}
              </h3>
              <ul className="space-y-3">
                {analyticsMetrics.map((metric, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <span
                      className="text-indigo-500 font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#64748B]">{metric}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Digest */}
            <div className="bg-white p-8">
              <h3 className="text-xl font-bold text-[#1E293B] mb-6">
                {t.pfSection11DigestTitle}
              </h3>
              <p className="text-[#64748B]">{t.pfSection11DigestDesc}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Section 12 - FAQs */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-3 mb-12">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              13
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="inline-block px-3 py-1 bg-amber-50 text-amber-600 text-sm font-medium">
              {t.pfSection12Badge}
            </span>
            <h2 className="text-3xl font-bold text-[#1E293B]">
              {t.pfSection12Title}
            </h2>
          </div>

          <div className="space-y-px bg-slate-200">
            {faqs.map((faq, idx) => (
              <div key={idx} className="bg-white p-6">
                <div className="flex items-start gap-3 mb-3">
                  <span className="text-amber-500 font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="font-bold text-[#1E293B]">{faq.q}</h3>
                </div>
                <p className="text-[#64748B] ml-8">{faq.a}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 13 - Get Started 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"
            >
              14
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
            {t.pfSection13Title}
          </h2>
          <p className="text-xl text-slate-300 mb-12">
            {t.pfSection13Subtitle}
          </p>

          {/* Setup Steps */}
          <div className="bg-white/5 border border-white/10 p-8 mb-12 text-left max-w-2xl mx-auto">
            <ul className="space-y-4">
              {setupSteps.map((step, idx) => (
                <li key={idx} className="flex items-start gap-4">
                  <span className="w-6 h-6 bg-[#10B981] text-white flex items-center justify-center font-bold text-xs flex-shrink-0">
                    {idx + 1}
                  </span>
                  <span className="text-slate-200">{step}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Selling Points */}
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-12">
            {sellingPoints.map((point, idx) => (
              <div
                key={idx}
                className="flex items-center justify-center gap-2 px-4 py-3 bg-white/5 border border-white/10"
              >
                <span className="text-xl">{point.icon}</span>
                <span className="text-sm text-slate-200">{point.text}</span>
              </div>
            ))}
          </div>

          {/* CTA */}
          <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">
              {isAr ? "ابدأ تجربتك المجانية" : "Start Your Free Trial"}
            </span>
            <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
          </Link>
        </div>
      </section>

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