/**
 * SharedHosting.tsx
 *
 * Landing page for the five shared-hosting control panel products offered
 * by DoItEasy. Each plan card is a clickable tile that redirects the user
 * to the product's canonical marketing page on doiteasy.net:
 *
 *   cPanel            → https://doiteasy.net/cpanel-page/
 *   Plesk             → https://doiteasy.net/plesk/
 *   AA Panel          → https://doiteasy.net/aa-panel/
 *   Windows Hosting   → https://doiteasy.net/plesk/        (shares Plesk stack)
 *   WordPress Hosting → https://doiteasy.net/wordpress-hosting/
 *
 * Design goals:
 *   - Consistent with the rest of the site: dark-green hero, soft-gray
 *     alternating section, glass-soft cards with smoke-white shadows,
 *     wave separators at section transitions.
 *   - Every card is large, tappable, and visually distinct via its
 *     control-panel brand color accent.
 *   - External links open in a new tab with rel="noopener noreferrer".
 */
import { Link, useNavigate } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import AnimateIn from "@/components/AnimateIn";
import SectionDivider from "@/components/SectionDivider";
import {
  Server,
  ShieldCheck,
  Zap,
  HardDrive,
  Globe,
  Mail,
  Database,
  Lock,
  Clock,
  ArrowUpRight,
  Check,
  MonitorCog,
} from "lucide-react";

/* -------------------------------------------------------------------------
 * NOTE on icons:
 *   lucide-react does NOT expose a "Wordpress" icon. For the WordPress
 *   tile we render our own inline SVG glyph (see WordPressGlyph below)
 *   so the icon is self-contained and always available.
 * ------------------------------------------------------------------------ */

interface HostingPlan {
  name: string;
  tagline: string;
  desc: string;
  /** Internal route for the dedicated plan page. */
  to: string;
  /** External doiteasy.net reference URL (shown as a small "doiteasy.net ↗" label). */
  externalHref: string;
  accent: string;        // tailwind bg-* color class for icon chip
  accentBorder: string;  // tailwind border-* for highlight
  icon: React.ReactNode;
  features: string[];
  badge?: string;
}

/**
 * Inline WordPress "W" glyph. Uses currentColor so it inherits the chip
 * text color. Matches the visual weight of the lucide icons used on other
 * cards so the row stays balanced.
 */
function WordPressGlyph({ className = "w-7 h-7" }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      className={className}
    >
      <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8Zm-4.42-11.3L10 16l1.5-4.2 1.7 4.2 2.4-7.3H14l-1.2 3.8-1.3-3.8h-1.5l-1.2 3.8-1.2-3.8Z" />
    </svg>
  );
}

const PLANS: HostingPlan[] = [
  {
    name: "cPanel Hosting",
    tagline: "The world's most popular control panel",
    desc:
      "Industry-standard cPanel + WHM stack with one-click installers, email, DNS, and file manager. Ideal for agencies & developers.",
    to: "/shared-hosting/cpanel",
    externalHref: "https://doiteasy.net/cpanel-page/",
    accent: "bg-orange-500",
    accentBorder: "hover:border-orange-400",
    icon: <Server className="w-7 h-7" />,
    badge: "Most Popular",
    features: [
      "LiteSpeed web server",
      "Free SSL + auto-renew",
      "Softaculous 400+ apps",
      "Daily off-site backups",
    ],
  },
  {
    name: "Plesk Hosting",
    tagline: "Clean, modern, multi-OS panel",
    desc:
      "Plesk Obsidian for smooth management of domains, databases, Git deploys, and WordPress — beautifully designed for both Linux & Windows.",
    to: "/shared-hosting/plesk",
    externalHref: "https://doiteasy.net/plesk/",
    accent: "bg-sky-500",
    accentBorder: "hover:border-sky-400",
    icon: <MonitorCog className="w-7 h-7" />,
    features: [
      "Linux & Windows support",
      "WordPress Toolkit",
      "Git & Docker extensions",
      "Built-in WAF & Fail2Ban",
    ],
  },
  {
    name: "AA Panel Hosting",
    tagline: "Lightweight · open-source · developer-friendly",
    desc:
      "aaPanel is a blazing-fast open-source alternative. Perfect for tech-savvy users who want full root control at a lower cost.",
    to: "/shared-hosting/aa-panel",
    externalHref: "https://doiteasy.net/aa-panel/",
    accent: "bg-emerald-500",
    accentBorder: "hover:border-emerald-400",
    icon: <HardDrive className="w-7 h-7" />,
    features: [
      "One-click LNMP / LAMP",
      "Nginx / Apache / OpenLiteSpeed",
      "Free & open-source",
      "Root SSH access",
    ],
  },
  {
    name: "Windows Hosting",
    tagline: "ASP.NET, MSSQL & IIS workloads",
    desc:
      "Run .NET Core, classic ASP, MSSQL databases, and Windows-only stacks on a managed IIS platform powered by Plesk.",
    to: "/shared-hosting/windows",
    externalHref: "https://doiteasy.net/plesk/",
    accent: "bg-blue-600",
    accentBorder: "hover:border-blue-500",
    icon: <Database className="w-7 h-7" />,
    features: [
      "IIS 10 + ASP.NET 4.8 / Core",
      "MSSQL Server databases",
      "Plesk control panel",
      "Remote IIS management",
    ],
  },
  {
    name: "WordPress Hosting",
    tagline: "Tuned, cached & secured for WP",
    desc:
      "Managed WordPress hosting with LiteSpeed cache, auto-updates, staging environments, and malware scanning — all on NVMe SSD.",
    to: "/shared-hosting/wordpress",
    externalHref: "https://doiteasy.net/wordpress-hosting/",
    accent: "bg-[#21759b]",
    accentBorder: "hover:border-[#21759b]",
    icon: <WordPressGlyph className="w-7 h-7" />,
    badge: "Managed",
    features: [
      "1-click staging site",
      "LiteSpeed + Redis cache",
      "Auto WP core updates",
      "Malware scan & removal",
    ],
  },
];

