import { useState } from "react";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import { ContactUsModal, GetPriceModal } from "@/components/ContactModals";
import {
  Headphones,
  Monitor,
  Cloud,
  Server,
  Network,
  ShieldCheck,
  Check,
  ArrowRight,
  Activity,
  Users,
  Terminal as TerminalIcon,
  Laptop,
  Mail,
  FileText,
  RefreshCw,
  HardDrive,
  Lock,
  Minus,
} from "lucide-react";

/**
 * Remote Support & Managed IT Services page.
 *
 * Brand accents: green #0e6305, dark text #1e3828, light backgrounds,
 * premium rounded cards with soft shadows.
 */

const BRAND_GREEN = "#0e6305";
const DARK_TEXT = "#1e3828";

const services = [
  {
    id: "remote-support",
    icon: Headphones,
    title: "Remote Support",
    desc: "Attended and unattended remote assistance for servers, desktops and endpoints — delivered by certified Saudi-based engineers in minutes.",
  },
  {
    id: "endpoint-monitoring",
    icon: Monitor,
    title: "Endpoint Monitoring",
    desc: "24/7 visibility into every workstation and laptop. Real-time health, patching, antivirus, and asset inventory at your fingertips.",
  },
  {
    id: "cloud-managed",
    icon: Cloud,
    title: "Cloud Managed Services",
    desc: "Managed administration for Azure, Google Cloud and Microsoft 365 tenants — identity, backups, cost control and hardening baselines included.",
  },
  {
    id: "on-premises",
    icon: Server,
    title: "On-Premises Managed Services",
    desc: "Keep your local servers, firewalls and network gear healthy with proactive maintenance, patching and on-call response.",
  },
  {
    id: "server-network",
    icon: Network,
    title: "Server & Network Administration",
    desc: "Windows / Linux administration, Active Directory, DNS, VPN, routing, switching, VLANs and Wi-Fi — configured, secured and documented.",
  },
  {
    id: "backup-security",
    icon: ShieldCheck,
    title: "Backup, Security & Patch Management",
    desc: "Automated backups, restore testing, vulnerability patching and endpoint security — closing the gaps attackers love to exploit.",
  },
];

const featureList = [
  { icon: Users, label: "Unlimited technician access" },
  { icon: Laptop, label: "Attended and unattended support" },
  { icon: TerminalIcon, label: "Windows / Linux server support" },
  { icon: Cloud, label: "Cloud VPS / VDS management" },
  { icon: Mail, label: "Microsoft 365 support" },
  { icon: Lock, label: "Firewall, backup, patching & monitoring" },
  { icon: Activity, label: "SLA-based support" },
  { icon: FileText, label: "Monthly reporting" },
];

// Default pricing plans. The component prefers live data from the backend
// `plans` table (service_type = "remote-support") when available, otherwise
// falls back to these defaults so the page is never empty.
type UiPlan = {
  id?: number | string;
  name: string;
  tagline: string;
  priceLabel: string;
  cadence: string;
  features: string[];
  cta: string;
  highlight?: boolean;
  anchor?: string;
};

const defaultPlans: UiPlan[] = [
  {
    id: "essential",
    anchor: "essential",
    name: "Essential Remote Support",
    tagline: "For up to 25 endpoints",
    priceLabel: "$40",
    cadence: "/month",
    features: [
      "Remote assistance (attended)",
      "Basic endpoint monitoring",
      "Ticket-based support",
      "Email response within 4h",
      "Monthly summary report",
    ],
    cta: "Get Started",
  },
  {
    id: "cloud-managed",
    anchor: "cloud-managed",
    name: "Managed Cloud Services",
    tagline: "Cloud-first teams & SaaS workloads",
    priceLabel: "$99",
    cadence: "/month",
    features: [
      "Cloud server administration",
      "24/7 monitoring & alerts",
      "Patching & updates",
      "Backup checks & restore tests",
      "Security hardening baseline",
    ],
    cta: "Get Started",
    highlight: true,
  },
  {
    id: "on-premises",
    anchor: "on-premises",
    name: "Managed On-Premises IT",
    tagline: "Offices, branches, data rooms",
    priceLabel: "$199",
    cadence: "/month",
    features: [
      "Servers & network devices",
      "Firewall management",
      "Backup & DR oversight",
      "Endpoint support",
      "Monthly health report",
    ],
    cta: "Get Started",
  },
  {
    id: "enterprise",
    anchor: "enterprise",
    name: "Enterprise SLA",
    tagline: "Hybrid, compliance-driven operations",
    priceLabel: "Custom",
    cadence: "pricing",
    features: [
      "Dedicated SLA & priority support",
      "Hybrid cloud + on-premises",
      "Named engineering lead",
      "Compliance support (ISO, SOC, PDPL)",
      "Quarterly business review",
    ],
    cta: "Contact Sales",
  },
];

