import { Button } from '@/components/ui/button';
import { ArrowUpLeft } from 'lucide-react';
import Link from 'next/link';

export function MapSection() {
  return (
    <section className="relative w-full h-[412px]  overflow-hidden  lg:px-20 md:px-10 px-5  mb-10 mt-10">

      <div
        className="absolute inset-0 bg-cover opacity-20  bg-center"
        style={{
          backgroundImage: `url('/main-page/map.png')`,
        }}
      />
      {/* <div className="absolute inset-0 bg-[#052531] opacity-10" /> */}
      <div
        className="absolute inset-0"
        style={{
          backgroundColor: 'rgba(5, 37, 49, 0.1)',
        }}
      />

      <div className="absolute inset-0 flex flex-col items-center justify-center text-center text-[#052531]] px-4">
        <h2 className="text-3xl md:text-4xl font-bold mb-4">العروض على الخريطة</h2>
        <p className="text-[#45556C] text-base font-normal mb-8">

          استكشف جميع العروض العقارية مباشرة على الخريطة، وحدد المواقع بسهولة، واعرف أقرب <br />الخدمات والمناطق المحيطة. نوفر لك طريقة سريعة وواضحة لاختيار العقار الأنسب بناءً على الموقع <br />الجغرافي بدقة وشفافية.
        </p>
        <Button
          asChild
          className="
bg-[#052531]  
    text-white 
    transition-all
    duration-300
    group
    w-full
    max-w-[632px]
    h-[44px]       
    rounded-full
    px-8
    text-sm
    md:text-base
    font-semibold
    flex
    items-center
    justify-center
    gap-3
  "
        >
          <Link href="/search-map">
            اكتشف العقارات على الخريطة
            <ArrowUpLeft className="mr-2 h-5 w-5" />
          </Link>
        </Button>
      </div>


    </section>



  );
}