import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal, SupportModal } from "@/components/ContactModals";
import GlobalDataCenters from "@/components/home/GlobalDataCenters";
import SectionDivider from "@/components/SectionDivider";
import {
  Check, ArrowDown, Server, Cloud, HardDrive, Mail, Globe, Building2,
  ShieldCheck, Zap, Clock, Users, Award, Lock, Smartphone, KeyRound,
  TicketCheck, Activity, Headphones, ChevronDown, Star, ArrowRight,
} from "lucide-react";

// Hero slider data — each slide overlays the same background video.
// `primary` buttons open popup modals; `secondary` buttons navigate to the
// dedicated product page for that slide.
type HeroAction =
  | { kind: "modal"; modal: "price" | "contact" | "support"; label: string }
  | { kind: "link"; to: string; label: string };

interface HeroSlide {
  badge: string;
  title: string;
  titleAccent: string;
  desc: string;
  bullets: string[];
  primary: HeroAction;
  secondary: HeroAction;
}

const heroSlides: HeroSlide[] = [
  {
    badge: "Trusted by 10,000+ businesses across the Gulf",
    title: "Dedicated With",
    titleAccent: "Confidence.",
    desc: "Powerful cloud servers, dedicated hardware and managed IT services with resource exclusivity — starting at just $12.99/mo.",
    bullets: ["30-day money back", "99.99% SLA", "Free migration"],
    primary: { kind: "modal", modal: "price", label: "Get Prices" },
    secondary: { kind: "link", to: "/dedicated", label: "Dedicated Servers" },
  },
  {
    badge: "Infrastructure built for scale",
    title: "Virtual",
    titleAccent: "Cloud Servers",
    desc: "NVMe-powered Cloud VPS with per-second billing, one-click OS reinstall and 60-second provisioning through Virtualizor automation.",
    bullets: ["Immediate scalability", "High performance", "Fast deployment"],
    primary: { kind: "modal", modal: "price", label: "Get Prices" },
    secondary: { kind: "link", to: "/cloud-vps", label: "VPS Servers" },
  },
  {
    badge: "Enterprise-grade reliability",
    title: "Managed IT",
    titleAccent: "Done Right.",
    desc: "24/7 monitoring, proactive patching, secure backups and expert engineers on call — so your team can focus on the business.",
    bullets: ["Proactive monitoring", "Zero-downtime migration", "24/7 expert support"],
    primary: { kind: "modal", modal: "contact", label: "Talk to Sales" },
    secondary: { kind: "link", to: "/managed-it", label: "Managed IT" },
  },
];



const managingFeatures = [
  {
    title: "Proactive Monitoring & 24/7 Support",
    desc: "Real-time alerts (including mobile WhatsApp notifications), rapid response, and issue resolution before they impact operations.",
  },
  {
    title: "Business Email Migration",
    desc: "Zero-downtime migrations between Exchange / Microsoft 365, Google Workspace, SmarterMail, and IMAP — mailbox data, calendars, contacts, and DNS cutover.",
  },
  {
    title: "Cloud Tenant Management",
    desc: "Managing Microsoft Azure and Google Cloud tenants: identity & access (AAD/IAM), cost control, networking, backups, and policy baselines.",
  },
  {
    title: "Remote Support",
    desc: "Secure remote assistance for servers and endpoints to investigate, troubleshoot, and remediate issues quickly.",
  },
  {
    title: "End-User Support",
    desc: "Helpdesk for your team: onboarding, email & device setup, desktop apps, password resets, and day-to-day assistance.",
  },
  {
    title: "Server & Cloud Optimization",
    desc: "Performance tuning, capacity planning, security patching, and automated upgrades.",
  },
  {
    title: "Data Security & Backup",
    desc: "Hardened configurations, WAF/anti-bot, backup strategies, and disaster recovery.",
  },
  {
    title: "Scalable Solutions",
    desc: "From a few desktops to complex multi-region deployments — pay only for what you need.",
  },
];

const plans = [
  {
    name: "Starter VPS",
    type: "Cloud VPS",
    monthly: 12.99,
    yearly: 129,
    cpu: "2 vCPU",
    ram: "4 GB RAM",
    storage: "80 GB NVMe",
    bandwidth: "4 TB",
    highlight: false,
  },
  {
    name: "Business VDS",
    type: "Virtual Dedicated",
    monthly: 39.99,
    yearly: 399,
    cpu: "6 vCPU",
    ram: "16 GB RAM",
    storage: "250 GB NVMe",
    bandwidth: "10 TB",
    highlight: true,
  },
  {
    name: "Enterprise Dedicated",
    type: "Dedicated Server",
    monthly: 89.99,
    yearly: 899,
    cpu: "16 Cores Xeon",
    ram: "64 GB RAM",
    storage: "2× 1 TB NVMe",
    bandwidth: "Unmetered",
    highlight: false,
  },
];

const whyFeatures = [
  { icon: Zap, title: "99.99% Uptime", desc: "Enterprise-grade SLA with redundant networks & power." },
  { icon: ShieldCheck, title: "DDoS Protection", desc: "Always-on mitigation, WAF, anti-bot & SSL included." },
  { icon: Headphones, title: "24/7 Expert Support", desc: "WhatsApp, phone & ticket support by certified engineers." },
  { icon: Clock, title: "60s Provisioning", desc: "Automated deployment via WHMCS & Virtualizor APIs." },
  { icon: Users, title: "10,000+ Clients", desc: "Trusted across Saudi Arabia, Kuwait, Egypt & the Gulf." },
  { icon: Award, title: "ISO Certified", desc: "Secure, compliant data centers & audited processes." },
];

