"use client" ;
import Link from 'next/link';
import React, { useEffect } from "react";
import "aos/dist/aos.css";
import Image from 'next/image';

export default function Location() {
  useEffect(() => {
    import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
      duration: 1000, // Animation duration in ms
      offset: 100, // Offset from original trigger point
      easing: "ease-in-out",
      once: false, // Animation runs only once
    });
        });
  }, []);
  return (
    <div className="my-20 px-4">
  <div className="max-w-[1200px] mx-auto">
    <div className="grid gap-10 grid-cols-1 sm:grid-cols-2">
      {[
        {
          country: "India",
          flag: "/images/india_flag.svg",
          address: "709 Satyamev Elite , Vakil Saheb Brige ,Sardar Patel Ring Rd, South Bopal, Ahmedabad, Gujarat 380058",
          addresslink: "https://maps.app.goo.gl/S9sq7FfUshC3qYQj6",
          phone: "+91 98984 12890",
          call: "tel:+919898412890",
          email: "karshan.zala@fruxinfo.com",
          emaillink: "mailto:karshan.zala@fruxinfo.com"
        },
        {
          country: "USA",
          flag: "/images/usa_flag.svg",
          address: "351, High Street, Middlesex, New Jersey - 08846.",
          addresslink: "https://maps.app.goo.gl/S9sq7FfUshC3qYQj6",
          phone: "+1(732) 289-2009",
          call: "tel:+17322892009",
          email: null,
        },
      ].map((item, index) => (
        <div key={index} data-aos="zoom-in" className="p-5 border_hover bg-white rounded-lg shadow-md">
          <div className="flex items-center gap-3">
            <Image src={item.flag} alt={`${item.country} flag`} width={100} height={50} className="w-8 h-8" />
            <h3 className="text-[#E77025] text-2xl font-bold">{item.country}</h3>
          </div>

          <div className="flex items-start gap-3 my-4">
            <Image src="/images/location_icon.svg" alt="Location Icon" width={100} height={50} className="w-6 h-6" />
            <Link href={item.addresslink} target='_blank' className="text-[#9E9E9E] text-sm md:text-base z-10">{item.address}</Link>
          </div>

          <div className="flex items-center gap-3 my-4">
            <Image src="/images/call_icon.svg" alt="Phone Icon" width={100} height={50} className="w-6 h-6" />
            <Link href={item.call} className="text-[#9E9E9E] text-sm md:text-base z-10">{item.phone}</Link>
          </div>

          {item.email && (
            <div className="flex items-center gap-3 my-4">
              <Image src="/images/email_icon.svg" alt="Email Icon" width={50} height={50} className="w-6 h-6" />
              <Link href={item.emaillink} className="text-[#9E9E9E] text-sm md:text-base z-10">{item.email}</Link>
            </div>
          )}
        </div>
      ))}
    </div>
  </div>
</div>


    // <div className='my-20'>
    //     <div className="w-[1200px] mx-auto">
    //         <div className='grid gap-10 sm:grid-cols-12'>
    //             <div className='location-card sm:col-span-6'>
    //                 <div className='flex gap-3'>
    //                     <Image src="/images/india_flag.svg" alt="" />
    //                     <h3 className='location-title Manrope'>India</h3>
    //                 </div>
    //                 <div className='location-item'>
    //                     <Image src="/images/location_icon.svg" alt="" />
    //                     <p>709 Satyamev Elite , Vakil Saheb Brige ,Sardar Patel Ring Rd, South Bopal, Ahmedabad, Gujarat 380058</p>
    //                 </div>
    //                 <div className='location-item'>
    //                     <Image src="/images/call_icon.svg" alt="" />
    //                     <p>+91 9924 512 890</p>
    //                 </div>
    //                 <div className='location-item'>
    //                     <Image src="/images/email_icon.svg" alt="" />
    //                     <p>karshan.zala@fruxinfo.com</p>
    //                 </div>
    //             </div>
    //             <div className='location-card sm:col-span-6'>
    //                 <div className='flex gap-3 '>
    //                     <Image src="/images/usa_flag.svg" alt="" />
    //                     <h3 className='location-title Manrope'>USA</h3>
    //                 </div>
    //                 <div className='location-item'>
    //                     <Image src="/images/location_icon.svg" alt="" />
    //                     <p>351, High Street, Middlesex, New Jersey - 08846.</p>
    //                 </div>
    //                 <div className='location-item'>
    //                     <Image src="/images/call_icon.svg" alt="" />
    //                     <p>+1(732) 289-2009</p>
    //                 </div>
    //             </div>
    //         </div>
    //     </div>
    // </div>
  )
}
