import { ReactNode, useState } from "react";
import { Link, useLocation } from "react-router-dom";
import SiteLayout from "@/components/SiteLayout";
import {
  Server, Cloud, HardDrive, Mail, Globe, Building2, Check, ArrowRight,
  Phone, MapPin, Shield, Zap, Clock, Users, Star, MessageSquare, Send,
} from "lucide-react";

function PageHero({ icon: Icon, title, subtitle, breadcrumb }: { icon: any; title: string; subtitle: string; breadcrumb: string }) {
  return (
    <section className="hero-gradient text-white">
      <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 py-20 text-center">
        <div className="inline-flex items-center gap-2 bg-white/10 border border-white/20 rounded-full px-4 py-1.5 text-sm mb-6">
          <Icon className="w-4 h-4 text-[#f5c400]" /> {breadcrumb}
        </div>
        <h1 className="text-4xl md:text-6xl font-extrabold mb-4">{title}</h1>
        <p className="text-lg text-slate-200 max-w-2xl mx-auto">{subtitle}</p>
      </div>
    </section>
  );
}

function Feature({ icon: Icon, title, desc }: { icon: any; title: string; desc: string }) {
  return (
    <div className="p-6 rounded-2xl border border-slate-200 bg-white hover:shadow-xl hover:border-[#0b6e3e] transition">
      <div className="w-12 h-12 rounded-xl bg-[#0b6e3e] text-white flex items-center justify-center mb-4">
        <Icon className="w-5 h-5" />
      </div>
      <h3 className="font-bold text-slate-900 mb-2">{title}</h3>
      <p className="text-sm text-slate-600">{desc}</p>
    </div>
  );
}

function PlanCard({ name, price, period, features, highlight }: { name: string; price: string; period: string; features: string[]; highlight?: boolean }) {
  return (
    <div className={`relative rounded-3xl p-7 border transition hover:-translate-y-1 ${
      highlight ? "bg-[#063019] text-white border-[#0b6e3e] shadow-2xl" : "bg-white border-slate-200 shadow"
    }`}>
      {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">POPULAR</div>
      )}
      <h3 className="text-xl font-extrabold mb-3">{name}</h3>
      <div className="mb-5">
        <span className="text-3xl font-extrabold">{price}</span>
        <span className={`ml-1 text-sm ${highlight ? "text-slate-300" : "text-slate-500"}`}>/{period}</span>
      </div>
      <ul className={`space-y-2 mb-7 text-sm ${highlight ? "text-slate-200" : "text-slate-700"}`}>
        {features.map((f) => (
          <li key={f} className="flex items-center gap-2"><Check className="w-4 h-4 text-[#f5c400]" />{f}</li>
        ))}
      </ul>
      <Link to="/pricing" className={`block text-center py-2.5 rounded-md font-bold transition ${
        highlight ? "bg-[#f5c400] text-slate-900 hover:bg-yellow-400" : "bg-[#0b6e3e] text-white hover:bg-[#0a8048]"
      }`}>Order Now</Link>
    </div>
  );
}

// ========= PAGE CONTENTS =========

function HostingPage() {
  return (
    <>
      <PageHero icon={Server} title="Web Hosting" subtitle="Fast, secure cPanel hosting ✦ Free SSL ✦ Daily backups ✦ 24/7 support." breadcrumb="Hosting" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={Zap} title="NVMe Storage" desc="10x faster page loads with our latest NVMe SSD infrastructure." />
          <Feature icon={Shield} title="Free SSL + WAF" desc="HTTPS by default and an always-on Web Application Firewall." />
          <Feature icon={Clock} title="Daily Backups" desc="Automated backups with 14-day retention and 1-click restore." />
          <Feature icon={Server} title="cPanel + Softaculous" desc="Install WordPress, Joomla, Magento and 400+ apps in one click." />
          <Feature icon={Mail} title="Email Included" desc="Professional mailboxes at your own domain, included in every plan." />
          <Feature icon={Users} title="Expert Support" desc="Certified engineers available 24/7 via chat, ticket and WhatsApp." />
        </div>
      </section>
      <section className="py-16 bg-slate-50">
        <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">
          <h2 className="text-3xl font-bold text-center mb-10">Hosting Plans</h2>
          <div className="grid md:grid-cols-3 gap-6">
            <PlanCard name="Starter" price="$2.99" period="mo" features={["1 Website", "10 GB NVMe", "Unlimited Bandwidth", "Free SSL", "5 Mailboxes"]} />
            <PlanCard name="Pro" price="$9.99" period="mo" features={["Unlimited Websites", "50 GB NVMe", "Unlimited Bandwidth", "Free SSL + WAF", "25 Mailboxes", "Daily Backups"]} highlight />
            <PlanCard name="Business" price="$19.99" period="mo" features={["Unlimited Websites", "150 GB NVMe", "Unlimited Bandwidth", "Free SSL + WAF", "Unlimited Mail", "Priority Support"]} />
          </div>
        </div>
      </section>
    </>
  );
}

