import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import SiteLayout from '@/components/SiteLayout';

const NotFound = () => {
  return (
    <SiteLayout>
      <section className="min-h-[70vh] flex items-center justify-center px-6">
        <div className="text-center max-w-xl">
          <div className="text-[120px] font-black leading-none text-[#0b6e3e]">404</div>
          <h1 className="mt-4 text-3xl font-bold text-slate-900">Page not found</h1>
          <p className="mt-3 text-slate-600">
            The page you're looking for doesn't exist or has been moved. Let's get you back on track.
          </p>
          <div className="mt-8 flex items-center justify-center gap-3">
            <Link to="/">
              <Button className="bg-[#0b6e3e] hover:bg-[#063019] text-white">Back to Home</Button>
            </Link>
            <Link to="/contact">
              <Button variant="outline" className="!bg-transparent !hover:bg-transparent border-slate-300">
                Contact Support
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </SiteLayout>
  );
};

export default NotFound;