/**
 * Mawidi Demo Page - Client Component
 * Client-side wrapper for the demo scheduler
 * Editorial Design System - Magazine-style layout
 */

"use client";

import { useEffect } from "react";
import Script from "next/script";
import { UI, type Lang } from "@/lib/config";
import { DemoScheduler } from "@/components/DemoScheduler";

interface DemoPageClientProps {
  lang: Lang;
}

// Content for bilingual support
const content = {
  en: {
    heroTitle: "Schedule a Demo",
    heroDescription:
      "Discover how Mawidi transforms appointment management for your clinic or medical center. Choose a convenient time and we'll show you the platform.",
    features: ["30-60 minutes", "Interactive Session", "No Commitment"],
    expectTitle: "What to Expect",
    steps: [
      {
        title: "Platform Overview",
        description:
          "We'll show you how Mawidi works from the admin dashboard to the patient WhatsApp experience",
      },
      {
        title: "Customized Features",
        description:
          "We'll discuss your specific needs and show how the platform can be customized for your clinic",
      },
      {
        title: "Q&A Session",
        description:
          "We'll answer all your questions about pricing, integration, and technical support",
      },
    ],
  },
  ar: {
    heroTitle: "احجز جلسة تجريبية",
    heroDescription:
      "تعرّف على كيفية تحويل مويدي لإدارة المواعيد في عيادتك أو مركزك الطبي. اختر الوقت المناسب لك وسنتواصل معك لعرض المنصة.",
    features: ["30-60 دقيقة", "جلسة تفاعلية", "لا التزام"],
    expectTitle: "ماذا تتوقع من الجلسة؟",
    steps: [
      {
        title: "نظرة عامة على المنصة",
        description:
          "نعرض لك كيف تعمل مويدي من لوحة التحكم إلى تجربة المريض على واتساب",
      },
      {
        title: "ميزات مخصصة",
        description:
          "نناقش احتياجاتك الخاصة ونوضح كيف يمكن تخصيص المنصة لعيادتك",
      },
      {
        title: "جلسة أسئلة وأجوبة",
        description: "نجيب على جميع أسئلتك حول الأسعار، التكامل، والدعم الفني",
      },
    ],
  },
};

export default function DemoPageClient({ lang }: DemoPageClientProps) {
  const dir = UI[lang].dir;
  const recaptchaSiteKey = process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY;
  const t = content[lang];

  // Clear localStorage on page load for fresh testing
  useEffect(() => {
    // Clear any saved booking data for fresh start
    if (typeof window !== "undefined") {
      localStorage.removeItem("mawidi_booking_draft");
      console.log("🧹 Cleared booking draft from localStorage");
    }

    // Fetch CSRF token
    fetch("/api/csrf")
      .then((response) => {
        if (!response.ok) {
          console.error("Failed to fetch CSRF token");
        }
      })
      .catch((error) => {
        console.error("CSRF token fetch error:", error);
      });
  }, []);

  return (
    <>
      {/* Load reCAPTCHA v3 script if configured */}
      {recaptchaSiteKey && (
        <Script
          src={`https://www.google.com/recaptcha/api.js?render=${recaptchaSiteKey}`}
          strategy="lazyOnload"
          onError={() => console.error("Failed to load reCAPTCHA script")}
        />
      )}

      <main className="min-h-screen bg-gradient-to-br from-white via-[#FAFAFA] to-[#F0FDF4] dark:from-slate-950 dark:via-slate-900 dark:to-slate-950">
        {/* Section 01: Hero */}
        <section className="py-16 md:py-24 px-6">
          <div className="max-w-7xl mx-auto" dir={dir}>
            {/* Editorial Section Header */}
            <div className="flex items-center gap-4 mb-8">
              <div className="flex items-center gap-3">
                <span
                  className="text-[#10B981] font-mono text-sm tracking-wider"
                  dir="ltr"
                >
                  01
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>
            </div>

            <div className="max-w-3xl">
              {/* Heading */}
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#1E293B] dark:text-white mb-6">
                {t.heroTitle}
              </h1>

              {/* Description */}
              <p className="text-lg md:text-xl text-[#64748B] dark:text-slate-300 mb-8 leading-relaxed">
                {t.heroDescription}
              </p>

              {/* Features - Square bullet style */}
              <ul className="flex flex-wrap gap-6 md:gap-8">
                {t.features.map((feature, idx) => (
                  <li key={idx} className="flex items-center gap-3">
                    <div className="w-1.5 h-1.5 bg-[#10B981] flex-shrink-0" />
                    <span className="text-[#1E293B] dark:text-slate-200 font-medium">
                      {feature}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </section>

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

            <DemoScheduler
              language={lang}
              webhookUrl={process.env.NEXT_PUBLIC_N8N_WEBHOOK_URL}
            />
          </div>
        </section>

        {/* Section 03: What to Expect */}
        <section className="py-16 md:py-24 px-6 bg-[#FAFAFA] dark:bg-slate-900/50">
          <div className="max-w-7xl mx-auto" dir={dir}>
            {/* Editorial 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"
                >
                  03
                </span>
                <div className="w-12 h-px bg-[#10B981]" />
              </div>
              <h2 className="text-3xl md:text-4xl font-bold text-[#1E293B] dark:text-white">
                {t.expectTitle}
              </h2>
            </div>

            {/* Editorial Grid with thin line separators */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-slate-200 dark:bg-slate-700">
              {t.steps.map((step, idx) => (
                <div
                  key={idx}
                  className="group bg-white dark:bg-slate-900 p-8 hover:bg-[#FAFAFA] dark:hover:bg-slate-800 transition-colors"
                >
                  {/* Step number */}
                  <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="font-semibold text-[#1E293B] dark:text-white text-lg">
                      {step.title}
                    </h3>
                  </div>

                  {/* Description */}
                  <p className="text-[#64748B] dark:text-slate-400 leading-relaxed mb-6">
                    {step.description}
                  </p>

                  {/* Expanding underline hover animation */}
                  <div className="w-0 group-hover:w-12 h-0.5 bg-[#10B981] transition-all duration-300" />
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
    </>
  );
}