import { ProductRatingBlock } from "@/components/StoreReviews";
import { useState, useEffect, useCallback, useRef } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Clock, MapPin, Phone, MessageCircle, Star, ArrowRight, ArrowLeft, Sun, Moon, Globe, Sparkles, CalendarCheck, Home, Timer, RefreshCw, Shield, ChevronLeft, ChevronRight, Share2, ShoppingBag } from "lucide-react";
import { useLanguage } from "@/contexts/LanguageContext";
import { useTheme } from "@/contexts/ThemeContext";
import heroImage from "@/assets/hero-cleaning.webp";
import cleanHomeImage from "@/assets/clean-home.webp";
import logoImage from "@/assets/logo.svg";
import partnerBadge from "@/assets/partner-badge.png";
import { useSiteImages } from "@/hooks/useSiteImages";
import { supabase } from "@/integrations/supabase/client";
import { useQuery } from "@tanstack/react-query";
import { Skeleton } from "@/components/ui/skeleton";
import { useVisualOverrides } from "@/hooks/useVisualOverrides";
import { countryFlagUrl } from "@/lib/country-flags";
import { fetchReturningCustomer, firstName, forgetDevice } from "@/lib/returning-customer";
import InstallAppButton from "@/components/InstallAppButton";
import WelcomeDiscountPopup from "@/components/WelcomeDiscountPopup";

