"use client";

import { useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import {
  Search, X, Globe, ShieldCheck, RefreshCw,
  Lock, Mail, ArrowRight, Check, Zap, ChevronDown,
} from "lucide-react";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { domainTlds as tlds } 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 DomainSearchResult = (typeof tlds)[number] & {
  domain: string;
  available: boolean | null;
  reason?: string;
};

const features = [
  {
    icon: Globe,
    title: "Free DNS Management",
    desc: "Unlimited A, AAAA, CNAME, MX, TXT, and SRV records. Changes propagate globally in under 60 seconds.",
  },
  {
    icon: ShieldCheck,
    title: "WHOIS Privacy Protection",
    desc: "Your name, address, and contact info stay private. Included at no extra cost on every domain.",
  },
  {
    icon: RefreshCw,
    title: "Auto-Renewal",
    desc: "Never accidentally lose a domain you own. Auto-renewal kicks in before expiry with advance email alerts.",
  },
  {
    icon: Lock,
    title: "Domain Lock",
    desc: "Transfer locks prevent unauthorized outbound transfers. Toggle on/off from your control panel instantly.",
  },
  {
    icon: Mail,
    title: "Email Forwarding",
    desc: "Create unlimited @yourdomain.com addresses and forward them to any inbox. Free, no email hosting needed.",
  },
  {
    icon: Zap,
    title: "Instant Activation",
    desc: "Domain is active and in your account the moment payment clears. No manual review, no waiting.",
  },
];

const steps = [
  { n: "01", title: "Search",   desc: "Enter the domain you want. We'll check availability across all major TLDs in real time." },
  { n: "02", title: "Order",    desc: "Choose your registration period (1–10 years), add privacy protection, and check out in seconds." },
  { n: "03", title: "Configure", desc: "Point your domain to your Sonata server or any IP address via the DNS manager. Done." },
];

const faqs = [
  {
    q: "How long does it take for a domain to go live?",
    a: "Your domain is added to your account immediately after payment. DNS propagation across the internet typically completes within 15–60 minutes, though some regions may take up to 24 hours.",
  },
  {
    q: "Can I transfer a domain I already own?",
    a: "Yes. Initiate a transfer by unlocking your domain at your current registrar, getting the EPP/auth code, and entering it on our transfer page. The process takes 5–7 days as required by ICANN.",
  },
  {
    q: "Is WHOIS privacy free?",
    a: "Yes!  WHOIS privacy is included at no extra charge on all eligible TLDs. Some country-code TLDs (.id, .co.id) handle privacy differently due to local registry rules.",
  },
  {
    q: "What happens if I forget to renew?",
    a: "Domains enter a grace period (up to 30 days) where you can renew at the standard price. After that they enter redemption (extra fee) then are released publicly. Auto-renewal prevents all of this.",
  },
  {
    q: "Can I use my domain with another host?",
    a: "Absolutely. We just manage the domain registration, you can point DNS records anywhere you like. No lock-in.",
  },
  {
    q: "Do you support .id and Indonesian ccTLDs?",
    a: "Yes. We're an accredited .id registrar. This includes .id, .co.id, .web.id, .my.id, .sch.id, and .ac.id. Local requirements (KTP/NPWP for some registrations) may apply.",
  },
];

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 BG_PILLS = [
  { text: ".com",   x: "4%",  y: "20%", delay: 0,   dur: 7,   op: 0.30 },
  { text: ".net",   x: "5%",  y: "52%", delay: 1.5, dur: 8.5, op: 0.22 },
  { text: ".id",    x: "4%",  y: "80%", delay: 2.8, dur: 6.5, op: 0.18 },
  { text: ".gg",    x: "18%", y: "12%", delay: 0.8, dur: 8,   op: 0.18 },
  { text: ".dev",   x: "19%", y: "40%", delay: 2.0, dur: 7,   op: 0.14 },
  { text: ".tech",  x: "18%", y: "66%", delay: 1.2, dur: 9,   op: 0.11 },
  { text: ".ai",    x: "17%", y: "88%", delay: 3.2, dur: 6.5, op: 0.09 },
  { text: ".xyz",   x: "76%", y: "8%",  delay: 1.0, dur: 8,   op: 0.16 },
  { text: ".co",    x: "76%", y: "36%", delay: 2.4, dur: 7.5, op: 0.13 },
  { text: ".pro",   x: "75%", y: "62%", delay: 0.5, dur: 9,   op: 0.10 },
  { text: ".cloud", x: "74%", y: "86%", delay: 1.8, dur: 6.5, op: 0.08 },
  { text: ".io",    x: "89%", y: "18%", delay: 0.3, dur: 7,   op: 0.28 },
  { text: ".app",   x: "90%", y: "44%", delay: 1.7, dur: 8,   op: 0.20 },
  { text: ".me",    x: "89%", y: "70%", delay: 2.6, dur: 6,   op: 0.16 },
];

function DomainHeroBg() {
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {BG_PILLS.map((p, i) => (
        <div
          key={i}
          className="absolute text-[24px] font-bold text-accent whitespace-nowrap"
          style={{ left: p.x, top: p.y, opacity: p.op }}
        >
          {p.text}
        </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-8 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 DomainPage() {
  const [query, setQuery]         = useState("");
  const [searched, setSearched]   = useState("");
  const [isSearching, setIsSearching] = useState(false);
  const [searchError, setSearchError] = useState("");
  const [searchResults, setSearchResults] = useState<DomainSearchResult[]>([]);

  const handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    const trimmed = query.trim().replace(/^https?:\/\//i, "").replace(/^www\./i, "").replace(/\/$/, "");
    if (!trimmed) return;

    const baseName = trimmed.includes(".") ? trimmed.split(".")[0] : trimmed;

    setIsSearching(true);
    setSearched("");
    setSearchError("");
    setSearchResults([]);

    try {
      const params = new URLSearchParams({
        name: baseName,
        tlds: tlds.map((t) => t.ext.replace(".", "")).join(","),
      });
      const res = await fetch(`/api/domain-check?${params.toString()}`);
      const data = await res.json();

      if (!res.ok) {
        throw new Error(data.error ?? "Domain check failed.");
      }

      const resultsByExt = new Map<string, { domain: string; available: boolean | null; reason?: string }>(
        data.results.map((item: { ext: string; domain: string; available: boolean | null; reason?: string }) => [
          item.ext,
          item,
        ])
      );

      setSearched(trimmed);
      setSearchResults(
        tlds.map((t) => {
          const result = resultsByExt.get(t.ext);
          return {
            ...t,
            domain: result?.domain ?? `${baseName}${t.ext}`,
            available: result?.available ?? null,
            reason: result?.reason,
          };
        })
      );
    } catch (error) {
      setSearchError(error instanceof Error ? error.message : "Domain check failed.");
    } finally {
      setIsSearching(false);
    }
  };

  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">
        <DomainHeroBg />
        <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">Domain Registration</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 brand starts <br />
              <span className="text-accent-text">with a great domain.</span>
            </h1>
            <p className="text-content-dim text-[1rem] md:text-lg max-w-xl mx-auto leading-relaxed mb-10">
              Register, transfer, and manage domains from one dashboard. Free DNS management and WHOIS privacy on every order.
            </p>
          </motion.div>

          <motion.form
            initial={{ opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.55, delay: 0.15 }}
            onSubmit={handleSearch}
            className="flex gap-2 max-w-2xl mx-auto"
          >
            <div className="relative flex-1">
              <Search className="absolute left-4 inset-y-0 my-auto w-4 h-4 text-content-subtle pointer-events-none" />
              <input
                type="text"
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Find your perfect domain…"
                className="w-full bg-surface border border-border/80 rounded-xl py-3.5 pl-11 pr-10 text-content placeholder-content-subtle focus:outline-none focus:border-accent-hover/40 focus:ring-2 focus:ring-accent-hover/20 transition-all text-sm"
              />
              {query && (
                <button
                  type="button"
                  onClick={() => {
                    setQuery("");
                    setSearched("");
                    setSearchError("");
                    setSearchResults([]);
                  }}
                  className="absolute inset-y-0 right-3.5 flex items-center"
                >
                  <X className="w-4 h-4 text-content-muted hover:text-content transition-colors" />
                </button>
              )}
            </div>
            <button
              type="submit"
              disabled={isSearching}
              className="flex items-center gap-2 px-6 py-3.5 rounded-xl bg-accent hover:bg-accent-hover text-white text-sm font-semibold 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 disabled:opacity-60 shrink-0"
            >
              {isSearching ? (
                <RefreshCw className="w-4 h-4 animate-spin" />
              ) : (
                <>Search <ArrowRight className="w-3.5 h-3.5" /></>
              )}
            </button>
          </motion.form>

          <AnimatePresence>
            {searchError && (
              <motion.p
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -6 }}
                className="mt-4 text-sm text-red-300"
              >
                {searchError}
              </motion.p>
            )}
          </AnimatePresence>

          <AnimatePresence>
            {searched && searchResults.length > 0 && (
              <motion.div
                initial={{ opacity: 0, y: 12 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -8 }}
                transition={{ duration: 0.3 }}
                className="product-plan-card mt-4 max-w-2xl mx-auto bg-surface border border-border/80 rounded-2xl overflow-hidden divide-y divide-border/60"
              >
                {searchResults.map((r) => (
                  <div key={r.ext} className="flex items-center justify-between px-5 py-3.5 hover:bg-elevated transition-colors duration-150">
                    <div className="flex items-center gap-3">
                      <span className={cn(
                        "w-2 h-2 rounded-full shrink-0",
                        r.available === true ? "bg-emerald-500" : r.available === false ? "bg-content-subtle" : "bg-amber-500"
                      )} />
                      <span className="text-sm font-semibold text-content">{r.domain}</span>
                      {r.popular && r.available === true && (
                        <span className="text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-full bg-accent/15 text-accent-text border border-accent-hover/20">
                          Popular
                        </span>
                      )}
                    </div>
                    <div className="flex items-center gap-4">
                      <span className="text-sm text-content-dim">
                        {r.available === true ? `${r.register}/yr` : r.available === false ? "Unavailable" : "Unknown"}
                      </span>
                      {r.available === true ? (
                        <Link
                          href="/billing"
                          className="text-xs font-semibold px-3 py-1.5 rounded-lg bg-accent hover:bg-accent-hover text-white transition-colors shadow-[0_3px_0_rgba(0,0,0,0.35)] hover:-translate-y-px active:translate-y-0.5 active:shadow-none transition-all duration-150"
                        >
                          Add
                        </Link>
                      ) : (
                        <span className="text-xs font-semibold text-content-subtle px-3 py-1.5">—</span>
                      )}
                    </div>
                  </div>
                ))}
              </motion.div>
            )}
          </AnimatePresence>
        </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">Pricing</p>
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1] mb-3">
              Simple, transparent <span className="text-accent-text">pricing.</span>
            </h2>
            <p className="text-content-dim text-[1rem] max-w-lg leading-relaxed">
              All prices per year. WHOIS privacy and DNS management are always included at no extra cost.
            </p>
          </motion.div>

          <div className="product-plan-card rounded-2xl border border-border/80 bg-surface overflow-hidden">
            <div className="hidden md:grid grid-cols-4 px-6 py-3 bg-elevated border-b border-border/60">
              {["Extension", "Register", "Renew", "Transfer"].map((h) => (
                <span key={h} className="text-xs font-bold text-content-subtle uppercase tracking-widest">{h}</span>
              ))}
            </div>
            {tlds.map((t, i) => (
              <motion.div
                key={t.ext}
                initial={{ opacity: 0, x: -12 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.05 }}
                className="grid grid-cols-2 md:grid-cols-4 gap-y-1 px-6 py-4 border-b border-border/40 last:border-b-0 hover:bg-elevated/50 transition-colors duration-150"
              >
                <div className="flex items-center gap-2.5">
                  <span className="text-base font-bold text-content">{t.ext}</span>
                  {t.popular && (
                    <span className="text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-full bg-accent/10 text-accent-text border border-accent-hover/20 hidden sm:inline">
                      Popular
                    </span>
                  )}
                </div>
                <div className="text-right md:text-left">
                  <span className="text-sm text-content font-semibold">{t.register}</span>
                  <span className="text-xs text-content-subtle md:hidden"> reg</span>
                </div>
                <div className="hidden md:block">
                  <span className="text-sm text-content-dim">{t.renew}</span>
                </div>
                <div className="hidden md:block">
                  <span className="text-sm text-content-dim">{t.transfer}</span>
                </div>
              </motion.div>
            ))}
          </div>
          <p className="text-xs text-content-faint mt-4 text-center">All prices are in IDR and include applicable taxes. Renewal prices may differ from registration prices.</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]">
              More than just <span className="text-accent-text">a name.</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"
          >
            <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">How It Works</p>
            </div>
            <h2 className="text-4xl md:text-5xl font-semibold tracking-tight text-content leading-[1.1]">
              Three steps, <span className="text-accent-text">done.</span>
            </h2>
          </motion.div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {steps.map((s, i) => (
              <motion.div
                key={s.n}
                initial={{ opacity: 0, y: 24 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.45, delay: i * 0.1 }}
                className="product-plan-card relative flex flex-col gap-5 rounded-2xl border border-border/80 bg-surface p-7"
              >
                <span className="text-5xl font-bold text-content-faint/25 leading-none select-none">{s.n}</span>
                <div>
                  <p className="text-base font-semibold text-content mb-2">{s.title}</p>
                  <p className="text-sm text-content-dim leading-relaxed">{s.desc}</p>
                </div>
                {i < steps.length - 1 && (
                  <div className="hidden md:flex absolute -right-5 top-1/2 z-20 h-10 w-10 -translate-y-1/2 items-center justify-center rounded-xl border border-accent-hover/25 bg-surface text-accent-text shadow-[0_3px_0_rgba(0,0,0,0.22),0_14px_28px_rgba(147,51,234,0.14),inset_0_1px_0_var(--depth-highlight)]">
                    <ArrowRight className="w-5 h-5" />
                  </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-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>
            </div>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-content mb-5 tracking-tight leading-[1.1]">
              Claim your domain <br />
              <span className="text-accent-text">before it&apos;s gone.</span>
            </h2>
            <p className="text-content-dim text-[1rem] mb-10 max-w-md mx-auto leading-relaxed">
              Popular domains go fast. Search yours now and it only takes 30 seconds.
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
              <button
                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
                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"
              >
                <Search className="w-4 h-4" />
                Search Domains
              </button>
              <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 WHOIS Privacy", "Free DNS Management", "Auto-Renewal", "Instant Activation"].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>
  );
}