"use client";

import { motion } from "framer-motion";
import { Send, Users } from "lucide-react";
import { Button } from "@/components/ui/button";
import { siteConfig } from "@/lib/site-config";

export function TelegramBanner() {
  return (
    <motion.section
      initial={{ opacity: 0, y: 30 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      className="relative overflow-hidden rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/20 via-card to-card p-8 sm:p-12 glow-gold"
    >
      <div className="absolute -right-10 -top-10 size-40 rounded-full bg-primary/10 blur-3xl" />
      <div className="relative z-10 flex flex-col items-start gap-6 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <div className="mb-2 flex items-center gap-2 text-primary">
            <Users className="size-5" />
            <span className="text-sm font-medium">夜遊老司機社群</span>
          </div>
          <h3 className="text-2xl font-bold sm:text-3xl">
            加入 Telegram，獲取最新場地情報
          </h3>
          <p className="mt-2 max-w-xl text-muted-foreground">
            與數百位華語夜遊愛好者交流心得、即時分享安全提醒與隱藏好去處。老司機在線答疑，讓你的每一趟夜遊都更從容。
          </p>
        </div>
        <Button
          render={
            <a
              href={siteConfig.telegramUrl}
              target="_blank"
              rel="noopener noreferrer"
            />
          }
          nativeButton={false}
          size="lg"
          className="shrink-0 bg-primary text-primary-foreground hover:bg-primary/90"
        >
          <Send className="size-5" />
          加入 Telegram 社群
        </Button>
      </div>
    </motion.section>
  );
}