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

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

  const faqs = [
    { question: t.beautyWellnessFAQQ1, answer: t.beautyWellnessFAQA1 },
    { question: t.beautyWellnessFAQQ2, answer: t.beautyWellnessFAQA2 },
    { question: t.beautyWellnessFAQQ3, answer: t.beautyWellnessFAQA3 },
    { question: t.beautyWellnessFAQQ4, answer: t.beautyWellnessFAQA4 },
    { question: t.beautyWellnessFAQQ5, answer: t.beautyWellnessFAQA5 },
  ];

  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">
          {/* Badge */}
          <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
                ? "لصالونات التجميل والعافية"
                : "For Beauty & Wellness Businesses"}
            </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
                ? "حوّل صالونك أو مركزك إلى قوة رقمية"
                : "Transform Your Beauty & Wellness Business"}
            </h1>

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

            {/* Stats Grid - Editorial Style */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200 mb-12">
              {[
                {
                  value: "+40%",
                  label: isAr ? "حجوزات أكثر" : "More Bookings",
                  sub: isAr
                    ? "عبر واتساب والويب والصوت"
                    : "Via WhatsApp, Web & Voice",
                },
                {
                  value: "15h",
                  label: isAr ? "توفير أسبوعياً" : "Saved Weekly",
                  sub: isAr
                    ? "أتمتة كاملة للحجوزات"
                    : "Full Booking Automation",
                },
                {
                  value: "-70%",
                  label: isAr ? "إلغاءات أقل" : "Less No-Shows",
                  sub: isAr ? "تذكيرات ذكية تلقائية" : "Smart Auto Reminders",
                },
              ].map((stat, idx) => (
                <div
                  key={idx}
                  className="group bg-white p-8 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-[#1E293B] mb-2">
                    {stat.value}
                  </div>
                  <p className="text-sm text-[#64748B]">{stat.sub}</p>
                  <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}/demo`}
                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">
                  {isAr ? "احجز عرض توضيحي" : "Book a Demo"}
                </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}/signup`}
                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"
              >
                {isAr ? "ابدأ تجربة مجانية" : "Start Free Trial"}
              </Link>
              <a
                href={`https://wa.me/${SITE.contact.whatsapp}`}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-[#1E293B] hover:bg-slate-100 transition-colors"
              >
                {isAr ? "استشارة واتساب" : "WhatsApp Consultation"}
              </a>
            </div>

            {/* Trust Badge */}
            <p className="text-sm text-[#64748B]">
              {isAr
                ? "موثوق من 500+ صالون ومركز في الخليج"
                : "Trusted by 500+ salons & centers in GCC"}
            </p>
          </div>
        </div>
      </section>

      {/* Section 02: Class Bookings */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          {/* Section Header */}
          <div className="flex items-center gap-4 mb-12">
            <div className="flex items-center gap-3">
              <span
                className="text-[#10B981] font-mono text-sm tracking-wider"
                dir="ltr"
              >
                02
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "نساعدك في تقديم حجز الحصص بسهولة"
                  : "Help You Offer Easy Class Bookings"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "عملاؤك يمكنهم حجز الحصص عبر واتساب، الموقع، أو الهاتف - كل ذلك بنظام واحد متكامل"
                  : "Your clients can book classes via WhatsApp, web, or phone - all in one integrated system"}
              </p>
            </div>
          </div>

          {/* Class Finder */}
          <div className="bg-[#FAFAFA] p-8 mb-8">
            <h3 className="text-2xl font-bold text-[#1E293B] mb-6">
              {t.beautyWellnessClassFinder}
            </h3>
            <div className="grid md:grid-cols-3 gap-4">
              {[
                t.beautyWellnessFilterType,
                t.beautyWellnessFilterTime,
                t.beautyWellnessFilterInstructor,
              ].map((filter, idx) => (
                <div
                  key={filter}
                  className="bg-white p-4 border border-slate-200"
                >
                  <div className="flex items-center gap-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <p className="text-[#1E293B] font-medium">{filter}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Class Cards - Editorial Grid */}
          <div className="grid md:grid-cols-3 gap-px bg-slate-200 mb-8">
            {[
              {
                name: t.beautyWellnessClass1Name,
                instructor: t.beautyWellnessClass1Instructor,
                time: t.beautyWellnessClass1Time,
                spots: t.beautyWellnessClass1Spots,
              },
              {
                name: t.beautyWellnessClass2Name,
                instructor: t.beautyWellnessClass2Instructor,
                time: t.beautyWellnessClass2Time,
                spots: t.beautyWellnessClass2Spots,
              },
              {
                name: t.beautyWellnessClass3Name,
                instructor: t.beautyWellnessClass3Instructor,
                time: t.beautyWellnessClass3Time,
                spots: t.beautyWellnessClass3Spots,
              },
            ].map((classItem, idx) => (
              <div
                key={classItem.name}
                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>
                  <h4 className="text-xl font-semibold text-[#1E293B]">
                    {classItem.name}
                  </h4>
                </div>
                <ul className="space-y-2 mb-4">
                  <li 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] text-sm">
                      {classItem.instructor}
                    </span>
                  </li>
                  <li 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] text-sm">
                      {classItem.time}
                    </span>
                  </li>
                </ul>
                <p className="text-[#10B981] font-semibold text-sm">
                  {classItem.spots}
                </p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-4 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Checkout Flow */}
          <div className="bg-[#10B981]/[0.03] p-8">
            <h3 className="text-2xl font-bold text-[#1E293B] mb-8">
              {t.beautyWellnessCheckoutFlowTitle}
            </h3>
            <div className="grid md:grid-cols-4 gap-6">
              {[
                { step: "01", title: t.beautyWellnessCheckoutStep1 },
                { step: "02", title: t.beautyWellnessCheckoutStep2 },
                { step: "03", title: t.beautyWellnessCheckoutStep3 },
                { step: "04", title: t.beautyWellnessCheckoutStep4 },
              ].map((step) => (
                <div
                  key={step.step}
                  className="bg-white p-6 border border-slate-200"
                >
                  <span
                    className="text-[#10B981] font-mono text-2xl font-bold"
                    dir="ltr"
                  >
                    {step.step}
                  </span>
                  <p className="text-[#1E293B] mt-3">{step.title}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Section 03: Services & Appointments */}
      <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]">
                {t.beautyWellnessServicesTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.beautyWellnessServicesSubtitle}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-px bg-slate-200">
            {[
              {
                icon: "01",
                title: t.beautyWellnessService1Title,
                desc: t.beautyWellnessService1Desc,
              },
              {
                icon: "02",
                title: t.beautyWellnessService2Title,
                desc: t.beautyWellnessService2Desc,
              },
              {
                icon: "03",
                title: t.beautyWellnessService3Title,
                desc: t.beautyWellnessService3Desc,
              },
              {
                icon: "04",
                title: t.beautyWellnessService4Title,
                desc: t.beautyWellnessService4Desc,
              },
            ].map((service, idx) => (
              <div
                key={service.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">
                    {service.icon}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {service.title}
                  </h3>
                </div>
                <p className="text-[#64748B]">{service.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: WhatsApp & Voice AI Agents */}
      <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "وكلاء ذكيون يعملون 24/7 لخدمة عملائك"
                  : "AI Agents Working 24/7 for Your Business"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "خفض التكاليف وزيادة رضا العملاء مع الرد الفوري على الاستفسارات والحجوزات"
                  : "Reduce costs and increase customer satisfaction with instant responses and automated bookings"}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8 mb-12">
            {/* WhatsApp Agent */}
            <div className="bg-[#FAFAFA] p-8">
              <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]">
                  {t.beautyWellnessWhatsAppAgent}
                </h3>
              </div>
              <ul className="space-y-4">
                {[
                  t.beautyWellnessWACapability1,
                  t.beautyWellnessWACapability2,
                  t.beautyWellnessWACapability3,
                  t.beautyWellnessWACapability4,
                ].map((cap, idx) => (
                  <li key={cap} 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]">{cap}</span>
                  </li>
                ))}
              </ul>
            </div>

            {/* Voice Agent */}
            <div className="bg-[#FAFAFA] p-8">
              <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]">
                  {t.beautyWellnessVoiceAgent}
                </h3>
              </div>
              <ul className="space-y-4">
                {[
                  t.beautyWellnessVoiceCapability1,
                  t.beautyWellnessVoiceCapability2,
                  t.beautyWellnessVoiceCapability3,
                  t.beautyWellnessVoiceCapability4,
                ].map((cap, idx) => (
                  <li key={cap} 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]">{cap}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>

          {/* Templates */}
          <div className="bg-[#10B981]/[0.03] p-8">
            <h3 className="text-2xl font-bold text-[#1E293B] mb-6">
              {t.beautyWellnessTemplatesTitle}
            </h3>
            <div className="grid md:grid-cols-2 gap-4">
              {[
                t.beautyWellnessTemplate1,
                t.beautyWellnessTemplate2,
                t.beautyWellnessTemplate3,
                t.beautyWellnessTemplate4,
              ].map((template, idx) => (
                <div
                  key={template}
                  className="bg-white p-6 border border-slate-200"
                >
                  <div className="flex items-start gap-3">
                    <span
                      className="text-[#10B981] font-mono text-xs"
                      dir="ltr"
                    >
                      {String(idx + 1).padStart(2, "0")}
                    </span>
                    <p className="text-[#64748B] italic">
                      &ldquo;{template}&rdquo;
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Section 05: Membership Management */}
      <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "نظام عضويات متكامل يزيد الإيرادات"
                  : "Complete Membership System That Grows Revenue"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "ساعد عملاءك في الاشتراك بعضويات مختلفة مع تجديد تلقائي وتقارير مفصلة"
                  : "Help your clients subscribe to different tiers with auto-renewal and detailed analytics"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                tier: t.beautyWellnessMemberBasic,
                price: t.beautyWellnessMemberBasicPrice,
                benefits: [
                  t.beautyWellnessMemberBasicBenefit1,
                  t.beautyWellnessMemberBasicBenefit2,
                  t.beautyWellnessMemberBasicBenefit3,
                ],
              },
              {
                tier: t.beautyWellnessMemberPlus,
                price: t.beautyWellnessMemberPlusPrice,
                benefits: [
                  t.beautyWellnessMemberPlusBenefit1,
                  t.beautyWellnessMemberPlusBenefit2,
                  t.beautyWellnessMemberPlusBenefit3,
                  t.beautyWellnessMemberPlusBenefit4,
                ],
              },
              {
                tier: t.beautyWellnessMemberVIP,
                price: t.beautyWellnessMemberVIPPrice,
                benefits: [
                  t.beautyWellnessMemberVIPBenefit1,
                  t.beautyWellnessMemberVIPBenefit2,
                  t.beautyWellnessMemberVIPBenefit3,
                  t.beautyWellnessMemberVIPBenefit4,
                  t.beautyWellnessMemberVIPBenefit5,
                ],
              },
            ].map((member, idx) => (
              <div
                key={member.tier}
                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-2xl font-bold text-[#1E293B]">
                    {member.tier}
                  </h3>
                </div>
                <p className="text-3xl font-bold text-[#10B981] mb-6">
                  {member.price}
                </p>
                <ul className="space-y-3">
                  {member.benefits.map((benefit) => (
                    <li key={benefit} 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] text-sm">{benefit}</span>
                    </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 06: Revenue Boosting Packages */}
      <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "باقات وبطاقات هدايا تزيد متوسط قيمة العميل"
                  : "Packages & Gift Cards That Increase Average Client Value"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "قدم باقات مخصصة وبطاقات هدايا تزيد الإيرادات بنسبة 35%"
                  : "Offer custom packages and gift cards that increase revenue by up to 35%"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200 mb-8">
            {[
              {
                num: "01",
                title: t.beautyWellnessPackage1Title,
                desc: t.beautyWellnessPackage1Desc,
              },
              {
                num: "02",
                title: t.beautyWellnessPackage2Title,
                desc: t.beautyWellnessPackage2Desc,
              },
              {
                num: "03",
                title: t.beautyWellnessPackage3Title,
                desc: t.beautyWellnessPackage3Desc,
              },
              {
                num: "04",
                title: t.beautyWellnessPackage4Title,
                desc: t.beautyWellnessPackage4Desc,
              },
            ].map((pkg) => (
              <div
                key={pkg.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">
                    {pkg.num}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {pkg.title}
                  </h3>
                </div>
                <p className="text-[#64748B]">{pkg.desc}</p>
                <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] mt-6 transition-all duration-300" />
              </div>
            ))}
          </div>

          {/* Package Rules */}
          <div className="bg-[#FAFAFA] p-8">
            <h3 className="text-2xl font-bold text-[#1E293B] mb-6">
              {t.beautyWellnessPackageRulesTitle}
            </h3>
            <ul className="space-y-4">
              {[
                t.beautyWellnessPackageRule1,
                t.beautyWellnessPackageRule2,
                t.beautyWellnessPackageRule3,
              ].map((rule, idx) => (
                <li key={rule} 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>
                  <span className="text-[#64748B]">{rule}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* Section 07: Smart Upselling */}
      <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>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "نظام بيع إضافي ذكي يزيد الأرباح 31%"
                  : "Smart Upselling System That Increases Profits by 31%"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "اقتراحات ذكية لمنتجات إضافية عند الدفع تزيد متوسط قيمة الفاتورة"
                  : "Smart product recommendations at checkout that increase average transaction value"}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-2 gap-8">
            <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>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.beautyWellnessCheckoutPromptsTitle}
                </h3>
              </div>
              <div className="space-y-4">
                {[
                  t.beautyWellnessCheckoutPrompt1,
                  t.beautyWellnessCheckoutPrompt2,
                  t.beautyWellnessCheckoutPrompt3,
                ].map((prompt, idx) => (
                  <div key={prompt} className="bg-[#FAFAFA] p-4">
                    <div className="flex items-start gap-3">
                      <span
                        className="text-[#10B981] font-mono text-xs"
                        dir="ltr"
                      >
                        {String(idx + 1).padStart(2, "0")}
                      </span>
                      <p className="text-[#64748B] italic">
                        &ldquo;{prompt}&rdquo;
                      </p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <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>
                <h3 className="text-2xl font-bold text-[#1E293B]">
                  {t.beautyWellnessBundleOptionsTitle}
                </h3>
              </div>
              <ul className="space-y-4">
                {[
                  t.beautyWellnessBundleOption1,
                  t.beautyWellnessBundleOption2,
                  t.beautyWellnessBundleOption3,
                ].map((option, idx) => (
                  <li key={option} 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]">{option}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Section 08: Policies */}
      <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"
              >
                08
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.beautyWellnessPoliciesTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.beautyWellnessPoliciesSubtitle}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 gap-px bg-slate-200">
            {[
              {
                num: "01",
                title: t.beautyWellnessPolicyLateCancelTitle,
                desc: t.beautyWellnessPolicyLateCancelDesc,
              },
              {
                num: "02",
                title: t.beautyWellnessPolicyNoShowTitle,
                desc: t.beautyWellnessPolicyNoShowDesc,
              },
              {
                num: "03",
                title: t.beautyWellnessPolicyRefundTitle,
                desc: t.beautyWellnessPolicyRefundDesc,
              },
              {
                num: "04",
                title: t.beautyWellnessPolicyHealthTitle,
                desc: t.beautyWellnessPolicyHealthDesc,
              },
            ].map((policy) => (
              <div
                key={policy.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">
                    {policy.num}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {policy.title}
                  </h3>
                </div>
                <p className="text-[#64748B]">{policy.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 09: FAQs */}
      <section className="py-24 bg-[#FAFAFA]">
        <div className="max-w-4xl 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"
              >
                09
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
              {t.beautyWellnessFAQTitle}
            </h2>
          </div>

          <div className="space-y-4">
            {[
              { q: t.beautyWellnessFAQQ1, a: t.beautyWellnessFAQA1 },
              { q: t.beautyWellnessFAQQ2, a: t.beautyWellnessFAQA2 },
              { q: t.beautyWellnessFAQQ3, a: t.beautyWellnessFAQA3 },
              { q: t.beautyWellnessFAQQ4, a: t.beautyWellnessFAQA4 },
              { q: t.beautyWellnessFAQQ5, a: t.beautyWellnessFAQA5 },
            ].map((faq, idx) => (
              <div key={faq.q} className="bg-white p-6 border border-slate-200">
                <div className="flex items-start gap-4">
                  <span
                    className="text-[#10B981] font-mono text-xs mt-1"
                    dir="ltr"
                  >
                    {String(idx + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3 className="text-lg font-semibold text-[#1E293B] mb-3">
                      {faq.q}
                    </h3>
                    <p className="text-[#64748B]">{faq.a}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 10: Security & Privacy */}
      <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"
              >
                10
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.beautyWellnessSecurityTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.beautyWellnessSecuritySubtitle}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                num: "01",
                title: t.beautyWellnessSecurityItem1Title,
                desc: t.beautyWellnessSecurityItem1Desc,
              },
              {
                num: "02",
                title: t.beautyWellnessSecurityItem2Title,
                desc: t.beautyWellnessSecurityItem2Desc,
              },
              {
                num: "03",
                title: t.beautyWellnessSecurityItem3Title,
                desc: t.beautyWellnessSecurityItem3Desc,
              },
            ].map((item) => (
              <div
                key={item.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">
                    {item.num}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {item.title}
                  </h3>
                </div>
                <p className="text-[#64748B] text-sm">{item.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 11: Integrations */}
      <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"
              >
                11
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {t.beautyWellnessIntegrationsTitle}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {t.beautyWellnessIntegrationsSubtitle}
              </p>
            </div>
          </div>

          <div className="grid lg:grid-cols-3 gap-px bg-slate-200">
            {[
              {
                num: "01",
                title: t.beautyWellnessIntegrationPayment,
                desc: t.beautyWellnessIntegrationPaymentDesc,
              },
              {
                num: "02",
                title: t.beautyWellnessIntegrationMessaging,
                desc: t.beautyWellnessIntegrationMessagingDesc,
              },
              {
                num: "03",
                title: t.beautyWellnessIntegrationAnalytics,
                desc: t.beautyWellnessIntegrationAnalyticsDesc,
              },
            ].map((integration) => (
              <div
                key={integration.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">
                    {integration.num}
                  </span>
                  <h3 className="text-xl font-semibold text-[#1E293B]">
                    {integration.title}
                  </h3>
                </div>
                <p className="text-[#64748B] text-sm">{integration.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 12: Analytics Dashboard */}
      <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"
              >
                12
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "لوحة تحليلات تساعدك في اتخاذ قرارات أفضل"
                  : "Analytics Dashboard That Drives Better Decisions"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "تتبع أداء عملك واحصل على رؤى فورية لنمو عملك"
                  : "Track performance metrics and get real-time insights to grow your business"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-px bg-slate-200 mb-8">
            {[
              {
                num: "01",
                title: t.beautyWellnessMetric1,
                desc: t.beautyWellnessMetric1Desc,
              },
              {
                num: "02",
                title: t.beautyWellnessMetric2,
                desc: t.beautyWellnessMetric2Desc,
              },
              {
                num: "03",
                title: t.beautyWellnessMetric3,
                desc: t.beautyWellnessMetric3Desc,
              },
              {
                num: "04",
                title: t.beautyWellnessMetric4,
                desc: t.beautyWellnessMetric4Desc,
              },
              {
                num: "05",
                title: t.beautyWellnessMetric5,
                desc: t.beautyWellnessMetric5Desc,
              },
              {
                num: "06",
                title: t.beautyWellnessMetric6,
                desc: t.beautyWellnessMetric6Desc,
              },
            ].map((metric) => (
              <div
                key={metric.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">
                    {metric.num}
                  </span>
                  <h3 className="text-lg font-semibold text-[#1E293B]">
                    {metric.title}
                  </h3>
                </div>
                <p className="text-[#64748B] text-sm">{metric.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="bg-[#10B981]/[0.03] p-8">
            <div className="flex items-center gap-3 mb-6">
              <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                12.1
              </span>
              <h3 className="text-2xl font-bold text-[#1E293B]">
                {t.beautyWellnessOwnerDigestTitle}
              </h3>
            </div>
            <p className="text-[#64748B] mb-6">
              {t.beautyWellnessOwnerDigestDesc}
            </p>
            <div className="bg-white p-6 border border-slate-200">
              <p className="text-[#64748B] italic">
                &ldquo;{t.beautyWellnessOwnerDigestExample}&rdquo;
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Section 13: How to Get Started */}
      <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"
              >
                13
              </span>
              <div className="w-12 h-px bg-[#10B981]" />
            </div>
            <div>
              <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B]">
                {isAr
                  ? "ابدأ في 4 خطوات بسيطة"
                  : "Get Started in 4 Simple Steps"}
              </h2>
              <p className="mt-4 text-lg text-[#64748B] max-w-2xl">
                {isAr
                  ? "خلال 48 ساعة سيكون نظامك جاهز لاستقبال الحجوزات"
                  : "Within 48 hours, your system will be ready to accept bookings"}
              </p>
            </div>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {[
              {
                step: "01",
                title: t.beautyWellnessStep1Title,
                desc: t.beautyWellnessStep1Desc,
              },
              {
                step: "02",
                title: t.beautyWellnessStep2Title,
                desc: t.beautyWellnessStep2Desc,
              },
              {
                step: "03",
                title: t.beautyWellnessStep3Title,
                desc: t.beautyWellnessStep3Desc,
              },
              {
                step: "04",
                title: t.beautyWellnessStep4Title,
                desc: t.beautyWellnessStep4Desc,
              },
            ].map((step) => (
              <div
                key={step.step}
                className="bg-white p-8 border border-slate-200 hover:border-[#10B981] transition-colors"
              >
                <span
                  className="text-[#10B981] font-mono text-4xl font-bold"
                  dir="ltr"
                >
                  {step.step}
                </span>
                <h3 className="text-lg font-semibold text-[#1E293B] mt-4 mb-3">
                  {step.title}
                </h3>
                <p className="text-[#64748B] text-sm">{step.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Section 14: 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"
            >
              14
            </span>
            <div className="w-12 h-px bg-[#10B981]" />
          </div>

          <h2 className="text-4xl md:text-5xl font-bold text-[#1E293B] mb-6">
            {isAr
              ? "جاهز لتحويل عملك رقمياً؟"
              : "Ready to Transform Your Beauty Business?"}
          </h2>
          <p className="text-xl text-[#64748B] mb-12">
            {isAr
              ? "انضم لأكثر من 500 صالون ومركز ينمون مع موعدي"
              : "Join 500+ beauty businesses growing with Mawidi"}
          </p>

          {/* ROI Stat */}
          <div className="inline-block bg-[#10B981]/[0.05] p-8 mb-12">
            <h3 className="font-semibold text-[#1E293B] mb-2">
              {isAr
                ? "متوسط العائد على الاستثمار"
                : "Average ROI for Our Clients"}
            </h3>
            <div className="text-6xl font-bold text-[#10B981] mb-2">285%</div>
            <p className="text-sm text-[#64748B]">
              {isAr ? "خلال أول 6 شهور" : "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-8 py-4 text-lg font-semibold bg-[#10B981] text-white overflow-hidden"
            >
              <span className="relative z-10">
                {isAr ? "ابدأ تجربة مجانية 14 يوم" : "Start 14-Day Free Trial"}
              </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"
            >
              {isAr ? "شاهد 10 دقائق عرض" : "Watch 10-Min Demo"}
            </Link>
          </div>

          <p className="text-sm text-[#64748B]">
            {isAr
              ? "لا يلزم بطاقة ائتمان • إعداد فوري • دعم 24/7"
              : "No credit card required • Instant setup • 24/7 support"}
          </p>
        </div>
      </section>

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