function CloudVPSPage() {
  return (
    <>
      <PageHero icon={Cloud} title="Cloud VPS & VDS" subtitle="High-performance virtual servers powered by NVMe and enterprise networks. Deploy in 60 seconds via Virtualizor automation." breadcrumb="Cloud VPS" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={Zap} title="60s Provisioning" desc="Automatic deployment, root access and console via Virtualizor." />
          <Feature icon={Shield} title="DDoS Protection" desc="Always-on mitigation included on every VPS plan at no extra cost." />
          <Feature icon={Server} title="Dedicated vCPU" desc="VDS plans guarantee dedicated vCPU cores — no noisy neighbors." />
        </div>
      </section>
      <section className="py-16 bg-slate-50">
        <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">
          <h2 className="text-3xl font-bold text-center mb-10">VPS & VDS Plans</h2>
          <div className="grid md:grid-cols-3 gap-6">
            <PlanCard name="VPS Starter" price="$12.99" period="mo" features={["2 vCPU", "4 GB RAM", "80 GB NVMe", "4 TB Bandwidth", "DDoS Protected"]} />
            <PlanCard name="VDS Business" price="$39.99" period="mo" features={["6 vCPU Dedicated", "16 GB RAM", "250 GB NVMe", "10 TB Bandwidth", "Managed Option"]} highlight />
            <PlanCard name="VDS Pro" price="$79.99" period="mo" features={["12 vCPU Dedicated", "32 GB RAM", "500 GB NVMe", "20 TB Bandwidth", "Managed + Backup"]} />
          </div>
        </div>
      </section>
    </>
  );
}

function DedicatedPage() {
  return (
    <>
      <PageHero icon={HardDrive} title="Dedicated Servers" subtitle="Enterprise-grade bare-metal hardware with full resource exclusivity, starting at just $89.99/mo." breadcrumb="Dedicated" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={HardDrive} title="Bare Metal Hardware" desc="Intel Xeon / AMD EPYC processors and enterprise NVMe storage." />
          <Feature icon={Shield} title="Unmetered Bandwidth" desc="High-end 1 Gbps / 10 Gbps uplinks with unmetered transfer." />
          <Feature icon={Users} title="Fully Managed" desc="Our team handles OS, security patches, monitoring and backups." />
        </div>
      </section>
      <section className="py-16 bg-slate-50">
        <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">
          <div className="grid md:grid-cols-3 gap-6">
            <PlanCard name="E-3 Compute" price="$89.99" period="mo" features={["8 Cores Xeon", "32 GB RAM", "1 TB NVMe", "10 TB Bandwidth", "1 Gbps Port"]} />
            <PlanCard name="E-5 Performance" price="$159.99" period="mo" features={["16 Cores Xeon", "64 GB RAM", "2× 1 TB NVMe", "Unmetered", "10 Gbps Port"]} highlight />
            <PlanCard name="EPYC Enterprise" price="$299.99" period="mo" features={["32 Cores EPYC", "128 GB RAM", "4× 1 TB NVMe RAID", "Unmetered", "10 Gbps Port"]} />
          </div>
        </div>
      </section>
    </>
  );
}