const faqs = [
  { q: "Do you offer a money-back guarantee?", a: "Yes — all hosting and VPS plans include a 30-day money-back guarantee, no questions asked." },
  { q: "Can I upgrade my plan later?", a: "Absolutely. Through the client portal you can upgrade, downgrade or switch between VPS / VDS / Dedicated plans with a few clicks." },
  { q: "Which payment methods do you accept?", a: "Credit/debit cards, PayPal, Mada, bank transfer and cryptocurrency are supported at checkout." },
  { q: "Do you migrate my existing website for free?", a: "Yes, our team handles zero-downtime migrations from Exchange, Microsoft 365, Google Workspace, cPanel or any IMAP provider free of charge." },
  { q: "How does the MFA / 2FA work?", a: "You can protect your account with SMS OTP, email OTP, Google Authenticator or Microsoft Authenticator — configurable per user." },
  { q: "Do you offer managed services?", a: "Yes. Our managed IT team covers monitoring, patching, backups, security hardening and 24/7 incident response." },
];

const testimonials = [
  { name: "Ahmed Al-Rashed", role: "CTO, FinCorp KSA", body: "DoItEasy migrated our 400-user mail system without a single minute of downtime. Their team is world-class." },
  { name: "Sara Mansour", role: "IT Director, LogiGulf", body: "The client portal gives us full visibility over every server, domain and invoice. Support is genuinely 24/7." },
  { name: "Omar Khalifa", role: "Founder, StartupX", body: "We scaled from one VPS to a multi-region cloud in 6 months. Provisioning is automated and billing is transparent." },
];