// Comparison rows: value per plan (Essential, Cloud, On-Prem, Enterprise).
// Use strings for text, `true` for check, `false` for dash.
type Cell = string | boolean;
const comparison: { feature: string; values: [Cell, Cell, Cell, Cell] }[] = [
  {
    feature: "Remote assistance (attended)",
    values: [true, true, true, true],
  },
  {
    feature: "Unattended remote access",
    values: [false, true, true, true],
  },
  {
    feature: "Endpoint monitoring",
    values: ["Basic", "Advanced", "Advanced", "Advanced + SIEM"],
  },
  {
    feature: "Patch & update management",
    values: [false, true, true, true],
  },
  {
    feature: "Backup monitoring & restore tests",
    values: [false, true, true, true],
  },
  {
    feature: "Firewall administration",
    values: [false, false, true, true],
  },
  {
    feature: "Server & network administration",
    values: [false, "Cloud only", true, true],
  },
  {
    feature: "Microsoft 365 support",
    values: ["Limited", true, true, true],
  },
  {
    feature: "Endpoint count included",
    values: ["Up to 25", "Up to 50", "Up to 100", "Unlimited"],
  },
  {
    feature: "Monthly health report",
    values: ["Summary", true, true, "Quarterly review"],
  },
  {
    feature: "Hybrid cloud + on-prem support",
    values: [false, false, "Optional", true],
  },
  {
    feature: "Compliance support (ISO / PDPL)",
    values: [false, false, false, true],
  },
  {
    feature: "Response-time SLA",
    values: ["4h", "2h", "1h", "15 min (P1)"],
  },
  {
    feature: "Dedicated account manager",
    values: [false, false, false, true],
  },
];

