import { useState } from "react";
import { Link } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal } from "@/components/ContactModals";
import {
  Check,
  Zap,
  ShieldCheck,
  Gauge,
  Headphones,
  Database,
  Server,
  Globe,
  Layers,
  RefreshCw,
  Mail,
  ArrowRight,
  Sparkles,
  LifeBuoy,
  HardDrive,
  Cpu,
} from "lucide-react";

/**
 * WordPress Hosting page — clone of
 * https://doiteasy.net/wordpress-hosting/
 *
 * Rebuilt in React + Tailwind + shadcn/ui to match the existing site design.
 * WordPress-specific content (managed hosting, LiteSpeed cache, auto-updates,
 * staging, free migration). Pricing tiers follow the same 3-tier pattern used
 * across the site, wired to the shared GetPrice / ContactUs modals.
 */

// Core feature list shown in "Why WordPress Hosting" block
const coreFeatures = [
  {
    icon: Zap,
    title: "LiteSpeed + NVMe SSD",
    desc: "Lightning-fast page loads powered by LiteSpeed Web Server, LSCache and pure NVMe SSD storage — pages render up to 3× faster than standard Apache.",
  },
  {
    icon: ShieldCheck,
    title: "Managed Security",
    desc: "Free SSL, Imunify360 malware scanning, DDoS protection, two-factor login, and automated WordPress-specific firewall rules.",
  },
  {
    icon: RefreshCw,
    title: "Auto Updates & Backups",
    desc: "WordPress core, themes and plugins updated automatically; daily off-site backups with 1-click restore so your site is always safe.",
  },
  {
    icon: Layers,
    title: "Staging Environment",
    desc: "Clone your live site to a staging copy, test theme / plugin changes safely, then push live in a single click — zero downtime.",
  },
  {
    icon: Gauge,
    title: "Tuned for Speed",
    desc: "Server-level object cache (Redis), HTTP/3, Brotli, image optimization and a global CDN are pre-configured for WordPress out of the box.",
  },
  {
    icon: Headphones,
    title: "24/7 WordPress Experts",
    desc: "Our support team specializes in WordPress — plugin conflicts, performance tuning, migrations and custom tweaks. Available around the clock.",
  },
];

// Pricing tiers — WordPress-specific plans
const plans = [
  {
    name: "WP Starter",
    tagline: "Perfect for personal blogs & small sites",
    price: "$3.99",
    cadence: "/month",
    highlight: false,
    cta: "Get Started",
    specs: [
      "1 WordPress Website",
      "10 GB NVMe SSD Storage",
      "Unlimited Bandwidth",
      "Free SSL Certificate",
      "Free Domain (1st year)",
      "Daily Automated Backups",
      "LiteSpeed + LSCache",
      "Free Site Migration",
      "24/7 Expert Support",
    ],
  },
  {
    name: "WP Business",
    tagline: "Best for business & e-commerce sites",
    price: "$7.99",
    cadence: "/month",
    highlight: true,
    badge: "MOST POPULAR",
    cta: "Order Now",
    specs: [
      "Up to 5 WordPress Websites",
      "50 GB NVMe SSD Storage",
      "Unlimited Bandwidth",
      "Free SSL (Wildcard)",
      "Free Domain (1st year)",
      "Daily Backups + On-Demand",
      "LiteSpeed + Redis Object Cache",
      "Staging Environment",
      "Free Premium CDN",
      "WooCommerce Optimized",
      "Priority WordPress Support",
    ],
  },
  {
    name: "WP Scale",
    tagline: "For high-traffic sites & agencies",
    price: "$14.99",
    cadence: "/month",
    highlight: false,
    cta: "Contact Sales",
    specs: [
      "Unlimited WordPress Websites",
      "150 GB NVMe SSD Storage",
      "Unlimited Bandwidth",
      "Free SSL (Wildcard)",
      "Free Domain (1st year)",
      "Hourly Backups + On-Demand",
      "LiteSpeed + Redis + Memcached",
      "Unlimited Staging Sites",
      "Dedicated IP + Premium CDN",
      "White-Label Reseller Tools",
      "Dedicated Account Manager",
    ],
  },
];

