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 title =
    params.lang === "ar"
      ? "المنظمات غير الربحية والمجتمعية"
      : "Nonprofit & Community Organizations";
  const description =
    params.lang === "ar"
      ? "حلول مواويد للجمعيات الخيرية، المنظمات غير الربحية، والمراكز المجتمعية"
      : "Mawidi solutions for charities, nonprofits, and community centers";

  return {
    title: `${title} | ${SITE.brand}`,
    description,
    openGraph: {
      title: `${title} | ${SITE.brand}`,
      description,
      type: "website",
    },
  };
}

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

  return (
    <main className="min-h-screen bg-[#FAFAFA]" dir={dir}>
      {/* Hero Section - Editorial Light Style */}
      <section className="relative bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] overflow-hidden">
        {/* Subtle grid pattern */}
        <div
          className="absolute inset-0 opacity-[0.03]"
          style={{
            backgroundImage: `linear-gradient(to right, #10B981 1px, transparent 1px), linear-gradient(to bottom, #10B981 1px, transparent 1px)`,
            backgroundSize: "40px 40px",
          }}
        />

        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-28">
          {/* Section indicator */}
          <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">
              {isAr
                ? "المنظمات غير الربحية والمجتمعية"
                : "Nonprofit & Community"}
            </span>
          </div>

          <div className="max-w-4xl">
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-[#1E293B] tracking-tight mb-6">
              {isAr
                ? "إدارة الخدمات المجتمعية والتطوعية عبر واتساب"
                : "Manage Community & Volunteer Services via WhatsApp"}
            </h1>

            <p className="text-xl md:text-2xl text-[#64748B] mb-12 leading-relaxed max-w-3xl">
              {isAr
                ? "أتمتة التسجيل في البرامج، تنسيق المتطوعين، وجدولة الخدمات المجتمعية"
                : "Automate program registration, volunteer coordination, and community service scheduling"}
            </p>

            {/* Stats Grid - Editorial Style */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-px bg-slate-200 mb-12">
              {[
                {
                  value: "65%",
                  label: isAr ? "تقليل الوقت الإداري" : "Less Admin Time",
                },
                {
                  value: "3x",
                  label: isAr
                    ? "زيادة مشاركة المتطوعين"
                    : "Volunteer Engagement",
                },
                {
                  value: "80%",
                  label: isAr ? "تقليل عدم الحضور" : "Fewer No-Shows",
                },
                {
                  value: "50%",
                  label: isAr ? "توفير في التكاليف" : "Cost Savings",
                },
              ].map((stat, idx) => (
                <div
                  key={stat.label}
                  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>
                    <span className="text-[#64748B] text-sm">{stat.label}</span>
                  </div>
                  <div className="text-4xl font-bold text-[#10B981]">
                    {stat.value}
                  </div>
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
                </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 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
              >
                <span className="relative z-10">{t.getStarted}</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 border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
              >
                {t.scheduleDemo}
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Section 02: ROI Impact */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <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]">
                {isAr
                  ? "تأثير قابل للقياس على مجتمعك"
                  : "Measurable Impact on Your Community"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "المنظمات التي تستخدم مواويد توفر في المتوسط 15-25 ساعة أسبوعياً من العمل الإداري"
                  : "Organizations using Mawidi save an average of 15-25 hours weekly on administrative tasks"}
              </p>
            </div>
          </div>

          {/* Impact Metrics - Editorial Grid */}
          <div className="grid md:grid-cols-3 gap-px bg-slate-200 mb-8">
            {[
              {
                value: "$12K",
                label: isAr ? "توفير سنوي متوسط" : "Average Annual Savings",
                desc: isAr
                  ? "من تقليل ساعات العمل الإداري والمكالمات الهاتفية"
                  : "From reduced admin hours and phone calls",
              },
              {
                value: "89%",
                label: isAr ? "رضا المتطوعين" : "Volunteer Satisfaction",
                desc: isAr
                  ? "تفضيل التواصل عبر واتساب على الطرق التقليدية"
                  : "Prefer WhatsApp over traditional methods",
              },
              {
                value: "2.3x",
                label: isAr
                  ? "زيادة حضور الفعاليات"
                  : "Event Attendance Increase",
                desc: isAr
                  ? "بفضل التذكيرات الآلية والتأكيدات"
                  : "Thanks to automated reminders and confirmations",
              },
            ].map((metric, idx) => (
              <div
                key={metric.label}
                className="group bg-white p-8 text-center hover:bg-[#FAFAFA] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-xs block mb-4"
                  dir="ltr"
                >
                  {String(idx + 1).padStart(2, "0")}
                </span>
                <div className="text-5xl font-bold text-[#10B981] mb-3">
                  {metric.value}
                </div>
                <div className="text-sm font-semibold text-[#1E293B] mb-2">
                  {metric.label}
                </div>
                <p className="text-xs text-[#64748B]">{metric.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 mx-auto transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Key Facts */}
          <div className="bg-[#10B981]/[0.03] p-8 border border-[#10B981]/10">
            <div className="flex items-center gap-3 mb-6">
              <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                02.1
              </span>
              <h3 className="text-xl font-bold text-[#1E293B]">
                {isAr ? "حقائق رئيسية" : "Key Facts"}
              </h3>
            </div>
            <ul className="space-y-4">
              {[
                isAr
                  ? "92% من المستفيدين يفضلون التواصل عبر واتساب على البريد الإلكتروني أو الهاتف"
                  : "92% of beneficiaries prefer WhatsApp over email or phone calls",
                isAr
                  ? "المنظمات غير الربحية توفر ما يصل إلى 50% من وقت الموظفين باستخدام الأتمتة"
                  : "Nonprofits save up to 50% of staff time using automation",
                isAr
                  ? "معدل فتح الرسائل عبر واتساب 98% مقارنة بـ 20% للبريد الإلكتروني"
                  : "WhatsApp messages have 98% open rate vs 20% for email",
              ].map((fact, idx) => (
                <li key={fact} className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div 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]">{fact}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Section 03: Supported Organizations */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <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]">
                {isAr ? "المنظمات المدعومة" : "Supported Organizations"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "حلول مخصصة لجميع أنواع المنظمات المجتمعية"
                  : "Tailored solutions for all community organizations"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                title: isAr ? "الجمعيات الخيرية" : "Charities",
                desc: isAr
                  ? "تنسيق برامج المساعدة والتبرعات"
                  : "Coordinate aid programs and donations",
              },
              {
                title: isAr ? "المراكز المجتمعية" : "Community Centers",
                desc: isAr
                  ? "حجز المرافق والبرامج"
                  : "Book facilities and programs",
              },
              {
                title: isAr ? "برامج التطوع" : "Volunteer Programs",
                desc: isAr
                  ? "تنسيق وجدولة المتطوعين"
                  : "Coordinate and schedule volunteers",
              },
              {
                title: isAr ? "برامج التعليم المجتمعي" : "Community Education",
                desc: isAr
                  ? "دورات وورش عمل مجانية"
                  : "Free courses and workshops",
              },
              {
                title: isAr
                  ? "خدمات الرعاية المجتمعية"
                  : "Community Health Services",
                desc: isAr
                  ? "فحوصات وخدمات صحية مجانية"
                  : "Free health checks and services",
              },
              {
                title: isAr ? "المكتبات العامة" : "Public Libraries",
                desc: isAr
                  ? "حجز الكتب والفعاليات"
                  : "Book borrowing and events",
              },
            ].map((org, idx) => (
              <div
                key={org.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]">
                    {org.title}
                  </h3>
                </div>
                <p className="text-[#64748B]">{org.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>

      {/* Section 04: Key Features */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                04
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {isAr ? "المميزات الأساسية" : "Key Features"}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Volunteer Management */}
            <div className="bg-[#FAFAFA] p-8 border border-slate-200">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  04.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "إدارة المتطوعين" : "Volunteer Management"}
                </h3>
              </div>
              <ul className="space-y-4">
                {[
                  isAr ? "تسجيل المتطوعين الجدد" : "New volunteer registration",
                  isAr ? "جدولة الورديات والمهام" : "Schedule shifts and tasks",
                  isAr
                    ? "تذكيرات تلقائية للمتطوعين"
                    : "Automatic volunteer reminders",
                  isAr ? "تتبع ساعات التطوع" : "Track volunteer hours",
                ].map((feature, idx) => (
                  <li key={feature} 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>

            {/* Programs & Events */}
            <div className="bg-[#FAFAFA] p-8 border border-slate-200">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  04.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "البرامج والفعاليات" : "Programs & Events"}
                </h3>
              </div>
              <ul className="space-y-4">
                {[
                  isAr ? "حجز البرامج المجتمعية" : "Book community programs",
                  isAr
                    ? "تسجيل حضور الفعاليات"
                    : "Event attendance registration",
                  isAr ? "إدارة قوائم الانتظار" : "Manage waiting lists",
                  isAr
                    ? "إشعارات البرامج الجديدة"
                    : "New program notifications",
                ].map((feature, idx) => (
                  <li key={feature} 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>
        </div>
      </section>

      {/* Section 05: Challenges & Solutions */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                05
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {isAr ? "التحديات والحلول" : "Challenges & Solutions"}
            </h2>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            {/* Challenges */}
            <div>
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  05.1
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr
                    ? "التحديات التي تواجه المنظمات المجتمعية"
                    : "Challenges Facing Community Organizations"}
                </h3>
              </div>
              <div className="space-y-4">
                {[
                  {
                    problem: isAr
                      ? "قضاء 40% من الوقت في التنسيق اليدوي"
                      : "Spending 40% of time on manual coordination",
                    stat: "40%",
                  },
                  {
                    problem: isAr
                      ? "معدل عدم حضور المتطوعين يصل إلى 30%"
                      : "Volunteer no-show rates up to 30%",
                    stat: "30%",
                  },
                  {
                    problem: isAr
                      ? "صعوبة الوصول إلى المستفيدين الذين لا يستخدمون البريد الإلكتروني"
                      : "Hard to reach beneficiaries without email",
                    stat: "65%",
                  },
                  {
                    problem: isAr
                      ? "تكاليف تكنولوجيا المعلومات تستهلك ميزانيات محدودة"
                      : "IT costs consuming limited budgets",
                    stat: "$$$",
                  },
                ].map((item, idx) => (
                  <div
                    key={item.problem}
                    className="bg-white p-4 border-l-2 border-slate-300"
                  >
                    <div className="flex items-start gap-4">
                      <span
                        className="text-[#64748B] font-mono text-sm font-bold"
                        dir="ltr"
                      >
                        {item.stat}
                      </span>
                      <p className="text-[#64748B]">{item.problem}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Solutions */}
            <div>
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  05.2
                </span>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {isAr ? "حلول مواويد" : "Mawidi Solutions"}
                </h3>
              </div>
              <div className="space-y-4">
                {[
                  isAr
                    ? "أتمتة تخفض الوقت الإداري بنسبة 65%"
                    : "Automation reduces admin time by 65%",
                  isAr
                    ? "تذكيرات تلقائية تقلل عدم الحضور بنسبة 80%"
                    : "Auto-reminders cut no-shows by 80%",
                  isAr
                    ? "واتساب يصل إلى 98% من المستخدمين في المنطقة"
                    : "WhatsApp reaches 98% of users in the region",
                  isAr
                    ? "لا توجد تكاليف إضافية للأجهزة أو التدريب"
                    : "No extra costs for hardware or training",
                ].map((solution, idx) => (
                  <div
                    key={solution}
                    className="bg-[#10B981]/[0.05] p-4 border-l-2 border-[#10B981]"
                  >
                    <div className="flex items-start gap-4">
                      <span
                        className="text-[#10B981] font-mono text-xs"
                        dir="ltr"
                      >
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                      <p className="text-[#1E293B]">{solution}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Section 06: How We Help */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                06
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {isAr ? "كيف نساعد المجتمع" : "How We Help Communities"}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                title: isAr ? "تنسيق المتطوعين" : "Volunteer Coordination",
                desc: isAr
                  ? "إدارة سهلة للمتطوعين والورديات"
                  : "Easy volunteer and shift management",
              },
              {
                title: isAr ? "جدولة الفعاليات" : "Event Scheduling",
                desc: isAr
                  ? "تنظيم الفعاليات المجتمعية"
                  : "Organize community events",
              },
              {
                title: isAr ? "إدارة التبرعات" : "Donation Management",
                desc: isAr
                  ? "تتبع التبرعات والمساهمات"
                  : "Track donations and contributions",
              },
              {
                title: isAr ? "التواصل الجماعي" : "Mass Communication",
                desc: isAr
                  ? "إرسال إشعارات للمجتمع"
                  : "Send community notifications",
              },
              {
                title: isAr ? "التقارير" : "Impact Reports",
                desc: isAr
                  ? "تقارير الأثر المجتمعي"
                  : "Community impact reports",
              },
              {
                title: isAr ? "استهداف البرامج" : "Program Targeting",
                desc: isAr
                  ? "وصول دقيق للمستفيدين"
                  : "Precise beneficiary reach",
              },
            ].map((useCase, idx) => (
              <div
                key={useCase.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-lg font-semibold text-[#1E293B]">
                    {useCase.title}
                  </h3>
                </div>
                <p className="text-sm text-[#64748B]">{useCase.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>

      {/* Section 07: Success Stories */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                07
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {isAr
                ? "لماذا تختار المنظمات مواويد؟"
                : "Why Organizations Choose Mawidi"}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8 mb-12">
            {/* Testimonial 1 */}
            <div className="bg-white p-8 border border-slate-200">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  07.1
                </span>
                <div>
                  <div className="font-bold text-lg text-[#1E293B]">
                    {isAr
                      ? "مركز صحي مجتمعي - الرياض"
                      : "Community Health Center - Riyadh"}
                  </div>
                  <div className="text-sm text-[#64748B]">
                    {isAr ? "250 مريض أسبوعياً" : "250 patients weekly"}
                  </div>
                </div>
              </div>
              <blockquote className="text-[#64748B] mb-6 italic">
                &ldquo;
                {isAr
                  ? "خفضنا المكالمات الهاتفية من 120 إلى 15 أسبوعياً، ووفرنا 20 ساعة من وقت الموظفين"
                  : "We reduced phone calls from 120 to 15 per week, saving 20 staff hours"}
                &rdquo;
              </blockquote>
              <div className="grid grid-cols-2 gap-4 pt-6 border-t border-slate-200">
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#10B981]">87%</div>
                  <div className="text-xs text-[#64748B]">
                    {isAr ? "تقليل المكالمات" : "Call Reduction"}
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#10B981]">20hr</div>
                  <div className="text-xs text-[#64748B]">
                    {isAr ? "توفير أسبوعي" : "Weekly Savings"}
                  </div>
                </div>
              </div>
            </div>

            {/* Testimonial 2 */}
            <div className="bg-white p-8 border border-slate-200">
              <div className="flex items-center gap-3 mb-6">
                <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                  07.2
                </span>
                <div>
                  <div className="font-bold text-lg text-[#1E293B]">
                    {isAr ? "جمعية خيرية - دبي" : "Charitable Society - Dubai"}
                  </div>
                  <div className="text-sm text-[#64748B]">
                    {isAr ? "180 متطوع نشط" : "180 active volunteers"}
                  </div>
                </div>
              </div>
              <blockquote className="text-[#64748B] mb-6 italic">
                &ldquo;
                {isAr
                  ? "زادت مشاركة المتطوعين 3 أضعاف، والآن نخدم 400 أسرة شهرياً بدلاً من 140"
                  : "Volunteer engagement tripled, now serving 400 families monthly vs 140"}
                &rdquo;
              </blockquote>
              <div className="grid grid-cols-2 gap-4 pt-6 border-t border-slate-200">
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#10B981]">3x</div>
                  <div className="text-xs text-[#64748B]">
                    {isAr ? "مشاركة المتطوعين" : "Engagement"}
                  </div>
                </div>
                <div className="text-center">
                  <div className="text-2xl font-bold text-[#10B981]">+185%</div>
                  <div className="text-xs text-[#64748B]">
                    {isAr ? "الأسر المخدومة" : "Families Served"}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Trust Badges */}
          <div className="bg-white p-8 border border-slate-200">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
              {[
                { label: isAr ? "امتثال GDPR" : "GDPR Compliant" },
                {
                  label: isAr
                    ? "تشفير من طرف إلى طرف"
                    : "End-to-End Encryption",
                },
                { label: isAr ? "استضافة محلية" : "Local Hosting" },
                { label: isAr ? "إعداد 5 دقائق" : "5-Min Setup" },
              ].map((badge, idx) => (
                <div key={badge.label} className="flex items-center gap-3">
                  <span className="text-[#10B981] font-mono text-xs" dir="ltr">
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div className="flex items-center gap-2">
                    <div className="w-1.5 h-1.5 bg-[#10B981] flex-shrink-0" />
                    <span className="text-sm font-medium text-[#1E293B]">
                      {badge.label}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Section 08: Final CTA */}
      <section className="py-24 bg-white">
        <div className="max-w-4xl mx-auto px-6 text-center">
          <div className="flex items-center justify-center gap-3 mb-8">
            <span
              className="text-[#10B981] font-mono text-sm tracking-wider"
              dir="ltr"
            >
              08
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
            {isAr
              ? "عزز تأثيرك المجتمعي اليوم"
              : "Amplify Your Community Impact Today"}
          </h2>
          <p className="text-xl text-[#64748B] mb-8">
            {isAr
              ? "انضم إلى المنظمات المجتمعية التي تستخدم مواويد"
              : "Join community organizations using Mawidi"}
          </p>

          {/* Benefits */}
          <div className="flex flex-wrap justify-center gap-6 mb-12">
            {[
              isAr ? "بدون عقد" : "No Contract",
              isAr ? "تجربة مجانية 30 يوم" : "30-Day Free Trial",
              isAr
                ? "دعم مجاني للمنظمات غير الربحية"
                : "Free Nonprofit Support",
            ].map((benefit, idx) => (
              <div key={benefit} className="flex items-center gap-2">
                <div className="w-1.5 h-1.5 bg-[#10B981]" />
                <span className="text-[#64748B]">{benefit}</span>
              </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-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
            >
              <span className="relative z-10">{t.getStarted}</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 border-2 border-[#10B981] text-[#10B981] hover:bg-[#10B981]/10 transition-colors"
            >
              {t.scheduleDemo}
            </Link>
          </div>
        </div>
      </section>

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