import CopyButton from "@/components/copy-button";
import { siteConfig } from "@/lib/site";

const quickStats = [
  {
    title: "Competitive UHC",
    detail: "UHC 1.8.X, PvP focus",
  },
  {
    title: "Events weekly",
    detail: "Tournaments and rush",
  },
  {
    title: "Premium rewards",
    detail: "Grades, cosmetics, perks",
  },
];

export default function Hero() {
  return (
    <section className="relative overflow-hidden pb-20 pt-16 md:pb-28">
      <div className="absolute inset-0 bg-[url('/hero.svg')] bg-cover bg-center opacity-80" />
      <div className="absolute inset-0 bg-linear-to-b from-slate-950/30 via-slate-950/70 to-slate-950" />
      <div className="absolute left-1/2 top-16 h-64 w-130 -translate-x-1/2 rounded-full bg-violet-600/20 blur-[120px]" />
      <div className="relative mx-auto flex w-full max-w-6xl flex-col gap-10 px-6 md:flex-row md:items-center">
        <div className="max-w-xl space-y-6">
          <div className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-[10px] uppercase tracking-[0.4em] text-cyan-200/80">
            BinouzUHC - Minecraft 1.8.X
          </div>
          <h1 className="text-4xl font-semibold text-white md:text-6xl">
            Immerse yourself in elite UHC PvP.
          </h1>
          <p className="text-base text-slate-300">
            {siteConfig.description}
          </p>
          <div className="flex flex-wrap items-center gap-4">
            <CopyButton value={siteConfig.serverAddress} label="Copy" />
            <a
              href="#grades"
              className="inline-flex items-center justify-center rounded-full border border-white/15 bg-white/10 px-5 py-2 text-xs font-semibold uppercase tracking-[0.3em] text-white transition hover:bg-white/20"
            >
              Voir les grades
            </a>
          </div>
          <div className="flex flex-wrap gap-6 text-xs uppercase tracking-[0.3em] text-slate-400">
            <span>{siteConfig.serverAddress}</span>
            <span>1.8.X</span>
            <span>Discord ready</span>
          </div>
        </div>
        <div className="grid w-full gap-4 md:max-w-md">
          {quickStats.map((item) => (
            <div
              key={item.title}
              className="rounded-2xl border border-white/10 bg-white/5 p-6 text-sm text-slate-200 backdrop-blur"
            >
              <p className="text-xs uppercase tracking-[0.3em] text-cyan-200/80">
                {item.title}
              </p>
              <p className="mt-3 text-base text-white">{item.detail}</p>
            </div>
          ))}
          <div className="rounded-2xl border border-white/10 bg-linear-to-br from-violet-600/30 via-indigo-500/20 to-cyan-400/20 p-6 text-sm text-slate-200 backdrop-blur">
            <p className="text-xs uppercase tracking-[0.3em] text-cyan-200/80">
              Drop in
            </p>
            <p className="mt-3 text-base text-white">
              Ranked, balanced, and tuned for competitive squads.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}