// "Managed" differentiators
const managedHighlights = [
  {
    icon: Server,
    title: "Built for WordPress",
    desc: "Our entire stack — LiteSpeed, PHP-FPM, MariaDB, Redis — is tuned for WordPress workloads, not generic PHP.",
  },
  {
    icon: Database,
    title: "Free Migration",
    desc: "Our engineers migrate your existing site from any host — cPanel, SiteGround, GoDaddy, WP Engine — with zero downtime, for free.",
  },
  {
    icon: Globe,
    title: "Global CDN",
    desc: "Cache static assets across 200+ edge locations for sub-second load times anywhere in the world.",
  },
  {
    icon: HardDrive,
    title: "Daily Backups",
    desc: "Automatic daily snapshots kept off-site for 30 days, with 1-click restore and on-demand manual backups.",
  },
];

// FAQ content
const faqs = [
  {
    q: "What makes your hosting better than shared WordPress hosting?",
    a: "Our stack is tuned specifically for WordPress — LiteSpeed Web Server, LSCache, Redis object cache and NVMe SSD storage combine to deliver 3–5× faster page loads than typical Apache/MySQL shared hosting. We also handle WordPress core/plugin updates, malware scans and daily backups automatically.",
  },
  {
    q: "Is migrating my existing WordPress site really free?",
    a: "Yes — our migrations team will move your site from any other host (cPanel, Plesk, WP Engine, Kinsta, SiteGround, GoDaddy, etc.) at no cost, with zero downtime. Simply open a support ticket after signup and we'll handle everything.",
  },
  {
    q: "Do I get a free SSL certificate?",
    a: "Yes. Every plan includes a free Let's Encrypt SSL that's installed and auto-renewed. Business and Scale plans include wildcard SSL covering all subdomains.",
  },
  {
    q: "Can I run WooCommerce on these plans?",
    a: "Absolutely. All plans support WooCommerce, but we recommend WP Business or higher for stores — they include Redis object cache, PHP workers tuned for checkout, and priority support for commerce-specific issues.",
  },
  {
    q: "What happens if my site gets hacked?",
    a: "Imunify360 scans for malware around the clock. If an infection is detected we clean it automatically and notify you; if your site is still compromised our team will clean it manually at no extra cost on paid plans.",
  },
  {
    q: "Do you offer a money-back guarantee?",
    a: "Yes — we provide a 30-day money-back guarantee on all annual WordPress hosting plans. If you're not satisfied for any reason, we'll refund your payment in full.",
  },
];

