"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { Compass, Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { AgeNotice } from "@/components/shared/AgeNotice";
import { siteConfig } from "@/lib/site-config";

export type HeroBannerData = {
  title: string;
  subtitle: string;
  imageUrl: string;
  cta1Text: string | null;
  cta1Url: string | null;
  cta2Text: string | null;
  cta2Url: string | null;
};

const DEFAULT_HERO: HeroBannerData = {
  title: "亞洲夜生活步行指南",
  subtitle: "為華語旅客提供專業、深入、安全的夜生活探索體驗",
  imageUrl:
    "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=1920&q=80",
  cta1Text: "開始探索目的地",
  cta1Url: "/explore",
  cta2Text: "加入 Telegram 社群",
  cta2Url: siteConfig.telegramUrl,
};

function HeroCta({
  text,
  url,
  primary = false,
}: {
  text: string;
  url: string;
  primary?: boolean;
}) {
  const isExternal = url.startsWith("http");

  if (isExternal) {
    return (
      <Button
        render={
          <a href={url} target="_blank" rel="noopener noreferrer" />
        }
        nativeButton={false}
        size="lg"
        variant={primary ? "default" : "outline"}
        className={
          primary
            ? "bg-primary text-primary-foreground hover:bg-primary/90"
            : "border-white/30 bg-white/10 text-white backdrop-blur hover:bg-white/20"
        }
      >
        <Send className="size-5" />
        {text}
      </Button>
    );
  }

  return (
    <Button
      render={<Link href={url} />}
      nativeButton={false}
      size="lg"
      variant={primary ? "default" : "outline"}
      className={
        primary
          ? "bg-primary text-primary-foreground hover:bg-primary/90"
          : "border-white/30 bg-white/10 text-white backdrop-blur hover:bg-white/20"
      }
    >
      <Compass className="size-5" />
      {text}
    </Button>
  );
}

export function HeroSection({ banner }: { banner?: HeroBannerData | null }) {
  const data = banner ?? DEFAULT_HERO;

  return (
    <section className="relative flex min-h-[85vh] items-center justify-center overflow-hidden">
      <Image
        src={data.imageUrl}
        alt={data.title}
        fill
        priority
        className="object-cover"
        sizes="100vw"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-black/70 via-black/50 to-background" />
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(197,164,110,0.08),transparent_70%)]" />

      <div className="relative z-10 mx-auto max-w-4xl px-4 py-20 text-center">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <div className="mb-6 flex justify-center">
            <AgeNotice compact />
          </div>
          <h1 className="text-4xl font-bold leading-tight tracking-tight sm:text-5xl lg:text-6xl">
            <span className="text-gradient-gold">NightWalkAsia</span>
            <br />
            <span className="mt-2 block text-2xl font-medium text-white/90 sm:text-3xl lg:text-4xl">
              {data.title}
            </span>
          </h1>
          <p className="mx-auto mt-6 max-w-2xl text-lg text-white/70 sm:text-xl">
            {data.subtitle}
          </p>
          {(data.cta1Text || data.cta2Text) && (
            <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
              {data.cta1Text && data.cta1Url && (
                <HeroCta text={data.cta1Text} url={data.cta1Url} primary />
              )}
              {data.cta2Text && data.cta2Url && (
                <HeroCta text={data.cta2Text} url={data.cta2Url} />
              )}
            </div>
          )}
        </motion.div>
      </div>
    </section>
  );
}