import Link from "next/link";
import { Metadata } from "next";

import ExperienceShowcase from "@/components/about/ExperienceShowcase";
import TrustedMarquee from "@/components/TrustedMarquee";
import { SITE, UI, type Lang } from "@/lib/config";
import { TEAM_MEMBERS } from "@/lib/config/content/team";
import { FEATURES } from "@/lib/config/content/features";

export const revalidate = SITE.revalidateSeconds;

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

export async function generateMetadata({
  params,
}: {
  params: { lang: Lang };
}): Promise<Metadata> {
  const { lang } = params;
  const isAr = lang === "ar";

  return {
    title: isAr ? `عن موعدي | ${SITE.brand}` : `About Mawidi | ${SITE.brand}`,
    description: isAr
      ? "تعرف على موعدي - المنصة الرائدة لإدارة المواعيد الطبية في دول الخليج. رؤيتنا، مهمتنا، وفريقنا المتخصص."
      : "Learn about Mawidi - The leading medical appointment management platform in the GCC. Our vision, mission, and expert team.",
    alternates: {
      canonical: `/${lang}/about`,
      languages: {
        ar: "/ar/about",
        en: "/en/about",
      },
    },
  };
}

export default function AboutPage({ params }: { params: { lang: Lang } }) {
  const isAr = params.lang === "ar";
  const dir = isAr ? "rtl" : "ltr";

  const copy = isAr
    ? {
        title: "عن موعدي",
        tagline: "وكلاء ذكاء اصطناعي يديرون المحادثات والطلبات والحجوزات.",
        ctaPrimary: "تحدث مع الفريق",
        ctaSecondary: "اكتشف كيف نعمل",
        lede: "مع موعدي تحصل الأعمال على وكلاء صوتيين ونصيين يحولون المكالمات والرسائل إلى حجوزات مدفوعة، مع تصعيد سلس للحالات التي تتطلب حضور الإنسان.",
        visionTitle: "رؤيتنا",
        vision:
          "تمكين كل عمل في الخليج من تقديم خدمة عملاء تعمل طوال الأسبوع بوكلاء يفهمون اللهجات ويعززون الثقة.",
        missionTitle: "رسالتنا",
        mission:
          "نربط نماذج الصوت والرسائل العربية بعمليات الأعمال ليتحول كل تواصل إلى طلب أو حجز مؤكد مع متابعة بشرية عند الحاجة.",
        showcaseTitle: "عايش تجربة موعدي داخل رحلات العملاء الفعلية",
        showcaseSubtitle:
          "اختر قطاعك لترى كيف يدير وكلاؤنا الذكاء الاصطناعي الحوار والحجز في الزمن الحقيقي.",
        showcaseItems: [
          {
            id: "health-care",
            label: "الصحة والرعاية",
            headline: "إدارة شاملة للعيادات والمراكز الطبية",
            description:
              "عيادات، أسنان، علاج طبيعي، بصريات، صيدليات، وعيادات بيطرية. وكلاء موعدي يديرون الحجوزات، يتحققون من التأمين، ويرسلون التذكيرات تلقائياً.",
            stat: "92٪",
            statCaption: "نسبة الحضور بعد التذكيرات",
            image: "/images/sectors/healthcare.svg",
            imageAlt: "نظام إدارة المواعيد الطبية بواسطة موعدي.",
          },
          {
            id: "beauty-wellness",
            label: "الجمال والعافية",
            headline: "ارتقِ بتجربة العملاء في مراكز التجميل",
            description:
              "صالونات، سبا، نوادي رياضية ولياقة بدنية. حجوزات فورية، باقات علاجية، متابعة ما بعد الجلسات، وبرامج ولاء متكاملة.",
            stat: "+45٪",
            statCaption: "زيادة في معدل إعادة الحجز",
            image: "/images/sectors/beauty.svg",
            imageAlt: "إدارة حجوزات مراكز التجميل عبر موعدي.",
          },
          {
            id: "food-leisure",
            label: "الطعام والترفيه",
            headline: "املأ طاولاتك وقاعاتك بكفاءة عالية",
            description:
              "مطاعم، مقاهي، توصيل طعام، ترفيه، سياحة. حجوزات الطاولات، قوائم الانتظار، طلبات التوصيل، وتنسيق الفعاليات.",
            stat: "أسرع 6 مرات",
            statCaption: "في معالجة الحجوزات",
            image: "/images/sectors/food.svg",
            imageAlt: "نظام حجوزات المطاعم والمقاهي بواسطة موعدي.",
          },
          {
            id: "retail-services",
            label: "التجزئة والخدمات",
            headline: "حوّل الاستفسارات إلى مبيعات فورية",
            description:
              "متاجر، تجارة إلكترونية، إلكترونيات، أثاث، خدمات قانونية، محاسبة، تأمين، تعليم. ردود فورية، روابط دفع، وتنسيق التسليم.",
            stat: "زيادة 3 مرات",
            statCaption: "في معدل التحويل",
            image: "/images/sectors/retail.svg",
            imageAlt: "منصة التجارة الإلكترونية المدارة بواسطة موعدي.",
          },
          {
            id: "property-facilities",
            label: "العقارات والمرافق",
            headline: "أتمتة إدارة العقارات والصيانة",
            description:
              "عقارات، إيجارات، صيانة الممتلكات، تأجير المكاتب. جدولة المعاينات، متابعة العقود، طلبات الصيانة، وإدارة المستأجرين.",
            stat: "-70٪",
            statCaption: "تقليل وقت الاستجابة",
            image: "/images/sectors/property.svg",
            imageAlt: "نظام إدارة العقارات عبر موعدي.",
          },
          {
            id: "mobility-industry",
            label: "النقل والصناعة",
            headline: "تبسيط العمليات الصناعية واللوجستية",
            description:
              "مركبات، نقل ولوجستيات، إنشاءات، تصنيع، مرافق، تجارة جملة، آلات، تصنيع، مشروبات. جدولة الخدمات وتتبع الشحنات.",
            stat: "+85٪",
            statCaption: "كفاءة العمليات",
            image: "/images/sectors/industry.svg",
            imageAlt: "حلول النقل والصناعة بواسطة موعدي.",
          },
        ],
        flowTitle: "من الترحيب إلى الحجز المدفوع خلال دقائق",
        flowBody:
          "شاهد التنسيق بين وكلاء موعدي وأنظمتك وفريقك البشري داخل مخطط زمني واحد.",
        flowHighlights: [
          "يفهم اللهجة والنية في أقل من خمس ثوان ويختار التدفق المناسب.",
          "يزامن الحجوزات والمدفوعات والملاحظات مع أنظمة CRM أو PMS دون تحديث يدوي.",
          "يصعد الحالات المعقدة مع ملخصات منظمة لكي يتصرف البشر فوراً.",
        ],
        flowImageAlt: "مخطط زمني يوضح كيف تنسق موعدي محادثات العملاء.",
        proofHeading: "الفرق تعتمد على موعدي لحماية كل لحظة مع العميل.",
        proofBody:
          "نتعاون مع علامات الضيافة والعيادات وشبكات الخدمات في الخليج لتقديم تجربة كونسيرج على مدار الساعة.",
        featuresTitle: "ماذا نقدم",
        features: FEATURES.ar,
        storyTitle: "قصتنا",
        story: [
          "ولدت موعدي عندما شعر محمد عاصم، مؤسسنا والرئيس التنفيذي، بالإحباط من خسارة الأعمال للإيرادات لأن الرسائل على واتساب والمكالمات الهاتفية لا تتلقى ردوداً في الوقت المناسب. رأى الفرق تتأرجح بين تطبيقات متعددة بينما ينتظر العملاء إجابات أساسية.",
          "جَمَعنا باحثي صوت وخبراء تشغيل ومختصين في اللهجات العربية لبناء وكلاء يستمعون بذكاء، ويفهمون السياق التشغيلي، ويحوّلون كل تفاعل إلى قيمة ملموسة للأعمال.",
          "اليوم تنسق منصة موعدي المحادثات الواردة والصادرة عبر الدردشة والصوت والرسائل، وتدمج المدفوعات، وتزوّد الفرق بالشفافية اللازمة لاتخاذ قرارات لحظية.",
        ],
        roadmapTitle: "خطتنا للـ 6 – 12 شهراً القادمة",
        roadmapIntro:
          "تركز خارطة الطريق لدينا على تقديم منتجات يحبها المستخدمون وتوسيع أثر وكلائنا في دول الخليج انطلاقاً من قطر.",
        roadmap: [
          {
            title: "إطلاق مجموعة وكلاء الصوت المتكاملة",
            body: "توسيع تدفقات المكالمات الذكية لتغطية الرد على الأسئلة المتكررة، حجز المواعيد، وتحصيل الدفعات بالصوت الطبيعي.",
          },
          {
            title: "محرك تحسين الظهور والتحويل",
            body: "ابتكار طبقة SEO وأدوات حجز عبر الويب تربط المحتوى المتوافق مع محركات البحث بوكلائنا الفوريين.",
          },
          {
            title: "وكلاء الاتصال البارد وأتمتة الإنتاجية",
            body: "تسخير الذكاء الاصطناعي لزيادة الحجوزات والمتابعة وإعادة تنشيط العملاء دون أعباء على فرق الاستقبال.",
          },
          {
            title: "التوسع الخليجي والشراكات الاستراتيجية",
            body: "بدءاً من قطر ثم إلى السعودية والإمارات والبحرين عبر تعاون مع مجموعات أعمال وجهات حكومية.",
          },
        ],
        expansionTitle: "الانتشار والشراكات",
        expansion: [
          "نبدأ في قطر مع تكاملات محلية للغة العربية والإنجليزية لتقديم تجربة صوتية فورية للعملاء والمقيمين.",
          "نعمل مع المؤسسات الكبرى وشبكات الامتياز والمنظمات الحكومية لإعادة تصميم رحلات العملاء باستخدام وكلاء يفهمون المصطلحات المحلية.",
          "نفتح قنوات تعاون مع الوزارات والهيئات التنظيمية لرفع مستوى قنوات الخدمة الحكومية وتعزيز العلاقات مع الجمهور.",
        ],
        valuesTitle: "قيمنا",
        values: [
          "اللغة العربية جزء أساسي من كل تفاعل.",
          "الثقة تُبنى بالشفافية والتصعيد البشري عند الحاجة.",
          "الخصوصية والأمان افتراض لا تنازل عنه.",
        ],
        teamTitle: "فريقنا",
      }
    : {
        title: "About Mawidi",
        tagline: "AI agents that run your conversations, leads, and bookings.",
        ctaPrimary: "Talk with our team",
        ctaSecondary: "See how Mawidi works",
        lede: "Mawidi gives businesses voice and chat agents that capture orders, reservations, and payments while escalating nuanced moments to your team in seconds.",
        visionTitle: "Our Vision",
        vision:
          "Enable every GCC business to operate 24/7 service with agents who speak local dialects and earn customer trust.",
        missionTitle: "Our Mission",
        mission:
          "Fuse Arabic-first voice and messaging models with business workflows so every interaction becomes a confirmed booking or sale with seamless human handoff.",
        showcaseTitle: "Experience Mawidi in real customer journeys",
        showcaseSubtitle:
          "Toggle between industries to see how our AI concierges capture conversations, payments, and handoffs in real time.",
        showcaseItems: [
          {
            id: "health-care",
            label: "Health & Care",
            headline: "Complete management for medical facilities",
            description:
              "Clinics, dental, physio, optometry, pharmacy, veterinary. Mawidi agents handle appointments, verify insurance, and send automatic reminders.",
            stat: "92%",
            statCaption: "show-up rate after reminders",
            image: "/images/sectors/healthcare.svg",
            imageAlt:
              "Medical appointment management system powered by Mawidi.",
          },
          {
            id: "beauty-wellness",
            label: "Beauty & Wellness",
            headline: "Elevate the beauty center experience",
            description:
              "Salons, spa, gyms & fitness. Instant bookings, treatment packages, post-session follow-ups, and integrated loyalty programs.",
            stat: "+45%",
            statCaption: "increase in rebooking rate",
            image: "/images/sectors/beauty.svg",
            imageAlt: "Beauty center booking management via Mawidi.",
          },
          {
            id: "food-leisure",
            label: "Food & Leisure",
            headline: "Fill your tables and venues efficiently",
            description:
              "Restaurants, takeaways, cafés, entertainment, tourism. Table reservations, waitlists, delivery orders, and event coordination.",
            stat: "6x faster",
            statCaption: "booking processing",
            image: "/images/sectors/food.svg",
            imageAlt: "Restaurant and café reservation system by Mawidi.",
          },
          {
            id: "retail-services",
            label: "Retail & Services",
            headline: "Convert inquiries into instant sales",
            description:
              "Retail/e-commerce, electronics, furniture, legal, accounting, insurance, education. Instant responses, payment links, and delivery coordination.",
            stat: "3x uplift",
            statCaption: "in conversion rate",
            image: "/images/sectors/retail.svg",
            imageAlt: "E-commerce platform managed by Mawidi.",
          },
          {
            id: "property-facilities",
            label: "Property & Facilities",
            headline: "Automate property and maintenance management",
            description:
              "Real estate, rentals/leasing, property maintenance, office hire. Viewing schedules, contract follow-ups, maintenance requests, and tenant management.",
            stat: "-70%",
            statCaption: "reduced response time",
            image: "/images/sectors/property.svg",
            imageAlt: "Property management system via Mawidi.",
          },
          {
            id: "mobility-industry",
            label: "Mobility & Industry",
            headline: "Streamline industrial and logistics operations",
            description:
              "Motor vehicles, transport/logistics, construction, manufacturing, utilities, wholesale, machinery, fabrication, beverages. Service scheduling and shipment tracking.",
            stat: "+85%",
            statCaption: "operational efficiency",
            image: "/images/sectors/industry.svg",
            imageAlt: "Transport and industry solutions by Mawidi.",
          },
        ],
        flowTitle: "From greeting to paid booking in minutes",
        flowBody:
          "See how Mawidi agents co-pilot with your systems and team inside one clear timeline visual.",
        flowHighlights: [
          "Understands dialect and intent in under five seconds before routing to the right flow.",
          "Syncs bookings, payments, and notes with your CRM/PMS without manual updates.",
          "Escalates nuanced cases with structured summaries so humans act immediately.",
        ],
        flowImageAlt:
          "Timeline illustration showing how Mawidi coordinates customer conversations.",
        proofHeading: "Teams trust Mawidi to protect every customer moment.",
        proofBody:
          "We partner with hospitality brands, clinics, and service networks across the Gulf to deliver concierge-level support 24/7.",
        featuresTitle: "What We Deliver",
        features: FEATURES.en,
        storyTitle: "Our Story",
        story: [
          "Mawidi began when our founder and CEO, Mohammad Asim, grew tired of businesses losing revenue because WhatsApp messages and phone calls went unanswered. He watched service teams juggle dozens of apps while customers waited for basic answers.",
          "We assembled voice scientists, operations leaders, and Arabic linguists to build agents that listen intelligently, understand operational context, and transform every interaction into measurable value.",
          "Today the platform orchestrates inbound and outbound chat, voice, and payments while giving teams the transparency they need to make decisions in the moment.",
        ],
        roadmapTitle: "Next 6–12 Months",
        roadmapIntro:
          "Our roadmap focuses on shipping products people love, scaling AI agents, and expanding from Qatar across the wider Middle East.",
        roadmap: [
          {
            title: "Ship the Mawidi Voice Agent Suite",
            body: "Expand intelligent call flows to handle FAQs, schedule appointments, and take payments through natural speech.",
          },
          {
            title: "SEO & Conversion Engine",
            body: "Launch SEO-friendly landing experiences that route search traffic directly into live Mawidi agents.",
          },
          {
            title: "Cold Calling & Productivity Automations",
            body: "Deploy outreach agents that revive dormant leads, follow up on treatments, and relieve front desks of repetitive tasks.",
          },
          {
            title: "GCC Expansion & Strategic Partnerships",
            body: "Start in Qatar, then scale into Saudi Arabia, the UAE, and Bahrain alongside enterprise groups and government partners.",
          },
        ],
        expansionTitle: "Regional Impact & Partnerships",
        expansion: [
          "We are launching in Qatar with bilingual voice coverage woven into existing business systems, ensuring rapid value on day one.",
          "Our team partners with enterprises, franchise networks, and public-sector organisations to redesign customer journeys using agents fluent in local terminology.",
          "We are opening dialogues with ministries and regulators to uplift public service channels and strengthen citizen relationships.",
        ],
        valuesTitle: "Values",
        values: [
          "Arabic is woven into every interaction we craft.",
          "Trust comes from transparency and human oversight by design.",
          "Privacy and security come standard, not as add-ons.",
        ],
        teamTitle: "Our Team",
      };

  const teamMembers = TEAM_MEMBERS[params.lang];

  const stats = isAr
    ? [
        {
          value: "24/7",
          label: "تغطية عربية دائمة",
          sublabel: "عبر واتساب والصوت",
        },
        { value: "<10s", label: "متوسط سرعة الرد", sublabel: "للوكلاء الذكية" },
        { value: "⅓", label: "التكلفة", sublabel: "مقارنة بالتوظيف" },
      ]
    : [
        {
          value: "24/7",
          label: "Arabic-first coverage",
          sublabel: "across chat and voice",
        },
        {
          value: "<10s",
          label: "First-response time",
          sublabel: "from agents",
        },
        { value: "⅓", label: "The cost", sublabel: "vs. in-house shift" },
      ];

  const heroHighlights = isAr
    ? [
        "وكلاء صوتيين بلهجات الخليج لضمان حوارات طبيعية.",
        "ملخصات فورية للحالات الحساسة وتصعيد للبشر عند الحاجة.",
        "تكامل سريع مع الدفع والحجوزات الموجودة لديكم.",
      ]
    : [
        "Voice agents fluent in Gulf dialects for natural conversations.",
        "Instant summaries for sensitive cases with human escalation.",
        "Fast integrations with your existing payments and bookings.",
      ];

  const pillars = [
    { icon: "01", title: copy.visionTitle, body: copy.vision },
    { icon: "02", title: copy.missionTitle, body: copy.mission },
  ];

  const valuesIcons = ["01", "02", "03"];
  const storyPrimary = copy.story[0];
  const storyRest = copy.story.slice(1);
  const founderNames = isAr ? ["محمد عاصم"] : ["Mohammad Asim"];
  const featuresIntro = isAr
    ? "قدرات جاهزة تغطي إدارة الأسئلة والحجوزات والمدفوعات منذ اليوم الأول."
    : "Capabilities that manage FAQs, bookings, and payments from day one.";
  const valuesIntro = isAr
    ? "مبادئنا ترسخ تجارب تعتمد على الثقة والشفافية والأمان."
    : "Our principles keep every interaction transparent, trusted, and secure.";
  const finalCta = isAr
    ? {
        heading: "جاهزون لإطلاق محادثاتكم؟",
        body: "احجز جلسة تعريف أو شاهد عرضاً مباشراً لتتعرف على كيف يدعم موعدي أعمالكم على مدار الساعة.",
      }
    : {
        heading: "Ready to transform your customer conversations?",
        body: "Book a discovery call or watch a live walkthrough to see Mawidi supporting your team 24/7.",
      };

  return (
    <main className="relative overflow-hidden" dir={dir}>
      {/* ═══════════════════════════════════════════════════════════════════════
          HERO SECTION - Editorial/Magazine Style with Dramatic Typography
          Design: Asymmetric split layout, massive type contrast, geometric accents
          Brand: Using Mawidi brand-green #0F9972
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative min-h-[90vh] flex items-center">
        {/* Atmospheric Background - Layered gradients with brand tones */}
        <div className="absolute inset-0 bg-gradient-to-br from-stone-50 via-white to-[#0F9972]/5 dark:from-slate-950 dark:via-slate-900 dark:to-[#0F9972]/10" />

        {/* Geometric Grid Pattern - More refined */}
        <div
          className="absolute inset-0 opacity-[0.02] dark:opacity-[0.04]"
          style={{
            backgroundImage: `
              linear-gradient(to right, currentColor 1px, transparent 1px),
              linear-gradient(to bottom, currentColor 1px, transparent 1px)
            `,
            backgroundSize: "80px 80px",
          }}
        />

        {/* Diagonal accent line */}
        <div className="absolute top-0 right-0 w-[60%] h-full bg-gradient-to-l from-[#0F9972]/[0.03] to-transparent dark:from-[#0F9972]/[0.08] pointer-events-none" />

        {/* Accent Blob - Brand green */}
        <div className="absolute top-20 -right-40 w-[600px] h-[600px] rounded-full bg-gradient-to-br from-[#0F9972]/20 via-teal-100/20 to-transparent blur-3xl dark:from-[#0F9972]/15 dark:via-teal-900/10" />
        <div className="absolute -bottom-20 -left-40 w-[500px] h-[500px] rounded-full bg-gradient-to-tr from-amber-100/30 via-orange-50/10 to-transparent blur-3xl dark:from-amber-900/10 dark:via-orange-950/5" />

        <div className="relative max-w-7xl mx-auto px-5 py-24 md:px-8 lg:py-32">
          <div className="grid gap-16 lg:grid-cols-[1.4fr_1fr] lg:gap-20 items-center">
            {/* Left Column - Content */}
            <div className="space-y-10">
              {/* Overline Badge */}
              <div className="inline-flex items-center gap-3">
                <span className="h-px w-12 bg-brand-green" />
                <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green dark:text-[#0F9972]">
                  {copy.tagline}
                </span>
              </div>

              {/* Massive Title - 5rem+ for impact */}
              <h1 className="text-5xl md:text-6xl lg:text-7xl xl:text-8xl font-black tracking-tight text-stone-900 dark:text-white leading-[0.9]">
                {copy.title}
              </h1>

              {/* Lede - Generous size and line height */}
              <p className="text-xl md:text-2xl text-stone-600 dark:text-stone-300 leading-relaxed max-w-2xl font-light">
                {copy.lede}
              </p>

              {/* CTA Buttons - Sharp, not rounded pills */}
              <div className="flex flex-wrap gap-4 pt-4">
                <Link
                  href={`/${params.lang}/contact`}
                  className="group inline-flex items-center gap-3 bg-brand-green text-white px-8 py-4 text-base font-semibold transition-all hover:gap-5 hover:bg-brand-greenHover"
                >
                  {copy.ctaPrimary}
                  <span className="transition-transform group-hover:translate-x-1">
                    &rarr;
                  </span>
                </Link>
                <Link
                  href={`/${params.lang}/how-it-works`}
                  className="group inline-flex items-center gap-3 border-2 border-stone-300 dark:border-stone-700 text-stone-700 dark:text-stone-300 px-8 py-4 text-base font-semibold transition-all hover:border-brand-green hover:text-brand-green dark:hover:border-[#0F9972] dark:hover:text-[#0F9972]"
                >
                  {copy.ctaSecondary}
                  <span className="opacity-50 group-hover:opacity-100">↗</span>
                </Link>
              </div>
            </div>

            {/* Right Column - Feature Card with Stats */}
            <div className="relative">
              {/* Offset decorative element */}
              <div className="absolute -top-6 -left-6 w-32 h-32 border-2 border-brand-green/30 dark:border-brand-green/20 opacity-50" />

              <div className="relative bg-white dark:bg-slate-900 border border-stone-200 dark:border-slate-800 shadow-2xl">
                {/* Card Header */}
                <div className="border-b border-stone-100 dark:border-slate-800 px-8 py-6">
                  <p className="text-xs font-bold tracking-[0.2em] uppercase text-brand-green">
                    {isAr ? "ماذا تحصل عليه" : "What You Get"}
                  </p>
                </div>

                {/* Card Content - Highlights */}
                <div className="p-8 space-y-6">
                  {heroHighlights.map((item, index) => (
                    <div key={item} className="flex gap-4">
                      <span className="flex-shrink-0 w-8 h-8 flex items-center justify-center bg-brand-green/10 dark:bg-brand-green/20 text-brand-green text-sm font-bold">
                        {String(index + 1).padStart(2, "0")}
                      </span>
                      <p className="text-stone-600 dark:text-stone-300 leading-relaxed">
                        {item}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Stats Row - Below hero content */}
          <div className="mt-20 pt-20 border-t border-stone-200 dark:border-slate-800">
            <div className="grid gap-8 md:grid-cols-3">
              {stats.map((stat, index) => (
                <div key={stat.value} className="group">
                  <div className="flex items-baseline gap-4 mb-2">
                    <span className="text-5xl md:text-6xl font-black text-stone-900 dark:text-white tracking-tight">
                      {stat.value}
                    </span>
                  </div>
                  <p className="text-lg font-semibold text-stone-700 dark:text-stone-200">
                    {stat.label}
                  </p>
                  <p className="text-sm text-stone-500 dark:text-stone-400">
                    {stat.sublabel}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          VISION & MISSION - Numbered editorial blocks
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-stone-100 dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="grid gap-12 md:grid-cols-2 md:gap-8">
            {pillars.map((pillar) => (
              <article key={pillar.title} className="group relative">
                {/* Large Number */}
                <span className="absolute -top-4 text-[120px] md:text-[160px] font-black text-stone-200 dark:text-slate-800 leading-none select-none opacity-60">
                  {pillar.icon}
                </span>
                <div className="relative pt-20 md:pt-28">
                  <h2 className="text-3xl md:text-4xl font-bold text-stone-900 dark:text-white mb-6">
                    {pillar.title}
                  </h2>
                  <p className="text-xl text-stone-600 dark:text-stone-300 leading-relaxed">
                    {pillar.body}
                  </p>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          EXPERIENCE SHOWCASE - Interactive industry selector
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="max-w-3xl mb-16">
            <span className="inline-flex items-center gap-3 mb-6">
              <span className="h-px w-12 bg-brand-green" />
              <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                {isAr ? "تجارب حية" : "Live Experiences"}
              </span>
            </span>
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-6 leading-tight">
              {copy.showcaseTitle}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {copy.showcaseSubtitle}
            </p>
          </div>
          <ExperienceShowcase items={copy.showcaseItems} isRtl={isAr} />
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FEATURES - Asymmetric grid with bold typography
          Using brand-green #0F9972
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-brand-green text-white overflow-hidden">
        {/* Geometric decoration - diagonal accent */}
        <div className="absolute top-0 right-0 w-1/3 h-full bg-white/5" />
        <div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-black/5" />

        {/* Grid pattern overlay */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `
              linear-gradient(to right, white 1px, transparent 1px),
              linear-gradient(to bottom, white 1px, transparent 1px)
            `,
            backgroundSize: "60px 60px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-5 md:px-8">
          <div className="max-w-2xl mb-16">
            <h2 className="text-4xl md:text-5xl font-black mb-6 leading-tight">
              {copy.featuresTitle}
            </h2>
            <p className="text-xl text-white/80 leading-relaxed">
              {featuresIntro}
            </p>
          </div>

          <div className="grid gap-px bg-white/10 md:grid-cols-2 lg:grid-cols-4">
            {[
              {
                title: UI[params.lang].t.enhancedFeature1Title,
                desc: UI[params.lang].t.enhancedFeature1Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature2Title,
                desc: UI[params.lang].t.enhancedFeature2Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature3Title,
                desc: UI[params.lang].t.enhancedFeature3Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature4Title,
                desc: UI[params.lang].t.enhancedFeature4Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature5Title,
                desc: UI[params.lang].t.enhancedFeature5Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature6Title,
                desc: UI[params.lang].t.enhancedFeature6Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature7Title,
                desc: UI[params.lang].t.enhancedFeature7Desc,
              },
              {
                title: UI[params.lang].t.enhancedFeature8Title,
                desc: UI[params.lang].t.enhancedFeature8Desc,
              },
            ].map((feature, index) => (
              <article
                key={index}
                className="group p-8 bg-brand-green hover:bg-brand-greenHover transition-colors"
              >
                <span className="block text-sm font-bold text-white/50 mb-4">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <h3 className="text-lg font-bold mb-3">{feature.title}</h3>
                <p className="text-sm text-white/70 leading-relaxed">
                  {feature.desc}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          OUR STORY - Editorial layout with pull quote
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="grid gap-16 lg:grid-cols-[1.2fr_1fr] lg:gap-24">
            <div>
              <span className="inline-flex items-center gap-3 mb-8">
                <span className="h-px w-12 bg-brand-green" />
                <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                  {isAr ? "البداية" : "The Beginning"}
                </span>
              </span>
              <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-10 leading-tight">
                {copy.storyTitle}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 leading-relaxed mb-8">
                {storyPrimary}
              </p>
              {storyRest.map((paragraph, index) => (
                <p
                  key={index}
                  className="text-lg text-stone-500 dark:text-stone-400 leading-relaxed mb-6"
                >
                  {paragraph}
                </p>
              ))}
            </div>

            {/* Pull Quote / Visual Element */}
            <div className="relative lg:pt-24">
              <div className="sticky top-32">
                <div className="bg-stone-100 dark:bg-slate-800 p-10 border-l-4 border-brand-green">
                  <blockquote className="text-2xl md:text-3xl font-light text-stone-700 dark:text-stone-200 leading-relaxed italic">
                    {isAr
                      ? '"لا يجب أن تضيع أي محادثة مع العميل بسبب عدم توفر شخص للرد."'
                      : '"No customer conversation should be lost because no one was there to answer."'}
                  </blockquote>
                  <footer className="mt-6 text-sm font-semibold text-brand-green">
                    — {isAr ? "محمد عاصم، المؤسس" : "Mohammad Asim, Founder"}
                  </footer>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FLOW SECTION - How it works timeline
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-stone-50 dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="grid gap-16 lg:grid-cols-2 items-center">
            <div>
              <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-8 leading-tight">
                {copy.flowTitle}
              </h2>
              <p className="text-xl text-stone-600 dark:text-stone-300 leading-relaxed mb-10">
                {copy.flowBody}
              </p>
              <ul className="space-y-6">
                {copy.flowHighlights.map((highlight, index) => (
                  <li key={index} className="flex gap-5">
                    <span className="flex-shrink-0 w-10 h-10 flex items-center justify-center bg-brand-green text-white text-sm font-bold">
                      {String(index + 1).padStart(2, "0")}
                    </span>
                    <p className="text-lg text-stone-600 dark:text-stone-300 leading-relaxed pt-2">
                      {highlight}
                    </p>
                  </li>
                ))}
              </ul>
            </div>

            {/* Timeline Visualization */}
            <div className="relative">
              <div className="bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700 p-8 shadow-xl">
                <h3 className="text-lg font-bold text-stone-900 dark:text-white mb-8 text-center">
                  {isAr ? "رحلة العميل الذكية" : "Smart Customer Journey"}
                </h3>

                {/* Compact Timeline */}
                <div className="space-y-4">
                  {[
                    {
                      time: "0:00",
                      label: isAr ? "استقبال الرسالة" : "Message Received",
                      color: "bg-brand-green",
                    },
                    {
                      time: "0:03",
                      label: isAr
                        ? "فهم الطلب بالذكاء الاصطناعي"
                        : "AI Processing",
                      color: "bg-blue-500",
                    },
                    {
                      time: "0:08",
                      label: isAr ? "تزامن مع الأنظمة" : "System Sync",
                      color: "bg-amber-500",
                    },
                    {
                      time: "0:15",
                      label: isAr ? "إرسال رابط الدفع" : "Payment Link Sent",
                      color: "bg-violet-500",
                    },
                    {
                      time: "0:30",
                      label: isAr ? "تأكيد الحجز" : "Booking Confirmed",
                      color: "bg-brand-greenHover",
                    },
                  ].map((step, index) => (
                    <div key={index} className="flex items-center gap-4">
                      <span className="w-16 text-sm font-mono text-stone-500 dark:text-stone-400">
                        {step.time}
                      </span>
                      <span className={`w-3 h-3 rounded-full ${step.color}`} />
                      <span className="text-stone-700 dark:text-stone-300 font-medium">
                        {step.label}
                      </span>
                    </div>
                  ))}
                </div>

                {/* Summary Stats */}
                <div className="grid grid-cols-3 gap-4 mt-8 pt-8 border-t border-stone-200 dark:border-slate-700">
                  <div className="text-center">
                    <div className="text-2xl font-black text-brand-green">
                      &lt;30s
                    </div>
                    <div className="text-xs text-stone-500 dark:text-stone-400">
                      {isAr ? "الوقت الإجمالي" : "Total Time"}
                    </div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-black text-blue-600">
                      100%
                    </div>
                    <div className="text-xs text-stone-500 dark:text-stone-400">
                      {isAr ? "أتمتة" : "Automated"}
                    </div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-black text-violet-600">
                      24/7
                    </div>
                    <div className="text-xs text-stone-500 dark:text-stone-400">
                      {isAr ? "متاح" : "Available"}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          ROADMAP - Horizontal timeline with cards
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="max-w-3xl mb-16">
            <span className="inline-flex items-center gap-3 mb-6">
              <span className="h-px w-12 bg-brand-green" />
              <span className="text-xs font-bold tracking-[0.3em] uppercase text-brand-green">
                {isAr ? "المستقبل" : "The Future"}
              </span>
            </span>
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-6 leading-tight">
              {copy.roadmapTitle}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {copy.roadmapIntro}
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
            {copy.roadmap.map((item, index) => (
              <article
                key={item.title}
                className="group relative bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700 p-8 hover:border-brand-green dark:hover:border-brand-green transition-colors"
              >
                <span className="block text-4xl font-black text-stone-200 dark:text-slate-700 mb-4">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                  {item.title}
                </h3>
                <p className="text-stone-600 dark:text-stone-300 leading-relaxed">
                  {item.body}
                </p>
                {/* Bottom accent line */}
                <div className="absolute bottom-0 left-0 w-0 h-1 bg-brand-green group-hover:w-full transition-all duration-500" />
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          EXPANSION - Regional presence
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-stone-900 dark:bg-slate-950 text-white">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <h2 className="text-4xl md:text-5xl font-black mb-16 leading-tight">
            {copy.expansionTitle}
          </h2>
          <div className="grid gap-8 md:grid-cols-3">
            {copy.expansion.map((paragraph, index) => (
              <div key={index} className="border-t border-stone-700 pt-8">
                <span className="block text-5xl font-black text-stone-700 mb-6">
                  {String(index + 1).padStart(2, "0")}
                </span>
                <p className="text-lg text-stone-300 leading-relaxed">
                  {paragraph}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          SECTORS SERVED - Compact cards
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-6">
              {UI[params.lang].t.sectorsTitle}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {UI[params.lang].t.sectorsSubtitle}
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {[
              {
                title: UI[params.lang].t.sector1Title,
                desc: UI[params.lang].t.sector1Desc,
              },
              {
                title: UI[params.lang].t.sector2Title,
                desc: UI[params.lang].t.sector2Desc,
              },
              {
                title: UI[params.lang].t.sector3Title,
                desc: UI[params.lang].t.sector3Desc,
              },
              {
                title: UI[params.lang].t.sector4Title,
                desc: UI[params.lang].t.sector4Desc,
              },
              {
                title: UI[params.lang].t.sector5Title,
                desc: UI[params.lang].t.sector5Desc,
              },
              {
                title: UI[params.lang].t.sector6Title,
                desc: UI[params.lang].t.sector6Desc,
              },
            ].map((sector, index) => (
              <article
                key={index}
                className="group p-8 bg-stone-50 dark:bg-slate-800 border border-stone-200 dark:border-slate-700 hover:bg-brand-green/5 dark:hover:bg-brand-green/10 hover:border-brand-green/30 dark:hover:border-brand-green/30 transition-colors"
              >
                <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-3">
                  {sector.title}
                </h3>
                <p className="text-stone-600 dark:text-stone-300 leading-relaxed">
                  {sector.desc}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          IMPACT STATISTICS - Bold numbers
          Using brand-green #0F9972
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-brand-green text-white overflow-hidden">
        {/* Grid pattern overlay */}
        <div
          className="absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage: `
              linear-gradient(to right, white 1px, transparent 1px),
              linear-gradient(to bottom, white 1px, transparent 1px)
            `,
            backgroundSize: "50px 50px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-5 md:px-8">
          <div className="max-w-3xl mb-16">
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              {UI[params.lang].t.impactStatsTitle}
            </h2>
            <p className="text-xl text-white/80">
              {UI[params.lang].t.impactStatsSubtitle}
            </p>
          </div>

          <div className="grid gap-px bg-white/10 md:grid-cols-2 lg:grid-cols-3">
            {[
              {
                value: UI[params.lang].t.impactStat1,
                desc: UI[params.lang].t.impactStat1Desc,
              },
              {
                value: UI[params.lang].t.impactStat2,
                desc: UI[params.lang].t.impactStat2Desc,
              },
              {
                value: UI[params.lang].t.impactStat3,
                desc: UI[params.lang].t.impactStat3Desc,
              },
              {
                value: UI[params.lang].t.impactStat4,
                desc: UI[params.lang].t.impactStat4Desc,
              },
              {
                value: UI[params.lang].t.impactStat5,
                desc: UI[params.lang].t.impactStat5Desc,
              },
              {
                value: UI[params.lang].t.impactStat6,
                desc: UI[params.lang].t.impactStat6Desc,
              },
            ].map((stat, index) => (
              <div key={index} className="p-8 bg-brand-green">
                <div className="text-5xl md:text-6xl font-black mb-3">
                  {stat.value}
                </div>
                <p className="text-white/70">{stat.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          MILESTONES - Timeline
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-6">
              {UI[params.lang].t.milestonesTitle}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {UI[params.lang].t.milestonesSubtitle}
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
            {[
              {
                year: UI[params.lang].t.milestone1Year,
                title: UI[params.lang].t.milestone1Title,
                desc: UI[params.lang].t.milestone1Desc,
              },
              {
                year: UI[params.lang].t.milestone2Year,
                title: UI[params.lang].t.milestone2Title,
                desc: UI[params.lang].t.milestone2Desc,
              },
              {
                year: UI[params.lang].t.milestone3Year,
                title: UI[params.lang].t.milestone3Title,
                desc: UI[params.lang].t.milestone3Desc,
              },
              {
                year: UI[params.lang].t.milestone4Year,
                title: UI[params.lang].t.milestone4Title,
                desc: UI[params.lang].t.milestone4Desc,
              },
              {
                year: UI[params.lang].t.milestone5Year,
                title: UI[params.lang].t.milestone5Title,
                desc: UI[params.lang].t.milestone5Desc,
              },
              {
                year: UI[params.lang].t.milestone6Year,
                title: UI[params.lang].t.milestone6Title,
                desc: UI[params.lang].t.milestone6Desc,
              },
            ].map((milestone, index) => (
              <article key={index} className="relative">
                <span className="block text-6xl font-black text-stone-200 dark:text-slate-800 mb-2">
                  {milestone.year}
                </span>
                <h3 className="text-xl font-bold text-stone-900 dark:text-white mb-2">
                  {milestone.title}
                </h3>
                <p className="text-stone-600 dark:text-stone-400">
                  {milestone.desc}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          TRUSTED BY - Marquee
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-20 bg-stone-50 dark:bg-slate-900 border-y border-stone-200 dark:border-slate-800">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <h2 className="text-2xl font-bold text-center text-stone-900 dark:text-white mb-12">
            {copy.proofHeading}
          </h2>
          <TrustedMarquee />
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          VALUES - Three columns
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white mb-6">
              {copy.valuesTitle}
            </h2>
            <p className="text-xl text-stone-600 dark:text-stone-300">
              {valuesIntro}
            </p>
          </div>

          <div className="grid gap-8 md:grid-cols-3">
            {copy.values.map((value, index) => (
              <article key={value} className="text-center p-8">
                <span className="inline-flex items-center justify-center w-16 h-16 bg-brand-green/10 dark:bg-brand-green/20 text-brand-green text-xl font-bold mb-6">
                  {valuesIcons[index]}
                </span>
                <p className="text-lg text-stone-700 dark:text-stone-300 leading-relaxed font-medium">
                  {value}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          TEAM - Grid with founder highlight
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-stone-100 dark:bg-slate-900">
        <div className="max-w-7xl mx-auto px-5 md:px-8">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-black text-stone-900 dark:text-white">
              {copy.teamTitle}
            </h2>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            {teamMembers.slice(0, 8).map((member) => {
              const isFounder = founderNames.includes(member.name);
              return (
                <article
                  key={member.name}
                  className={`relative p-6 ${
                    isFounder
                      ? "bg-brand-green text-white md:col-span-2 lg:col-span-1"
                      : "bg-white dark:bg-slate-800 border border-stone-200 dark:border-slate-700"
                  }`}
                >
                  {isFounder && (
                    <span className="absolute top-4 right-4 text-xs font-bold tracking-wider uppercase text-white/60">
                      {isAr ? "المؤسس" : "Founder"}
                    </span>
                  )}
                  <h3
                    className={`text-xl font-bold mb-1 ${isFounder ? "" : "text-stone-900 dark:text-white"}`}
                  >
                    {member.name}
                  </h3>
                  <p
                    className={`text-sm font-semibold mb-4 ${isFounder ? "text-white/80" : "text-brand-green"}`}
                  >
                    {member.role}
                  </p>
                  <p
                    className={`text-sm leading-relaxed ${isFounder ? "text-white/70" : "text-stone-600 dark:text-stone-400"}`}
                  >
                    {member.bio}
                  </p>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* ═══════════════════════════════════════════════════════════════════════
          FINAL CTA - Clean and direct with atmospheric background
      ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative py-32 bg-stone-900 text-white overflow-hidden">
        {/* Atmospheric elements */}
        <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-brand-green/10 to-transparent" />
        <div className="absolute bottom-0 left-0 w-96 h-96 rounded-full bg-brand-green/5 blur-3xl" />

        <div className="relative max-w-4xl mx-auto px-5 md:px-8 text-center">
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-black mb-8 leading-tight">
            {finalCta.heading}
          </h2>
          <p className="text-xl text-stone-300 mb-12 max-w-2xl mx-auto">
            {finalCta.body}
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <Link
              href={`/${params.lang}/contact`}
              className="group inline-flex items-center gap-3 bg-brand-green hover:bg-brand-greenHover text-white px-10 py-5 text-lg font-semibold transition-all hover:gap-5"
            >
              {copy.ctaPrimary}
              <span className="transition-transform group-hover:translate-x-1">
                &rarr;
              </span>
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="group inline-flex items-center gap-3 border-2 border-stone-600 hover:border-brand-green text-stone-300 hover:text-white px-10 py-5 text-lg font-semibold transition-all"
            >
              {copy.ctaSecondary}
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}