function BusinessEmailPage() {
  return (
    <>
      <PageHero icon={Mail} title="Business Email" subtitle="Pro mailboxes on your domain ✦ Anti-spam ✦ Calendar ✦ Zero-downtime migration." breadcrumb="Business Email" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={Mail} title="Microsoft 365 & Google Workspace" desc="Official partner for M365 and Google Workspace licenses." />
          <Feature icon={Shield} title="Anti-Spam & Anti-Phishing" desc="Enterprise-grade email security and DMARC/DKIM/SPF setup." />
          <Feature icon={Clock} title="Zero-Downtime Migration" desc="Our team migrates your mailboxes, calendars and contacts for free." />
        </div>
      </section>
      <section className="py-16 bg-slate-50">
        <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">
          <div className="grid md:grid-cols-3 gap-6">
            <PlanCard name="Standard" price="$2.49" period="user/mo" features={["10 GB Mailbox", "Webmail + IMAP", "Anti-Spam", "Mobile Sync"]} />
            <PlanCard name="Business" price="$4.99" period="user/mo" features={["50 GB Mailbox", "Calendar & Contacts", "Anti-Spam + DKIM", "Free Migration"]} highlight />
            <PlanCard name="Exchange" price="$8.99" period="user/mo" features={["100 GB Mailbox", "Exchange ActiveSync", "Shared Calendar", "Priority Support"]} />
          </div>
        </div>
      </section>
    </>
  );
}

function SDWANPage() {
  return (
    <>
      <PageHero icon={Globe} title="SD-WAN Services" subtitle="Secure, optimized connectivity across branches with enterprise-grade SD-WAN backed by SLA guarantees." breadcrumb="SD-WAN" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={Globe} title="Multi-Site Connectivity" desc="Connect branch offices with encrypted tunnels and central policy." />
          <Feature icon={Zap} title="Traffic Optimization" desc="Application-aware routing for SaaS, VoIP and video performance." />
          <Feature icon={Shield} title="Zero-Trust Security" desc="Integrated next-gen firewall, IDS/IPS and segmentation." />
        </div>
      </section>
    </>
  );
}

function ManagedITPage() {
  return (
    <>
      <PageHero icon={Building2} title="Managed IT Services" subtitle="End-to-end IT operations ✦ Helpdesk ✦ Monitoring ✦ Patching ✦ Backups." breadcrumb="Managed IT" />
      <section className="py-16 bg-white">
        <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 grid md:grid-cols-3 gap-6">
          <Feature icon={Users} title="24/7 Helpdesk" desc="Single point of contact for your staff, SLA-backed response times." />
          <Feature icon={Server} title="Proactive Monitoring" desc="Agents on every endpoint, WhatsApp alerts for incidents." />
          <Feature icon={Shield} title="Patching & Backups" desc="Automated patching, EDR rollouts and geo-redundant backups." />
        </div>
      </section>
    </>
  );
}

