"use client";

import { useState } from "react";
import { Check, Zap, ArrowRight, Globe, ShieldCheck, RefreshCw, HardDrive, Layers } from "lucide-react";
import { motion, AnimatePresence } from "motion/react";
import { cn } from "@/lib/utils";
import { siteConfig } from "@/lib/config/site";

type Cycle = "monthly" | "yearly";

const cycles: { key: Cycle; label: string }[] = [
  { key: "monthly", label: "Monthly" },
  { key: "yearly",  label: "Yearly"  },
];

const plans = [
  {
    name: "STARTER",
    tagline: "Get online fast",
    prices: { monthly: "Rp 29.000", yearly: "Rp 23.000" },
    popular: false,
    features: [
      "1 Website",
      "10 GB NVMe SSD",
      "Unlimited Bandwidth",
      "Free SSL Certificate",
      "1-Click App Installer",
      "24/7 Support",
    ],
    cta: "Get Started",
  },
  {
    name: "PRO",
    tagline: "For growing projects",
    prices: { monthly: "Rp 55.000", yearly: "Rp 44.000" },
    popular: true,
    features: [
      "10 Websites",
      "50 GB NVMe SSD",
      "Unlimited Bandwidth",
      "Free SSL Certificate",
      "Daily Automatic Backups",
      "Free Domain (1 Year)",
      "Priority Support",
      "Staging Environment",
    ],
    cta: "Get Pro",
  },
  {
    name: "BUSINESS",
    tagline: "For demanding workloads",
    prices: { monthly: "Rp 99.000", yearly: "Rp 79.000" },
    popular: false,
    features: [
      "Unlimited Websites",
      "200 GB NVMe SSD",
      "Unlimited Bandwidth",
      "Free SSL Certificate",
      "Daily + On-Demand Backups",
      "Free Domain (1 Year)",
      "Dedicated Resources",
      "Priority Support",
    ],
    cta: "Get Business",
  },
];

const perks = [
  { icon: ShieldCheck, label: "Free SSL"        },
  { icon: RefreshCw,   label: "Daily Backups"   },
  { icon: Globe,       label: "99.9% Uptime"    },
  { icon: HardDrive,   label: "NVMe SSD"        },
  { icon: Zap,         label: "1-Click Install" },
  { icon: Layers,      label: "LiteSpeed Server"},
];

const APPS = ["wordpress", "laravel", "nextdotjs", "python", "nodedotjs", "ghost"];

