"use client"

import React from "react"

import Map from "@/components/kinetic/Map"

const OurMap: React.FC = () => {
    const location = {
        lat: 40.7128,
        long: -74.006,
    }

    return (
        <>
            <div className="container py-5" id="locations">
                <div className="section-title">
                    <h2>Our Locations</h2>
                    <p>
                        Kinetic Group operates globally in strategic locations, providing reliable, responsive support
                        and efficient market access tailored to regional client needs.
                    </p>
                </div>

                <div
                    // className="w-full h-[400px] lg:max-h-[806px] !aspect-[1700/400]"
                    style={{
                        width: "100%",
                        height: "400px",
                        maxHeight: "806px",
                        aspectRatio: "1700 / 400",
                    }}
                >
                    <Map
                        // center={{ lat: location.lat, lng: location.long }}
                        center={{ lat: 24.48818, lng: 54.35495 }}
                        zoom={8}
                        markerPositions={[location]}
                        height="100%"
                        width="100%"
                    />
                </div>
            </div>
        </>
    )
}

export default OurMap