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

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

  const whatMawidiEnables = [
    { title: t.psWhat1Title, desc: t.psWhat1Desc },
    { title: t.psWhat2Title, desc: t.psWhat2Desc },
    { title: t.psWhat3Title, desc: t.psWhat3Desc },
    { title: t.psWhat4Title, desc: t.psWhat4Desc },
    { title: t.psWhat5Title, desc: t.psWhat5Desc },
    { title: t.psWhat6Title, desc: t.psWhat6Desc },
  ];

  const whoThisIsFor = [
    t.psWhoFor1,
    t.psWhoFor2,
    t.psWhoFor3,
    t.psWhoFor4,
    t.psWhoFor5,
    t.psWhoFor6,
    t.psWhoFor7,
    t.psWhoFor8,
    t.psWhoFor9,
    t.psWhoFor10,
  ];

  const integrations = [
    t.psIntegration1,
    t.psIntegration2,
    t.psIntegration3,
    t.psIntegration4,
    t.psIntegration5,
    t.psIntegration6,
    t.psIntegration7,
    t.psIntegration8,
    t.psIntegration9,
  ];

  const faqs = [
    { q: t.psFAQ1Q, a: t.psFAQ1A },
    { q: t.psFAQ2Q, a: t.psFAQ2A },
    { q: t.psFAQ3Q, a: t.psFAQ3A },
    { q: t.psFAQ4Q, a: t.psFAQ4A },
    { q: t.psFAQ5Q, a: t.psFAQ5A },
  ];

  const getStartedSteps = [
    t.psGetStartedStep1,
    t.psGetStartedStep2,
    t.psGetStartedStep3,
    t.psGetStartedStep4,
    t.psGetStartedStep5,
  ];

  const securityFeatures = [
    t.psSecurityFeature1,
    t.psSecurityFeature2,
    t.psSecurityFeature3,
    t.psSecurityFeature4,
    t.psSecurityFeature5,
  ];

  const accessibilityFeatures = [
    t.psAccessFeature1,
    t.psAccessFeature2,
    t.psAccessFeature3,
  ];

  const analyticsItems = [
    t.psAnalytics1,
    t.psAnalytics2,
    t.psAnalytics3,
    t.psAnalytics4,
  ];

  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, #1E293B 1px, transparent 1px), linear-gradient(to bottom, #1E293B 1px, transparent 1px)`,
            backgroundSize: "60px 60px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-24 md:py-32">
          {/* Section number */}
          <div className="flex items-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              00
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm font-medium uppercase tracking-wider">
              {t.publicSectorTitle}
            </span>
          </div>

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

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

            <div className="flex flex-wrap gap-4">
              <Link
                href={`/${params.lang}/signup`}
                className="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#10B981] text-white font-semibold rounded-none overflow-hidden transition-all duration-300 hover:shadow-lg"
              >
                <span className="relative z-10">{t.psCtaStartFree}</span>
                <svg
                  className="w-5 h-5 relative z-10 transition-transform duration-300 group-hover:translate-x-1"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M17 8l4 4m0 0l-4 4m4-4H3"
                  />
                </svg>
                <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="group inline-flex items-center gap-3 px-8 py-4 bg-transparent text-[#1E293B] font-semibold border-2 border-[#1E293B] rounded-none transition-all duration-300 hover:bg-[#1E293B] hover:text-white"
              >
                {t.psCtaBookDemo}
              </Link>
            </div>
          </div>
        </div>

        {/* Decorative element */}
        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-[#E2E8F0] to-transparent" />
      </section>

      {/* B2B Note - Editorial Banner */}
      <section className="bg-[#F0FDF4] border-y border-[#10B981]/20">
        <div className="max-w-7xl mx-auto px-6 py-8">
          <div className="flex items-start gap-6">
            <div className="flex-shrink-0 w-12 h-12 bg-[#10B981]/10 flex items-center justify-center">
              <svg
                className="w-6 h-6 text-[#10B981]"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <div>
              <h3 className="text-lg font-bold text-[#1E293B] mb-2">
                {t.psB2BNoteTitle}
              </h3>
              <p className="text-[#64748B] leading-relaxed">{t.psB2BNote}</p>
            </div>
          </div>
        </div>
      </section>

      {/* 01 - Who This Is For */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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"
              >
                01
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psWhoForTitle}
            </h2>
          </div>

          {/* Editorial Grid */}
          <div className="grid grid-cols-2 md:grid-cols-5 gap-px bg-[#E2E8F0]">
            {whoThisIsFor.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors duration-300"
              >
                <div className="flex items-start gap-3">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="font-medium text-[#1E293B] group-hover:text-[#10B981] transition-colors duration-300">
                    {item}
                  </span>
                </div>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 02 - What Mawidi Enables */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psWhatTitle}
            </h2>
          </div>

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

      {/* 03 - Core Citizen Flows */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psCoreFlowsTitle}
            </h2>
          </div>

          <div className="space-y-6">
            {/* Flow 1: Appointments */}
            <div className="group border border-[#E2E8F0] p-8 hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  03.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.psFlow1Title}
                </h3>
              </div>
              <p className="text-[#64748B] mb-6">{t.psFlow1Use}</p>

              {/* Conversation Example */}
              <div className="bg-[#FAFAFA] p-6 mb-6">
                <div className="space-y-4 max-w-xl">
                  <div
                    className={`flex ${isAr ? "justify-start" : "justify-end"}`}
                  >
                    <div className="bg-[#10B981]/10 px-4 py-3 max-w-sm">
                      <p className="text-sm text-[#64748B] mb-1">
                        {isAr ? "مواطن:" : "Citizen:"}
                      </p>
                      <p className="text-[#1E293B]">
                        {isAr
                          ? t.psFlow1WaSnippetAr
                          : "Appointment for ID renewal next week?"}
                      </p>
                    </div>
                  </div>
                  <div
                    className={`flex ${isAr ? "justify-end" : "justify-start"}`}
                  >
                    <div className="bg-white border border-[#E2E8F0] px-4 py-3 max-w-sm">
                      <p className="text-sm text-[#64748B] mb-1">
                        {isAr ? "وكيل:" : "Agent:"}
                      </p>
                      <p className="text-[#1E293B]">{t.psFlow1WaResponseAr}</p>
                    </div>
                  </div>
                </div>
              </div>

              <ul className="space-y-2">
                {t.psFlow1Includes.split(", ").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>
            </div>

            {/* Flow 2: Applications & Permits */}
            <div className="group border border-[#E2E8F0] p-8 hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  03.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.psFlow2Title}
                </h3>
              </div>
              <p className="text-[#64748B] mb-6">{t.psFlow2Examples}</p>

              <ul className="space-y-3 mb-6">
                {[
                  t.psFlow2Step1,
                  t.psFlow2Step2,
                  t.psFlow2Step3,
                  t.psFlow2Step4,
                  t.psFlow2Step5,
                ].map((step, idx) => (
                  <li key={idx} className="flex items-start gap-3">
                    <span
                      className="text-[#10B981] font-mono text-xs mt-1"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <span className="text-[#1E293B]">{step}</span>
                  </li>
                ))}
              </ul>

              <div className="bg-[#F0FDF4] p-4 border-l-2 border-[#10B981]">
                <p className="text-[#059669]">{t.psFlow2MicrocopyAr}</p>
              </div>
            </div>

            {/* Flow 3: 311 Service Requests */}
            <div className="group border border-[#E2E8F0] p-8 hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  03.3
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.psFlow3Title}
                </h3>
              </div>
              <p className="text-[#64748B] mb-4">{t.psFlow3Examples}</p>
              <p className="text-[#1E293B] mb-6">{t.psFlow3How}</p>

              <div className="bg-[#FAFAFA] p-4 mb-4">
                <p className="text-[#1E293B]">{t.psFlow3TemplateAr}</p>
              </div>

              <div className="bg-[#FEF3C7] p-4 border-l-2 border-[#F59E0B]">
                <p className="text-[#92400E] text-sm">{t.psFlow3Note}</p>
              </div>
            </div>

            {/* Flow 4: Payments */}
            <div className="group border border-[#E2E8F0] p-8 hover:border-[#10B981] transition-colors duration-300">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  03.4
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.psFlow4Title}
                </h3>
              </div>
              <p className="text-[#64748B] mb-4">{t.psFlow4Examples}</p>
              <p className="text-[#1E293B] mb-6">{t.psFlow4Features}</p>

              <div className="bg-[#FAFAFA] p-4">
                <p className="text-[#1E293B] font-mono text-sm">
                  {t.psFlow4PaymentAr}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 04 - Accessibility & Languages */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psAccessTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-[#E2E8F0]">
            {accessibilityFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                </div>
                <p className="text-[#1E293B] leading-relaxed">{feature}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 05 - Security & Privacy */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psSecurityTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0]">
            {securityFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-start gap-3">
                  <div className="flex-shrink-0 w-8 h-8 bg-[#10B981]/10 flex items-center justify-center mt-1">
                    <svg
                      className="w-4 h-4 text-[#10B981]"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
                      />
                    </svg>
                  </div>
                  <p className="text-[#1E293B] leading-relaxed">{feature}</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>

      {/* 06 - Analytics & Outcomes */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psAnalyticsTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-[#E2E8F0] mb-8">
            {analyticsItems.map((item, idx) => (
              <div
                key={idx}
                className="group bg-white p-8 hover:bg-[#F8FAFC] transition-colors duration-300"
              >
                <div className="flex items-start gap-3">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <p className="text-[#1E293B] leading-relaxed">{item}</p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Executive Digest Sample */}
          <div className="border border-[#E2E8F0] bg-white p-8">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                05
              </span>
              <h3 className="font-semibold text-[#1E293B]">{t.psAnalytics5}</h3>
            </div>
            <div className="bg-[#F0FDF4] p-6 border-l-2 border-[#10B981]">
              <p className="text-[#059669] font-medium">{t.psDigestSampleAr}</p>
            </div>
          </div>
        </div>
      </section>

      {/* 07 - Integrations */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psIntegrationsTitle}
            </h2>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-px bg-[#E2E8F0]">
            {integrations.map((integration, idx) => (
              <div
                key={idx}
                className="group bg-white p-6 hover:bg-[#F8FAFC] transition-colors duration-300 text-center"
              >
                <span
                  className="text-[#10B981] font-mono text-xs block mb-3"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <p className="text-sm font-medium text-[#1E293B] group-hover:text-[#10B981] transition-colors duration-300">
                  {integration}
                </p>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mx-auto mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 08 - FAQs */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psFAQTitle}
            </h2>
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="group border border-[#E2E8F0] bg-white p-6 hover:border-[#10B981] transition-colors duration-300"
              >
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {faq.q}
                    </h3>
                    <p className="text-[#64748B] leading-relaxed">{faq.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 09 - Get Started */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          {/* Section Header */}
          <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>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.psGetStartedTitle}
            </h2>
          </div>

          <div className="space-y-4 mb-12">
            {getStartedSteps.map((step, idx) => (
              <div
                key={idx}
                className="group flex items-start gap-6 p-6 border border-[#E2E8F0] bg-white hover:border-[#10B981] transition-colors duration-300"
              >
                <div className="flex-shrink-0 w-10 h-10 bg-[#10B981] text-white flex items-center justify-center font-mono font-bold">
                  {String(idx + 1).padStart(2, "0")}
                </div>
                <p className="text-[#1E293B] flex-1 pt-2">{step}</p>
              </div>
            ))}
          </div>

          {/* Final CTAs */}
          <div className="flex flex-wrap justify-center gap-4 pt-8 border-t border-[#E2E8F0]">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center gap-3 px-8 py-4 bg-[#10B981] text-white font-semibold rounded-none overflow-hidden transition-all duration-300 hover:shadow-lg"
            >
              <span className="relative z-10">{t.psCtaStartFree}</span>
              <svg
                className="w-5 h-5 relative z-10 transition-transform duration-300 group-hover:translate-x-1"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M17 8l4 4m0 0l-4 4m4-4H3"
                />
              </svg>
              <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="group inline-flex items-center gap-3 px-8 py-4 bg-transparent text-[#1E293B] font-semibold border-2 border-[#1E293B] rounded-none transition-all duration-300 hover:bg-[#1E293B] hover:text-white"
            >
              {t.psCtaBookDemo}
            </Link>
          </div>
        </div>
      </section>

      {/* Closing Section */}
      <section className="py-16 bg-[#F0FDF4] border-t border-[#10B981]/20">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <p className="text-[#64748B] text-lg">
            {isAr
              ? "مواعيدي - منصة B2B لإدارة المواعيد والخدمات العامة عبر واتساب"
              : "Mawidi - B2B platform for public sector appointment and service management via WhatsApp"}
          </p>
        </div>
      </section>

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