import Link from "next/link";
import { SectionTitle } from "@/components/section-title";

export default function HomePage() {
  return (
    <div className="space-y-20 lg:space-y-28">
      <section className="glass-panel relative overflow-hidden rounded-3xl px-6 py-16 lg:grid lg:grid-cols-[1.1fr_1fr] lg:items-center lg:gap-16 lg:p-14">
        <div className="pointer-events-none absolute -right-20 -top-16 h-64 w-64 rounded-full bg-cyan-neon/20 blur-3xl" />
        <div className="pointer-events-none absolute -bottom-28 -left-12 h-72 w-72 rounded-full bg-purple-neon/10 blur-[100px]" />
        <div className="relative space-y-6">
          <p className="text-xs uppercase tracking-[0.35em] text-cyan-neon">
            Store digital terpercaya — ID
          </p>
          <h1 className="glow-text text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-[3.35rem]">
            Premium Apps &amp; Joki Game Service
          </h1>
          <p className="max-w-xl text-lg leading-relaxed text-muted">
            Solusi cepat untuk app premium dan jasa joki game dengan proses
            aman, rapi, dan terpercaya.
          </p>
          <div className="flex flex-wrap gap-3">
            <Link href="/ress-app" className="btn-primary px-6 py-3 text-[15px]">
              Jelajahi App Premium
            </Link>
            <Link href="/joki" className="btn-ghost px-6 py-3 text-[15px]">
              Paket Joki Game
            </Link>
          </div>
          <dl className="grid max-w-xl grid-cols-3 gap-4 pt-4 text-[13px] text-muted">
            <div className="glass-panel rounded-xl p-4">
              <dt className="text-zinc-500">Proses order</dt>
              <dd className="font-semibold text-white">Realtime WA</dd>
            </div>
            <div className="glass-panel rounded-xl p-4">
              <dt className="text-zinc-500">Point</dt>
              <dd className="font-semibold text-cyan-neon">Reward joki</dd>
            </div>
            <div className="glass-panel rounded-xl p-4">
              <dt className="text-zinc-500">Support</dt>
              <dd className="font-semibold text-purple-neon">Aftersales</dd>
            </div>
          </dl>
        </div>
        <div className="relative mt-14 grid gap-6 lg:mt-0">
          <FeaturedCard
            title="Ress App Premium"
            desc="Streaming, produktivitas, VPN, dan tools profesional dalam satu storefront."
            href="/ress-app"
            accent="from-cyan-neon/75 to-purple-neon"
          />
          <FeaturedCard
            title="Joki Game"
            desc="Akun dijamin aman dengan estimasi clear & sistem point ketika clear."
            href="/joki"
            accent="from-purple-neon/80 to-purple-deep"
          />
        </div>
      </section>

      <section className="space-y-10">
        <SectionTitle
          eyebrow="Alur"
          title="Proses cepat untuk pembeli & tim"
          subtitle="Lacak pesanan dari dasbor member lengkap riwayat dan sistem voucher."
        />
        <div className="grid gap-6 md:grid-cols-3">
          {[
            ["1", "Pilih", "Pilih paket atau app — lihat detail harga dan stok."],
            ["2", "Konsultasi", "Order lewat WhatsApp (pesan otomatis) + bisa login member."],
            ["3", "Selesai", "Setelah lanjut, admin memperbarui status & kamu dapat poin (joki)."],
          ].map(([k, title, body]) => (
            <article
              key={k}
              className="glass-panel rounded-2xl p-7 transition hover:border-cyan-neon/30"
            >
              <p className="text-sm font-semibold uppercase tracking-widest text-purple-neon">
                {title}
              </p>
              <p className="mt-4 text-muted">{body}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="overflow-hidden rounded-3xl border border-cyan-neon/15 bg-gradient-to-br from-surface-2 via-surface to-surface-2 px-6 py-14 text-center">
        <h2 className="text-2xl font-semibold text-white sm:text-3xl">
          Siap tingkatkan cara kerja digital kamu?
        </h2>
        <p className="mx-auto mt-4 max-w-2xl text-muted">
          Masuk sebagai member untuk melacak order, menukarkan point, dan
          mengirim testimoni setelah transaksi selesai.
        </p>
        <div className="mt-8 flex flex-wrap justify-center gap-4">
          <Link href="/login" className="btn-primary px-8 py-3">
            Masuk / Daftar
          </Link>
          <Link href="/kontak" className="btn-ghost px-8 py-3">
            Hubungi kami
          </Link>
        </div>
      </section>
    </div>
  );
}

function FeaturedCard({
  title,
  desc,
  href,
  accent,
}: {
  title: string;
  desc: string;
  href: string;
  accent: string;
}) {
  return (
    <Link
      href={href}
      className="group glass-panel relative block overflow-hidden rounded-2xl p-8 transition hover:border-cyan-neon/40"
    >
      <div
        className={`pointer-events-none absolute inset-0 bg-gradient-to-br opacity-10 ${accent}`}
      />
      <div className="relative space-y-3">
        <h3 className="text-2xl font-semibold text-white group-hover:text-cyan-neon">
          {title}
        </h3>
        <p className="text-[15px] leading-relaxed text-muted">{desc}</p>
        <span className="inline-flex items-center gap-2 text-sm font-semibold text-cyan-neon">
          Selengkapnya
          <span aria-hidden>→</span>
        </span>
      </div>
    </Link>
  );
}