export default function WebHostingSection() {
  const [cycle, setCycle] = useState<Cycle>("monthly");

  return (
    <section
      id="web-hosting"
      className="relative w-full py-24 md:py-32 px-6 lg:px-12 overflow-hidden border-t border-border/80 font-sans"
    >
      <div
        className="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-40 blur-[100px] pointer-events-none opacity-20"
        style={{ background: "radial-gradient(ellipse, rgba(109,40,217,0.6) 0%, transparent 70%)" }}
      />

      <div className="relative z-10 max-w-7xl mx-auto">

        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <div className="flex items-center justify-center gap-3 mb-6">
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
            <p className="text-xs font-bold text-accent-text uppercase tracking-widest">Web Hosting</p>
            <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
          </div>
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white tracking-tight leading-[1.1] mb-5">
            Hosting that actually <br />
            <span className="text-accent-text">stays fast.</span>
          </h2>
          <p className="text-[1rem] text-content-dim max-w-lg mx-auto leading-relaxed">
            NVMe SSD, LiteSpeed, free SSL, and one-click installers.{" "}
            Everything your site needs, nothing it doesn&apos;t.
          </p>

          <div className="flex items-center justify-center gap-4 mt-8 flex-wrap">
            {APPS.map((slug) => (
              /* eslint-disable-next-line @next/next/no-img-element */
              <img
                key={slug}
                src={`https://cdn.simpleicons.org/${slug}/71717a`}
                alt={slug}
                width={18}
                height={18}
                className="opacity-50 tech-icon-filter"
              />
            ))}
            <span className="text-xs text-content-faint">+ 300 more apps</span>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.4, delay: 0.1 }}
          className="flex justify-center mb-12"
        >
          <div className="flex items-center gap-1 p-1 rounded-xl bg-elevated border border-border/80">
            {cycles.map((c) => (
              <button
                key={c.key}
                onClick={() => setCycle(c.key)}
                className={cn(
                  "flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200",
                  cycle === c.key
                    ? "bg-accent text-white shadow-sm"
                    : "text-content-muted hover:text-content"
                )}
              >
                {c.label}
                {c.key === "yearly" && (
                  <span className={cn(
                    "text-[10px] font-bold px-1.5 py-0.5 rounded-full leading-none",
                    cycle === "yearly" ? "bg-white/20 text-white" : "bg-accent/15 text-accent-text"
                  )}>
                    −20%
                  </span>
                )}
              </button>
            ))}
          </div>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 items-center mb-14">
          {plans.map((plan, i) => (
            <motion.div
              key={plan.name}
              initial={{ opacity: 0, y: 24 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.08 }}
              className={cn(
                "relative flex flex-col rounded-2xl border transition-all duration-300",
                plan.popular
                  ? "bg-accent/4 border-accent/35 shadow-[0_0_60px_rgba(109,40,217,0.08)] md:-my-5 p-8"
                  : "bg-surface border-border/80 hover:border-border-hover p-6"
              )}
            >
              {plan.popular && (
                <div className="absolute -top-3.5 inset-x-0 flex justify-center">
                  <span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest bg-accent text-white shadow-[0_2px_12px_rgba(109,40,217,0.45)]">
                    <Zap className="w-2.5 h-2.5" /> Most Popular
                  </span>
                </div>
              )}

              <div className={cn("mb-6", plan.popular && "mt-2")}>
                <p className="text-[10px] font-bold uppercase tracking-widest text-content-muted mb-1">{plan.name}</p>
                <p className="text-xs text-content-subtle mb-5">{plan.tagline}</p>
                <div className="flex items-end gap-1.5">
                  <AnimatePresence mode="wait">
                    <motion.p
                      key={`${plan.name}-${cycle}`}
                      initial={{ opacity: 0, y: -6 }}
                      animate={{ opacity: 1, y: 0 }}
                      exit={{ opacity: 0, y: 6 }}
                      transition={{ duration: 0.14 }}
                      className="text-3xl font-bold text-white tracking-tight"
                    >
                      {plan.prices[cycle]}
                    </motion.p>
                  </AnimatePresence>
                  <p className="text-xs text-content-subtle mb-1.5">/mo</p>
                </div>
                {cycle === "yearly" && (
                  <p className="text-[11px] text-emerald-400 font-medium mt-1.5">Billed annually · Save 20%</p>
                )}
              </div>

              <ul className="flex flex-col gap-2.5 mb-8 flex-1">
                {plan.features.map((f) => (
                  <li key={f} className="flex items-start gap-2.5 text-sm text-content-dim">
                    <Check className="w-3.5 h-3.5 text-emerald-400 mt-0.5 shrink-0" />
                    {f}
                  </li>
                ))}
              </ul>

              <a
                href={siteConfig.billing.url}
                target="_blank"
                rel="noopener noreferrer"
                className={cn(
                  "flex items-center justify-center gap-2 px-5 py-3 rounded-xl text-sm font-semibold transition-all duration-150",
                  plan.popular
                    ? "bg-accent hover:bg-accent-hover text-white shadow-[0_4px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:shadow-[0_6px_0_rgba(0,0,0,0.35),inset_0_1px_0_rgba(255,255,255,0.12)] hover:-translate-y-0.5 active:translate-y-1 active:shadow-none"
                    : "border border-border hover:border-border-hover text-zinc-300 hover:text-white hover:bg-zinc-900 shadow-[0_3px_0_rgba(0,0,0,0.5)] hover:shadow-[0_4px_0_rgba(0,0,0,0.5)] hover:-translate-y-0.5 active:translate-y-1 active:shadow-none"
                )}
              >
                {plan.cta}
                <ArrowRight className="w-3.5 h-3.5" />
              </a>
            </motion.div>
          ))}
        </div>

        <motion.div
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 px-8 py-6 rounded-2xl border border-border/80 bg-elevated/40"
        >
          {perks.map((perk) => {
            const Icon = perk.icon;
            return (
              <div key={perk.label} className="flex flex-col items-center gap-2 text-center">
                <div className="p-2 rounded-lg border border-white/6 bg-white/3">
                  <Icon className="w-4 h-4 text-accent-text" />
                </div>
                <span className="text-xs font-medium text-content-dim leading-snug">{perk.label}</span>
              </div>
            );
          })}
        </motion.div>

      </div>
    </section>
  );
}