const Index = () => {
  const { t, language, setLanguage, isRTL } = useLanguage();
  const { theme, toggleTheme } = useTheme();
  const Arrow = isRTL ? ArrowLeft : ArrowRight;
  const { getOverrideText: ve, getOverrideStyle: veStyle, isHidden } = useVisualOverrides();
  const siteImages = useSiteImages();

  // Recognised returning customer (device-linked, never a guess)
  const [returning, setReturning] = useState<{ first: string } | null>(null);
  useEffect(() => {
    let active = true;
    void fetchReturningCustomer().then((profile) => {
      if (active && profile) setReturning({ first: firstName(profile.name) });
    });
    return () => { active = false; };
  }, []);

  const [reviewPage, setReviewPage] = useState(0);
  const [reviewAutoPaused, setReviewAutoPaused] = useState(false);
  const reviewPauseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const REVIEWS_PER_PAGE = 6;

  const { data: cleaners = [], isPending: cleanersLoading } = useQuery({
    queryKey: ["cleaners"],
    queryFn: async () => {
      const { data, error } = await supabase.from("cleaners").select("*").eq("is_active", true);
      if (error) throw error;
      return data;
    },
  });

  const { data: showFlags = false } = useQuery({
    queryKey: ["show-worker-flags"],
    queryFn: async () => {
      const { data } = await supabase.from("site_settings").select("value").eq("key", "show_worker_flags").maybeSingle();
      return data?.value === "true";
    },
    staleTime: 1000 * 60 * 5,
  });

  const { data: showRatings = true } = useQuery({
    queryKey: ["show-worker-ratings"],
    queryFn: async () => {
      const { data } = await supabase.from("site_settings").select("value").eq("key", "show_worker_ratings").maybeSingle();
      return data?.value !== "false";
    },
    staleTime: 1000 * 60 * 5,
  });

  const { data: cleanerRatings = {} } = useQuery({
    queryKey: ["cleaner-ratings"],
    queryFn: async () => {
      const { data, error } = await supabase.rpc("get_cleaner_ratings" as any);
      if (error) return {};
      const map: Record<string, { avg: number; count: number }> = {};
      (data as any[] || []).forEach((r) => {
        map[r.cleaner_id] = { avg: Number(r.avg_rating), count: r.reviews_count };
      });
      return map;
    },
    staleTime: 1000 * 60 * 5,
  });


  const { data: orderCount } = useQuery({
    queryKey: ["order-count"],
    queryFn: async () => {
      const { data, error } = await supabase.rpc("get_order_count");
      if (error) return null;
      return data as number;
    },
    refetchInterval: 30000,
  });

  // Store ("منتجاتنا") — products, bundles and display settings
  const { data: storeSettings = {} as Record<string, string> } = useQuery({
    queryKey: ["store-settings"],
    queryFn: async () => {
      const { data } = await supabase.from("site_settings").select("key, value").like("key", "store_%");
      const out: Record<string, string> = {};
      (data || []).forEach((r: any) => { out[r.key] = r.value; });
      return out;
    },
    staleTime: 1000 * 60 * 5,
  });
  const storeEnabled = storeSettings.store_enabled !== "false";
  const storeShowOnHome = storeSettings.store_show_on_home !== "false";

  const { data: storeItems = [] } = useQuery({
    queryKey: ["store-catalog-home-v11"],
    queryFn: async () => {
      const [{ data: products, error: pErr }, { data: bundles, error: bErr }] = await Promise.all([
        supabase.from("store_products").select("*").eq("is_active", true).order("display_order"),
        supabase.from("store_bundles").select("*").eq("is_active", true).order("display_order"),
      ]);
      if (pErr) throw pErr;
      if (bErr) throw bErr;
      const items: any[] = [
        ...(bundles || []).map((b: any) => ({ ...b, kind: "bundle" as const })),
        ...(products || []).map((p: any) => ({ ...p, kind: "product" as const })),
      ];
      items.sort((a, b) => (a.display_order ?? 99) - (b.display_order ?? 99));
      return items;
    },
    staleTime: 1000 * 60 * 5,
  });

  const { data: homepageReviews = [] } = useQuery({
    queryKey: ["homepage-reviews"],
    queryFn: async () => {
      const { data, error } = await supabase.rpc("get_homepage_reviews" as any);
      if (error) throw error;
      return data || [];
    },
  });

  const { data: totalReviewsCount = 0 } = useQuery({
    queryKey: ["total-reviews-count"],
    queryFn: async () => {
      const { data, error } = await supabase.rpc("get_total_reviews_count" as any);
      if (error) return 0;
      return data as number;
    },
  });

  const totalReviewPages = Math.ceil(homepageReviews.length / REVIEWS_PER_PAGE);

  useEffect(() => {
    if (reviewAutoPaused || totalReviewPages <= 1) return;
    const interval = setInterval(() => {
      setReviewPage(p => (p + 1) % totalReviewPages);
    }, 5000);
    return () => clearInterval(interval);
  }, [reviewAutoPaused, totalReviewPages]);

  const handleReviewInteraction = useCallback((newPage: number) => {
    setReviewPage(newPage);
    setReviewAutoPaused(true);
    if (reviewPauseTimer.current) clearTimeout(reviewPauseTimer.current);
    reviewPauseTimer.current = setTimeout(() => setReviewAutoPaused(false), 15000);
  }, []);

  return (
    <div className="min-h-screen bg-background">
      <WelcomeDiscountPopup />
      {/* Header */}
      <header className="border-b border-border bg-card/80 backdrop-blur-md sticky top-0 z-50" data-ve-id="header-section">
        <div className="container mx-auto flex items-center justify-between gap-3 py-3 px-4">
          <div className="flex shrink-0 items-center">
            <img src={logoImage} alt="House Care" className="h-16 w-24 shrink-0 object-contain" />
          </div>
          <div className="flex min-w-0 flex-wrap items-center justify-end gap-1 sm:gap-2">
            <Button variant="ghost" size="sm" onClick={() => setLanguage(language === "ar" ? "en" : "ar")} className="rounded-full text-xs gap-1.5 px-3">
              <Globe className="w-4 h-4" />
              {language === "ar" ? "EN" : "عربي"}
            </Button>
            <Button variant="ghost" size="icon" onClick={toggleTheme} className="rounded-full">
              {theme === "light" ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
            </Button>
            <InstallAppButton variant="header" />
            <Link to="/my-bookings">
              <Button variant="ghost" size="sm" className="rounded-full gap-1.5 text-sm">
                <CalendarCheck className="w-4 h-4" />
                <span className="hidden xs:inline sm:inline">{language === "ar" ? "حجوزاتي" : "My Bookings"}</span>
              </Button>
            </Link>
            <Link to="/products" aria-label={language === "ar" ? "منتجاتنا" : "Our products"}>
              <Button variant="ghost" size="sm" className="rounded-full relative">
                <ShoppingBag className="w-4 h-4" />
              </Button>
            </Link>
            <Link to="/book">
              <Button size="sm" className="rounded-full gap-2 shadow-lg shadow-primary/20">
                {t("nav.book")} <Arrow className="w-4 h-4" />
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Returning customer welcome (device-recognised, no login) */}
      {returning && (
        <section className="border-b border-primary/15 bg-gradient-to-r from-primary/[0.07] via-secondary/40 to-transparent">
          <div className="container mx-auto px-4 py-5 flex flex-col sm:flex-row sm:items-center gap-4">
            <div className="flex-1 space-y-1">
              <p className="text-lg md:text-xl font-extrabold text-foreground">
                {returning.first
                  ? language === "ar"
                    ? `أهلاً بعودتك، ${returning.first} 👋`
                    : `Welcome back, ${returning.first} 👋`
                  : language === "ar"
                    ? "أهلاً بعودتك 👋"
                    : "Welcome back 👋"}
              </p>
              <p className="text-sm text-muted-foreground">
                {language === "ar"
                  ? "سعداء برجوعك إلى House Care. احجز خدمتك القادمة بسهولة، بياناتك وعناوينك السابقة جاهزة لك."
                  : "Great to have you back at House Care. Book your next service easily — your details and saved addresses are ready."}
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Link to="/book">
                <Button className="rounded-full gap-2 shadow-lg shadow-primary/20">
                  {language === "ar" ? "احجز الآن" : "Book Now"} <Arrow className="w-4 h-4" />
                </Button>
              </Link>
              <Link to="/my-bookings">
                <Button variant="outline" className="rounded-full">
                  {language === "ar" ? "حجوزاتي" : "My Bookings"}
                </Button>
              </Link>
              <Button
                variant="ghost"
                size="sm"
                className="rounded-full text-xs text-muted-foreground"
                onClick={() => { forgetDevice(); setReturning(null); }}
              >
                {language === "ar" ? "ليس أنا" : "Not me"}
              </Button>
            </div>
          </div>
        </section>
      )}

      {/* Hero */}
      <section className="relative overflow-hidden bg-background" data-ve-id="hero-section" style={veStyle("hero-section")}>
        <div className="absolute inset-0 bg-gradient-to-b from-background via-background to-secondary/40" />
        <div className="absolute top-20 -start-32 w-72 h-72 bg-primary/[0.04] rounded-full blur-3xl" />
        <div className="absolute bottom-10 -end-32 w-96 h-96 bg-accent/[0.05] rounded-full blur-3xl" />
        <div className="container mx-auto px-4 py-8 sm:py-12 md:py-24 relative">
          <div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center">
            <div className={`animate-slide-up ${isRTL ? "md:order-2" : ""}`}>
              <img
                src={siteImages.partner_badge || partnerBadge}
                alt={language === "ar" ? "شعار" : "Badge"}
                className={`h-10 sm:h-14 md:h-16 w-auto object-contain block mb-3 drop-shadow-sm transition-opacity duration-300 ${siteImages.ready ? "opacity-100" : "opacity-0"}`}
                loading="eager"
                data-ve-id="hero-partner-badge"
                data-ve-type="image"
                data-ve-draggable="true"
                style={veStyle("hero-partner-badge")}
              />

              <div className="inline-flex max-w-full flex-wrap items-center gap-1.5 px-3 sm:px-4 py-1.5 bg-primary/10 rounded-full text-primary text-xs sm:text-sm font-semibold mb-4 sm:mb-6" data-ve-id="hero-badge" data-ve-type="text" style={veStyle("hero-badge")}>
                <Star className="w-4 h-4 fill-yellow-400 text-yellow-400" /> {t("hero.badge")}
                {orderCount != null && (
                  <span className="text-xs text-muted-foreground font-medium ms-1">
                    · {orderCount.toLocaleString()}+ {isRTL ? "عميل" : "clients"}
                  </span>
                )}
              </div>
              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-foreground leading-snug md:leading-tight mb-4 sm:mb-6" data-ve-id="hero-title" data-ve-type="text" style={veStyle("hero-title")}>
                {t("hero.title1")}<br />
                <span className="text-primary" data-ve-id="hero-title2" style={veStyle("hero-title2")}>{t("hero.title2")}</span>
              </h2>
              <p className="text-base sm:text-lg text-muted-foreground mb-6 sm:mb-8 max-w-md leading-relaxed" data-ve-id="hero-desc" data-ve-type="text" style={veStyle("hero-desc")}>
                {t("hero.desc")}
              </p>
              <div className="flex flex-wrap items-center gap-3">
                <Link to="/book">
                   <Button size="lg" className="rounded-full text-sm sm:text-base px-6 sm:px-8 py-5 sm:py-6 gap-2 shadow-xl shadow-primary/25 hover:shadow-primary/40 transition-shadow" data-ve-id="hero-cta" data-ve-type="text" style={veStyle("hero-cta")}>
                    {t("hero.cta")} <Arrow className="w-5 h-5" />
                  </Button>
                </Link>
                {homepageReviews.length > 0 && (
                  <button
                    onClick={() => document.getElementById("reviews-section")?.scrollIntoView({ behavior: "smooth" })}
                    className="inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-primary transition-colors"
                  >
                    <Star className="w-4 h-4 fill-accent text-accent" />
                    {language === "ar" ? `تقييمات العملاء (${totalReviewsCount})` : `Customer Reviews (${totalReviewsCount})`}
                  </button>
                )}
              </div>
            </div>
            <div className={`animate-fade-in ${isRTL ? "md:order-1" : ""}`}>
              <div className="relative group/hero">
                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 rounded-3xl blur-2xl scale-95 group-hover/hero:scale-100 transition-transform duration-700" />
                {!siteImages.ready && <div className="rounded-3xl w-full aspect-[4/3] bg-muted animate-pulse" />}
                {siteImages.ready && (
                  <img src={siteImages.hero || heroImage} alt="Professional cleaning service illustration" className="relative rounded-3xl w-full object-cover shadow-2xl transition-transform duration-700 group-hover/hero:scale-[1.03]" fetchPriority="high" />
                )}

                <div className="absolute inset-0 rounded-3xl bg-gradient-to-t from-primary/20 via-transparent to-transparent opacity-0 group-hover/hero:opacity-100 transition-opacity duration-500" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Our Products */}
      {storeEnabled && storeShowOnHome && storeItems.some((i: any) => i.kind === "bundle") && (() => {
        const ar = language === "ar";
        const nm = (i: any) => ar ? i.name : (i.name_en || i.name);
        const ds = (i: any) => ar ? i.description : (i.description_en || i.description);
        const price = (i: any) => Number(i.price) > 0 ? (
          <span className="flex items-baseline gap-2">
            <span className="font-extrabold text-primary text-lg">{Number(i.price).toFixed(3)} {ar ? "د.ك" : "KWD"}</span>
            {Number(i.compare_at_price) > Number(i.price) && <span className="text-xs text-destructive line-through">{Number(i.compare_at_price).toFixed(3)} {ar ? "د.ك" : "KWD"}</span>}
          </span>
        ) : <span className="text-sm font-semibold text-muted-foreground">{ar ? "قريبًا" : "Coming soon"}</span>;
        const bundle = storeItems.find((i: any) => i.kind === "bundle");
        return (
        <section className="py-20 bg-gradient-to-b from-background via-secondary/30 to-background" data-ve-id="products-section" style={veStyle("products-section")}>
          <div className="container mx-auto px-4 max-w-6xl">
            <div className="text-center mb-10 space-y-2">
              <h3 className="text-3xl md:text-4xl font-extrabold text-foreground leading-tight" data-ve-id="products-title" data-ve-type="text" style={veStyle("products-title")}>
                {ar ? "منتجاتنا" : "Our Products"}
              </h3>
              <p className="text-xs font-semibold tracking-[0.2em] uppercase text-primary/80">{ar ? "Our Products" : "منتجاتنا"}</p>
              {(ar ? storeSettings.store_section_desc_ar : storeSettings.store_section_desc_en) && (
                <p className="text-muted-foreground text-base md:text-lg max-w-2xl mx-auto pt-1" data-ve-id="products-desc" data-ve-type="text" style={veStyle("products-desc")}>
                  {ar ? storeSettings.store_section_desc_ar : storeSettings.store_section_desc_en}
                </p>
              )}
            </div>

            {bundle && (
              <div className="max-w-5xl mx-auto rounded-[2rem] overflow-hidden border border-primary/20 bg-card shadow-lg hover:shadow-2xl transition-shadow duration-500">
              <Link to="/products" className="group grid md:grid-cols-7">
                <div className="relative md:col-span-4 aspect-[16/10] bg-gradient-to-br from-background to-secondary/50">
                  <img src={bundle.image_url} alt={nm(bundle)} loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
                </div>
                <div className="md:col-span-3 p-6 md:p-8 flex flex-col justify-center gap-3 text-start">
                  <div dir="ltr" className="self-start flex flex-col items-start">
                    <span className="text-[10px] tracking-[0.35em] uppercase text-muted-foreground font-semibold">Signature · Pure · Aura</span>
                    <span className="font-brand text-4xl md:text-5xl text-primary leading-tight">House Care</span>
                    <span className="text-sm tracking-[0.5em] uppercase font-bold text-foreground">Collection</span>
                    <span className="mt-2 h-px w-16 bg-gradient-to-r from-primary to-transparent" />
                  </div>
                  {nm(bundle)?.trim() && <h4 className="text-2xl md:text-3xl font-extrabold text-foreground leading-snug">{nm(bundle)}</h4>}
                  {ds(bundle) && <p className="text-muted-foreground leading-relaxed line-clamp-3">{ds(bundle)}</p>}
                  {price(bundle)}
                  <span className="mt-2 inline-flex self-start items-center gap-2 rounded-full bg-primary text-primary-foreground px-6 py-2.5 text-sm font-bold">
                    <ShoppingBag className="w-4 h-4" /> {ar ? "تسوق الآن" : "Shop now"}
                  </span>
                </div>
              </Link>
              <div className="px-6 md:px-8 py-4 border-t border-border/60 text-start"><ProductRatingBlock target={bundle} ar={ar} /></div>
              </div>
            )}

          </div>
        </section>
        );
      })()}

      {/* How it Works */}
      <section className="py-20 bg-secondary/30" data-ve-id="how-section" style={veStyle("how-section")}>
        <div className="container mx-auto px-4">
          <div className="text-center mb-14">
            <h3 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3" data-ve-id="how-title" style={veStyle("how-title")}>{t("how.title")}</h3>
            <p className="text-muted-foreground text-lg" data-ve-id="how-subtitle" style={veStyle("how-subtitle")}>{t("how.subtitle")}</p>
          </div>
          <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {[
              { step: "01", title: t("how.step1.title"), desc: t("how.step1.desc"), icon: "🧹" },
              { step: "02", title: t("how.step2.title"), desc: t("how.step2.desc"), icon: "📅" },
              { step: "03", title: t("how.step3.title"), desc: t("how.step3.desc"), icon: "✨" },
            ].map((item) => (
              <div key={item.step} className="text-center group">
                <div className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mx-auto mb-5 text-4xl group-hover:bg-primary/20 transition-colors duration-300 group-hover:scale-110 transform">
                  {item.icon}
                </div>
                <span className="text-xs font-bold text-primary tracking-widest uppercase mb-2 block">{t("book.step")} {item.step}</span>
                <h4 className="text-xl font-bold text-foreground mb-2">{item.title}</h4>
                <p className="text-muted-foreground">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Services — Two Big Cards */}
      <section className="py-20" data-ve-id="services-section" style={veStyle("services-section")}>
        <div className="container mx-auto px-4">
          <div className="text-center mb-14">
            <h3 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3" data-ve-id="services-title" style={veStyle("services-title")}>{t("services.title")}</h3>
            <p className="text-muted-foreground text-lg" data-ve-id="services-subtitle" style={veStyle("services-subtitle")}>{t("services.subtitle")}</p>
          </div>
          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {/* Card 1 — Flexible Hourly Cleaning */}
            <Card className="group hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-2 border-border/50 overflow-hidden relative">
              <div className="h-2 bg-gradient-to-r from-primary to-primary/60" />
              {/* Decorative bottom-left leaf ornament */}
              <svg className="absolute bottom-0 left-0 w-40 h-40 pointer-events-none" viewBox="0 0 200 200" fill="none">
                <path d="M0 200 C0 170 15 130 45 110 C25 100 10 75 0 50 L0 200Z" fill="hsl(var(--primary))" opacity="0.15" />
                <path d="M0 200 C5 175 30 155 60 145 C35 130 18 105 8 85 C2 120 0 160 0 200Z" fill="hsl(var(--primary))" opacity="0.1" />
                <path d="M0 200 C10 185 35 175 55 170 C30 160 15 140 5 120 L0 200Z" fill="hsl(var(--accent))" opacity="0.12" />
                <circle cx="30" cy="170" r="6" fill="hsl(var(--accent))" opacity="0.2" />
                <circle cx="15" cy="185" r="4" fill="hsl(var(--primary))" opacity="0.18" />
                <ellipse cx="48" cy="182" rx="10" ry="5" fill="hsl(var(--primary))" opacity="0.1" transform="rotate(-20 48 182)" />
                <path d="M0 200 C8 190 20 182 38 178 C18 172 8 158 2 145 L0 200Z" fill="hsl(var(--accent))" opacity="0.08" />
              </svg>
              <CardContent className="p-8 md:p-10 relative z-10">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300">
                    <Timer className="w-8 h-8" />
                  </div>
                  <div>
                    <h4 className="text-xl md:text-2xl font-extrabold text-foreground" data-ve-id="card1-title" style={veStyle("card1-title")}>
                      {language === "ar" ? "تنظيف مرن بالساعة" : "Flexible Hourly Cleaning"}
                    </h4>
                  </div>
                </div>
                <p className="text-muted-foreground text-base leading-relaxed mb-6" data-ve-id="card1-desc" style={veStyle("card1-desc")}>
                  {language === "ar"
                    ? "احجز بالساعة حسب احتياجك — غرفة واحدة أو المنزل بالكامل. نغطي جميع أنواع التنظيف: منازل، شقق، غرف نوم، مطابخ، وغيرها. أنت تحدد الوقت، ونحن ننجز المهمة."
                    : "Book by the hour based on your needs — one room or the entire house. We cover all types of cleaning: homes, apartments, bedrooms, kitchens, and more. You set the time, we get the job done."}
                </p>
                <div className="grid grid-cols-2 gap-4 mb-8">
                  {[
                    { icon: <Home className="w-5 h-5 text-primary" />, label: language === "ar" ? "منازل وشقق" : "Homes & Apartments" },
                    { icon: <Clock className="w-5 h-5 text-primary" />, label: language === "ar" ? "حجز بالساعة" : "Book by the Hour" },
                    { icon: <Sparkles className="w-5 h-5 text-primary" />, label: language === "ar" ? "تنظيف دقيق" : "Deep Cleaning" },
                    { icon: <Shield className="w-5 h-5 text-primary" />, label: language === "ar" ? "عمالة محترفة" : "Trusted Workers" },
                  ].map((feat, i) => (
                    <div key={i} className="flex items-center gap-2.5">
                      <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                        {feat.icon}
                      </div>
                      <span className="text-sm font-medium text-foreground">{feat.label}</span>
                    </div>
                  ))}
                </div>
                <Link to="/book">
                  <Button className="rounded-full gap-2 shadow-lg shadow-primary/20 w-full md:w-auto" data-ve-id="card1-cta" style={veStyle("card1-cta")}>
                    {language === "ar" ? "احجز الآن" : "Book Now"} <Arrow className="w-4 h-4" />
                  </Button>
                </Link>
              </CardContent>
            </Card>

            {/* Card 2 — Subscription Plans */}
            <Card className="group hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-2 border-border/50 overflow-hidden relative">
              <div className="h-2 bg-gradient-to-r from-primary/60 to-primary" />
              {/* Decorative bottom-left leaf ornament */}
              <svg className="absolute bottom-0 left-0 w-40 h-40 pointer-events-none" viewBox="0 0 200 200" fill="none">
                <path d="M0 200 C0 165 20 125 50 105 C28 95 12 68 0 45 L0 200Z" fill="hsl(var(--primary))" opacity="0.15" />
                <path d="M0 200 C8 178 35 158 65 148 C38 132 20 108 10 88 C3 122 0 162 0 200Z" fill="hsl(var(--accent))" opacity="0.1" />
                <path d="M0 200 C12 188 38 178 58 173 C32 162 17 142 7 122 L0 200Z" fill="hsl(var(--primary))" opacity="0.1" />
                <circle cx="35" cy="168" r="7" fill="hsl(var(--accent))" opacity="0.18" />
                <circle cx="18" cy="182" r="4" fill="hsl(var(--primary))" opacity="0.15" />
                <ellipse cx="50" cy="185" rx="9" ry="4" fill="hsl(var(--accent))" opacity="0.1" transform="rotate(-25 50 185)" />
              </svg>
              <CardContent className="p-8 md:p-10 relative z-10">
                <div className="flex items-center gap-4 mb-6">
                  <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300">
                    <CalendarCheck className="w-8 h-8" />
                  </div>
                  <div>
                    <h4 className="text-xl md:text-2xl font-extrabold text-foreground" data-ve-id="card2-title" style={veStyle("card2-title")}>
                      {language === "ar" ? "اشتراكات شهرية" : "Monthly Subscriptions"}
                    </h4>
                  </div>
                </div>
                <p className="text-muted-foreground text-base leading-relaxed mb-6" data-ve-id="card2-desc" style={veStyle("card2-desc")}>
                  {language === "ar"
                    ? "اشترك في خطة شهرية واحصل على تنظيف منتظم دون عناء الحجز كل مرة. خطط مرنة تناسب أسرتك — أسبوعية أو نصف شهرية أو شهرية. وفّر أكثر مع الالتزام."
                    : "Subscribe to a monthly plan and enjoy regular cleaning without the hassle of booking every time. Flexible plans to fit your household — weekly, bi-weekly, or monthly. Save more with commitment."}
                </p>
                <div className="grid grid-cols-2 gap-4 mb-8">
                  {[
                    { icon: <RefreshCw className="w-5 h-5 text-primary" />, label: language === "ar" ? "تنظيف دوري" : "Recurring Cleans" },
                    { icon: <CalendarCheck className="w-5 h-5 text-primary" />, label: language === "ar" ? "خطط مرنة" : "Flexible Plans" },
                    { icon: <Sparkles className="w-5 h-5 text-primary" />, label: language === "ar" ? "أسعار مخفضة" : "Discounted Rates" },
                    { icon: <Shield className="w-5 h-5 text-primary" />, label: language === "ar" ? "أولوية الحجز" : "Priority Booking" },
                  ].map((feat, i) => (
                    <div key={i} className="flex items-center gap-2.5">
                      <div className="w-9 h-9 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                        {feat.icon}
                      </div>
                      <span className="text-sm font-medium text-foreground">{feat.label}</span>
                    </div>
                  ))}
                </div>
                <Link to="/book">
                  <Button variant="outline" className="rounded-full gap-2 w-full md:w-auto border-primary/30 hover:bg-primary/5">
                    <CalendarCheck className="w-4 h-4" />
                    {language === "ar" ? "احجز الآن" : "Book Now"}
                  </Button>
                </Link>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Team Section - Dynamic from DB */}
      <section className="py-16 bg-secondary/30" data-ve-id="team-section" style={veStyle("team-section")}>
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-10 items-center max-w-5xl mx-auto">
            <div className={`${isRTL ? "md:order-2" : ""} group/img`}>
              <div className="relative overflow-hidden rounded-3xl shadow-lg">
                <img
                  src={siteImages.clean_home || cleanHomeImage}
                  alt="Clean home illustration"
                  className={`w-full object-cover transition-all duration-700 group-hover/img:scale-105 ${siteImages.ready ? "opacity-100" : "opacity-0"}`}
                />

                <div className="absolute inset-0 bg-gradient-to-t from-primary/30 via-transparent to-transparent opacity-0 group-hover/img:opacity-100 transition-opacity duration-500" />
              </div>
            </div>
            <div className={isRTL ? "md:order-1" : ""}>
              <h3 className="text-3xl font-extrabold text-foreground mb-4" data-ve-id="team-title" style={veStyle("team-title")}>{t("team.title")}</h3>
              <p className="text-muted-foreground mb-8 text-lg" data-ve-id="team-subtitle" style={veStyle("team-subtitle")}>{t("team.subtitle")}</p>
              <div className="grid grid-cols-2 gap-4">
                {cleaners.map((person: any, index: number) => (
                  <div
                    key={person.id}
                    className="flex items-center gap-3 group opacity-0 animate-fade-in"
                    style={{ animationDelay: `${index * 100}ms`, animationFillMode: 'forwards' }}
                  >
                    {person.photo_url ? (
                      <img
                        src={person.photo_url}
                        alt={person.name}
                        className="w-16 h-16 rounded-2xl object-cover group-hover:scale-110 group-hover:shadow-lg transition-all duration-300 flex-shrink-0"
                      />
                    ) : (
                      <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center text-primary font-bold text-lg group-hover:bg-primary group-hover:text-primary-foreground transition-colors duration-300 flex-shrink-0">
                        {person.name.substring(0, 2).toUpperCase()}
                      </div>
                    )}
                    <div className="min-w-0">
                      <h4 className="font-bold text-foreground text-sm truncate flex items-center gap-1">{showFlags && person.nationality && <img src={countryFlagUrl(person.nationality, 24)} alt="" className="w-5 h-4 object-cover rounded-sm flex-shrink-0" />}{person.name}</h4>
                      <p className="text-xs text-muted-foreground truncate">{person.specialty || (language === "ar" ? "تنظيف عام" : "General Cleaning")}</p>
                      {showRatings && (cleanerRatings as any)[person.id] && (
                        <div className="flex items-center gap-1 mt-0.5">
                          <Star className="w-3.5 h-3.5 fill-accent text-accent" />
                          <span className="text-xs font-bold text-foreground">
                            {(cleanerRatings as any)[person.id].avg.toFixed(1)}
                          </span>
                          <span className="text-[10px] text-muted-foreground">
                            ({(cleanerRatings as any)[person.id].count})
                          </span>
                        </div>
                      )}

                    </div>
                  </div>
                ))}
                {cleanersLoading && [0, 1, 2, 3, 4, 5].map((i) => (
                  <div key={`sk-${i}`} className="flex items-center gap-4 p-4">
                    <Skeleton className="w-16 h-16 rounded-2xl flex-shrink-0" />
                    <div className="space-y-2 flex-1">
                      <Skeleton className="h-4 w-24" />
                      <Skeleton className="h-3 w-32" />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Customer Reviews */}
      {homepageReviews.length > 0 && (() => {
        const totalPages = Math.ceil(homepageReviews.length / REVIEWS_PER_PAGE);
        const currentReviews = homepageReviews.slice(reviewPage * REVIEWS_PER_PAGE, (reviewPage + 1) * REVIEWS_PER_PAGE);
        return (
        <section className="py-20" id="reviews-section" data-ve-id="reviews-section">
          <div className="container mx-auto px-4">
            <div className="text-center mb-14">
              <h3 className="text-3xl md:text-4xl font-extrabold text-foreground mb-3">
                {language === "ar" ? "ماذا يقول عملاؤنا عنّا؟ 💬" : "What Our Customers Say 💬"}
              </h3>
              <p className="text-muted-foreground text-lg max-w-xl mx-auto">
                {language === "ar" 
                  ? "رضا عملائنا هو معيار نجاحنا 💯" 
                  : "Our customers' satisfaction is our measure of success 💯"}
              </p>
            </div>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
              {currentReviews.map((review: any) => (
                <Card key={review.id} className="group hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 hover:-translate-y-1 border-border/50 overflow-hidden">
                  <CardContent className="p-6">
                    <div className="flex gap-0.5 mb-3">
                      {Array.from({ length: 5 }).map((_, i) => (
                        <Star key={i} className={`w-4 h-4 ${i < review.rating ? "fill-accent text-accent" : "text-muted-foreground/20"}`} />
                      ))}
                    </div>
                    {review.comment && (
                      <p className="text-foreground/80 text-sm leading-relaxed mb-4 line-clamp-4">"{review.comment}"</p>
                    )}
                    <div className="flex items-center gap-3 pt-3 border-t border-border/50">
                      <div className="w-9 h-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
                        {review.customer_name?.substring(0, 2).toUpperCase()}
                      </div>
                       <div className="min-w-0">
                        <p className="font-semibold text-foreground text-sm truncate">{review.customer_name}</p>
                        <p className="text-xs text-muted-foreground truncate">{review.service_name}</p>
                        {review.cleaner_name && review.cleaner_name !== 'N/A' && (
                          <p className="text-xs text-primary/70 truncate">{review.cleaner_name}</p>
                        )}
                       </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* Pagination */}
            {totalPages > 1 && (
              <div className="flex items-center justify-center gap-3 mt-10">
                <Button
                  variant="outline"
                  size="icon"
                  className="rounded-full h-10 w-10"
                  disabled={reviewPage === 0}
                  onClick={() => handleReviewInteraction(reviewPage - 1)}
                >
                  {isRTL ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
                </Button>
                <div className="flex flex-wrap items-center justify-center gap-1.5 max-w-[60vw]">
                  {Array.from({ length: totalPages }).map((_, i) => (
                    <button
                      key={i}
                      onClick={() => handleReviewInteraction(i)}
                      className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                        i === reviewPage 
                          ? "bg-primary w-7" 
                          : "bg-muted-foreground/20 hover:bg-muted-foreground/40"
                      }`}
                    />
                  ))}
                </div>
                <Button
                  variant="outline"
                  size="icon"
                  className="rounded-full h-10 w-10"
                  disabled={reviewPage === totalPages - 1}
                  onClick={() => handleReviewInteraction(reviewPage + 1)}
                >
                  {isRTL ? <ChevronLeft className="w-5 h-5" /> : <ChevronRight className="w-5 h-5" />}
                </Button>
              </div>
            )}
          </div>
        </section>
        );
      })()}

      {/* Contact */}
      <section className="py-16" data-ve-id="contact-section" style={veStyle("contact-section")}>
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto grid sm:grid-cols-3 gap-8 text-center">
            <a href="https://maps.app.goo.gl/wfQC4MwyPeeGjFKB7" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer">
              <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center">
                <MapPin className="w-6 h-6 text-primary" />
              </div>
              <h4 className="font-bold text-foreground">{t("contact.location")}</h4>
              <p className="text-sm text-muted-foreground">{t("contact.location.value")}</p>
            </a>
            <a href="tel:+96551502510" className="flex flex-col items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer">
              <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center">
                <Phone className="w-6 h-6 text-primary" />
              </div>
              <h4 className="font-bold text-foreground">{t("contact.phone")}</h4>
              <p className="text-sm text-muted-foreground">+965 5150 2510</p>
            </a>
            <a href="https://wa.me/96551502510" target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-3 hover:opacity-80 transition-opacity cursor-pointer">
              <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center">
                <MessageCircle className="w-6 h-6 text-primary" />
              </div>
              <h4 className="font-bold text-foreground">{t("contact.whatsapp")}</h4>
              <p className="text-sm text-muted-foreground">{t("contact.whatsapp.value")}</p>
            </a>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-foreground text-background py-12" data-ve-id="footer-section" style={veStyle("footer-section")}>
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
            <div className="flex items-center gap-3">
              <img src={logoImage} alt="House Care" className="h-16 w-auto object-contain brightness-0 invert dark:brightness-100 dark:invert-0" />
            </div>
            <div className="flex items-center gap-2 text-sm opacity-70">
              <Clock className="w-4 h-4" />
              <span>{t("footer.hours")}</span>
            </div>
          </div>
          <div className="mt-6 flex flex-wrap justify-center gap-x-4 gap-y-2">
            <Link to="/website-terms" className="text-sm opacity-60 hover:opacity-100 transition-opacity underline underline-offset-4">
              {language === "ar" ? "شروط استخدام الموقع" : "Website Terms of Use"}
            </Link>
            <Link to="/privacy" className="text-sm opacity-60 hover:opacity-100 transition-opacity underline underline-offset-4">
              {language === "ar" ? "سياسة الخصوصية" : "Privacy Policy"}
            </Link>
            <Link to="/terms" className="text-sm opacity-60 hover:opacity-100 transition-opacity underline underline-offset-4">
              {language === "ar" ? "الشروط وسياسة الاسترجاع" : "Terms & Refund Policy"}
            </Link>
            <Link to="/payment-security" className="text-sm opacity-60 hover:opacity-100 transition-opacity underline underline-offset-4">
              {language === "ar" ? "أمان المدفوعات" : "Payment Security"}
            </Link>
          </div>
          <div className="mt-4 pt-6 border-t border-background/10 text-center text-sm opacity-50">
            {t("footer.rights")}
            <div className="mt-3">
              <InstallAppButton />
            </div>
          </div>
          {!isHidden("powered-by-footer") && (
            <p className="mt-4 text-center text-xs opacity-30" data-ve-id="powered-by-footer" data-ve-type="text" style={veStyle("powered-by-footer")}>
              {ve("powered-by-footer", language === "ar" ? "بواسطة @JustBook" : "Powered By @JustBook")}
            </p>
          )}
        </div>
      </footer>

      {/* Floating Share Button */}
      <a
        href={`https://wa.me/?text=${encodeURIComponent(
          language === "ar"
            ? "🏠✨ جرّب خدمة هاوس كير للتنظيف المنزلي! خدمة احترافية وأسعار مناسبة 👇\nhttps://housecarekw.com"
            : "🏠✨ Try House Care for professional home cleaning! Great service at great prices 👇\nhttps://housecarekw.com"
        )}`}
        target="_blank"
        rel="noopener noreferrer"
        className="fixed bottom-6 start-6 z-50 bg-[#25D366] hover:bg-[#1da851] text-white rounded-full p-3 shadow-lg hover:shadow-xl transition-all hover:scale-110 flex items-center gap-2 group"
        aria-label="Share via WhatsApp"
      >
        <Share2 className="w-5 h-5" />
        <span className="max-w-0 overflow-hidden group-hover:max-w-[120px] transition-all duration-300 whitespace-nowrap text-sm font-medium">
          {language === "ar" ? "شارك الموقع" : "Share"}
        </span>
      </a>
    </div>
  );
};

export default Index;