'use client';

import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog';
import Image from 'next/image';
import React from 'react';

const ComingSoonModal: React.FC = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button className="bg-black text-white px-6 py-2 rounded-md hover:bg-gray-800 transition">
          Show Coming Soon
        </button>
      </DialogTrigger>

      <DialogContent className="max-w-3xl p-0 overflow-hidden rounded-xl">
        {/* Fullscreen Image Container */}
        <div className="relative w-full h-[400px] md:h-[500px]">
          <Image
            src="/coming-soon-bg.jpg"
            alt="Coming Soon"
            fill
            className="object-cover"
          />

          {/* Overlay Text */}
          <div className="absolute inset-0 bg-black bg-opacity-60 flex flex-col justify-center items-center text-white px-6 text-center">
            <DialogHeader className="text-white">
              <DialogTitle className="text-3xl md:text-4xl font-bold mb-2">
                Coming Soon
              </DialogTitle>
              <p className="text-sm md:text-lg max-w-xl">

                We&apos;re working on something amazing. Stay tuned!
              </p>
                <p className="flex items-center gap-2 text-sm md:text-lg max-w-xl">
                📞 Contact: +971-56-451-8089
              </p>

              <p className="flex items-center gap-2 text-sm md:text-lg max-w-xl">
                📧 Email: apply@banksfinders.com
              </p>
            </DialogHeader>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ComingSoonModal;