import { Send, Bitcoin } from "lucide-react";
import { Button } from "@/components/ui/Button";

interface FinalCTASectionProps {
  telegramLink?: string;
}

export function FinalCTASection({ telegramLink }: FinalCTASectionProps) {
  return (
    <section className="py-32 px-8 bg-surface-container-low relative overflow-hidden">
      <div className="max-w-4xl mx-auto text-center relative z-10">
        <h2 className="text-5xl font-black mb-8">
          Join us
        </h2>
        <p className="text-on-surface-variant text-xl mb-12">
          The best time to learn was 10 years ago. The second best time is
          today. Join the community.
        </p>

        <div className="flex flex-col md:flex-row items-center justify-center gap-6">
          <a
            href={telegramLink || "#community"}
            target={telegramLink ? "_blank" : undefined}
            rel={telegramLink ? "noopener noreferrer" : undefined}
          >
            <Button variant="telegram" size="lg" className="w-full md:w-auto flex items-center justify-center gap-2">
              <Send size={18} /> Join Telegram
            </Button>
          </a>
          <a href="/events">
            <Button variant="primary" size="lg" className="w-full md:w-auto">
              Attend Meetup
            </Button>
          </a>
        </div>
      </div>

      <Bitcoin
        size={400}
        className="absolute -bottom-20 -right-20 opacity-5 text-on-surface"
      />
    </section>
  );
}