import Link from "next/link";
import { UserCheck, Zap, ArrowRight } from "lucide-react";

export default function MulaiPage() {
  return (
    <div className="min-h-screen bg-background text-ink">
      <header className="border-b border-border px-4 py-4 sm:px-6">
        <div className="mx-auto flex max-w-3xl items-center justify-between">
          <Link href="/" className="text-sm font-semibold text-ink">
            Mindfulness Indonesia
          </Link>
          <Link href="/login" className="text-sm text-ink-soft hover:text-ink">
            Sudah punya akun? Masuk
          </Link>
        </div>
      </header>

      <main className="mx-auto max-w-3xl px-4 py-12 sm:px-6">
        <div className="text-center">
          <h1 className="text-2xl font-bold text-ink sm:text-3xl">Mulai dari Mana?</h1>
          <p className="mt-2 text-ink-soft">Pilih jalur yang paling sesuai dengan kebutuhanmu.</p>
        </div>

        <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2">
          <Link
            href="/mulai/quick-test"
            className="group rounded-2xl border border-border bg-surface p-6 transition hover:border-primary hover:shadow-md"
          >
            <div className="inline-flex rounded-full bg-primary-soft/30 p-3 text-primary">
              <Zap className="h-6 w-6" />
            </div>
            <h2 className="mt-4 text-lg font-bold text-ink">Non-Member — Quick Test</h2>
            <p className="mt-2 text-sm text-ink-soft">
              Belum jadi member? Coba Peace Check 3 menit dulu — tanpa perlu akun, hasil langsung
              keluar.
            </p>
            <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-primary">
              Mulai Quick Test <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
            </span>
          </Link>

          <Link
            href="/mulai/member"
            className="group rounded-2xl border border-border bg-surface p-6 transition hover:border-primary hover:shadow-md"
          >
            <div className="inline-flex rounded-full bg-accent-soft/30 p-3 text-accent">
              <UserCheck className="h-6 w-6" />
            </div>
            <h2 className="mt-4 text-lg font-bold text-ink">Jadi Member</h2>
            <p className="mt-2 text-sm text-ink-soft">
              Akses penuh — assessment lengkap, konseling, learning, dan program EAP perusahaan.
            </p>
            <span className="mt-4 inline-flex items-center gap-1 text-sm font-medium text-accent">
              Ajukan Keanggotaan <ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" />
            </span>
          </Link>
        </div>
      </main>
    </div>
  );
}