"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import {
  Check, Zap, ArrowRight, Globe, ShieldCheck, RefreshCw,
  HardDrive, Layers, Mail, Lock, ChevronDown, Server,
} from "lucide-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { siteConfig } from "@/lib/config/site";
import {
  webHostApps as apps,
  webHostBgFiles,
  webHostCycles as cycles,
  webHostFaqs as faqs,
  webHostFeatures as features,
  webHostPlans as plans,
  webHostStats as stats,
} from "@/lib/data/product-config";

const noiseStyle = {
  backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
  backgroundSize: "128px 128px",
};

type Cycle = "monthly" | "yearly";

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

const legacyPlans = [
  {
    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",
      "Email Accounts (5)",
      "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)",
      "Unlimited Email Accounts",
      "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)",
      "Unlimited Email Accounts",
      "Dedicated Resources",
      "Priority Support",
    ],
    cta: "Get Business",
  },
];

const legacyFeatures = [
  {
    icon: ShieldCheck,
    title: "Free SSL on Every Plan",
    desc: "Automatic Let's Encrypt SSL certificates, issued and renewed without lifting a finger. HTTPS out of the box.",
  },
  {
    icon: RefreshCw,
    title: "Daily Automatic Backups",
    desc: "Full-site backups every 24 hours, retained for 30 days. Restore your entire site in one click from the panel.",
  },
  {
    icon: Layers,
    title: "LiteSpeed Web Server",
    desc: "Up to 40× faster than Apache under load. Built-in LSCache turbocharges WordPress and other PHP applications.",
  },
  {
    icon: Zap,
    title: "300+ 1-Click Installers",
    desc: "WordPress, WooCommerce, Joomla, Drupal, Laravel, Ghost — deployed in seconds from the control panel.",
  },
  {
    icon: Mail,
    title: "Professional Email Hosting",
    desc: "Create unlimited @yourdomain email addresses. Full IMAP/SMTP support, spam filtering, and webmail included.",
  },
  {
    icon: Lock,
    title: "DDoS Protection Included",
    desc: "Layer 3/4 network-level protection on every plan. Your site stays up even when under active attack.",
  },
];

const legacyApps = [
  { slug: "wordpress",   name: "WordPress"   },
  { slug: "woocommerce", name: "WooCommerce" },
  { slug: "joomla",      name: "Joomla"      },
  { slug: "drupal",      name: "Drupal"      },
  { slug: "laravel",     name: "Laravel"     },
  { slug: "ghost",       name: "Ghost"       },
  { slug: "nextdotjs",   name: "Next.js"     },
  { slug: "nodedotjs",   name: "Node.js"     },
  { slug: "python",      name: "Python"      },
  { slug: "php",         name: "PHP"         },
  { slug: "mysql",       name: "MySQL"       },
  { slug: "mongodb",     name: "MongoDB"     },
];

const legacyStats = [
  { value: "40×",   label: "Faster than Apache",   icon: Zap      },
  { value: "99.9%", label: "Uptime SLA",            icon: Server   },
  { value: "300+",  label: "One-click apps",        icon: Layers   },
  { value: "Free",  label: "SSL + WHOIS privacy",   icon: ShieldCheck },
];

const legacyFaqs = [
  {
    q: "Can I host WordPress on these plans?",
    a: "Yes — all plans include a one-click WordPress installer, LiteSpeed cache, and PHP 8.x support. The Pro and Business plans also include staging environments so you can test changes before going live.",
  },
  {
    q: "What does 'Unlimited Bandwidth' mean?",
    a: "We don't meter or throttle your traffic. As long as your site runs within the CPU and memory limits of your plan, you will never receive a bandwidth overage bill.",
  },
  {
    q: "Is the free SSL automatic?",
    a: "Yes. SSL certificates are issued via Let's Encrypt during domain setup and renewed automatically before expiry. You don't need to configure anything.",
  },
  {
    q: "Can I use my own domain?",
    a: "Absolutely. Point your domain's nameservers to ours and we'll take it from there. You can also register or transfer a domain directly through us — Pro and Business plans include one free domain for the first year.",
  },
  {
    q: "What control panel do you use?",
    a: "We use a modern, lightweight control panel with file manager, database manager, email setup, one-click installers, and backup restore — all without the bloat of legacy cPanel.",
  },
  {
    q: "How does the staging environment work?",
    a: "Pro and Business plans include a one-click staging clone of your live site. Make and test changes in isolation, then push to production when you're ready. No FTP or manual copying needed.",
  },
];