export default function WordPressHosting() {
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);
  const [activeFaq, setActiveFaq] = useState<number | null>(0);

  return (
    <SiteLayout>
      {/* ===== HERO ===== */}
      <section className="relative overflow-hidden bg-[#052217] text-white">
        <div className="absolute inset-0 -z-0">
          <div className="absolute inset-0 bg-gradient-to-br from-[#052217] via-[#063019] to-[#0b6e3e]" />
          <div className="absolute -top-32 -right-32 w-[40rem] h-[40rem] rounded-full bg-[#21759b]/25 blur-3xl" />
          <div className="absolute -bottom-40 -left-24 w-[36rem] h-[36rem] rounded-full bg-[#0b6e3e]/40 blur-3xl" />
          <div
            className="absolute inset-0 opacity-10"
            style={{
              backgroundImage:
                "radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px)",
              backgroundSize: "28px 28px",
            }}
          />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-24">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <AnimateIn direction="right">
              <div className="inline-flex items-center gap-2 bg-[#21759b]/20 border border-[#21759b]/40 rounded-full px-4 py-1.5 text-xs md:text-sm mb-5">
                <span className="w-2 h-2 rounded-full bg-[#21759b] animate-pulse" />
                Managed WordPress Hosting — built for speed &amp; security
              </div>

              <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-4">
                WordPress <span className="text-[#f5c400]">Hosting</span>
              </h1>
              <p className="text-xl md:text-2xl text-slate-200 mb-4 font-semibold">
                Fast, secure, fully managed — so you can focus on content.
              </p>
              <p className="text-slate-300 mb-8 leading-relaxed max-w-xl">
                Purpose-built WordPress hosting with LiteSpeed, NVMe SSDs,
                automatic backups, free SSL, and a staging environment. Free
                migrations from any host, 24/7 WordPress-expert support and a
                30-day money-back guarantee.
              </p>

              <div className="flex flex-wrap gap-3 mb-5">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-7 py-3.5 rounded-md bg-[#f5c400] text-slate-900 font-bold hover:bg-yellow-400 transition shadow-2xl shadow-[#f5c400]/30 inline-flex items-center gap-2"
                >
                  Get Prices <ArrowRight className="w-4 h-4" />
                </button>
                <a
                  href="#plans"
                  className="px-7 py-3.5 rounded-md bg-white/10 border border-white/20 text-white font-bold hover:bg-white/20 transition backdrop-blur-sm"
                >
                  View Plans
                </a>
              </div>
              <p className="text-xs text-slate-400">
                30-day money-back guarantee · Free migration · 24/7 support
              </p>
            </AnimateIn>

            <AnimateIn direction="left" delay={150}>
              <div className="relative mx-auto w-full max-w-lg">
                {/* Floating "uptime" card */}
                <div className="absolute -top-5 -left-5 z-10 bg-white text-slate-900 rounded-2xl shadow-xl px-4 py-2.5 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-[#22c55e] animate-pulse" />
                  <div>
                    <div className="text-[10px] text-slate-500 uppercase tracking-widest">
                      Uptime
                    </div>
                    <div className="text-sm font-bold text-[#0b6e3e]">
                      99.99%
                    </div>
                  </div>
                </div>

                {/* WordPress admin-style mockup */}
                <div className="rounded-2xl bg-white text-slate-900 shadow-2xl overflow-hidden border border-slate-200">
                  {/* Browser bar */}
                  <div className="bg-slate-100 border-b border-slate-200 px-4 py-3 flex items-center gap-2">
                    <span className="w-2.5 h-2.5 rounded-full bg-red-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-green-500" />
                    <div className="ml-3 flex-1 bg-white border border-slate-200 rounded px-3 py-1 text-[11px] text-slate-500 truncate">
                      🔒 yoursite.com/wp-admin
                    </div>
                  </div>

                  {/* WP admin header */}
                  <div className="bg-[#23282d] text-slate-200 px-4 py-2 flex items-center gap-3 text-xs">
                    <span className="w-5 h-5 rounded-full bg-[#21759b] flex items-center justify-center text-[10px] font-bold">
                      W
                    </span>
                    <span>My WordPress Site</span>
                    <span className="ml-auto text-slate-400">
                      👋 Howdy, admin
                    </span>
                  </div>

                  <div className="grid grid-cols-[140px_1fr] min-h-[280px]">
                    {/* Sidebar */}
                    <div className="bg-[#23282d] text-slate-300 text-[11px] py-3">
                      {[
                        { icon: "📊", label: "Dashboard", active: true },
                        { icon: "📝", label: "Posts" },
                        { icon: "🖼", label: "Media" },
                        { icon: "🔌", label: "Plugins" },
                        { icon: "🎨", label: "Appearance" },
                        { icon: "⚙️", label: "Settings" },
                      ].map((i) => (
                        <div
                          key={i.label}
                          className={`px-4 py-2 flex items-center gap-2 ${
                            i.active
                              ? "bg-[#0073aa] text-white"
                              : "hover:bg-[#32373c]"
                          }`}
                        >
                          <span>{i.icon}</span>
                          <span>{i.label}</span>
                        </div>
                      ))}
                    </div>
                    {/* Dashboard body */}
                    <div className="p-4 bg-[#f1f1f1]">
                      <h3 className="text-sm font-bold mb-3">Dashboard</h3>
                      <div className="grid grid-cols-2 gap-2">
                        {[
                          { k: "PageSpeed", v: "97", col: "bg-emerald-500" },
                          { k: "Uptime", v: "99.99%", col: "bg-[#0073aa]" },
                          { k: "Visitors", v: "12,480", col: "bg-[#f5c400]" },
                          { k: "Cache Hit", v: "94%", col: "bg-purple-500" },
                        ].map((s) => (
                          <div
                            key={s.k}
                            className="bg-white rounded-md p-2.5 border border-slate-200 shadow-sm"
                          >
                            <div className="text-[10px] text-slate-500 uppercase">
                              {s.k}
                            </div>
                            <div
                              className={`text-base font-extrabold ${s.col} bg-clip-text text-transparent`}
                              style={{
                                backgroundImage:
                                  "linear-gradient(135deg,#0b6e3e,#0073aa)",
                              }}
                            >
                              {s.v}
                            </div>
                          </div>
                        ))}
                      </div>
                      <div className="mt-3 bg-white rounded-md p-2.5 border border-slate-200">
                        <div className="flex items-center justify-between mb-1.5">
                          <span className="text-[10px] font-semibold text-slate-700">
                            LiteSpeed Cache
                          </span>
                          <span className="text-[10px] font-bold text-emerald-600">
                            ACTIVE
                          </span>
                        </div>
                        <div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
                          <div className="h-full w-[94%] bg-gradient-to-r from-emerald-500 to-[#0073aa]" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Floating "PageSpeed 100" card */}
                <div className="absolute -bottom-5 -right-5 bg-white rounded-2xl shadow-xl px-4 py-2.5 flex items-center gap-3">
                  <div className="w-11 h-11 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 text-white flex items-center justify-center font-extrabold text-sm">
                    100
                  </div>
                  <div className="text-slate-900">
                    <div className="text-[10px] text-slate-500 uppercase">
                      PageSpeed
                    </div>
                    <div className="text-xs font-bold">Lighthouse Score</div>
                  </div>
                </div>
              </div>
            </AnimateIn>
          </div>

          {/* Anchor nav */}
          <div className="mt-16 flex flex-wrap justify-center gap-4 text-sm">
            {[
              { href: "#features", label: "Features" },
              { href: "#plans", label: "Plans" },
              { href: "#managed", label: "Managed" },
              { href: "#faq", label: "FAQ" },
            ].map((a) => (
              <a
                key={a.href}
                href={a.href}
                className="px-5 py-2 rounded-full bg-white/10 border border-white/20 text-white font-semibold hover:bg-white/20 transition backdrop-blur-sm"
              >
                {a.label}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ===== CORE FEATURES ===== */}
      <section id="features" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-3xl mx-auto mb-14">
            <span className="text-[#21759b] font-bold uppercase tracking-widest text-sm">
              Features
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-4">
              Everything you need for WordPress — out of the box
            </h2>
            <p className="text-slate-600 leading-relaxed">
              A full managed stack, tuned specifically for WordPress. No more
              wrestling with plugins, server configs or manual backups — we take
              care of it all so you can focus on your content.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {coreFeatures.map((f, idx) => (
              <AnimateIn
                key={f.title}
                direction="up"
                delay={idx * 100}
                className="group relative rounded-3xl p-7 bg-gradient-to-br from-white to-slate-50 border border-slate-200 hover:border-[#21759b] hover:shadow-2xl transition"
              >
                <div className="w-14 h-14 rounded-2xl bg-[#21759b]/10 text-[#21759b] flex items-center justify-center mb-4 group-hover:bg-[#21759b] group-hover:text-white transition">
                  <f.icon className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-slate-900 mb-2">
                  {f.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {f.desc}
                </p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== PRICING PLANS ===== */}
      <section id="plans" className="py-20 bg-slate-50 scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-2xl mx-auto mb-14">
            <span className="text-[#21759b] font-bold uppercase tracking-widest text-sm">
              Pricing
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-3">
              Pick the plan that fits your site
            </h2>
            <p className="text-slate-600 flex items-center justify-center gap-2">
              <Sparkles className="w-4 h-4 text-[#21759b]" />
              All plans include free SSL, free migration and 30-day money-back
              guarantee.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-3 gap-6">
            {plans.map((p, idx) => (
              <AnimateIn
                key={p.name}
                delay={idx * 120}
                className={`relative rounded-3xl p-8 border flex flex-col transition hover:-translate-y-1 hover:shadow-2xl ${
                  p.highlight
                    ? "bg-gradient-to-br from-[#0b6e3e] to-[#063019] text-white border-[#0b6e3e] shadow-2xl scale-[1.03]"
                    : "bg-white text-slate-900 border-slate-200 shadow"
                }`}
              >
                {p.highlight && p.badge && (
                  <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">
                    {p.badge}
                  </div>
                )}
                <div className="mb-5">
                  <h3 className="text-xl font-extrabold mb-1">{p.name}</h3>
                  <p
                    className={`text-xs mb-4 ${
                      p.highlight ? "text-slate-300" : "text-slate-500"
                    }`}
                  >
                    {p.tagline}
                  </p>
                  <div>
                    <span
                      className={`text-4xl font-extrabold ${
                        p.highlight ? "text-[#f5c400]" : "text-[#0b6e3e]"
                      }`}
                    >
                      {p.price}
                    </span>
                    <span
                      className={`ml-1 text-sm ${
                        p.highlight ? "text-slate-300" : "text-slate-500"
                      }`}
                    >
                      {p.cadence}
                    </span>
                  </div>
                </div>

                <ul
                  className={`space-y-2.5 mb-7 text-sm flex-1 ${
                    p.highlight ? "text-slate-200" : "text-slate-700"
                  }`}
                >
                  {p.specs.map((s) => (
                    <li key={s} className="flex items-start gap-2">
                      <Check
                        className={`w-4 h-4 shrink-0 mt-0.5 ${
                          p.highlight ? "text-[#f5c400]" : "text-[#0b6e3e]"
                        }`}
                        strokeWidth={3}
                      />
                      <span>{s}</span>
                    </li>
                  ))}
                </ul>

                <button
                  type="button"
                  onClick={() =>
                    p.cta === "Contact Sales"
                      ? setContactOpen(true)
                      : setPriceOpen(true)
                  }
                  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]"
                  }`}
                >
                  {p.cta}
                </button>
              </AnimateIn>
            ))}
          </div>

          {/* Comparison strip */}
          <AnimateIn className="mt-10 rounded-2xl bg-white border border-slate-200 p-6 md:p-8 grid md:grid-cols-4 gap-6 text-center">
            {[
              { icon: Cpu, k: "3×", v: "Faster than shared hosting" },
              { icon: ShieldCheck, k: "24/7", v: "Malware & DDoS protection" },
              { icon: LifeBuoy, k: "30 day", v: "Money-back guarantee" },
              { icon: Mail, k: "Free", v: "Migration from any host" },
            ].map((s) => (
              <div key={s.v} className="flex flex-col items-center">
                <div className="w-12 h-12 rounded-full bg-[#21759b]/10 text-[#21759b] flex items-center justify-center mb-2">
                  <s.icon className="w-5 h-5" />
                </div>
                <div className="text-2xl font-extrabold text-[#0b6e3e]">
                  {s.k}
                </div>
                <div className="text-xs text-slate-600 mt-0.5">{s.v}</div>
              </div>
            ))}
          </AnimateIn>
        </div>
      </section>

      {/* ===== MANAGED HIGHLIGHTS ===== */}
      <section id="managed" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-12 items-center">
          <AnimateIn direction="right">
            <span className="text-[#21759b] font-bold uppercase tracking-widest text-sm">
              Fully Managed
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2 mb-5 leading-tight">
              We handle the hosting. You handle the ideas.
            </h2>
            <p className="text-slate-600 mb-6 leading-relaxed">
              Our WordPress platform includes everything a typical site owner
              needs: automatic core &amp; plugin updates, daily backups, caching,
              CDN, security scans and 24/7 WordPress-expert support — so you
              never have to think about the server.
            </p>

            <ul className="space-y-3 mb-8">
              {[
                "Automatic WordPress core, theme and plugin updates",
                "Daily off-site backups with 1-click restore",
                "Free Let's Encrypt SSL, auto-renewed",
                "Staging + 1-click push to live",
                "Imunify360 malware scan + WAF",
                "Free migration from any host",
              ].map((t) => (
                <li key={t} className="flex items-start gap-3">
                  <span className="w-5 h-5 rounded-full bg-[#21759b] 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">
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-6 py-3 bg-[#21759b] text-white font-bold rounded-md hover:bg-[#0073aa] transition shadow-md"
              >
                Get Prices
              </button>
              <button
                type="button"
                onClick={() => setContactOpen(true)}
                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"
              >
                Talk to Sales
              </button>
            </div>
          </AnimateIn>

          <AnimateIn direction="left" delay={150}>
            <div className="grid grid-cols-2 gap-4">
              {managedHighlights.map((m) => (
                <div
                  key={m.title}
                  className="group bg-gradient-to-br from-white to-slate-50 border border-slate-200 rounded-2xl p-5 hover:border-[#21759b] hover:shadow-lg transition"
                >
                  <div className="w-11 h-11 rounded-xl bg-[#0b6e3e] text-white flex items-center justify-center mb-3 group-hover:bg-[#21759b] transition">
                    <m.icon className="w-5 h-5" />
                  </div>
                  <div className="text-sm font-bold text-slate-900 mb-1">
                    {m.title}
                  </div>
                  <div className="text-xs text-slate-600 leading-relaxed">
                    {m.desc}
                  </div>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ===== HOW IT WORKS ===== */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center max-w-2xl mx-auto mb-14">
            <span className="text-[#21759b] font-bold uppercase tracking-widest text-sm">
              How It Works
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">
              Launch a WordPress site in 3 minutes
            </h2>
          </AnimateIn>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              {
                n: "01",
                title: "Choose a plan",
                desc: "Pick the WordPress plan that matches your traffic and number of sites.",
              },
              {
                n: "02",
                title: "Install or migrate",
                desc: "Install WordPress in 1 click or request a free migration from your current host.",
              },
              {
                n: "03",
                title: "Go live",
                desc: "Point your domain, enable SSL + CDN and you're ready to publish.",
              },
            ].map((s, idx) => (
              <AnimateIn
                key={s.n}
                delay={idx * 120}
                className="bg-white rounded-3xl p-7 border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition relative"
              >
                <div className="text-5xl font-extrabold text-[#21759b]/15 absolute top-4 right-5">
                  {s.n}
                </div>
                <h3 className="text-lg font-bold text-slate-900 mb-2">
                  {s.title}
                </h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  {s.desc}
                </p>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section id="faq" className="py-20 bg-white scroll-mt-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#21759b] font-bold uppercase tracking-widest text-sm">
              FAQ
            </span>
            <h2 className="text-3xl md:text-5xl font-bold text-slate-900 mt-2">
              WordPress Hosting — Questions
            </h2>
          </AnimateIn>

          <div className="space-y-3">
            {faqs.map((f, i) => {
              const open = activeFaq === i;
              return (
                <AnimateIn
                  key={f.q}
                  delay={i * 60}
                  className={`rounded-2xl border transition ${
                    open
                      ? "bg-white border-[#21759b] shadow-lg"
                      : "bg-slate-50 border-slate-200 hover:border-[#21759b]"
                  }`}
                >
                  <button
                    type="button"
                    onClick={() => setActiveFaq(open ? null : i)}
                    className="w-full flex items-center justify-between gap-4 px-5 py-4 text-left"
                  >
                    <span className="font-bold text-slate-900">{f.q}</span>
                    <span
                      className={`w-6 h-6 rounded-full flex items-center justify-center shrink-0 transition ${
                        open
                          ? "bg-[#21759b] text-white rotate-45"
                          : "bg-slate-200 text-slate-600"
                      }`}
                    >
                      +
                    </span>
                  </button>
                  {open && (
                    <div className="px-5 pb-5 text-sm text-slate-600 leading-relaxed">
                      {f.a}
                    </div>
                  )}
                </AnimateIn>
              );
            })}
          </div>
        </div>
      </section>

      {/* ===== FINAL CTA ===== */}
      <section className="py-20 bg-slate-50">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn className="rounded-3xl bg-gradient-to-br from-[#0b6e3e] via-[#0a8048] to-[#21759b] text-white p-10 md:p-14 shadow-2xl text-center relative overflow-hidden">
            <div className="absolute -top-20 -right-20 w-72 h-72 rounded-full bg-white/10 blur-3xl" />
            <div className="absolute -bottom-20 -left-20 w-72 h-72 rounded-full bg-black/20 blur-3xl" />
            <div className="relative">
              <h2 className="text-3xl md:text-5xl font-extrabold mb-4">
                Ready for faster WordPress?
              </h2>
              <p className="text-slate-100 max-w-2xl mx-auto mb-8">
                Migrate your site for free and see the difference in minutes.
                30-day money-back guarantee — no risk.
              </p>
              <div className="flex flex-wrap justify-center gap-3">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-8 py-3.5 bg-[#f5c400] text-slate-900 font-bold rounded-md hover:bg-yellow-400 transition inline-flex items-center gap-2"
                >
                  Get Prices <ArrowRight className="w-4 h-4" />
                </button>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="px-8 py-3.5 bg-white/10 border border-white/30 text-white font-bold rounded-md hover:bg-white/20 transition"
                >
                  Talk to Sales
                </button>
                <Link
                  to="/tickets"
                  className="px-8 py-3.5 !bg-transparent border-2 border-white text-white font-bold rounded-md hover:!bg-white hover:!text-[#0b6e3e] transition"
                >
                  Open a Ticket
                </Link>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* Shared modals */}
      <ContactUsModal open={contactOpen} onClose={() => setContactOpen(false)} />
      <GetPriceModal open={priceOpen} onClose={() => setPriceOpen(false)} />
    </SiteLayout>
  );
}