export default function Index() {
  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");
  const [openFaq, setOpenFaq] = useState<number | null>(0);
  const [slide, setSlide] = useState(0);
  // Popup modal visibility state — all three modals are rendered at the bottom
  // of the page and opened on demand by the hero / final CTA buttons.
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);
  const [supportOpen, setSupportOpen] = useState(false);

  const openModal = (m: "price" | "contact" | "support") => {
    if (m === "price") setPriceOpen(true);
    else if (m === "contact") setContactOpen(true);
    else setSupportOpen(true);
  };

  // Auto-advance is disabled — slides change only on manual interaction
  // (indicator click or mobile swipe).

  // Manually jump to a slide AND force scroll to top (used by indicator clicks).
  const goToSlide = (i: number) => {
    setSlide(i);
    if (typeof window !== "undefined") {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  };

  // Touch swipe handlers for mobile navigation between slides.
  // Swipe left  => next slide,  Swipe right => previous slide.
  const touchStartX = useRef<number | null>(null);
  const touchStartY = useRef<number | null>(null);
  const SWIPE_THRESHOLD = 50; // minimum px to count as a swipe

  const onTouchStart = (e: React.TouchEvent) => {
    const t = e.touches[0];
    touchStartX.current = t.clientX;
    touchStartY.current = t.clientY;
  };

  const onTouchEnd = (e: React.TouchEvent) => {
    if (touchStartX.current == null || touchStartY.current == null) return;
    const t = e.changedTouches[0];
    const dx = t.clientX - touchStartX.current;
    const dy = t.clientY - touchStartY.current;
    touchStartX.current = null;
    touchStartY.current = null;
    // Only treat it as a horizontal swipe when horizontal movement clearly
    // dominates vertical movement — so vertical scrolling is not hijacked.
    if (Math.abs(dx) < SWIPE_THRESHOLD || Math.abs(dx) < Math.abs(dy)) return;
    if (dx < 0) {
      // swipe left => next slide
      goToSlide((slide + 1) % heroSlides.length);
    } else {
      // swipe right => previous slide
      goToSlide((slide - 1 + heroSlides.length) % heroSlides.length);
    }
  };

  const current = heroSlides[slide];

  // Enable one-page snap scrolling on the document while on homepage
  useEffect(() => {
    document.documentElement.classList.add("onepage-mode");
    document.body.classList.add("onepage-mode");
    return () => {
      document.documentElement.classList.remove("onepage-mode");
      document.body.classList.remove("onepage-mode");
    };
  }, []);

  return (
    <SiteLayout>
      {/* HERO — Full-screen background video with text slider (one-page landing) */}
      <section
        className="relative text-white overflow-hidden flex flex-col bg-[#03120a] w-full onepage-section touch-pan-y"
        style={{ height: "calc(100dvh + 5rem)", minHeight: "calc(100dvh + 5rem)", marginTop: 0 }}
        onTouchStart={onTouchStart}
        onTouchEnd={onTouchEnd}
      >
        {/* Static fallback gradient (shown behind video while loading or if video fails) */}
        <div className="absolute inset-0 z-0 bg-gradient-to-br from-[#03120a] via-[#063019] to-[#0b6e3e]" />
        {/* Full-screen background video — fills 100% of hero, no white/empty space, responsive across all devices */}
        <video
          key="hero-bg-video"
          autoPlay
          loop
          muted
          playsInline
          preload="auto"
          disablePictureInPicture
          disableRemotePlayback
          controls={false}
          poster="/assets/hero-poster.jpg"
          src="/assets/hero-servers-data.mp4?v=dc-green"
          onLoadedMetadata={(e) => {
            const v = e.currentTarget;
            v.muted = true;
            v.play().catch(() => {});
          }}
          onLoadedData={(e) => {
            const v = e.currentTarget;
            v.muted = true;
            v.play().catch(() => {});
          }}
          onCanPlay={(e) => {
            const v = e.currentTarget;
            v.muted = true;
            if (v.paused) v.play().catch(() => {});
          }}
          onError={(e) => {
            // eslint-disable-next-line no-console
            console.warn("Hero video failed to load:", e.currentTarget.error);
          }}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: "100%",
            minWidth: "100%",
            minHeight: "100%",
            objectFit: "cover",
            objectPosition: "center center",
          }}
          className="z-0"
        />
        {/* Dark gradient overlay for text legibility */}
        <div className="absolute inset-0 bg-gradient-to-r from-[#03120a]/85 via-[#03120a]/60 to-[#03120a]/20 z-[1]" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#03120a]/80 via-transparent to-transparent z-[1]" />

        {/* Floating status badges — premium feel (visible on md+) */}
        <div className="absolute top-44 right-6 md:right-10 z-[2] hidden md:flex flex-col gap-2">
          <div className="flex items-center gap-2 bg-black/40 backdrop-blur-md border border-white/10 rounded-full px-4 py-1.5 text-xs font-normal">
            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
            Tier-III Data Center · Live
          </div>
          <div className="flex items-center gap-2 bg-black/40 backdrop-blur-md border border-white/10 rounded-full px-4 py-1.5 text-xs font-normal">
            <ShieldCheck className="w-3.5 h-3.5 text-[#f5c400]" />
            DDoS Protected
          </div>
          <div className="flex items-center gap-2 bg-black/40 backdrop-blur-md border border-white/10 rounded-full px-4 py-1.5 text-xs font-normal">
            <Activity className="w-3.5 h-3.5 text-emerald-400" />
            99.99% Uptime
          </div>
        </div>

        {/* Slider content */}
        <div className="relative z-[2] flex-1 flex items-center overflow-hidden pt-24">
          <div className="max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16 w-full text-[16px] font-normal text-white">
            <div
              key={slide}
              className="max-w-3xl animate-[fadeInUp_0.7s_ease-out]"
            >
              <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 backdrop-blur-sm rounded-full px-4 py-1.5 text-xs md:text-sm mb-4 md:mb-5">
                <span className="w-2 h-2 rounded-full bg-[#f5c400] animate-pulse" />
                {current.badge}
              </div>
              <h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium leading-tight mb-4 md:mb-5 drop-shadow-2xl">
                {current.title}{" "}
                <span className="text-[#f5c400]">{current.titleAccent}</span>
              </h1>
              <p className="max-w-2xl text-base md:text-lg text-slate-200 mb-5 md:mb-6 leading-relaxed drop-shadow-lg">
                {current.desc}
              </p>

              <ul className="space-y-2 mb-6 md:mb-7">
                {current.bullets.map((b) => (
                  <li key={b} className="flex items-center gap-3 md:text-base mt-[8px] mr-[0px] mb-[0px] ml-[0px] pt-[0px] pr-[0px] pb-[0px] pl-[0px] rounded-none text-[16px] font-normal text-slate-100 bg-[#00000000] opacity-100">
                    <span className="w-5 h-5 rounded-full bg-[#0b6e3e] flex items-center justify-center shrink-0">
                      <Check className="w-3 h-3" strokeWidth={3} />
                    </span>
                    {b}
                  </li>
                ))}
              </ul>

              <div className="flex flex-wrap gap-3 md:gap-4">
                {current.primary.kind === "modal" ? (
                  <button
                    type="button"
                    onClick={() => openModal(current.primary.kind === "modal" ? current.primary.modal : "price")}
                    className="px-6 md:px-8 py-3 md:py-4 rounded-md bg-[#f5c400] text-slate-900 font-bold hover:bg-yellow-400 transition shadow-2xl shadow-yellow-500/30"
                  >
                    {current.primary.label}
                  </button>
                ) : (
                  <Link
                    to={current.primary.to}
                    className="px-6 md:px-8 py-3 md:py-4 rounded-md bg-[#f5c400] text-slate-900 font-bold hover:bg-yellow-400 transition shadow-2xl shadow-yellow-500/30"
                  >
                    {current.primary.label}
                  </Link>
                )}
                {current.secondary.kind === "modal" ? (
                  <button
                    type="button"
                    onClick={() => openModal(current.secondary.kind === "modal" ? current.secondary.modal : "contact")}
                    className="px-6 md:px-8 py-3 md:py-4 rounded-md bg-[#0b6e3e] text-white font-bold hover:bg-[#0a8048] transition border border-white/20 shadow-xl"
                  >
                    {current.secondary.label}
                  </button>
                ) : (
                  <Link
                    to={current.secondary.to}
                    className="px-6 md:px-8 py-3 md:py-4 rounded-md bg-[#0b6e3e] text-white font-bold hover:bg-[#0a8048] transition border border-white/20 shadow-xl"
                  >
                    {current.secondary.label}
                  </Link>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Slider indicators + scroll cue */}
        <div className="relative z-[2] flex flex-col items-center gap-4 pb-5 md:pb-6">
          <div className="flex items-center gap-2">
            {heroSlides.map((_, i) => (
              <button
                key={i}
                onClick={() => goToSlide(i)}
                aria-label={`Go to slide ${i + 1}`}
                className={`h-1 rounded-full transition-all ${
                  i === slide ? "w-10 bg-[#f5c400]" : "w-6 bg-white/40 hover:bg-white/70"
                }`}
              />
            ))}
          </div>
          <button
            onClick={() => {
              const el = document.getElementById("next-section");
              if (!el) return;
              el.scrollIntoView({ behavior: "smooth", block: "start" });
            }}
            aria-label="Scroll to next section"
            className="w-10 h-10 rounded-full border-2 border-white/40 flex items-center justify-center animate-bounce backdrop-blur-sm hover:bg-white/10 hover:border-white/70 transition"
          >
            <ArrowDown className="w-4 h-4" />
          </button>
        </div>
      </section>



      {/* POST-HERO SEPARATOR — white wave with soft shadow that sits on top of
          the About section, creating a clean visual break between the dark
          video hero and the rest of the page. */}
      <div
        aria-hidden="true"
        className="relative w-full -mt-px"
        style={{ height: 90 }}
      >
        <svg
          viewBox="0 0 1440 90"
          preserveAspectRatio="none"
          className="block w-full h-full"
          style={{
            filter:
              "drop-shadow(0 6px 12px rgba(15,23,42,0.12)) drop-shadow(0 16px 32px rgba(15,23,42,0.10))",
          }}
        >
          <path
            d="M0,50 C240,90 480,10 720,40 C960,70 1200,20 1440,50 L1440,90 L0,90 Z"
            fill="#ffffff"
          />
        </svg>
      </div>

      {/* ABOUT US — Full-width cover style (homepage) */}
      {/*
        Full-bleed "cover" section: dark-green gradient spans the entire
        viewport width (edge-to-edge), with a constrained inner content grid
        for readability. "Our Mission" and "Our Vision" live on the dedicated
        /about page; users click "Read More" to see the full content.
      */}
      <section
        id="next-section"
        className="relative overflow-hidden scroll-mt-20 onepage-section text-white"
        style={{
          scrollSnapAlign: "start",
          background:
            "linear-gradient(135deg, #03120a 0%, #063019 45%, #0b6e3e 100%)",
        }}
      >
        {/* Decorative accents — now scoped to the full-width section */}
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 opacity-[0.35]"
          style={{
            backgroundImage:
              "radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px)",
            backgroundSize: "22px 22px",
          }}
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -top-40 -right-40 w-[36rem] h-[36rem] rounded-full blur-3xl"
          style={{
            background:
              "radial-gradient(circle, rgba(245,196,0,0.22) 0%, rgba(245,196,0,0) 70%)",
          }}
        />
        <div
          aria-hidden="true"
          className="pointer-events-none absolute -bottom-40 -left-40 w-[36rem] h-[36rem] rounded-full blur-3xl"
          style={{
            background:
              "radial-gradient(circle, rgba(34,197,94,0.30) 0%, rgba(34,197,94,0) 70%)",
          }}
        />

        <div className="relative z-10 max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16 py-20 md:py-24 lg:py-28">
          <AnimateIn direction="up" duration={800} distance={40}>
            <div className="relative">
              <div className="relative grid lg:grid-cols-2 gap-10 lg:gap-14 items-center">
                {/* LEFT: headline + copy + CTA */}
                <AnimateIn direction="right" delay={120} duration={800} distance={48}>
                  <span className="inline-flex items-center gap-2 bg-white/10 border border-white/20 backdrop-blur-sm rounded-full px-4 py-1.5 text-xs font-semibold text-white/90 uppercase tracking-widest">
                    <span className="w-1.5 h-1.5 rounded-full bg-[#f5c400]" />
                    About DoItEasy
                  </span>
                  <h2 className="mt-4 text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight">
                    Who Are We
                    <span className="block text-[#f5c400] mt-1 text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
                      Your trusted hosting partner since 2018
                    </span>
                  </h2>

                  <p className="mt-5 text-slate-200 leading-relaxed text-base md:text-lg max-w-xl">
                    Since 2018,{" "}
                    <span className="font-bold text-[#f5c400]">DoItEasy</span>{" "}
                    has been recognized as one of the leading web hosting
                    providers in the Gulf region. We proudly support the
                    digital transformation journey across{" "}
                    <span className="font-semibold text-white">
                      Saudi Arabia, Egypt, Kuwait
                    </span>{" "}
                    and the wider Gulf — delivering reliable, high-quality
                    hosting, cloud and managed IT services at competitive
                    prices.
                  </p>

                  {/* Feature chips */}
                  <div className="mt-6 flex flex-wrap gap-2.5">
                    {[
                      { icon: ShieldCheck, label: "Secure by design" },
                      { icon: Zap, label: "99.99% Uptime" },
                      { icon: Users, label: "10,000+ Clients" },
                      { icon: Globe, label: "Gulf & Beyond" },
                    ].map((chip) => (
                      <span
                        key={chip.label}
                        className="inline-flex items-center gap-2 bg-white/10 border border-white/15 backdrop-blur-sm rounded-full px-3.5 py-1.5 text-xs font-semibold text-white"
                      >
                        <chip.icon className="w-3.5 h-3.5 text-[#f5c400]" />
                        {chip.label}
                      </span>
                    ))}
                  </div>

                  <div className="mt-8 flex flex-wrap gap-3">
                    <Link
                      to="/about"
                      className="inline-flex items-center gap-2 px-7 py-3 bg-[#f5c400] text-slate-900 font-bold rounded-md hover:bg-yellow-400 transition shadow-xl shadow-yellow-500/20"
                    >
                      Read More
                      <ArrowRight className="w-4 h-4" />
                    </Link>
                    <button
                      type="button"
                      onClick={() => setContactOpen(true)}
                      className="inline-flex items-center gap-2 px-7 py-3 !bg-transparent !hover:bg-transparent border-2 border-white/40 text-white font-bold rounded-md hover:!bg-white/10 transition"
                    >
                      Talk to Sales
                    </button>
                  </div>
                </AnimateIn>

                {/* RIGHT: cover image */}
                <AnimateIn direction="left" delay={220} duration={800} distance={48}>
                  <div className="relative">
                    <div className="relative rounded-2xl overflow-hidden shadow-2xl border border-white/10 aspect-[5/4] md:aspect-[4/3]">
                      <img
                        src="https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-28/nq24qwaaafna/about-server-room-green.png"
                        alt="DoItEasy green-lit modern data center"
                        className="absolute inset-0 w-full h-full object-cover"
                        loading="lazy"
                      />
                      {/* Subtle dark overlay for legibility */}
                      <div className="absolute inset-0 bg-gradient-to-t from-[#03120a]/55 via-[#03120a]/10 to-transparent" />

                      {/* Floating stat tile */}
                      <div className="absolute top-4 left-4 bg-white/95 backdrop-blur rounded-xl px-4 py-2.5 shadow-lg border border-white/60 flex items-center gap-3">
                        <div className="w-9 h-9 rounded-lg bg-[#0b6e3e] text-white flex items-center justify-center">
                          <Award className="w-4 h-4" />
                        </div>
                        <div>
                          <div className="text-[10px] font-semibold text-slate-500 uppercase tracking-wider">
                            Since
                          </div>
                          <div className="text-sm font-extrabold text-[#0b6e3e] leading-none">
                            2018
                          </div>
                        </div>
                      </div>

                      {/* Floating live status */}
                      <div className="absolute bottom-4 right-4 bg-black/60 backdrop-blur-md border border-white/20 rounded-full px-3.5 py-1.5 text-xs text-white font-semibold inline-flex items-center gap-2">
                        <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                        Tier-III Datacenter · Live
                      </div>
                    </div>

                    {/* Floating info card under the image (desktop only) */}
                    <div className="hidden md:flex absolute -bottom-6 -left-6 items-center gap-3 bg-white rounded-2xl shadow-xl border border-slate-200 px-5 py-4 max-w-[260px]">
                      <div className="w-11 h-11 rounded-xl bg-[#f5c400] flex items-center justify-center shrink-0">
                        <Headphones className="w-5 h-5 text-slate-900" />
                      </div>
                      <div>
                        <div className="text-xs text-slate-500">
                          Support you can reach
                        </div>
                        <div className="text-sm font-bold text-slate-900 leading-tight">
                          24/7 local engineers
                        </div>
                      </div>
                    </div>
                  </div>
                </AnimateIn>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* MANAGING YOUR SERVICES — Portal showcase (identical to doiteasy.net portal style) */}
      <section className="relative bg-slate-50 py-20 scroll-mt-20 onepage-section" style={{ scrollSnapAlign: "start" }}>
        {/* Soft wave divider — transitions from the dark-green About section above */}
        <SectionDivider from="#0b6e3e" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">Client Portal</span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">Managing Your Services</h2>
            <p className="text-slate-700 mt-3 font-semibold">Manage all your services from one unified dashboard</p>
            <p className="text-slate-600 mt-3 max-w-3xl mx-auto leading-relaxed">
              Running a business shouldn't mean spending your day babysitting infrastructure. With{" "}
              <span className="font-bold text-[#0b6e3e]">DoItEasy</span>, monitor services, servers, domains, invoices, SSL, uptime, and tickets — all from a single, powerful portal.
            </p>
          </AnimateIn>

          {/* 3 dashboard screens — identical layout & style to doiteasy.net client portal */}
          <div className="grid md:grid-cols-3 gap-6 md:gap-8">
            {[
              {
                src: "/assets/images/portal-dashboard.png",
                title: "Dashboard Overview",
                desc: "Real-time services count, SSL status, system health and uptime monitoring for every server.",
              },
              {
                src: "/assets/images/portal-vps-servers.png",
                title: "VPS Servers",
                desc: "Power, restart, console, bandwidth usage, contract cycle and due dates for every VPS — all in one table.",
              },
              {
                src: "/assets/images/portal-domains.png",
                title: "Domain Services",
                desc: "Registration dates, auto-renewal, SSL lock, DNS manager and bulk actions for your entire domain portfolio.",
              },
            ].map((screen, idx) => (
              <AnimateIn
                key={screen.title}
                direction="up"
                delay={idx * 180}
                duration={800}
                distance={40}
                className="group glass-soft rounded-2xl overflow-hidden transition-all duration-500 ease-out"
              >
                {/* Browser chrome bar to emphasize "portal" feel */}
                <div className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-900 border-b border-slate-800">
                  <span className="w-3 h-3 rounded-full bg-red-500/90" />
                  <span className="w-3 h-3 rounded-full bg-yellow-400/90" />
                  <span className="w-3 h-3 rounded-full bg-green-500/90" />
                  <span className="ml-3 text-[11px] font-mono text-slate-400 truncate">
                    portal.doiteasy.net/{screen.title.toLowerCase().split(" ")[0]}
                  </span>
                </div>
                {/* Screenshot */}
                <div className="relative overflow-hidden bg-slate-100">
                  <img
                    src={screen.src}
                    alt={screen.title}
                    className="w-full h-auto object-cover object-top transition-transform duration-700 ease-out group-hover:scale-[1.03]"
                    loading="lazy"
                  />
                  <div
                    aria-hidden="true"
                    className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-[#0b6e3e]/30 via-[#0b6e3e]/0 to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                  />
                </div>
                {/* Caption */}
                <div className="p-5">
                  <h3 className="text-lg font-bold text-slate-900 mb-1.5">{screen.title}</h3>
                  <p className="text-sm text-slate-600 leading-relaxed">{screen.desc}</p>
                </div>
              </AnimateIn>
            ))}
          </div>

          {/* Feature strip */}
          <AnimateIn delay={560} className="mt-10 glass-soft rounded-2xl p-6 md:p-8">
            <div className="grid md:grid-cols-2 gap-4">
              {managingFeatures.map((f) => (
                <div key={f.title} className="bg-[#eef3fb] rounded-2xl p-4 border border-slate-100">
                  <div className="flex items-start gap-3">
                    <div className="w-6 h-6 rounded-full bg-[#0b6e3e] text-white flex items-center justify-center shrink-0 mt-0.5">
                      <Check className="w-3.5 h-3.5" strokeWidth={3} />
                    </div>
                    <div>
                      <h4 className="font-bold text-slate-900 mb-1">{f.title}</h4>
                      <p className="text-sm text-slate-600 leading-relaxed">{f.desc}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className="mt-6 flex justify-center">
              <Link
                to="/client"
                className="inline-block px-8 py-3 bg-[#0b6e3e] text-white font-bold rounded-md hover:bg-[#0a8048] transition shadow-md"
              >
                Access Your Portal
              </Link>
            </div>
          </AnimateIn>
        </div>
      </section>

      <GlobalDataCenters />

      {/* PLANS SECTION — CLOUD VPS / VDS / DEDICATED */}
      <section className="relative py-20 bg-white onepage-section" style={{ scrollSnapAlign: "start" }}>
        <SectionDivider from="#f8fafc" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16">
          <AnimateIn className="text-center mb-10">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">Infrastructure</span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">Cloud VPS, VDS & Dedicated</h2>
            <p className="text-slate-600 mt-4 max-w-2xl mx-auto">
              High-performance infrastructure with NVMe storage, enterprise-grade networks, and transparent pricing. Switch billing below to save up to 20% yearly.
            </p>
          </AnimateIn>

          <div className="flex justify-center mb-10">
            <div className="bg-white rounded-full p-1 shadow border border-slate-200 inline-flex">
              {(["monthly", "yearly"] as const).map((opt) => (
                <button
                  key={opt}
                  onClick={() => setBilling(opt)}
                  className={`px-6 py-2 rounded-full font-semibold capitalize transition ${
                    billing === opt ? "bg-[#0b6e3e] text-white shadow" : "text-slate-700 hover:text-[#0b6e3e]"
                  }`}
                >
                  {opt} {opt === "yearly" && <span className="ml-1 text-xs text-[#f5c400]">-20%</span>}
                </button>
              ))}
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-6">
            {plans.map((p, idx) => (
              <AnimateIn
                key={p.name}
                delay={idx * 150}
                className={`relative rounded-3xl p-8 transition-all duration-500 ease-out hover:-translate-y-1 ${
                  p.highlight
                    ? "bg-[#063019] text-white border border-[#0b6e3e] shadow-smoke-lg scale-[1.02] hover:shadow-smoke-lg"
                    : "glass-soft text-slate-900"
                }`}
              >
                {p.highlight && (
                  <div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-[#f5c400] text-slate-900 text-xs font-bold px-4 py-1 rounded-full">
                    MOST POPULAR
                  </div>
                )}
                <div className="text-sm uppercase tracking-widest font-bold text-[#f5c400] mb-1">{p.type}</div>
                <h3 className="text-2xl font-extrabold mb-4">{p.name}</h3>
                <div className="mb-5">
                  <span className="text-4xl font-extrabold">${billing === "monthly" ? p.monthly : p.yearly}</span>
                  <span className={`ml-1 text-sm ${p.highlight ? "text-slate-300" : "text-slate-500"}`}>
                    /{billing === "monthly" ? "mo" : "yr"}
                  </span>
                </div>
                <ul className={`space-y-3 mb-8 text-sm ${p.highlight ? "text-slate-200" : "text-slate-700"}`}>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />{p.cpu}</li>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />{p.ram}</li>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />{p.storage}</li>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />{p.bandwidth} Bandwidth</li>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />Free SSL + DDoS Protection</li>
                  <li className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />24/7 Priority Support</li>
                </ul>
                <Link
                  to="/pricing"
                  className={`block text-center py-3 rounded-md font-bold transition ${
                    p.highlight
                      ? "bg-[#f5c400] text-slate-900 hover:bg-yellow-400"
                      : "bg-[#0b6e3e] text-white hover:bg-[#0a8048]"
                  }`}
                >
                  Order Now
                </Link>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* BUSINESS SUITE — Business Mail 360 & Done for You */}
      {/* Left: headline + bullets + CTAs. Right: split-card product mockup
          (dark green marketing panel + white mock login form). Designed to
          visually match the provided reference (image-1 (30).png / image-2 (3).png). */}
      <section className="relative py-20 bg-slate-50 onepage-section" style={{ scrollSnapAlign: "start" }}>
        <SectionDivider from="#ffffff" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16 grid lg:grid-cols-2 gap-12 items-center">
          {/* LEFT COLUMN — text content */}
          <AnimateIn direction="right">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">Business Suite</span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-5 leading-tight">
              Business Mail 360 &amp; Done for You
            </h2>
            <p className="text-slate-600 mb-6 leading-relaxed">
              Professional mailboxes, 99.9 Availability Easy migration, delivered by a team that understands the Gulf region.
            </p>
            <ul className="space-y-3 mb-8">
              {[
                "Antispam, Collaboration, Advance Features, Domain Admin Portal",
                "SD-WAN deployments with SLA-backed performance",
                "Firewall, endpoint protection & email security",
                "Managed backups with 7/14/30-day retention",
                "Vendor coordination & hardware refresh",
              ].map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="w-5 h-5 rounded-full bg-[#0b6e3e] flex items-center justify-center shrink-0 mt-0.5">
                    <Check className="w-3 h-3 text-white" strokeWidth={3} />
                  </span>
                  <span className="text-slate-700">{t}</span>
                </li>
              ))}
            </ul>
            <div className="flex flex-wrap gap-3">
              <Link
                to="/business-email"
                className="px-6 py-3 bg-[#0b6e3e] text-white font-bold rounded-md hover:bg-[#0a8048] transition shadow-md"
              >
                Business Email
              </Link>
              <Link
                to="/managed-it"
                className="px-6 py-3 !bg-transparent !hover:bg-transparent border-2 border-[#0b6e3e] text-[#0b6e3e] font-bold rounded-md hover:!bg-[#0b6e3e] hover:!text-white transition"
              >
                Managed IT
              </Link>
            </div>
          </AnimateIn>

          {/* RIGHT COLUMN — split product mockup card */}
          <AnimateIn direction="left" delay={150} className="relative">
            <div className="rounded-3xl overflow-hidden shadow-smoke-lg border border-slate-200/60 bg-white grid md:grid-cols-2">
              {/* LEFT PANEL — dark green marketing side */}
              <div
                className="relative text-white p-7 md:p-8 flex flex-col"
                style={{
                  background:
                    "linear-gradient(135deg, #063019 0%, #0a5a32 60%, #0b6e3e 100%)",
                }}
              >
                {/* subtle dotted grid */}
                <div
                  aria-hidden="true"
                  className="pointer-events-none absolute inset-0 opacity-30"
                  style={{
                    backgroundImage:
                      "radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px)",
                    backgroundSize: "18px 18px",
                  }}
                />
                {/* Logo */}
                <div className="relative flex items-center gap-2 mb-7">
                  <span className="w-8 h-8 rounded-lg bg-white/15 border border-white/20 flex items-center justify-center">
                    <Mail className="w-4 h-4 text-white" />
                  </span>
                  <span className="text-sm font-bold tracking-wider">
                    BIZMAIL 360 <span className="text-white/70 font-semibold">BUSINESS</span>
                  </span>
                </div>

                {/* Heading */}
                <h3 className="relative text-2xl md:text-3xl font-bold mb-2 leading-tight">
                  Business Email
                </h3>
                <p className="relative text-sm text-white/80 mb-7 leading-relaxed">
                  Secure, reliable, and professional email hosting for your business.
                </p>

                {/* Feature rows */}
                <ul className="relative space-y-4 mb-8">
                  {[
                    { icon: ShieldCheck, label: "Enterprise-grade security" },
                    { icon: Zap, label: "Lightning-fast performance" },
                    { icon: Globe, label: "Access from anywhere" },
                  ].map((f) => (
                    <li key={f.label} className="flex items-center gap-3">
                      <span className="w-9 h-9 rounded-full bg-white/10 border border-white/20 flex items-center justify-center shrink-0">
                        <f.icon className="w-4 h-4 text-white" />
                      </span>
                      <span className="text-sm text-white/95">{f.label}</span>
                    </li>
                  ))}
                </ul>

                {/* Learn More button */}
                <div className="relative mt-auto">
                  <button
                    type="button"
                    className="w-full md:w-auto px-6 py-2.5 rounded-md border border-white/30 bg-white/5 hover:bg-white/10 text-white text-sm font-semibold transition"
                  >
                    Learn More
                  </button>
                </div>
              </div>

              {/* RIGHT PANEL — white mock login form */}
              <div className="bg-white p-7 md:p-8 flex flex-col">
                {/* Logo */}
                <div className="flex items-center gap-2 mb-6">
                  <span className="w-8 h-8 rounded-lg bg-[#0b6e3e]/10 border border-[#0b6e3e]/20 flex items-center justify-center">
                    <Mail className="w-4 h-4 text-[#0b6e3e]" />
                  </span>
                  <span className="text-sm font-bold tracking-wider text-[#0b6e3e]">
                    BIZMAIL 360 <span className="text-slate-500 font-semibold">BUSINESS</span>
                  </span>
                </div>

                {/* Heading */}
                <h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-1">
                  Welcome Back
                </h3>
                <p className="text-sm text-slate-500 mb-6">
                  Sign in to your Bizmail 360 account
                </p>

                {/* Email field (mock, not functional) */}
                <label className="text-xs font-semibold text-slate-700 mb-1.5 block">
                  Email or Username
                </label>
                <div className="flex items-center gap-2 bg-slate-100 rounded-md px-3 py-2.5 mb-4 border border-slate-200">
                  <Users className="w-4 h-4 text-slate-400 shrink-0" />
                  <input
                    type="text"
                    readOnly
                    placeholder="email@bizmail360.com"
                    className="flex-1 bg-transparent text-sm text-slate-700 placeholder:text-slate-400 outline-none"
                    tabIndex={-1}
                    aria-label="Email or Username (demo)"
                  />
                </div>

                {/* Password field (mock, not functional) */}
                <label className="text-xs font-semibold text-slate-700 mb-1.5 block">
                  Password
                </label>
                <div className="flex items-center gap-2 bg-slate-100 rounded-md px-3 py-2.5 mb-4 border border-slate-200">
                  <Lock className="w-4 h-4 text-slate-400 shrink-0" />
                  <input
                    type="password"
                    readOnly
                    placeholder="Enter your password"
                    className="flex-1 bg-transparent text-sm text-slate-700 placeholder:text-slate-400 outline-none"
                    tabIndex={-1}
                    aria-label="Password (demo)"
                  />
                  <button
                    type="button"
                    aria-label="Toggle password visibility (demo)"
                    tabIndex={-1}
                    className="text-slate-400 hover:text-slate-600 transition"
                  >
                    <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" /><circle cx="12" cy="12" r="3" /></svg>
                  </button>
                </div>

                {/* Remember me + forgot password */}
                <div className="flex items-center justify-between mb-5">
                  <label className="flex items-center gap-2 cursor-default select-none">
                    <span className="relative inline-block w-9 h-5 bg-slate-200 rounded-full">
                      <span className="absolute left-0.5 top-0.5 w-4 h-4 rounded-full bg-white shadow" />
                    </span>
                    <span className="text-xs text-slate-600">Remember me</span>
                  </label>
                  <button
                    type="button"
                    tabIndex={-1}
                    className="text-xs font-semibold text-[#0b6e3e] hover:underline"
                  >
                    Forgot password?
                  </button>
                </div>

                {/* Sign In button (demo) */}
                <button
                  type="button"
                  tabIndex={-1}
                  className="w-full py-3 rounded-md bg-[#4f8c5e] hover:bg-[#3f7a4e] text-white text-sm font-bold transition shadow-md"
                >
                  Sign In
                </button>

                {/* Footer note */}
                <p className="text-[11px] text-slate-400 text-center mt-4">
                  Protected by enterprise-grade encryption
                </p>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* WHY CHOOSE */}
      <section className="relative py-20 bg-white onepage-section" style={{ scrollSnapAlign: "start" }}>
        <SectionDivider from="#f8fafc" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">Why Choose</span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">Why Leading Businesses Pick DoItEasy</h2>
          </AnimateIn>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {whyFeatures.map((f, idx) => (
              <AnimateIn key={f.title} delay={idx * 100} className="glass-soft p-7 rounded-2xl transition group">
                <div className="w-14 h-14 rounded-2xl bg-[#0b6e3e] text-white flex items-center justify-center mb-5 group-hover:bg-[#f5c400] group-hover:text-slate-900 transition">
                  <f.icon className="w-6 h-6" />
                </div>
                <h3 className="text-xl font-bold text-slate-900 mb-2">{f.title}</h3>
                <p className="text-slate-600">{f.desc}</p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* SECURITY & MFA */}
      <section className="py-20 bg-[#063019] text-white relative overflow-hidden onepage-section" style={{ scrollSnapAlign: "start" }}>
        <div className="absolute inset-0 bg-gradient-radial from-[#0b6e3e]/30 to-transparent" />
        <div className="max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16 relative grid lg:grid-cols-2 gap-12 items-center">
          <AnimateIn direction="right">
            <div className="inline-flex items-center gap-2 bg-white/10 px-4 py-1.5 rounded-full text-sm border border-white/10 mb-5">
              <Lock className="w-4 h-4 text-[#f5c400]" /> Enterprise Security
            </div>
            <h2 className="text-3xl md:text-5xl font-bold mb-5">Protected by MFA & Zero-Trust</h2>
            <p className="text-slate-300 mb-8 leading-relaxed">
              Every account on DoItEasy is secured with multi-factor authentication. Choose the method that fits your team — from SMS to enterprise authenticators.
            </p>
            <div className="grid grid-cols-2 gap-4">
              {[
                { icon: Smartphone, label: "SMS OTP" },
                { icon: Mail, label: "Email OTP" },
                { icon: KeyRound, label: "Google Authenticator" },
                { icon: ShieldCheck, label: "Microsoft Authenticator" },
              ].map((m, idx) => (
                <AnimateIn key={m.label} delay={200 + idx * 100} className="glass-card rounded-2xl p-4 flex items-center gap-3">
                  <div className="w-10 h-10 rounded-lg bg-[#f5c400] text-slate-900 flex items-center justify-center">
                    <m.icon className="w-5 h-5" />
                  </div>
                  <span className="font-semibold">{m.label}</span>
                </AnimateIn>
              ))}
            </div>
          </AnimateIn>

          <AnimateIn direction="left" delay={150} className="glass-card rounded-3xl p-8">
            <div className="flex items-center gap-3 mb-5">
              <div className="w-12 h-12 rounded-xl bg-[#f5c400] text-slate-900 flex items-center justify-center">
                <Lock className="w-6 h-6" />
              </div>
              <div>
                <div className="font-bold text-lg">Security Shield</div>
                <div className="text-xs text-slate-300">All systems operational</div>
              </div>
            </div>
            <div className="space-y-3">
              {[
                ["DDoS Protection", "Active", "bg-emerald-500"],
                ["WAF & Anti-Bot", "Active", "bg-emerald-500"],
                ["Encrypted Backups", "Active", "bg-emerald-500"],
                ["ISO 27001 Compliance", "Verified", "bg-[#f5c400]"],
                ["24/7 SOC Monitoring", "Live", "bg-emerald-500"],
              ].map(([label, state, color]) => (
                <div key={label} className="flex items-center justify-between py-2 border-b border-white/10 last:border-0">
                  <span className="text-sm text-slate-200">{label}</span>
                  <span className="flex items-center gap-2 text-xs font-semibold">
                    <span className={`w-2 h-2 rounded-full ${color}`} />
                    {state}
                  </span>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* TICKET / SLA */}
      <section className="relative py-20 bg-slate-50 onepage-section" style={{ scrollSnapAlign: "start" }}>
        <SectionDivider from="#063019" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] 4xl:max-w-[2000px] 5xl:max-w-[2400px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 5xl:px-16 grid lg:grid-cols-2 gap-12 items-center">
          <AnimateIn direction="right">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">Support & SLA</span>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900 mt-2 mb-5">Built-in Ticketing & SLA Tracking</h2>
            <p className="text-slate-600 mb-8 leading-relaxed">
              A complete ticketing workflow embedded in your client portal — with departments, priority, attachments, auto-assignment, and full SLA reporting.
            </p>
            <div className="grid grid-cols-2 gap-4">
              {[
                ["<15 min", "First Response"],
                ["1 hr", "Critical P1 SLA"],
                ["4 hr", "High P2 SLA"],
                ["24/7", "Live Coverage"],
              ].map(([v, l]) => (
                <div key={l} className="glass-soft rounded-2xl p-5 text-center">
                  <div className="text-3xl font-extrabold text-[#0b6e3e]">{v}</div>
                  <div className="text-sm text-slate-600 mt-1">{l}</div>
                </div>
              ))}
            </div>
            <Link to="/tickets" className="inline-block mt-8 px-7 py-3 bg-[#0b6e3e] text-white font-bold rounded-md hover:bg-[#0a8048] transition">
              Open a Ticket
            </Link>
          </AnimateIn>

          <AnimateIn direction="left" delay={150} className="glass-soft rounded-3xl p-6">
            <div className="flex items-center justify-between mb-4">
              <h4 className="font-bold text-slate-900">Recent Tickets</h4>
              <span className="text-xs text-slate-500">Live</span>
            </div>
            <div className="space-y-3">
              {[
                ["#10482", "VPS reboot request", "Technical", "High", "Open", "bg-emerald-100 text-emerald-700"],
                ["#10477", "Domain DNS propagation", "Domains", "Medium", "Waiting", "bg-amber-100 text-amber-700"],
                ["#10471", "Invoice clarification", "Billing", "Low", "Resolved", "bg-slate-200 text-slate-700"],
                ["#10465", "Mailbox migration", "Email", "Medium", "In Progress", "bg-blue-100 text-blue-700"],
              ].map((t, i) => (
                <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-slate-50 border border-slate-100">
                  <div>
                    <div className="text-sm font-bold text-slate-900">{t[0]} · {t[1]}</div>
                    <div className="text-xs text-slate-500">{t[2]} · {t[3]}</div>
                  </div>
                  <span className={`text-xs font-semibold px-3 py-1 rounded-full ${t[5]}`}>{t[4]}</span>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>
      </section>

      {/*
        Testimonials ("Clients — Trusted by teams across the region") and the
        FAQ section have been removed from the homepage on request.
        Clients testimonials remain available on the Service Catalog page
        (/services), and the full FAQ page is still reachable at /faq.
      */}

      {/* Contact popup modals — opened from hero & final CTA buttons. */}
      <ContactUsModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <GetPriceModal open={priceOpen} onClose={() => setPriceOpen(false)} />
      <SupportModal open={supportOpen} onClose={() => setSupportOpen(false)} />
    </SiteLayout>
  );
}