function PricingPage() {
  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");
  const allPlans = [
    { name: "Shared Pro", cat: "Hosting", m: 9.99, y: 99 },
    { name: "VPS Starter", cat: "Cloud VPS", m: 12.99, y: 129 },
    { name: "VDS Business", cat: "VDS", m: 39.99, y: 399 },
    { name: "Enterprise Dedicated", cat: "Dedicated", m: 89.99, y: 899 },
    { name: "Business Email", cat: "Email", m: 4.99, y: 49 },
    { name: "Managed IT Standard", cat: "Managed", m: 299, y: 2999 },
  ];
  return (
    <>
      <PageHero icon={Star} title="Transparent Pricing" subtitle="No hidden fees, no surprises. Switch billing below to save up to 20% with annual plans." breadcrumb="Pricing" />
      <section className="py-16 bg-slate-50">
        <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">
          <div className="flex justify-center mb-10">
            <div className="bg-white rounded-full p-1 shadow 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" : "text-slate-700"
                  }`}
                >{opt} {opt === "yearly" && <span className="ml-1 text-xs text-[#f5c400]">-20%</span>}</button>
              ))}
            </div>
          </div>
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
            {allPlans.map((p) => (
              <div key={p.name} className="bg-white rounded-2xl border border-slate-200 p-6 shadow hover:shadow-xl transition">
                <div className="text-xs font-bold uppercase text-[#0b6e3e] tracking-widest mb-2">{p.cat}</div>
                <h3 className="text-xl font-bold mb-3">{p.name}</h3>
                <div className="mb-4">
                  <span className="text-3xl font-extrabold">${billing === "monthly" ? p.m : p.y}</span>
                  <span className="text-slate-500 text-sm ml-1">/{billing === "monthly" ? "mo" : "yr"}</span>
                </div>
                <Link to="/contact" className="block text-center py-2.5 rounded-md bg-[#0b6e3e] text-white font-bold hover:bg-[#0a8048] transition">Order Now</Link>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

function AboutPage() {
  return (
    <>
      <PageHero icon={Building2} title="About DoItEasy" subtitle="Since 2018, powering the digital transformation of businesses across the Gulf region." breadcrumb="About Us" />
      <section className="py-16 bg-white">
        <div className="max-w-5xl 3xl:max-w-[1400px] 4xl:max-w-[1700px] 5xl:max-w-[2000px] mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <img src="/assets/images/image-1.png" alt="Data center" className="rounded-2xl shadow-xl" />
            <div>
              <h2 className="text-3xl font-bold text-[#0b6e3e] mb-4">Our Story</h2>
              <p className="text-slate-700 leading-relaxed">
                DoItEasy was founded with a simple mission — make web hosting and managed IT easy, secure and cost-effective for businesses across Saudi Arabia, Egypt, Kuwait and the wider Gulf region. Today we serve over 10,000 clients from startups to enterprises.
              </p>
            </div>
          </div>
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <div className="order-2 md:order-1">
              <h2 className="text-3xl font-bold text-[#0b6e3e] mb-4">Our Mission</h2>
              <p className="text-slate-700 leading-relaxed">
                Simplify technology for businesses and individuals by delivering secure, reliable and cost-effective hosting and managed IT solutions. We empower clients with the tools, support and innovation they need to grow confidently.
              </p>
            </div>
            <img src="https://mgx-backend-cdn.metadl.com/generate/images/1085345/2026-04-28/nppjw4aaafna/image-2_variant_1.png" alt="Mission" className="rounded-2xl shadow-xl order-1 md:order-2" />
          </div>
          <div className="grid md:grid-cols-2 gap-10 items-center">
            <img src="/assets/images/image-3.png" alt="Vision" className="rounded-2xl shadow-xl" />
            <div>
              <h2 className="text-3xl font-bold text-[#0b6e3e] mb-4">Our Vision</h2>
              <p className="text-slate-700 leading-relaxed">
                To become the most trusted hosting and IT services partner in the Gulf and beyond — enabling organizations to transform digitally, achieve long-term resilience and unlock new opportunities through cutting-edge cloud and infrastructure solutions.
              </p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

function ContactPage() {
  return (
    <>
      <PageHero icon={MessageSquare} title="Contact Us" subtitle="We're here to help ✦ 24/7 phone, email, WhatsApp & client portal." breadcrumb="Contact" />
      <section className="py-16 bg-white">
        <div className="max-w-6xl 3xl:max-w-[1500px] 4xl:max-w-[1800px] 5xl:max-w-[2200px] mx-auto px-4 sm:px-6 lg:px-8 grid lg:grid-cols-2 gap-10">
          <div className="space-y-5">
            <h2 className="text-2xl font-bold mb-3">Get in Touch</h2>
            <div className="flex items-start gap-3"><div className="w-10 h-10 rounded-lg bg-[#0b6e3e] text-white flex items-center justify-center shrink-0"><MapPin className="w-5 h-5" /></div><div><h4 className="font-bold">Headquarters</h4><p className="text-slate-600 text-sm">King Saud Street, Eastern Province, Saudi Arabia</p></div></div>
            <div className="flex items-start gap-3"><div className="w-10 h-10 rounded-lg bg-[#0b6e3e] text-white flex items-center justify-center shrink-0"><Phone className="w-5 h-5" /></div><div><h4 className="font-bold">Phone & WhatsApp</h4><p className="text-slate-600 text-sm">+966 000 000 000</p></div></div>
            <div className="flex items-start gap-3"><div className="w-10 h-10 rounded-lg bg-[#0b6e3e] text-white flex items-center justify-center shrink-0"><Mail className="w-5 h-5" /></div><div><h4 className="font-bold">Email</h4><p className="text-slate-600 text-sm">support@doiteasy.com · sales@doiteasy.com</p></div></div>
            <div className="flex items-start gap-3"><div className="w-10 h-10 rounded-lg bg-[#0b6e3e] text-white flex items-center justify-center shrink-0"><Clock className="w-5 h-5" /></div><div><h4 className="font-bold">Support Hours</h4><p className="text-slate-600 text-sm">24/7 for technical issues · 9am–7pm for sales</p></div></div>
          </div>

          <form onSubmit={(e) => e.preventDefault()} className="bg-slate-50 rounded-3xl p-7 border border-slate-200 space-y-4">
            <div className="grid grid-cols-2 gap-3">
              <input placeholder="First name" className="px-4 py-2.5 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-[#0b6e3e]/20" />
              <input placeholder="Last name" className="px-4 py-2.5 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-[#0b6e3e]/20" />
            </div>
            <input placeholder="Email" type="email" className="w-full px-4 py-2.5 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-[#0b6e3e]/20" />
            <input placeholder="Company" className="w-full px-4 py-2.5 border border-slate-200 rounded-lg text-sm outline-none focus:ring-2 focus:ring-[#0b6e3e]/20" />
            <select className="w-full px-4 py-2.5 border border-slate-200 rounded-lg text-sm bg-white outline-none focus:ring-2 focus:ring-[#0b6e3e]/20">
              <option>I'm interested in…</option><option>Web Hosting</option><option>Cloud VPS</option><option>Dedicated Servers</option><option>Business Email</option><option>Managed IT</option>
            </select>
            <textarea placeholder="Tell us about your project…" rows={4} className="w-full px-4 py-2.5 border border-slate-200 rounded-lg text-sm resize-none outline-none focus:ring-2 focus:ring-[#0b6e3e]/20" />
            <button className="w-full py-3 rounded-md bg-[#0b6e3e] text-white font-bold hover:bg-[#0a8048] transition flex items-center justify-center gap-2">
              Send Message <Send className="w-4 h-4" />
            </button>
          </form>
        </div>
      </section>
    </>
  );
}

const PAGES: Record<string, ReactNode> = {
  "/hosting": <HostingPage />,
  "/cloud-vps": <CloudVPSPage />,
  "/dedicated": <DedicatedPage />,
  "/business-email": <BusinessEmailPage />,
  "/sd-wan": <SDWANPage />,
  "/managed-it": <ManagedITPage />,
  "/pricing": <PricingPage />,
  "/about": <AboutPage />,
  "/contact": <ContactPage />,
};

export default function SubPages() {
  const { pathname } = useLocation();
  const content = PAGES[pathname] ?? (
    <section className="py-20 text-center">
      <h1 className="text-3xl font-bold">Page not found</h1>
      <Link to="/" className="inline-block mt-4 text-[#0b6e3e] font-semibold hover:underline">← Back to home</Link>
    </section>
  );
  return (
    <SiteLayout>
      {content}
      <section className="py-16 bg-[#063019] text-white text-center">
        <div className="max-w-3xl mx-auto px-4">
          <h2 className="text-3xl font-bold mb-3">Ready to get started?</h2>
          <p className="text-slate-300 mb-6">Talk to our team or jump straight to pricing.</p>
          <div className="flex gap-3 justify-center flex-wrap">
            <Link to="/pricing" className="px-7 py-3 rounded-md bg-[#f5c400] text-slate-900 font-bold hover:bg-yellow-400 transition">View Pricing</Link>
            <Link to="/contact" className="px-7 py-3 rounded-md bg-white/10 border border-white/20 text-white font-bold hover:bg-white/20 transition inline-flex items-center gap-2">Contact Sales <ArrowRight className="w-4 h-4" /></Link>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
}