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

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

  const serviceTypes = [
    {
      title: "Electronics & Gadgets",
      desc: "Phones, computers, and accessories",
    },
    { title: "Fashion & Apparel", desc: "Clothing, shoes, and jewelry" },
    { title: "Home & Furniture", desc: "Decor, appliances, and furnishings" },
    { title: "Health & Beauty", desc: "Cosmetics, skincare, and wellness" },
    { title: "Sports & Outdoors", desc: "Equipment, apparel, and gear" },
    {
      title: "Books & Stationery",
      desc: "Office supplies and educational materials",
    },
    { title: "Toys & Games", desc: "Kids products and entertainment" },
    { title: "Jewelry & Watches", desc: "Luxury items and accessories" },
    { title: "Pet Supplies", desc: "Food, toys, and care products" },
    { title: "Grocery & Gourmet", desc: "Food items and specialty products" },
    { title: "Auto Parts", desc: "Vehicle accessories and parts" },
    { title: "Gift Shops", desc: "Souvenirs and special occasion items" },
  ];

  const coreFeatures = [
    {
      title: "WhatsApp Sales Agent",
      desc: "Answers questions, takes orders, shares pay links",
      features: [
        "Instant response to product enquiries 24/7",
        "Create orders and send secure payment links",
        "Smart product recommendations based on interests",
      ],
    },
    {
      title: "Voice Agent for Orders",
      desc: "Phone orders in EN/AR",
      features: [
        "Accept phone orders automatically",
        "Schedule service appointments and maintenance",
        "Confirm orders and send details via message",
      ],
    },
    {
      title: "Service Bookings with Deposits",
      desc: "For repairs, installations, consultations",
      features: [
        "Schedule service appointments and consultations",
        "Collect deposits to secure bookings",
        "Automatic reminders and rescheduling options",
      ],
    },
    {
      title: "Retail Checkout & POS",
      desc: "One-tap payments, warranties, bundles",
      features: [
        "Seamless checkout via Stripe or Apple/Google Pay",
        "Upsell warranties and accessories",
        "Bundle offers and bulk discounts",
      ],
    },
    {
      title: "CRM & Loyalty Programs",
      desc: "Customer profiles, points, segments",
      features: [
        "Comprehensive customer records and purchase history",
        "Customizable points and rewards programs",
        "Customer segmentation for targeted marketing",
      ],
    },
    {
      title: "Broadcasts & Journeys",
      desc: "Consent-aware campaigns, win-back, reminders",
      features: [
        "Consent-compliant promotional messages",
        "Win-back campaigns for inactive customers",
        "Automated customer journeys (welcome, follow-up)",
      ],
    },
  ];

  const journeySteps = [
    {
      title: "Discovery",
      desc: "Customer sees your product or service on social media",
    },
    {
      title: "Enquiry",
      desc: "Sends WhatsApp message or calls to ask questions",
    },
    {
      title: "Recommendation",
      desc: "Smart agent suggests suitable products or services",
    },
    { title: "Payment", desc: "Seamless payment via link or in-store" },
    { title: "Fulfillment", desc: "Delivery, pickup, or service execution" },
    {
      title: "Follow-up",
      desc: "Loyalty points, reviews, personalized offers",
    },
  ];

  const analytics = [
    { title: "Sales Revenue", desc: "Track daily, weekly, and monthly sales" },
    {
      title: "Conversion Rates",
      desc: "From enquiry to order to repeat customer",
    },
    { title: "Top Products", desc: "Best-selling products and services" },
    { title: "Customer LTV", desc: "Average spend per customer over time" },
    {
      title: "Response Time",
      desc: "Speed of response to enquiries and orders",
    },
    { title: "Loyalty Points", desc: "Points earned and redeemed by customer" },
  ];

  const integrations = [
    { title: "Payments", desc: "Stripe, Checkout, Tap Payments, POS systems" },
    { title: "Messaging", desc: "WhatsApp Business API, SMS, Email" },
    { title: "E-commerce", desc: "Shopify, WooCommerce, your inventory" },
    { title: "Accounting", desc: "QuickBooks, Xero, Zoho Books" },
    { title: "Delivery", desc: "Aramex, Smsa, local delivery partners" },
    { title: "Scheduling", desc: "Google Calendar, Outlook, booking systems" },
  ];

  const faqs = [
    {
      q: "How does Mawidi help increase sales?",
      a: "We convert every enquiry into a sales opportunity through instant response, smart recommendations, and seamless checkout. Smart agents are available 24/7 and never miss an opportunity.",
    },
    {
      q: "Can it be used for both e-commerce and physical stores?",
      a: "Yes! Mawidi works seamlessly with both. You can manage online orders, in-store service bookings, and even integrate with existing POS systems.",
    },
    {
      q: "What types of services does it support?",
      a: "Repairs, installations, consultations, maintenance, training, design — any service that needs scheduling and appointment management.",
    },
    {
      q: "How does the loyalty program work?",
      a: "Customers earn points automatically with each purchase, which they can redeem for discounts or free products. You control the rules and rewards.",
    },
    {
      q: "Is there Arabic language support?",
      a: "Full Arabic/English bilingual support with RTL interface. Agents respond in customer's preferred language.",
    },
    {
      q: "What payment methods are supported?",
      a: "Stripe, Apple Pay, Google Pay, Tap Payments, and integration with your existing POS for in-store transactions.",
    },
  ];

  const getStartedSteps = [
    { title: "Sign up & setup", desc: "Create account, add business info" },
    {
      title: "Connect & integrate",
      desc: "Link WhatsApp, payments, existing systems",
    },
    {
      title: "Customize responses",
      desc: "Design menus and messages in your style",
    },
    {
      title: "Launch & grow",
      desc: "Share your WhatsApp and start receiving orders",
    },
  ];

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* Section 01: Hero */}
      <section className="relative bg-gradient-to-b from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] opacity-30" />

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
          {/* Section Label */}
          <div className="flex items-center gap-4 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              01
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <span className="text-[#64748B] text-sm tracking-wide uppercase">
              For Retail & Services
            </span>
          </div>

          <div className="max-w-4xl">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight mb-8 leading-[1.1]">
              Turn Enquiries Into Sales via WhatsApp
            </h1>

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

            <p className="text-sm text-[#64748B] border-l-2 border-[#10B981] pl-4 mb-10 max-w-2xl">
              <span className="font-semibold text-[#1E293B]">
                B2B Platform:
              </span>{" "}
              Mawidi doesn&apos;t sell retail products directly. We equip your
              business with WhatsApp & Voice agents, checkout, CRM, and loyalty
              programs.
            </p>

            {/* Stats Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-px bg-slate-200 mb-10">
              {[
                {
                  num: "01",
                  label: "Sales Increase",
                  value: "+42%",
                  note: "average",
                },
                {
                  num: "02",
                  label: "Time Saved",
                  value: "15h",
                  note: "weekly",
                },
                {
                  num: "03",
                  label: "Customer LTV",
                  value: "+31%",
                  note: "higher",
                },
                {
                  num: "04",
                  label: "Satisfaction",
                  value: "4.8/5",
                  note: "rating",
                },
              ].map((stat) => (
                <div key={stat.num} className="bg-white p-6">
                  <div className="flex items-center gap-2 mb-2">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {stat.num}
                    </span>
                    <span className="text-[#64748B] text-xs uppercase tracking-wide">
                      {stat.label}
                    </span>
                  </div>
                  <div className="text-3xl md:text-4xl font-bold text-[#1E293B]">
                    {stat.value}
                  </div>
                  <p className="text-sm text-[#64748B]">{stat.note}</p>
                </div>
              ))}
            </div>

            {/* CTAs */}
            <div className="flex flex-col sm:flex-row gap-4 mb-8">
              <Link
                href={`/${params.lang}/signup`}
                className="group relative inline-flex items-center justify-center px-8 py-4 bg-[#10B981] text-white font-semibold overflow-hidden transition-all hover:shadow-lg"
              >
                <span className="relative z-10">
                  {t.retailServicesCTAStart}
                </span>
                <div className="absolute inset-0 bg-[#0D9668] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/demo`}
                className="group inline-flex items-center justify-center px-8 py-4 border-2 border-[#1E293B] text-[#1E293B] font-semibold hover:bg-[#1E293B] hover:text-white transition-all"
              >
                {t.retailServicesCTADemo}
              </Link>
              <a
                href={`https://wa.me/${SITE.contact.whatsapp}`}
                target="_blank"
                rel="noopener noreferrer"
                className="group inline-flex items-center gap-2 px-6 py-4 text-[#1E293B] font-medium"
              >
                WhatsApp Consultation
                <div className="w-0 group-hover:w-6 h-0.5 bg-[#10B981] transition-all duration-300" />
              </a>
            </div>

            <p className="text-sm text-[#64748B]">
              {t.retailServicesTrustBadge}
            </p>
          </div>
        </div>
      </section>

      {/* Section 02: Who This Is For */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                Who This Is For
              </h2>
              <p className="text-[#64748B] mt-2">
                One platform for all retail categories
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 lg:grid-cols-4 gap-px bg-slate-200">
            {serviceTypes.map((type, idx) => (
              <div
                key={type.title}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-xs mb-3 block"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <h3 className="font-semibold text-[#1E293B] mb-2">
                  {type.title}
                </h3>
                <p className="text-sm text-[#64748B]">{type.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 03: Core Features */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                03
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                What Mawidi Enables
              </h2>
              <p className="text-[#64748B] mt-2">
                6 features that transform your retail business
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {coreFeatures.map((feature, idx) => (
              <div
                key={feature.title}
                className="group bg-white p-8 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {feature.title}
                  </h3>
                </div>
                <p className="text-[#64748B] mb-4">{feature.desc}</p>
                <ul className="space-y-2">
                  {feature.features.map((item) => (
                    <li
                      key={item}
                      className="flex items-start gap-2 text-sm text-[#64748B]"
                    >
                      <span className="w-1.5 h-1.5 bg-[#10B981] rounded-full mt-2 flex-shrink-0" />
                      {item}
                    </li>
                  ))}
                </ul>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

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

          <div className="space-y-0">
            {journeySteps.map((step, idx) => (
              <div
                key={step.title}
                className="group flex items-start gap-6 py-6 border-b border-slate-200 last:border-0 hover:bg-[#FAFAFA] px-4 -mx-4 transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-lg font-bold"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-[#1E293B] mb-1">
                    {step.title}
                  </h3>
                  <p className="text-[#64748B]">{step.desc}</p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-3 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 05: Analytics */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                Analytics & Insights
              </h2>
              <p className="text-[#64748B] mt-2">
                Make better decisions based on real data
              </p>
            </div>
          </div>

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

          {/* Owner Digest */}
          <div className="border border-slate-200 bg-white p-8">
            <div className="flex items-center gap-3 mb-4">
              <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                07
              </span>
              <h3 className="text-xl font-semibold text-[#1E293B]">
                Daily Owner Digest
              </h3>
            </div>
            <p className="text-[#64748B] mb-4">
              Receive daily report on your business performance
            </p>
            <div className="bg-[#FAFAFA] p-6 font-mono text-sm text-[#64748B]">
              &quot;Today: 24 orders, SAR 12,500. Top product: Device X (8
              sales). 6 new customers. Loyalty: 450 earned, 180 redeemed.
              WhatsApp: 31 chats, 18 orders.&quot;
            </div>
          </div>
        </div>
      </section>

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

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

      {/* Section 07: Security */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4 mb-8">
            <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]">
              Security & Privacy
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-px bg-slate-200">
            {[
              {
                title: "End-to-end encryption",
                desc: "Data encrypted at rest and in transit",
              },
              {
                title: "GCC compliant",
                desc: "Meets regional data protection regulations",
              },
              {
                title: "Consent management",
                desc: "Track and manage marketing consents",
              },
              {
                title: "Secure payments",
                desc: "PCI-DSS compliant payment processing",
              },
            ].map((item, idx) => (
              <div
                key={item.title}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
              >
                <div className="flex items-center gap-2 mb-3">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <span className="text-[#10B981]">
                    <svg
                      className="w-5 h-5"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                      />
                    </svg>
                  </span>
                </div>
                <p className="text-sm text-[#64748B]">{item.title}</p>
                <p className="text-xs text-[#94A3B8] mt-1">{item.desc}</p>
              </div>
            ))}
          </div>

          <p className="text-sm text-[#64748B] mt-6 border-l-2 border-[#10B981] pl-4">
            <span className="font-semibold">Safety Note:</span> Never send bank
            or card details in chat—use the secure payment link.
          </p>
        </div>
      </section>

      {/* Section 08: FAQs */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center gap-4 mb-8">
            <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]">
              FAQs
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {faqs.map((faq, idx) => (
              <div
                key={faq.q}
                className="group bg-white p-6 hover:bg-[#FAFAFA] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-xs mb-3 block"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <div>
                  <h3 className="font-semibold text-[#1E293B] mb-2">{faq.q}</h3>
                  <p className="text-sm text-[#64748B]">{faq.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

          <div className="space-y-0">
            {getStartedSteps.map((step, idx) => (
              <div
                key={step.title}
                className="group flex items-start gap-6 py-6 border-b border-slate-300 last:border-0 hover:bg-white px-4 -mx-4 transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-lg font-bold"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <div className="flex-1">
                  <h3 className="text-xl font-semibold text-[#1E293B] mb-1">
                    {step.title}
                  </h3>
                  <p className="text-[#64748B]">{step.desc}</p>
                </div>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-3 transition-all duration-300" />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 10: Final CTA */}
      <section className="py-24 bg-white border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <span
            className="text-[#10B981] font-mono text-sm tracking-wider mb-6 block"
            dir="ltr"
          >
            10
          </span>

          <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
            Ready to Turn Enquiries Into Sales?
          </h2>

          <p className="text-xl text-[#64748B] mb-8 max-w-2xl mx-auto">
            Join hundreds of retail businesses growing with Mawidi
          </p>

          {/* ROI Box */}
          <div className="inline-block border border-slate-200 p-8 mb-10">
            <h3 className="text-sm uppercase tracking-wide text-[#64748B] mb-2">
              Average ROI for Our Clients
            </h3>
            <div className="text-5xl md:text-6xl font-bold text-[#10B981]">
              310%
            </div>
            <p className="text-sm text-[#64748B] mt-2">
              Within the first 6 months
            </p>
          </div>

          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <Link
              href={`/${params.lang}/signup`}
              className="group relative inline-flex items-center justify-center px-10 py-5 bg-[#10B981] text-white font-semibold text-lg overflow-hidden transition-all hover:shadow-lg"
            >
              <span className="relative z-10">{t.retailServicesCTAStart}</span>
              <div className="absolute inset-0 bg-[#0D9668] translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
            </Link>
            <Link
              href={`/${params.lang}/demo`}
              className="group inline-flex items-center justify-center px-10 py-5 border-2 border-[#1E293B] text-[#1E293B] font-semibold text-lg hover:bg-[#1E293B] hover:text-white transition-all"
            >
              {t.retailServicesCTADemo}
            </Link>
            <Link
              href={`/${params.lang}/contact`}
              className="group inline-flex items-center gap-2 px-8 py-5 text-[#1E293B] font-medium"
            >
              Talk to Sales
              <div className="w-0 group-hover:w-6 h-0.5 bg-[#10B981] transition-all duration-300" />
            </Link>
          </div>

          <p className="text-sm text-[#64748B]">
            No credit card required &bull; Instant setup &bull; 24/7 support
          </p>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd
        industry="retail-services"
        lang={params.lang}
        faqs={faqs.map((f) => ({ question: f.q, answer: f.a }))}
      />
    </main>
  );
}