const BENEFITS = [
  {
    icon: <Zap className="w-5 h-5" />,
    title: "NVMe SSD Storage",
    desc: "Ultra-fast NVMe drives deliver sub-10ms I/O for snappy page loads.",
  },
  {
    icon: <ShieldCheck className="w-5 h-5" />,
    title: "Free SSL, Always",
    desc: "Let's Encrypt certificates auto-install & auto-renew on every domain.",
  },
  {
    icon: <Lock className="w-5 h-5" />,
    title: "Daily Backups",
    desc: "Off-site daily snapshots with 1-click restore from your control panel.",
  },
  {
    icon: <Clock className="w-5 h-5" />,
    title: "24/7 Local Support",
    desc: "Arabic & English speaking engineers available day and night.",
  },
  {
    icon: <Globe className="w-5 h-5" />,
    title: "99.9% Uptime SLA",
    desc: "Backed by Saudi tier-III data centers and redundant networks.",
  },
  {
    icon: <Mail className="w-5 h-5" />,
    title: "Business Email",
    desc: "Unlimited mailboxes on your own domain, with spam & malware protection.",
  },
];

export default function SharedHosting() {
  const navigate = useNavigate();
  return (
    <SiteLayout>
      {/* =============================== HERO =============================== */}
      <section
        className="relative overflow-hidden pt-32 pb-24 text-white"
        style={{
          background:
            "linear-gradient(135deg, #03120a 0%, #063019 45%, #0b6e3e 100%)",
        }}
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 opacity-20"
          style={{
            backgroundImage:
              "radial-gradient(rgba(255,255,255,0.25) 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }}
        />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12 text-center">
          <AnimateIn>
            <span className="inline-block bg-[#f5c400] text-slate-900 px-4 py-1.5 text-xs font-bold uppercase tracking-wider rounded-full shadow">
              Shared Hosting
            </span>
            <h1 className="mt-5 text-4xl md:text-6xl font-extrabold leading-tight">
              Pick Your Hosting <span className="text-[#f5c400]">Control Panel</span>
            </h1>
            <p className="mt-5 max-w-2xl mx-auto text-lg text-white/90">
              cPanel, Plesk, aaPanel, Windows, and managed WordPress — all on the
              same NVMe-powered, Saudi-based platform. Pick the panel you love,
              we handle the rest.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <a
                href="#plans"
                className="inline-flex items-center gap-2 bg-[#f5c400] hover:bg-yellow-400 text-slate-900 font-bold px-6 py-3 rounded-md shadow-md transition"
              >
                See All Plans
              </a>
              <Link
                to="/contact"
                className="inline-flex items-center gap-2 !bg-transparent border-2 border-white/70 hover:!bg-white hover:!text-[#0b6e3e] text-white font-bold px-6 py-3 rounded-md transition"
              >
                Talk to Sales
              </Link>
            </div>
          </AnimateIn>
        </div>
      </section>

      {/* =============================== PLANS =============================== */}
      <section
        id="plans"
        className="relative py-20 bg-white"
      >
        <SectionDivider from="#0b6e3e" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              Choose Your Panel
            </span>
            <h2 className="mt-2 text-3xl md:text-5xl font-bold text-slate-900">
              Five ways to host, one unified platform
            </h2>
            <p className="mt-4 text-slate-600 max-w-2xl mx-auto">
              Every plan runs on the same enterprise-grade infrastructure.
              Choose the control panel and stack that best fits your workflow.
            </p>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {PLANS.map((p, idx) => (
              <AnimateIn key={p.name} delay={idx * 100}>
                {/*
                  The whole card navigates to the internal plan page, but we
                  keep an inner `<a>` for the small "doiteasy.net ↗" label so
                  advanced users can still jump to the canonical marketing
                  page in a new tab. The inner link stops propagation so it
                  doesn't also trigger the card's navigate().
                */}
                <div
                  role="link"
                  tabIndex={0}
                  onClick={() => navigate(p.to)}
                  onKeyDown={(e) => {
                    if (e.key === "Enter" || e.key === " ") {
                      e.preventDefault();
                      navigate(p.to);
                    }
                  }}
                  className={`group relative glass-soft rounded-3xl p-7 flex flex-col h-full border transition-all duration-500 ease-out cursor-pointer ${p.accentBorder}`}
                >
                  {p.badge && (
                    <span className="absolute -top-3 right-5 bg-[#f5c400] text-slate-900 text-[11px] font-bold uppercase tracking-wider px-3 py-1 rounded-full shadow">
                      {p.badge}
                    </span>
                  )}

                  {/* Icon chip */}
                  <div
                    className={`w-14 h-14 rounded-2xl ${p.accent} text-white flex items-center justify-center shadow-md mb-5`}
                  >
                    {p.icon}
                  </div>

                  <h3 className="text-xl font-bold text-slate-900">{p.name}</h3>
                  <p className="text-sm text-[#0b6e3e] font-semibold mt-1">
                    {p.tagline}
                  </p>
                  <p className="mt-3 text-slate-600 leading-relaxed text-sm">
                    {p.desc}
                  </p>

                  <ul className="mt-5 space-y-2">
                    {p.features.map((f) => (
                      <li
                        key={f}
                        className="flex items-start gap-2 text-sm text-slate-700"
                      >
                        <Check className="w-4 h-4 text-[#0b6e3e] shrink-0 mt-0.5" />
                        <span>{f}</span>
                      </li>
                    ))}
                  </ul>

                  <div className="mt-auto pt-6 flex items-center justify-between">
                    <Link
                      to={p.to}
                      onClick={(e) => e.stopPropagation()}
                      className="inline-flex items-center gap-1.5 text-[#0b6e3e] font-bold text-sm"
                    >
                      Explore plan
                      <ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                    </Link>
                    <a
                      href={p.externalHref}
                      target="_blank"
                      rel="noopener noreferrer"
                      onClick={(e) => e.stopPropagation()}
                      className="text-[11px] uppercase tracking-wider text-slate-400 hover:text-[#0b6e3e] transition"
                    >
                      doiteasy.net ↗
                    </a>
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* ============================== BENEFITS ============================== */}
      <section className="relative py-20 bg-slate-50">
        <SectionDivider from="#ffffff" />
        <div className="relative max-w-7xl 3xl:max-w-[1680px] mx-auto px-4 sm:px-6 lg:px-8 3xl:px-12">
          <AnimateIn className="text-center mb-12">
            <span className="text-[#0b6e3e] font-bold uppercase tracking-widest text-sm">
              Included on every plan
            </span>
            <h2 className="mt-2 text-3xl md:text-4xl font-bold text-slate-900">
              Enterprise-grade features, small-business pricing
            </h2>
          </AnimateIn>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {BENEFITS.map((b, idx) => (
              <AnimateIn key={b.title} delay={idx * 70}>
                <div className="glass-soft rounded-2xl p-6 flex items-start gap-4 h-full">
                  <div className="w-11 h-11 rounded-xl bg-[#0b6e3e] text-white flex items-center justify-center shrink-0">
                    {b.icon}
                  </div>
                  <div>
                    <h3 className="font-bold text-slate-900">{b.title}</h3>
                    <p className="text-sm text-slate-600 mt-1 leading-relaxed">
                      {b.desc}
                    </p>
                  </div>
                </div>
              </AnimateIn>
            ))}
          </div>
        </div>
      </section>

      {/* =============================== CTA =============================== */}
      <section className="relative py-20 bg-white">
        <SectionDivider from="#f8fafc" />
        <div className="relative max-w-4xl mx-auto px-4 text-center">
          <AnimateIn>
            <h2 className="text-3xl md:text-4xl font-bold text-slate-900">
              Not sure which panel fits you?
            </h2>
            <p className="mt-4 text-slate-600 leading-relaxed">
              Our hosting specialists will recommend the right control panel
              and plan for your stack, migrate your existing site for free, and
              have you live within 24 hours.
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
              <Link
                to="/contact"
                className="inline-flex items-center gap-2 bg-[#0b6e3e] hover:bg-[#0a8048] text-white font-bold px-7 py-3 rounded-md shadow-md transition"
              >
                Request a Recommendation
              </Link>
              <Link
                to="/tickets"
                className="inline-flex items-center gap-2 !bg-transparent border-2 border-[#0b6e3e] text-[#0b6e3e] font-bold px-7 py-3 rounded-md hover:!bg-[#0b6e3e] hover:!text-white transition"
              >
                Open a Ticket
              </Link>
            </div>
          </AnimateIn>
        </div>
      </section>
    </SiteLayout>
  );
}