import { MessageCircle, LifeBuoy } from "lucide-react";

export const CTA = () => {
  return (
    <section className="bg-slate-950 py-12 md:py-24">
      <div className="container max-w-screen-xl mx-auto px-4">
        <div className="bg-slate-900 rounded-md border border-gray-900">
          <div className="p-5 md:p-8">
            <div className="max-w-3xl mx-auto text-center space-y-6">
              {/* Badge */}
              <div className="inline-flex items-center px-4 py-2 bg-slate-950 rounded-md border border-gray-900">
                <span className="text-blue-500 text-sm font-semibold">
                  24/7 Support Available
                </span>
              </div>

              {/* Headings */}
              <div className="space-y-4">
                <h2 className="text-3xl md:text-4xl font-bold text-white">
                  Can't Find What You're Looking For?
                </h2>
                <p className="text-xl text-gray-300">
                  Our dedicated support team is here to help you with any
                  questions or concerns. Get in touch with us through Discord or
                  create a support ticket for immediate assistance.
                </p>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-col sm:flex-row gap-2 md:gap-4 justify-center pt-4">
                <a
                  href="https://discord.gg/yourserver"
                  className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-transparent"
                >
                  <MessageCircle className="w-5 h-5" />
                  Join Our Discord
                </a>
                <a
                  href="/support"
                  className="inline-flex items-center justify-center gap-2 bg-slate-950 text-white px-8 py-3 rounded-md font-medium transition-all duration-200 border border-gray-900"
                >
                  <LifeBuoy className="w-5 h-5 text-blue-500" />
                  Visit Support Center
                </a>
              </div>

              {/* Additional Info */}
              <div className="pt-3 text-gray-400">
                Average response time:
                <br />
                <span className="text-blue-500 font-semibold">
                  Under 1 Hour
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CTA;