export default function RemoteSupport() {
  const [priceOpen, setPriceOpen] = useState(false);
  const [contactOpen, setContactOpen] = useState(false);

  const scrollToPlans = () => {
    const el = document.getElementById("plans");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const plans = defaultPlans;

  const renderCell = (v: Cell) => {
    if (v === true) {
      return (
        <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-[#0e6305]/10 text-[#0e6305]">
          <Check className="w-4 h-4" strokeWidth={3} />
        </span>
      );
    }
    if (v === false) {
      return (
        <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-slate-100 text-slate-400">
          <Minus className="w-4 h-4" />
        </span>
      );
    }
    return <span className="text-sm font-semibold text-[#1e3828]">{v}</span>;
  };

  return (
    <SiteLayout>
      {/* ===== HERO ===== */}
      <section
        className="relative overflow-hidden"
        style={{ background: "linear-gradient(135deg, #f3faf5 0%, #ffffff 60%, #eef7f0 100%)" }}
      >
        {/* Decorative accents */}
        <div aria-hidden="true" className="pointer-events-none absolute inset-0">
          <div className="absolute -top-32 -right-32 w-[30rem] h-[30rem] rounded-full bg-[#0e6305]/10 blur-3xl" />
          <div className="absolute -bottom-32 -left-20 w-[26rem] h-[26rem] rounded-full bg-emerald-300/20 blur-3xl" />
          <div
            className="absolute inset-0 opacity-[0.35]"
            style={{
              backgroundImage:
                "linear-gradient(to right, rgba(14,99,5,0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(14,99,5,0.06) 1px, transparent 1px)",
              backgroundSize: "48px 48px",
              maskImage:
                "radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 85%)",
              WebkitMaskImage:
                "radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 85%)",
            }}
          />
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 pb-20">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <AnimateIn direction="right">
              <div
                className="inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs md:text-sm mb-5 border"
                style={{ borderColor: "rgba(14,99,5,0.25)", background: "rgba(14,99,5,0.08)", color: BRAND_GREEN }}
              >
                <span className="w-2 h-2 rounded-full bg-[#0e6305] animate-pulse" />
                Managed IT · SLA-backed · 24×7 coverage
              </div>

              <h1
                className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-5"
                style={{ color: DARK_TEXT }}
              >
                Remote Support &amp;{" "}
                <span style={{ color: BRAND_GREEN }}>Managed Services</span>
              </h1>
              <p className="text-slate-600 mb-8 leading-relaxed max-w-xl text-lg">
                Secure access, monitoring, troubleshooting, and proactive IT
                operations for cloud and on-premises environments — delivered by
                certified engineers who know your stack.
              </p>

              <div className="flex flex-wrap gap-3 mb-6">
                <button
                  type="button"
                  onClick={() => setPriceOpen(true)}
                  className="px-7 py-3.5 rounded-xl text-white font-bold transition shadow-lg inline-flex items-center gap-2 hover:opacity-95"
                  style={{ backgroundColor: BRAND_GREEN }}
                >
                  Get Started <ArrowRight className="w-4 h-4" />
                </button>
                <button
                  type="button"
                  onClick={() => setContactOpen(true)}
                  className="px-7 py-3.5 rounded-xl font-bold border-2 transition hover:bg-[#0e6305] hover:text-white"
                  style={{ borderColor: BRAND_GREEN, color: BRAND_GREEN }}
                >
                  Contact Sales
                </button>
                <button
                  type="button"
                  onClick={scrollToPlans}
                  className="px-7 py-3.5 rounded-xl font-bold bg-white border border-slate-200 text-[#1e3828] shadow-sm hover:shadow-md transition"
                >
                  View Plans
                </button>
              </div>

              <div className="flex flex-wrap gap-5 text-xs text-slate-500">
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" style={{ color: BRAND_GREEN }} strokeWidth={3} /> Certified engineers
                </span>
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" style={{ color: BRAND_GREEN }} strokeWidth={3} /> Hybrid cloud &amp; on-prem
                </span>
                <span className="inline-flex items-center gap-1.5">
                  <Check className="w-3.5 h-3.5" style={{ color: BRAND_GREEN }} strokeWidth={3} /> Monthly reporting
                </span>
              </div>
            </AnimateIn>

            {/* Hero mock card */}
            <AnimateIn direction="left" delay={150}>
              <div className="relative mx-auto w-full max-w-lg">
                {/* Floating alert card */}
                <div className="absolute -top-5 -left-5 z-10 bg-white rounded-2xl shadow-lg border border-slate-200 px-4 py-2.5 flex items-center gap-3">
                  <div
                    className="w-10 h-10 rounded-full text-white flex items-center justify-center"
                    style={{ backgroundColor: BRAND_GREEN }}
                  >
                    <Headphones className="w-5 h-5" />
                  </div>
                  <div>
                    <div className="text-[10px] uppercase tracking-widest text-slate-500">
                      Engineer assigned
                    </div>
                    <div className="text-sm font-bold" style={{ color: DARK_TEXT }}>
                      Ahmed · 2 min ago
                    </div>
                  </div>
                </div>

                <div className="rounded-3xl overflow-hidden border border-slate-200 bg-white shadow-2xl">
                  {/* Window chrome */}
                  <div className="flex items-center gap-1.5 px-4 py-2.5 bg-slate-100 border-b border-slate-200">
                    <span className="w-2.5 h-2.5 rounded-full bg-red-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-amber-400" />
                    <span className="w-2.5 h-2.5 rounded-full bg-emerald-500" />
                    <div className="ml-3 flex-1 bg-white border border-slate-200 rounded px-3 py-1 text-[11px] text-slate-500 truncate">
                      🔒 support.doiteasy.net
                    </div>
                  </div>

                  {/* Body */}
                  <div className="p-5 bg-gradient-to-br from-white to-[#f3faf5]">
                    <div className="flex items-center justify-between mb-3">
                      <div>
                        <h3 className="text-sm font-bold" style={{ color: DARK_TEXT }}>
                          Managed Environment
                        </h3>
                        <p className="text-[11px] text-slate-500">
                          Hybrid · Cloud + On-Premises
                        </p>
                      </div>
                      <span className="text-[10px] uppercase tracking-widest font-bold text-emerald-600">
                        All Operational
                      </span>
                    </div>

                    <div className="space-y-2">
                      {[
                        { name: "Windows Server (DC01)", status: "Healthy", icon: Server },
                        { name: "Ubuntu 22.04 · Web API", status: "Healthy", icon: TerminalIcon },
                        { name: "Microsoft 365 · 48 users", status: "Healthy", icon: Mail },
                        { name: "Azure Backup Vault", status: "Restore OK", icon: HardDrive },
                        { name: "Fortigate Firewall", status: "Policies up", icon: ShieldCheck },
                      ].map((m) => (
                        <div
                          key={m.name}
                          className="bg-white rounded-xl border border-slate-200 px-3 py-2.5 flex items-center gap-3"
                        >
                          <span
                            className="w-8 h-8 rounded-lg flex items-center justify-center"
                            style={{ backgroundColor: "rgba(14,99,5,0.1)", color: BRAND_GREEN }}
                          >
                            <m.icon className="w-4 h-4" />
                          </span>
                          <div className="flex-1 min-w-0">
                            <div className="text-xs font-bold truncate" style={{ color: DARK_TEXT }}>
                              {m.name}
                            </div>
                            <div className="text-[10px] text-emerald-600 font-semibold">
                              {m.status}
                            </div>
                          </div>
                          <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse shrink-0" />
                        </div>
                      ))}
                    </div>

                    <div className="mt-4 grid grid-cols-3 gap-2">
                      {[
                        { k: "Tickets", v: "24" },
                        { k: "SLA met", v: "99.2%" },
                        { k: "Patches", v: "184" },
                      ].map((s) => (
                        <div
                          key={s.k}
                          className="rounded-lg border border-slate-200 bg-white px-2 py-2 text-center"
                        >
                          <div className="text-[10px] text-slate-500 uppercase">{s.k}</div>
                          <div className="text-sm font-extrabold" style={{ color: BRAND_GREEN }}>
                            {s.v}
                          </div>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>

                {/* Floating status */}
                <div className="absolute -bottom-5 -right-5 bg-white rounded-2xl shadow-lg border border-slate-200 px-4 py-2.5 flex items-center gap-2">
                  <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
                  <div>
                    <div className="text-[10px] text-slate-500 uppercase tracking-widest">
                      Response time
                    </div>
                    <div className="text-sm font-bold text-emerald-600">
                      &lt; 15 min
                    </div>
                  </div>
                </div>
              </div>
            </AnimateIn>
          </div>
        </div>
      </section>

      {/* ===== SERVICE CARDS ===== */}
      <section className="py-20 bg-white">
        <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="font-bold uppercase tracking-widest text-sm"
              style={{ color: BRAND_GREEN }}
            >
              What we manage
            </span>
            <h2
              className="text-3xl md:text-5xl font-bold mt-2 mb-4"
              style={{ color: DARK_TEXT }}
            >
              End-to-end <span style={{ color: BRAND_GREEN }}>IT operations</span>
            </h2>
            <p className="text-slate-600 leading-relaxed">
              From remote assistance to firewall administration — a single
              accountable team for every layer of your IT environment.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((s, idx) => (
              <AnimateIn
                key={s.id}
                direction="up"
                delay={idx * 90}
                className="group"
              >
                <div
                  id={s.id}
                  className="scroll-mt-24 relative h-full rounded-3xl p-7 bg-white border border-slate-200 shadow-sm hover:shadow-xl hover:-translate-y-1 transition"
                >
                  <div
                    className="w-14 h-14 rounded-2xl flex items-center justify-center mb-5 transition"
                    style={{
                      backgroundColor: "rgba(14,99,5,0.08)",
                      color: BRAND_GREEN,
                    }}
                  >
                    <s.icon className="w-7 h-7" />
                  </div>
                  <h3
                    className="text-lg font-bold mb-2"
                    style={{ color: DARK_TEXT }}
                  >
                    {s.title}
                  </h3>
                  <p className="text-sm text-slate-600 leading-relaxed">
                    {s.desc}
                  </p>
                  <div
                    className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold opacity-0 group-hover:opacity-100 transition"
                    style={{ color: BRAND_GREEN }}
                  >
                    Learn more <ArrowRight className="w-4 h-4" />
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== FEATURES ===== */}
      <section className="py-20" style={{ background: "#f7faf6" }}>
        <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="font-bold uppercase tracking-widest text-sm"
              style={{ color: BRAND_GREEN }}
            >
              Features
            </span>
            <h2
              className="text-3xl md:text-5xl font-bold mt-2 mb-5 leading-tight"
              style={{ color: DARK_TEXT }}
            >
              Every tool your IT team needs —{" "}
              <span style={{ color: BRAND_GREEN }}>without the headcount.</span>
            </h2>
            <p className="text-slate-600 leading-relaxed mb-8">
              Our managed IT plans include the day-to-day essentials plus the
              advanced controls most MSPs sell separately.
            </p>

            <div className="flex flex-wrap gap-3">
              <button
                type="button"
                onClick={() => setPriceOpen(true)}
                className="px-6 py-3 rounded-xl text-white font-bold shadow-md transition hover:opacity-95"
                style={{ backgroundColor: BRAND_GREEN }}
              >
                Get a quote
              </button>
              <button
                type="button"
                onClick={() => setContactOpen(true)}
                className="px-6 py-3 rounded-xl font-bold border-2 transition hover:bg-[#0e6305] hover:text-white"
                style={{ borderColor: BRAND_GREEN, color: BRAND_GREEN }}
              >
                Talk to an engineer
              </button>
            </div>
          </AnimateIn>

          <AnimateIn direction="left" delay={150}>
            <div className="grid sm:grid-cols-2 gap-3">
              {featureList.map((f, idx) => (
                <div
                  key={f.label}
                  className="flex items-center gap-3 p-4 rounded-2xl bg-white border border-slate-200 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition"
                  style={{ animationDelay: `${idx * 40}ms` }}
                >
                  <span
                    className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
                    style={{
                      backgroundColor: "rgba(14,99,5,0.1)",
                      color: BRAND_GREEN,
                    }}
                  >
                    <f.icon className="w-5 h-5" />
                  </span>
                  <span
                    className="text-sm font-semibold"
                    style={{ color: DARK_TEXT }}
                  >
                    {f.label}
                  </span>
                </div>
              ))}
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ===== PRICING ===== */}
      <section id="plans" className="py-20 bg-white scroll-mt-24">
        <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="font-bold uppercase tracking-widest text-sm"
              style={{ color: BRAND_GREEN }}
            >
              Pricing plans
            </span>
            <h2
              className="text-3xl md:text-5xl font-bold mt-2 mb-3"
              style={{ color: DARK_TEXT }}
            >
              Choose the plan that fits your operation
            </h2>
            <p className="text-slate-600">
              All plans include remote support tooling, ticketing, and monthly
              reporting. Scale up any time.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-6">
            {plans.map((p, idx) => (
              <AnimateIn
                key={p.id ?? p.name}
                delay={idx * 90}
                direction="up"
              >
                <div
                  id={p.anchor}
                  className={`scroll-mt-24 h-full relative rounded-3xl p-7 border flex flex-col transition hover:-translate-y-1 hover:shadow-2xl ${
                    p.highlight
                      ? "shadow-2xl scale-[1.02]"
                      : "bg-white shadow-sm"
                  }`}
                  style={
                    p.highlight
                      ? {
                          background: `linear-gradient(135deg, ${BRAND_GREEN} 0%, #0a4a04 100%)`,
                          color: "white",
                          borderColor: BRAND_GREEN,
                        }
                      : { borderColor: "#e2e8f0", color: DARK_TEXT }
                  }
                >
                  {p.highlight && (
                    <div
                      className="absolute -top-3 left-1/2 -translate-x-1/2 text-xs font-bold px-4 py-1 rounded-full"
                      style={{ backgroundColor: "#f5c400", color: "#1e3828" }}
                    >
                      MOST POPULAR
                    </div>
                  )}

                  <h3 className="text-xl font-extrabold mb-1">{p.name}</h3>
                  <p
                    className={`text-xs mb-5 ${
                      p.highlight ? "text-emerald-100" : "text-slate-500"
                    }`}
                  >
                    {p.tagline}
                  </p>

                  <div className="mb-6">
                    <span
                      className={`text-4xl font-extrabold ${
                        p.highlight ? "text-[#f5c400]" : ""
                      }`}
                      style={!p.highlight ? { color: BRAND_GREEN } : {}}
                    >
                      {p.priceLabel}
                    </span>
                    <span
                      className={`ml-1 text-sm ${
                        p.highlight ? "text-emerald-100" : "text-slate-500"
                      }`}
                    >
                      {p.cadence}
                    </span>
                  </div>

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

                  <button
                    type="button"
                    onClick={() =>
                      p.cta === "Contact Sales"
                        ? setContactOpen(true)
                        : setPriceOpen(true)
                    }
                    className={`w-full text-center py-3 rounded-xl font-bold transition ${
                      p.highlight
                        ? "bg-[#f5c400] hover:bg-yellow-400"
                        : "text-white hover:opacity-95"
                    }`}
                    style={
                      p.highlight
                        ? { color: DARK_TEXT }
                        : { backgroundColor: BRAND_GREEN }
                    }
                  >
                    {p.cta}
                  </button>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ===== COMPARISON TABLE ===== */}
      <section className="py-20" style={{ background: "#f7faf6" }}>
        <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-12">
            <span
              className="font-bold uppercase tracking-widest text-sm"
              style={{ color: BRAND_GREEN }}
            >
              Plan comparison
            </span>
            <h2
              className="text-3xl md:text-5xl font-bold mt-2 mb-3"
              style={{ color: DARK_TEXT }}
            >
              Pick the right level of coverage
            </h2>
            <p className="text-slate-600">
              A side-by-side look at what's included in every plan — so you can
              match your SLA, compliance and complexity needs.
            </p>
          </AnimateIn>

          <AnimateIn delay={150}>
            <div className="rounded-3xl bg-white border border-slate-200 shadow-xl overflow-hidden overflow-x-auto">
              <table className="w-full min-w-[760px]">
                <thead>
                  <tr
                    className="text-left"
                    style={{
                      background: `linear-gradient(135deg, ${BRAND_GREEN} 0%, #0a4a04 100%)`,
                      color: "white",
                    }}
                  >
                    <th className="p-5 font-bold text-sm w-[30%]">Feature</th>
                    <th className="p-5 font-bold text-sm text-center">
                      Essential
                    </th>
                    <th className="p-5 font-bold text-sm text-center bg-black/10">
                      Cloud Managed{" "}
                      <span className="text-[#f5c400]">★</span>
                    </th>
                    <th className="p-5 font-bold text-sm text-center">
                      On-Premises
                    </th>
                    <th className="p-5 font-bold text-sm text-center">
                      Enterprise
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {comparison.map((row, i) => (
                    <tr
                      key={row.feature}
                      className={i % 2 === 0 ? "bg-white" : "bg-[#f7faf6]"}
                    >
                      <td
                        className="p-4 font-semibold text-sm"
                        style={{ color: DARK_TEXT }}
                      >
                        {row.feature}
                      </td>
                      {row.values.map((v, idx) => (
                        <td
                          key={idx}
                          className={`p-4 text-center ${
                            idx === 1
                              ? "bg-[#0e6305]/5 font-semibold"
                              : ""
                          }`}
                        >
                          {renderCell(v)}
                        </td>
                      ))}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* ===== CTA ===== */}
      <section className="py-20 bg-white">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <AnimateIn>
            <div
              className="relative rounded-3xl p-10 md:p-14 text-center shadow-2xl overflow-hidden"
              style={{
                background: `linear-gradient(135deg, ${BRAND_GREEN} 0%, #0a4a04 100%)`,
                color: "white",
              }}
            >
              <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">
                <div
                  className="w-14 h-14 rounded-2xl mx-auto mb-5 flex items-center justify-center"
                  style={{ backgroundColor: "#f5c400", color: DARK_TEXT }}
                >
                  <RefreshCw className="w-6 h-6" />
                </div>
                <h2 className="text-3xl md:text-5xl font-extrabold mb-4">
                  Need help managing your IT environment?
                </h2>
                <p className="text-emerald-50 max-w-2xl mx-auto mb-8 leading-relaxed">
                  Contact DoItEasy support team today and get a dedicated
                  engineer for your cloud, servers and endpoints.
                </p>
                <div className="flex flex-wrap justify-center gap-3">
                  <button
                    type="button"
                    onClick={() => setContactOpen(true)}
                    className="px-8 py-3.5 rounded-xl font-bold transition inline-flex items-center gap-2"
                    style={{ backgroundColor: "#f5c400", color: DARK_TEXT }}
                  >
                    Contact support <ArrowRight className="w-4 h-4" />
                  </button>
                  <button
                    type="button"
                    onClick={() => setPriceOpen(true)}
                    className="px-8 py-3.5 rounded-xl font-bold bg-white/10 border border-white/30 text-white hover:bg-white/20 transition inline-flex items-center gap-2"
                  >
                    <Mail className="w-4 h-4" /> Request pricing
                  </button>
                </div>
              </div>
            </div>
          </AnimateIn>
        </div>
      </section>

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