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

export function AiBanner() {
  return (
    <section className="relative overflow-hidden py-16 lg:py-24">
      <div className="bagua-decor absolute inset-0 opacity-50" aria-hidden="true" />
      <div className="max-w-container relative mx-auto px-4 lg:px-6">
        <div className="border-gold-glow from-bg-elevated to-bg-overlay relative overflow-hidden rounded-3xl bg-gradient-to-br p-8 lg:p-16">
          <div className="border-brand-gold/10 absolute -top-20 -right-20 hidden h-80 w-80 rounded-full border lg:block" />
          <div className="border-brand-gold/15 absolute -top-12 -right-12 hidden h-64 w-64 rounded-full border lg:block" />

          <div className="relative max-w-3xl">
            <div className="bg-brand-red/15 border-brand-red/30 mb-5 inline-flex items-center gap-2 rounded-full border px-3 py-1">
              <Sparkles className="text-brand-gold h-3.5 w-3.5" aria-hidden="true" />
              <span className="text-brand-cream text-xs tracking-[0.18em] uppercase">
                &ldquo;Thầy&rdquo; Luận Giải
              </span>
            </div>

            <h2 className="font-display mb-5 text-3xl leading-[1.1] font-semibold lg:text-5xl">
              Hỏi <span className="text-gold-sheen inline-block pb-1 italic">vận mệnh</span> của
              bạn,
              <br />
              &ldquo;Thầy&rdquo; sẽ trả lời bằng tiếng mẹ đẻ.
            </h2>

            <p className="text-ink-secondary mb-8 max-w-[58ch] text-base lg:text-lg">
              &ldquo;Năm 2026 sự nghiệp tôi ra sao?&rdquo; &ldquo;Tuổi này có nên đầu tư bất động
              sản?&rdquo; — Đặt câu hỏi tự nhiên, AI đọc lá số của bạn rồi luận giải dựa trên cung
              và sao.
            </p>

            <div className="flex flex-wrap gap-3">
              <Link
                href="/van-menh"
                className="bg-brand-gold text-bg-base inline-flex items-center gap-2 rounded-md px-6 py-3.5 font-semibold hover:brightness-105 active:translate-y-px"
              >
                Bắt đầu hỏi &ldquo;Thầy&rdquo;
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <Link
                href="/van-menh#vi-du"
                className="border-stroke-default text-ink-primary hover:border-brand-gold/50 hover:text-brand-gold inline-flex items-center gap-2 rounded-md border px-6 py-3.5"
              >
                Xem ví dụ luận giải
              </Link>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}