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

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

  const whoForTypes = [
    { title: t.saWhoFor1 },
    { title: t.saWhoFor2 },
    { title: t.saWhoFor3 },
    { title: t.saWhoFor4 },
    { title: t.saWhoFor5 },
    { title: t.saWhoFor6 },
    { title: t.saWhoFor7 },
    { title: t.saWhoFor8 },
  ];

  const features = [
    { title: t.saFeature1Title, desc: t.saFeature1Desc },
    { title: t.saFeature2Title, desc: t.saFeature2Desc },
    { title: t.saFeature3Title, desc: t.saFeature3Desc },
    { title: t.saFeature4Title, desc: t.saFeature4Desc },
    { title: t.saFeature5Title, desc: t.saFeature5Desc },
    { title: t.saFeature6Title, desc: t.saFeature6Desc },
    { title: t.saFeature7Title, desc: t.saFeature7Desc },
  ];

  const bookingModels = [
    { title: t.saBookingModel1Title, desc: t.saBookingModel1Desc },
    { title: t.saBookingModel2Title, desc: t.saBookingModel2Desc },
    { title: t.saBookingModel3Title, desc: t.saBookingModel3Desc },
    { title: t.saBookingModel4Title, desc: t.saBookingModel4Desc },
    { title: t.saBookingModel5Title, desc: t.saBookingModel5Desc },
    { title: t.saBookingModel6Title, desc: t.saBookingModel6Desc },
  ];

  const membershipTiers = [
    {
      tier: t.saMembershipBasic,
      features: [
        t.saMembershipBasicFeature1,
        t.saMembershipBasicFeature2,
        t.saMembershipBasicFeature3,
      ],
    },
    {
      tier: t.saMembershipPlus,
      features: [
        t.saMembershipPlusFeature1,
        t.saMembershipPlusFeature2,
        t.saMembershipPlusFeature3,
        t.saMembershipPlusFeature4,
      ],
      popular: true,
    },
    {
      tier: t.saMembershipVIP,
      features: [
        t.saMembershipVIPFeature1,
        t.saMembershipVIPFeature2,
        t.saMembershipVIPFeature3,
        t.saMembershipVIPFeature4,
        t.saMembershipVIPFeature5,
      ],
    },
  ];

  const coachFeatures = [
    { title: t.saCoachPortalFeature1Title, desc: t.saCoachPortalFeature1Desc },
    { title: t.saCoachPortalFeature2Title, desc: t.saCoachPortalFeature2Desc },
    { title: t.saCoachPortalFeature3Title, desc: t.saCoachPortalFeature3Desc },
  ];

  const safetyFeatures = [
    t.saSafetyFeature1,
    t.saSafetyFeature2,
    t.saSafetyFeature3,
    t.saSafetyFeature4,
  ];

  const faqs = [
    { q: t.saFAQ1Q, a: t.saFAQ1A },
    { q: t.saFAQ2Q, a: t.saFAQ2A },
    { q: t.saFAQ3Q, a: t.saFAQ3A },
    { q: t.saFAQ4Q, a: t.saFAQ4A },
  ];

  const structuredFaqs = faqs.map((f) => ({ question: f.q, answer: f.a }));

  const setupSteps = [
    t.saSetupStep1,
    t.saSetupStep2,
    t.saSetupStep3,
    t.saSetupStep4,
    t.saSetupStep5,
  ];

  return (
    <main className="min-h-screen bg-white" dir={dir}>
      {/* 01 - Hero Section */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage:
              "linear-gradient(#1E293B 1px, transparent 1px), linear-gradient(90deg, #1E293B 1px, transparent 1px)",
            backgroundSize: "60px 60px",
          }}
        />

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

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

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

            <div className="flex flex-col sm:flex-row gap-4">
              <Link
                href={`/${params.lang}/signup`}
                className="group relative inline-flex items-center justify-center px-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
              >
                <span className="relative z-10">{t.saCtaStartFree}</span>
                <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
              </Link>
              <Link
                href={`/${params.lang}/demo`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#1E293B] border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
              >
                {t.saCtaBookDemo}
              </Link>
              <Link
                href={`/${params.lang}/contact`}
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#64748B] hover:text-[#1E293B] transition-colors duration-300"
              >
                {t.saCtaTalkSales}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* 02 - Who This Is For */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saWhoForTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saWhoForDesc}
              </p>
            </div>
          </div>

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

      {/* 03 - What Mawidi Enables */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saWhatEnablesTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saWhatEnablesDesc}
              </p>
            </div>
          </div>

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

      {/* 04 - WhatsApp Agent */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saWhatsAppTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saWhatsAppDesc}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <h3 className="font-semibold text-[#1E293B] mb-6">
                {t.saWhatsAppQuestionsTitle}
              </h3>
              <ul className="space-y-4 mb-8">
                {[
                  t.saWhatsAppQuestion1,
                  t.saWhatsAppQuestion2,
                  t.saWhatsAppQuestion3,
                  t.saWhatsAppQuestion4,
                ].map((q, 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]">{q}</span>
                  </li>
                ))}
              </ul>

              {/* Quick Reply Chips */}
              <h4 className="text-sm font-medium text-[#1E293B] mb-3">
                {t.saQuickReplies}
              </h4>
              <div className="flex flex-wrap gap-2">
                {[
                  t.saQuickReply1,
                  t.saQuickReply2,
                  t.saQuickReply3,
                  t.saQuickReply4,
                  t.saQuickReply5,
                  t.saQuickReply6,
                  t.saQuickReply7,
                  t.saQuickReply8,
                ].map((reply, idx) => (
                  <span
                    key={idx}
                    className="px-3 py-1 text-sm bg-white border border-[#E2E8F0] text-[#64748B] hover:border-[#10B981] transition-colors duration-300"
                  >
                    {reply}
                  </span>
                ))}
              </div>
            </div>

            {/* Sample Chat */}
            <div className="bg-white border border-[#E2E8F0] p-6">
              <div className="text-sm font-medium text-[#1E293B] mb-4">
                {t.saSampleChat}
              </div>
              <div className="space-y-3">
                <div className="bg-[#F8FAFC] rounded-lg p-3 text-sm text-[#1E293B] max-w-[80%]">
                  {t.saChatUser1}
                </div>
                <div
                  className={`bg-[#10B981]/10 rounded-lg p-3 text-sm text-[#1E293B] max-w-[80%] ${isAr ? "mr-auto" : "ml-auto"}`}
                >
                  {t.saChatAgent1}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 05 - Booking Models */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saBookingModelsTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saBookingModelsDesc}
              </p>
            </div>
          </div>

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

      {/* 06 - Timetables & Capacity */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saTimetablesTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saTimetablesDesc}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            <div>
              <ul className="space-y-4 mb-8">
                {[
                  t.saTimetablesFeature1,
                  t.saTimetablesFeature2,
                  t.saTimetablesFeature3,
                ].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 className="bg-[#10B981]/5 border border-[#10B981]/20 p-6">
                <h4 className="font-semibold text-[#1E293B] mb-2">
                  {t.saWaitlistMessageTitle}
                </h4>
                <p className="text-sm text-[#64748B] italic">
                  &ldquo;{isAr ? t.saWaitlistMessageAr : t.saWaitlistMessageEn}
                  &rdquo;
                </p>
              </div>
            </div>

            {/* Capacity Display */}
            <div className="bg-white border border-[#E2E8F0] p-8">
              <h3 className="font-semibold text-[#1E293B] mb-6">
                {t.saCapacityManagementTitle}
              </h3>
              <div className="space-y-6">
                {[
                  {
                    label: t.saCapacityClass1,
                    current: 18,
                    max: 20,
                    waitlist: 3,
                  },
                  {
                    label: t.saCapacityClass2,
                    current: 8,
                    max: 8,
                    waitlist: 5,
                  },
                  {
                    label: t.saCapacityClass3,
                    current: 12,
                    max: 15,
                    waitlist: 0,
                  },
                ].map((item, idx) => (
                  <div key={idx}>
                    <div className="flex justify-between text-sm mb-2">
                      <span className="font-medium text-[#1E293B]">
                        {item.label}
                      </span>
                      <span className="text-[#64748B]">
                        {item.current}/{item.max}{" "}
                        {item.waitlist > 0 &&
                          `(+${item.waitlist} ${t.saWaitlist})`}
                      </span>
                    </div>
                    <div className="w-full bg-[#E2E8F0] h-2">
                      <div
                        className={`h-2 ${item.current === item.max ? "bg-red-500" : "bg-[#10B981]"}`}
                        style={{ width: `${(item.current / item.max) * 100}%` }}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 07 - Memberships */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saMembershipsTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saMembershipsDesc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-8">
            {membershipTiers.map((tier, idx) => (
              <div
                key={idx}
                className={`bg-[#FAFAFA] p-8 border ${tier.popular ? "border-[#10B981]" : "border-transparent"} hover:border-[#10B981] transition-colors duration-300 relative`}
              >
                {tier.popular && (
                  <div className="absolute -top-3 left-6">
                    <span className="bg-[#10B981] text-white text-xs font-bold px-3 py-1">
                      {t.saPopular}
                    </span>
                  </div>
                )}
                <div className="flex items-center gap-3 mb-6">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    07.{idx + 1}
                  </span>
                  <h3 className="text-xl font-bold text-[#1E293B]">
                    {tier.tier}
                  </h3>
                </div>
                <ul className="space-y-3">
                  {tier.features.map((feature, fIdx) => (
                    <li key={fIdx} className="flex items-start gap-3">
                      <div className="w-1.5 h-1.5 bg-[#10B981] mt-2 flex-shrink-0" />
                      <span className="text-sm text-[#64748B]">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          <div className="bg-[#10B981]/5 border border-[#10B981]/20 p-6">
            <h4 className="font-semibold text-[#1E293B] mb-2">
              {t.saRenewalReminderTitle}
            </h4>
            <p className="text-sm text-[#64748B] italic">
              &ldquo;{isAr ? t.saRenewalReminderAr : t.saRenewalReminderEn}
              &rdquo;
            </p>
          </div>
        </div>
      </section>

      {/* 08 - Payments */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saPaymentsTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saPaymentsDesc}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            <ul className="space-y-4">
              {[
                t.saPaymentsFeature1,
                t.saPaymentsFeature2,
                t.saPaymentsFeature3,
                t.saPaymentsFeature4,
              ].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 className="bg-white border border-[#E2E8F0] p-8">
              <h3 className="font-semibold text-[#1E293B] mb-4">
                {t.saPaymentExampleTitle}
              </h3>
              <div className="bg-[#10B981]/5 border border-[#10B981]/20 p-4">
                <p className="text-sm text-[#64748B] italic mb-3">
                  &ldquo;{isAr ? t.saPaymentExampleAr : t.saPaymentExampleEn}
                  &rdquo;
                </p>
                <div className="pt-3 border-t border-[#10B981]/20">
                  <p className="text-sm text-[#10B981] font-medium">
                    {t.saPaymentFlexibleNote}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 09 - Voice Agent */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <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] mb-4">
                {t.saVoiceTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saVoiceDesc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-colors duration-300">
              <h3 className="font-semibold text-[#1E293B] mb-6">
                {t.saVoiceFeaturesTitle}
              </h3>
              <ul className="space-y-3">
                {[
                  t.saVoiceFeature1,
                  t.saVoiceFeature2,
                  t.saVoiceFeature3,
                  t.saVoiceFeature4,
                  t.saVoiceFeature5,
                ].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>

            <div className="bg-[#FAFAFA] p-8 border border-transparent hover:border-[#10B981] transition-colors duration-300">
              <h3 className="font-semibold text-[#1E293B] mb-6">
                {t.saVoiceOpeningTitle}
              </h3>
              <div className="bg-[#10B981]/5 border border-[#10B981]/20 p-4">
                <p className="text-sm text-[#64748B] italic">
                  &ldquo;{isAr ? t.saVoiceOpeningAr : t.saVoiceOpeningEn}&rdquo;
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 10 - Communications */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saCommunicationsTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saCommunicationsDesc}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-12">
            <div className="space-y-8">
              <div>
                <h3 className="font-semibold text-[#1E293B] mb-3">
                  {t.saCommunicationsInboxTitle}
                </h3>
                <p className="text-[#64748B]">{t.saCommunicationsInboxDesc}</p>
              </div>
              <div>
                <h3 className="font-semibold text-[#1E293B] mb-3">
                  {t.saCommunicationsBroadcastsTitle}
                </h3>
                <p className="text-[#64748B]">
                  {t.saCommunicationsBroadcastsDesc}
                </p>
              </div>
            </div>

            <div className="space-y-4">
              {[
                {
                  type: t.saTemplateType1,
                  message: isAr ? t.saTemplate1Ar : t.saTemplate1En,
                },
                {
                  type: t.saTemplateType2,
                  message: isAr ? t.saTemplate2Ar : t.saTemplate2En,
                },
                {
                  type: t.saTemplateType3,
                  message: isAr ? t.saTemplate3Ar : t.saTemplate3En,
                },
              ].map((template, idx) => (
                <div
                  key={idx}
                  className="bg-white border border-[#E2E8F0] p-4 hover:border-[#10B981] transition-colors duration-300"
                >
                  <span
                    className="text-[#10B981] font-mono text-xs block mb-2"
                    dir="ltr"
                  >
                    10.{idx + 1}
                  </span>
                  <p className="text-xs font-semibold text-[#64748B] mb-1">
                    {template.type}
                  </p>
                  <p className="text-sm text-[#1E293B]">{template.message}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 11 - Coach Portal */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                11
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saCoachPortalTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saCoachPortalDesc}
              </p>
            </div>
          </div>

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

          <div className="bg-amber-50 border border-amber-200 p-6">
            <p className="text-sm text-amber-800">
              <strong>{t.saCoachPortalSafetyTitle}:</strong>{" "}
              {t.saCoachPortalSafetyText}
            </p>
          </div>
        </div>
      </section>

      {/* 12 - Family CRM */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                12
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saFamilyCRMTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saFamilyCRMDesc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-8 border border-[#E2E8F0]">
              <h3 className="font-semibold text-[#1E293B] mb-4">
                {t.saFamilyProfilesTitle}
              </h3>
              <p className="text-[#64748B] mb-4 text-sm">
                {t.saFamilyProfilesDesc}
              </p>
              <ul className="space-y-2">
                {[
                  t.saFamilyProfilesFeature1,
                  t.saFamilyProfilesFeature2,
                  t.saFamilyProfilesFeature3,
                  t.saFamilyProfilesFeature4,
                ].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-sm text-[#64748B]">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white p-8 border border-[#E2E8F0]">
              <h3 className="font-semibold text-[#1E293B] mb-4">
                {t.saSegmentationTitle}
              </h3>
              <p className="text-[#64748B] mb-4 text-sm">
                {t.saSegmentationDesc}
              </p>
              <div className="space-y-2 mb-6">
                {[
                  t.saSegment1,
                  t.saSegment2,
                  t.saSegment3,
                  t.saSegment4,
                  t.saSegment5,
                ].map((segment, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <div className="w-1.5 h-1.5 bg-[#10B981]" />
                    <span className="text-sm text-[#64748B]">{segment}</span>
                  </div>
                ))}
              </div>
              <div className="bg-[#10B981]/5 border border-[#10B981]/20 p-4">
                <p className="text-sm font-semibold text-[#1E293B] mb-1">
                  {t.saWinBackTitle}
                </p>
                <p className="text-sm text-[#64748B] italic">
                  &ldquo;{isAr ? t.saWinBackAr : t.saWinBackEn}&rdquo;
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 13 - Safety & Compliance */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                13
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saSafetyTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saSafetyDesc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-px bg-[#E2E8F0] mb-8">
            {safetyFeatures.map((feature, idx) => (
              <div
                key={idx}
                className="group bg-[#FAFAFA] p-6 hover:bg-white transition-colors duration-300"
              >
                <span
                  className="text-[#10B981] font-mono text-xs block mb-4"
                  dir="ltr"
                >
                  13.{idx + 1}
                </span>
                <p className="text-sm text-[#64748B]">{feature}</p>
                <div className="w-0 group-hover:w-8 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

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

      {/* 14 - Analytics */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-start gap-4 mb-16">
            <div className="flex items-center gap-3 flex-shrink-0">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                14
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-4">
                {t.saAnalyticsTitle}
              </h2>
              <p className="text-lg text-[#64748B] max-w-2xl">
                {t.saAnalyticsDesc}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            <div className="bg-white p-8 border border-[#E2E8F0]">
              <h3 className="font-semibold text-[#1E293B] mb-6">
                {t.saAnalyticsMetricsTitle}
              </h3>
              <ul className="space-y-3">
                {[
                  t.saAnalyticsMetric1,
                  t.saAnalyticsMetric2,
                  t.saAnalyticsMetric3,
                  t.saAnalyticsMetric4,
                  t.saAnalyticsMetric5,
                ].map((metric, 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]">{metric}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div className="bg-white p-8 border border-[#E2E8F0]">
              <h3 className="font-semibold text-[#1E293B] mb-4">
                {t.saAnalyticsDigestTitle}
              </h3>
              <p className="text-[#64748B] mb-4 text-sm">
                {t.saAnalyticsDigestDesc}
              </p>
              <div className="bg-[#10B981]/5 border border-[#10B981]/20 p-4">
                <p className="text-sm font-semibold text-[#1E293B] mb-1">
                  {t.saAnalyticsDigestSampleTitle}
                </p>
                <p className="text-sm text-[#64748B] italic">
                  &ldquo;
                  {isAr
                    ? t.saAnalyticsDigestSampleAr
                    : t.saAnalyticsDigestSampleEn}
                  &rdquo;
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 15 - FAQs */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6">
          <div className="flex items-center justify-center gap-3 mb-12">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              15
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.saFAQsTitle}
            </h2>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <div className="space-y-4">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="bg-[#FAFAFA] p-6 border border-transparent 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"
                  >
                    Q{idx + 1}
                  </span>
                  <div>
                    <h3 className="font-semibold text-[#1E293B] mb-2">
                      {faq.q}
                    </h3>
                    <p className="text-[#64748B]">{faq.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 16 - Get Started */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="bg-white border border-[#E2E8F0] p-12 md:p-16">
            <div className="max-w-3xl mx-auto text-center">
              <div className="flex items-center justify-center gap-3 mb-8">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  16
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>

              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
                {t.saGetStartedTitle}
              </h2>
              <p className="text-xl text-[#64748B] mb-10">
                {t.saGetStartedSubtitle}
              </p>

              {/* Setup Steps */}
              <div className="grid md:grid-cols-5 gap-4 mb-12">
                {setupSteps.map((step, idx) => (
                  <div
                    key={idx}
                    className="bg-[#FAFAFA] p-4 border border-[#E2E8F0]"
                  >
                    <span
                      className="text-[#10B981] font-mono text-2xl font-bold block mb-2"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <p className="text-sm text-[#64748B]">{step}</p>
                  </div>
                ))}
              </div>

              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href={`/${params.lang}/signup`}
                  className="group relative inline-flex items-center justify-center px-10 py-5 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
                >
                  <span className="relative z-10">{t.saCtaStartFree}</span>
                  <div className="absolute inset-0 bg-[#059669] transform translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
                </Link>
                <Link
                  href={`/${params.lang}/demo`}
                  className="inline-flex items-center justify-center px-10 py-5 text-lg font-semibold text-[#1E293B] border-2 border-[#E2E8F0] hover:border-[#10B981] transition-colors duration-300"
                >
                  {t.saCtaBookDemo}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Structured Data */}
      <IndustryJsonLd
        industry="sports-academies"
        lang={params.lang}
        faqs={structuredFaqs}
      />
    </main>
  );
}