function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-border/60 last:border-b-0">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between gap-4 py-5 text-left"
      >
        <span className="text-sm font-semibold text-content">{q}</span>
        <ChevronDown className={cn("w-4 h-4 text-content-subtle shrink-0 transition-transform duration-200", open && "rotate-180")} />
      </button>
      <AnimatePresence initial={false}>
        {open && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: "auto", opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            transition={{ duration: 0.22, ease: "easeOut" }}
            className="overflow-hidden"
          >
            <p className="text-sm text-content-dim leading-relaxed pb-5">{a}</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

const LEGACY_BG_FILES = [
  { name: "index.html",    color: "#e44d26", x: "3%",  y: "18%", delay: 0,   dur: 7   },
  { name: "style.css",     color: "#1572b6", x: "4%",  y: "50%", delay: 1.5, dur: 8.5 },
  { name: ".htaccess",     color: "#71717a", x: "3%",  y: "80%", delay: 2.8, dur: 6.5 },
  { name: "wp-config.php", color: "#8892bf", x: "18%", y: "10%", delay: 0.8, dur: 8   },
  { name: "package.json",  color: "#cb3837", x: "19%", y: "36%", delay: 2.0, dur: 7   },
  { name: "composer.json", color: "#8892bf", x: "18%", y: "64%", delay: 1.2, dur: 9   },
  { name: "Dockerfile",    color: "#2496ed", x: "17%", y: "88%", delay: 3.2, dur: 6.5 },
  { name: "app.js",        color: "#f7df1e", x: "76%", y: "8%",  delay: 1.0, dur: 8   },
  { name: "nginx.conf",    color: "#009639", x: "76%", y: "34%", delay: 2.4, dur: 7.5 },
  { name: "sitemap.xml",   color: "#e44d26", x: "75%", y: "60%", delay: 0.5, dur: 9   },
  { name: ".env",          color: "#ecd53f", x: "74%", y: "86%", delay: 1.8, dur: 6.5 },
  { name: "README.md",     color: "#4078c8", x: "88%", y: "16%", delay: 0.3, dur: 7   },
  { name: "robots.txt",    color: "#71717a", x: "89%", y: "44%", delay: 1.7, dur: 8   },
  { name: "schema.sql",    color: "#336791", x: "88%", y: "70%", delay: 2.6, dur: 6   },
];

const legacyOpacities = [0.30, 0.22, 0.18, 0.20, 0.15, 0.12, 0.09, 0.18, 0.14, 0.11, 0.08, 0.28, 0.20, 0.16];

function WebHostHeroBg() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {webHostBgFiles.map((f, i) => (
        <div
          key={i}
          className="absolute flex items-center gap-2 px-3 py-1.5 rounded-lg border border-white/8 bg-white/2.5 font-mono text-[11px] whitespace-nowrap"
          style={{ left: f.x, top: f.y, opacity: f.opacity }}
        >
          <span className="w-2 h-2 rounded-sm shrink-0" style={{ backgroundColor: f.color }} />
          <span className="text-content-dim">{f.name}</span>
        </div>
      ))}
      <div
        className="absolute inset-0"
        style={{ background: "radial-gradient(ellipse 50% 70% at 50% 40%, var(--bg-base) 0%, transparent 100%)" }}
      />
      <div
        className="absolute -bottom-10 left-1/2 -translate-x-1/2 w-[600px] h-[220px] blur-[80px] rounded-full"
        style={{ background: "radial-gradient(ellipse, rgba(109,40,217,0.22) 0%, transparent 70%)" }}
      />
    </div>
  );
}

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

  return (
    <main className="flex flex-col w-full min-h-screen bg-base text-content font-sans selection:bg-accent-hover/30 overflow-x-hidden">
      <div className="fixed inset-0 opacity-[0.025] pointer-events-none z-0" style={noiseStyle} />
      <div
        className="fixed inset-0 z-0 pointer-events-none"
        style={{ background: "radial-gradient(ellipse 60% 40% at 50% 0%, rgba(109,40,217,0.07) 0%, transparent 70%)" }}
      />

      <section className="relative z-10 w-full pt-36 pb-24 px-6 lg:px-12">
        <WebHostHeroBg />
        <div className="relative z-10 max-w-4xl mx-auto text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55 }}
          >
            <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>
            <h1 className="text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tight text-content leading-[1.05] mb-5">
              Your website, live <br />
              <span className="text-accent-text">in minutes.</span>
            </h1>
            <p className="text-content-dim text-[1rem] md:text-lg max-w-xl mx-auto leading-relaxed mb-10">
              NVMe SSD, LiteSpeed web server, free SSL, and 300+ one-click app installers.
              Everything your site needs — none of the bloat.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
              <a
                href="#pricing"
                className="hero-cta-soft flex items-center gap-2 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold text-sm hover:-translate-y-0.5 active:translate-y-1 active:shadow-none transition-all duration-150"
              >
                <Zap className="w-4 h-4" /> See Plans <ArrowRight className="w-3.5 h-3.5" />
              </a>
              <Link
                href="/support"
                className="flex items-center gap-2 px-8 py-3.5 rounded-xl border border-border bg-surface text-content-dim font-semibold text-sm hover:border-border-hover hover:bg-elevated hover:text-content transition-all duration-200 hover:-translate-y-0.5 active:translate-y-1 active:shadow-none"
              >
                Talk to Sales
              </Link>
            </div>
          </motion.div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.55, delay: 0.2 }}
          className="relative z-10 max-w-3xl mx-auto mt-20 grid grid-cols-2 md:grid-cols-4 gap-4"
        >
          {stats.map((s) => {
            const Icon = s.icon;
            return (
              <div key={s.label} className="flex flex-col items-center gap-2 p-4 rounded-2xl border border-border/80 bg-surface text-center">
                <Icon className="w-4 h-4 text-accent-text" />
                <p className="text-xl font-bold text-content tracking-tight">{s.value}</p>
                <p className="text-[11px] text-content-muted leading-snug">{s.label}</p>
              </div>
            );
          })}
        </motion.div>
      </section>

      <section id="pricing" className="relative z-10 w-full py-20 md:py-28 px-6 lg:px-12 border-t border-border/80">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
            className="text-center mb-10"
          >
            <div className="flex items-center justify-center gap-3 mb-5">
              <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">Pricing</p>
              <span className="block h-0.5 w-6 bg-accent-hover rounded-full" />
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
              Simple, honest <span className="text-accent-text">pricing.</span>
            </h2>
          </motion.div>

          <div className="flex justify-center mb-10">
            <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>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 items-center">
            {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(
                  "product-plan-card relative flex flex-col rounded-2xl border transition-all duration-300",
                  plan.popular
                    ? "bg-accent/[0.045] border-accent/35 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-content 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={plan.billingUrl ?? 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 bg-surface hover:border-border-hover text-content-dim hover:text-content hover:bg-elevated 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>

          <p className="text-xs text-content-faint mt-6 text-center">All prices in IDR and include applicable taxes. Yearly plans are billed in full upfront.</p>
        </div>
      </section>

      <section className="relative z-10 w-full py-20 md:py-28 px-6 lg:px-12 border-t border-border/80">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
            className="mb-12"
          >
            <div className="flex items-center gap-3 mb-5">
              <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">Everything Included</p>
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
              No hidden fees, <span className="text-accent-text">no surprises.</span>
            </h2>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            {features.map((f, i) => {
              const Icon = f.icon;
              return (
                <motion.div
                  key={f.title}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.45, delay: i * 0.07 }}
                  className="product-plan-card flex flex-col gap-4 rounded-2xl border border-border/80 bg-surface p-6 hover:border-border-hover hover:bg-elevated transition-colors duration-300"
                >
                  <div className="p-2.5 rounded-xl bg-accent/10 border border-accent-hover/20 w-fit">
                    <Icon className="w-4 h-4 text-accent-text" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-content mb-1.5">{f.title}</p>
                    <p className="text-sm text-content-dim leading-relaxed">{f.desc}</p>
                  </div>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="relative z-10 w-full py-20 md:py-28 px-6 lg:px-12 border-t border-border/80">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
            className="mb-12 flex flex-col sm:flex-row sm:items-end justify-between gap-6"
          >
            <div>
              <div className="flex items-center gap-3 mb-5">
                <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">App Installer</p>
              </div>
              <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
                300+ apps, <span className="text-accent-text">one click away.</span>
              </h2>
              <p className="text-content-dim text-[1rem] mt-4 max-w-md leading-relaxed">
                From WordPress blogs to full Laravel applications — installed, configured, and ready in under 60 seconds.
              </p>
            </div>
          </motion.div>

          <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
            {apps.map((app, i) => (
              <motion.div
                key={app.slug}
                initial={{ opacity: 0, y: 16 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.05 }}
                className="flex flex-col items-center gap-3 p-4 rounded-2xl border border-border/80 bg-surface hover:border-border-hover hover:bg-elevated transition-colors duration-300"
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src={`https://cdn.simpleicons.org/${app.slug}/71717a`}
                  alt={app.name}
                  width={28}
                  height={28}
                  className="object-contain tech-icon-filter"
                />
                <span className="text-[11px] font-medium text-content-muted text-center leading-snug">{app.name}</span>
              </motion.div>
            ))}
            <motion.div
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: apps.length * 0.05 }}
              className="flex flex-col items-center justify-center gap-2 p-4 rounded-2xl border border-border/80 bg-surface col-span-1"
            >
              <span className="text-2xl font-bold text-accent-text">+288</span>
              <span className="text-[11px] font-medium text-content-muted text-center leading-snug">more apps</span>
            </motion.div>
          </div>
        </div>
      </section>

      <section className="relative z-10 w-full py-20 md:py-28 px-6 lg:px-12 border-t border-border/80">
        <div className="max-w-7xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
            className="mb-12"
          >
            <div className="flex items-center gap-3 mb-5">
              <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">Performance</p>
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
              Built for <span className="text-accent-text">speed.</span>
            </h2>
            <p className="text-content-dim text-[1rem] mt-4 max-w-lg leading-relaxed">
              LiteSpeed handles the same traffic as Apache on a fraction of the resources — your site stays fast under pressure.
            </p>
          </motion.div>

          {[
            { label: "Sonata (LiteSpeed)", rps: 12800, color: "bg-accent", highlight: true },
            { label: "Apache",             rps: 3200,  color: "bg-zinc-600", highlight: false },
            { label: "Nginx",              rps: 6400,  color: "bg-zinc-600", highlight: false },
          ].map((row, i) => (
            <motion.div
              key={row.label}
              initial={{ opacity: 0, x: -16 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="flex items-center gap-4 mb-4"
            >
              <span className={cn("text-sm font-medium w-44 shrink-0", row.highlight ? "text-content" : "text-content-muted")}>
                {row.label}
              </span>
              <div className="flex-1 h-8 rounded-lg bg-elevated overflow-hidden border border-border/60">
                <motion.div
                  initial={{ width: 0 }}
                  whileInView={{ width: `${(row.rps / 12800) * 100}%` }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.9, delay: 0.2 + i * 0.1, ease: "easeOut" }}
                  className={cn("h-full rounded-lg flex items-center px-3", row.color)}
                >
                  {row.highlight && (
                    <span className="text-xs font-bold text-white whitespace-nowrap">{row.rps.toLocaleString()} req/s</span>
                  )}
                </motion.div>
              </div>
              {!row.highlight && (
                <span className="text-xs text-content-muted w-24 shrink-0">{row.rps.toLocaleString()} req/s</span>
              )}
            </motion.div>
          ))}

          <p className="text-xs text-content-faint mt-4">Benchmarked with wrk on equivalent hardware. Results may vary by workload.</p>
        </div>
      </section>

      <section className="relative z-10 w-full py-20 md:py-28 px-6 lg:px-12 border-t border-border/80">
        <div className="max-w-3xl mx-auto">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
            className="mb-10"
          >
            <div className="flex items-center gap-3 mb-5">
              <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">FAQ</p>
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
              Common <span className="text-accent-text">questions.</span>
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="rounded-2xl border border-border/80 bg-surface px-6 divide-y divide-border/60"
          >
            {faqs.map((f) => (
              <FaqItem key={f.q} q={f.q} a={f.a} />
            ))}
          </motion.div>
        </div>
      </section>

      <section className="relative z-10 w-full py-24 px-6 lg:px-12 border-t border-border/80 overflow-hidden">
        <div className="max-w-3xl mx-auto text-center relative z-10">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.55 }}
          >
            <div className="flex items-center justify-center gap-2 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">Get Started</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-content mb-5 tracking-tight leading-[1.1]">
              Launch your site <br />
              <span className="text-accent-text">today.</span>
            </h2>
            <p className="text-content-dim text-[1rem] mb-10 max-w-md mx-auto leading-relaxed">
              Pick a plan, deploy in minutes, and get your site in front of the world.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
              <a
                href={siteConfig.billing.url}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-hover text-white font-semibold text-sm 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 transition-all duration-150 w-full sm:w-auto justify-center"
              >
                <Zap className="w-4 h-4" />
                Start Hosting
              </a>
              <Link
                href="/support"
                className="flex items-center gap-2 px-8 py-3.5 rounded-xl border border-border bg-surface text-content-dim font-semibold text-sm hover:border-border-hover hover:bg-elevated hover:text-content transition-all duration-200 w-full sm:w-auto justify-center hover:-translate-y-0.5 active:translate-y-1 active:shadow-none"
              >
                Talk to Sales
              </Link>
            </div>
            <div className="flex items-center justify-center flex-wrap gap-x-6 gap-y-2 mt-10">
              {["Free SSL Included", "No Setup Fees", "Cancel Anytime", "30-Day Money Back"].map((item) => (
                <div key={item} className="flex items-center gap-1.5 text-xs text-content-subtle">
                  <Check className="w-3 h-3 text-emerald-500 shrink-0" />
                  {item}
                </div>
              ))}
            </div>
          </motion.div>
        </div>
      </section>
    </main>
  );
}