@extends('layouts.app')

@section('title', 'Contact Us')

@section('content')
<section style="background-image: url('{{ asset('images/about/banner.webp') }}');" class="w-full bg-cover bg-center bg-no-repeat relative">
    <!-- Upper Gradient overly -->
  <div class="bg-linear-to-t from-(--background)/0 to-(--background) h-32 w-full absolute top-0 left-0 right-0 z-2"></div>
  <!-- Lower Gradient overly -->
  <div class="bg-linear-to-b from-(--background)/0 to-(--background) h-32 w-full absolute bottom-0 left-0 right-0 z-2"></div>
    <div class="absolute inset-0 z-0 bg-(--background)/85"></div>
    <div class="max-w-7xl mx-auto px-5 md:px-8 lg:px-5 pt-28 pb-16 md:pb-36 md:pt-42 relative z-10">
        <h1 class="text-3xl md:text-4xl lg:text-5xl font-normal uppercase text-(--primary) text-center leading-normal reveal-text">Contact Us</h1>
        <div class="mt-4 md:mt-6 flex items-center justify-center gap-2 select-none" data-aos="fade-up" data-aos-delay="50">
            <a href="{{ route('home') }}" class="text-sm md:text-[15px] font-medium text-neutral-100 inline-block uppercase">Home</a>
            <p class="text-sm md:text-[15px]">/</p>
            <p class="text-sm md:text-[15px] font-medium text-neutral-400 inline-block uppercase">Contact</p>
        </div>
    </div>
</section>
<section class="mt-14 mb-20 md:mb-28">
  <div class="max-w-7xl mx-auto px-5 lg:px-5">
    <!-- Section Indicator -->
    <div class="flex justify-start items-center gap-3 border-b border-white/10 w-full pb-4">
      <span class="aspect-square w-2.5 bg-(--primary) rounded-full"></span>
      <p class="text-base font-medium uppercase">Get in touch</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-14 mt-14">
        <div class="flex flex-col justify-between items-start gap-y-14">
            <div>
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-normal uppercase text-(--primary) reveal-text">Let's create something great together!</h2>
                <div class="mt-4 md:mt-6 space-y-1.5">
                    <p class="text-sm md:text-base text-neutral-400">Email us at <a class="text-white underline" href="mailto:hello@deeo.studio">hello@deeo.studio</a></p>
                    <p class="text-sm md:text-base text-neutral-400">Prefer to chat? <a class="text-white underline" href="{{ route('contact') }}">Book a call</a></p>
                </div>
            </div>
            <div>
                <p class="text-sm md:text-base">Address: Flat No. 302, Shree Sai Residency Near Green Valley Park Sector 15, Vashi Navi Mumbai – 400703 Maharashtra, India</p>
                <div class="flex items-center gap-4 mt-5">
                    <!-- Facebook -->
                    <a target="_blank" href="" class="size-12 rounded-full border border-(--primary) flex justify-center items-center bg-(--primary)/10 hover:scale-110 active:scale-110 transition-all duration-200 ease will-change-transform">
                        <svg class="size-6" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M27.0034 13.5844C27.0034 6.08175 20.9587 0 13.5034 0C6.04462 0.0016875 0 6.08175 0 13.5861C0 20.3648 4.93763 25.9841 11.3906 27.0034V17.5112H7.965V13.5861H11.394V10.5907C11.394 7.18706 13.4106 5.30719 16.4936 5.30719C17.9719 5.30719 19.5159 5.57212 19.5159 5.57212V8.91337H17.8132C16.1376 8.91337 15.6144 9.96131 15.6144 11.0363V13.5844H19.3573L18.7599 17.5095H15.6128V27.0017C22.0658 25.9824 27.0034 20.3631 27.0034 13.5844Z" fill="#D7B58A"/>
                        </svg>
                    </a>
                    <!-- Instagram -->
                    <a target="_blank" href="" class="size-12 rounded-full border border-(--primary) flex justify-center items-center bg-(--primary)/10 hover:scale-110 active:scale-110 transition-all duration-200 ease will-change-transform">
                        <svg class="size-6" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M13.5 0C9.83644 0 9.37575 0.016875 7.93631 0.081C6.49688 0.1485 5.51644 0.374625 4.6575 0.70875C3.75611 1.0468 2.93986 1.57848 2.26631 2.26631C1.57848 2.93986 1.0468 3.75611 0.70875 4.6575C0.374625 5.51475 0.146812 6.49687 0.081 7.93125C0.016875 9.37406 0 9.83306 0 13.5017C0 17.1669 0.016875 17.6259 0.081 19.0654C0.1485 20.5031 0.374625 21.4836 0.70875 22.3425C1.05469 23.2301 1.51538 23.9827 2.26631 24.7337C3.01556 25.4846 3.76819 25.947 4.65581 26.2913C5.51644 26.6254 6.49519 26.8532 7.93294 26.919C9.37406 26.9831 9.83306 27 13.5 27C17.1669 27 17.6243 26.9831 19.0654 26.919C20.5014 26.8515 21.4853 26.6254 22.3442 26.2913C23.245 25.953 24.0606 25.4213 24.7337 24.7337C25.4846 23.9827 25.9453 23.2301 26.2913 22.3425C26.6237 21.4836 26.8515 20.5031 26.919 19.0654C26.9831 17.6259 27 17.1669 27 13.5C27 9.83306 26.9831 9.37406 26.919 7.93294C26.8515 6.49688 26.6237 5.51475 26.2913 4.6575C25.9532 3.75611 25.4215 2.93986 24.7337 2.26631C24.0601 1.57848 23.2439 1.0468 22.3425 0.70875C21.4819 0.374625 20.4998 0.146812 19.0637 0.081C17.6226 0.016875 17.1653 0 13.4966 0H13.5ZM12.2901 2.43338H13.5017C17.1062 2.43338 17.5331 2.44519 18.9557 2.511C20.2719 2.57006 20.9874 2.79113 21.4633 2.97506C22.0928 3.21975 22.5433 3.51338 23.0158 3.98587C23.4883 4.45837 23.7803 4.90725 24.0249 5.53837C24.2106 6.01256 24.4299 6.72806 24.489 8.04431C24.5548 9.46688 24.5683 9.89381 24.5683 13.4966C24.5683 17.0994 24.5548 17.5281 24.489 18.9506C24.4299 20.2669 24.2089 20.9807 24.0249 21.4566C23.807 22.042 23.4617 22.5716 23.0141 23.0074C22.5416 23.4799 22.0928 23.7718 21.4616 24.0165C20.9891 24.2021 20.2736 24.4215 18.9557 24.4823C17.5331 24.5464 17.1062 24.5616 13.5017 24.5616C9.89719 24.5616 9.46856 24.5464 8.046 24.4823C6.72975 24.4215 6.01594 24.2021 5.54006 24.0165C4.95422 23.7992 4.42395 23.4546 3.98756 23.0074C3.53915 22.5713 3.1933 22.041 2.97506 21.4549C2.79113 20.9807 2.57006 20.2652 2.511 18.9489C2.44688 17.5264 2.43338 17.0994 2.43338 13.4932C2.43338 9.88706 2.44688 9.4635 2.511 8.04094C2.57175 6.72469 2.79113 6.00919 2.97675 5.53331C3.22144 4.90387 3.51506 4.45331 3.98756 3.98081C4.46006 3.50831 4.90894 3.21638 5.54006 2.97169C6.01594 2.78606 6.72975 2.56669 8.046 2.50594C9.29138 2.44856 9.774 2.43169 12.2901 2.43V2.43338ZM20.7073 4.67438C20.4946 4.67438 20.2839 4.71628 20.0874 4.79769C19.8908 4.8791 19.7122 4.99843 19.5618 5.14886C19.4114 5.29929 19.292 5.47788 19.2106 5.67443C19.1292 5.87098 19.0873 6.08163 19.0873 6.29437C19.0873 6.50712 19.1292 6.71777 19.2106 6.91432C19.292 7.11087 19.4114 7.28946 19.5618 7.43989C19.7122 7.59032 19.8908 7.70965 20.0874 7.79106C20.2839 7.87247 20.4946 7.91438 20.7073 7.91438C21.137 7.91438 21.549 7.7437 21.8528 7.43989C22.1566 7.13608 22.3273 6.72403 22.3273 6.29437C22.3273 5.86472 22.1566 5.45267 21.8528 5.14886C21.549 4.84505 21.137 4.67438 20.7073 4.67438ZM13.5017 6.56775C12.5821 6.5534 11.6689 6.72213 10.8152 7.06411C9.96142 7.40609 9.18424 7.91449 8.52888 8.55971C7.87351 9.20493 7.35305 9.97408 6.99779 10.8224C6.64254 11.6707 6.45958 12.5812 6.45958 13.5008C6.45958 14.4205 6.64254 15.331 6.99779 16.1793C7.35305 17.0276 7.87351 17.7968 8.52888 18.442C9.18424 19.0872 9.96142 19.5956 10.8152 19.9376C11.6689 20.2796 12.5821 20.4483 13.5017 20.4339C15.3217 20.4055 17.0576 19.6626 18.3346 18.3655C19.6117 17.0684 20.3275 15.3211 20.3275 13.5008C20.3275 11.6806 19.6117 9.93332 18.3346 8.6362C17.0576 7.33908 15.3217 6.59615 13.5017 6.56775ZM13.5017 8.99944C14.0927 8.99944 14.6779 9.11585 15.224 9.34202C15.77 9.5682 16.2662 9.89971 16.6841 10.3176C17.102 10.7355 17.4335 11.2317 17.6597 11.7777C17.8858 12.3237 18.0023 12.909 18.0023 13.5C18.0023 14.091 17.8858 14.6763 17.6597 15.2223C17.4335 15.7683 17.102 16.2645 16.6841 16.6824C16.2662 17.1003 15.77 17.4318 15.224 17.658C14.6779 17.8842 14.0927 18.0006 13.5017 18.0006C12.3081 18.0006 11.1633 17.5264 10.3193 16.6824C9.47529 15.8384 9.00113 14.6936 9.00113 13.5C9.00113 12.3064 9.47529 11.1616 10.3193 10.3176C11.1633 9.4736 12.3081 8.99944 13.5017 8.99944Z" fill="#D7B58A"/>
                            </svg>

                    </a>
                    <!-- Youtube -->
                    <a target="_blank" href="" class="size-12 rounded-full border border-(--primary) flex justify-center items-center bg-(--primary)/10 hover:scale-110 active:scale-110 transition-all duration-200 ease will-change-transform">
                        <svg class="size-6" width="27" height="19" viewBox="0 0 27 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.5861 0H13.7363C15.1234 0.0050625 22.1518 0.0556878 24.0469 0.565313C24.6198 0.720847 25.1418 1.02401 25.5608 1.44451C25.9799 1.86501 26.2812 2.38812 26.4347 2.96156C26.6051 3.60281 26.7249 4.45163 26.8059 5.32744L26.8228 5.50294L26.8599 5.94169L26.8734 6.11719C26.9831 7.65956 26.9966 9.10406 26.9983 9.41962V9.54619C26.9966 9.87356 26.9814 11.4159 26.8599 13.0224L26.8464 13.1996L26.8312 13.3751C26.7469 14.3404 26.622 15.2989 26.4347 16.0042C26.2812 16.5777 25.9799 17.1008 25.5608 17.5213C25.1418 17.9418 24.6198 18.245 24.0469 18.4005C22.0894 18.927 14.6492 18.9641 13.6181 18.9658H13.3785C12.8571 18.9658 10.7004 18.9557 8.43919 18.8781L8.15231 18.8679L8.0055 18.8612L7.71694 18.8494L7.42837 18.8376C5.55525 18.7549 3.77156 18.6216 2.94975 18.3988C2.37706 18.2434 1.85515 17.9405 1.43615 17.5203C1.01715 17.1001 0.715708 16.5774 0.561938 16.0042C0.374625 15.3006 0.24975 14.3404 0.165375 13.3751L0.151875 13.1979L0.138375 13.0224C0.0546133 11.879 0.00846335 10.7331 0 9.58669L0 9.37913C0.003375 9.01631 0.016875 7.7625 0.108 6.37875L0.119813 6.20494L0.124875 6.11719L0.138375 5.94169L0.1755 5.50294L0.192375 5.32744C0.273375 4.45163 0.393187 3.60113 0.563625 2.96156C0.717138 2.38812 1.01846 1.86501 1.43748 1.44451C1.8565 1.02401 2.37854 0.720847 2.95144 0.565313C3.77325 0.345938 5.55694 0.210937 7.43006 0.126562L7.71694 0.11475L8.00719 0.104625L8.15231 0.0995627L8.44088 0.0877503C10.0469 0.0361186 11.6535 0.00742797 13.2604 0.00168758L13.5861 0ZM10.8 5.41687V13.5473L17.8149 9.48375L10.8 5.41687Z" fill="#D7B58A"/>
                        </svg>

                    </a>
                    <!-- LinkedIn -->
                    <a target="_blank" href="" class="size-12 rounded-full border border-(--primary) flex justify-center items-center bg-(--primary)/10 hover:scale-110 active:scale-110 transition-all duration-200 ease will-change-transform">
                        <svg class="size-6" width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M0 1.6471C0 0.737312 0.755997 0 1.68878 0H21.3073C22.2401 0 22.9961 0.737312 22.9961 1.6471V21.349C22.9961 22.2588 22.2401 22.9961 21.3073 22.9961H1.68878C0.755997 22.9961 0 22.2588 0 21.349V1.6471ZM7.10436 19.2506V8.86643H3.6535V19.2506H7.10436ZM5.37965 7.44786C6.58263 7.44786 7.33144 6.65162 7.33144 5.65416C7.30988 4.63515 6.58407 3.86047 5.40264 3.86047C4.22122 3.86047 3.44941 4.63659 3.44941 5.65416C3.44941 6.65162 4.19822 7.44786 5.35665 7.44786H5.37965ZM12.4337 19.2506V13.4513C12.4337 13.1408 12.4567 12.8304 12.5487 12.609C12.7973 11.9896 13.365 11.3471 14.3194 11.3471C15.5684 11.3471 16.0671 12.2986 16.0671 13.6956V19.2506H19.5179V13.2946C19.5179 10.1039 17.8162 8.62066 15.5454 8.62066C13.7143 8.62066 12.8936 9.62674 12.4337 10.3353V10.3712H12.4107L12.4337 10.3353V8.86643H8.98429C9.0274 9.84089 8.98429 19.2506 8.98429 19.2506H12.4337Z" fill="#D7B58A"/>
                        </svg>

                    </a>
                </div>
            </div>
        </div>
        <div class="">
            <form method="post" action="" class="flex flex-col gap-7">
                <div class="flex flex-col gap-1">
                    <label for="fullname" class="text-xs font-medium uppercase">Full Name<span class="text-(--primary)">*</span></label>
                    <input type="text" class="border border-(--primary)/70 py-3 px-4 rounded-lg outline-0" placeholder="Rahul Kumar" required />
                </div>
                <div class="flex flex-col gap-1">
                    <label for="fullname" class="text-xs font-medium uppercase">Email<span class="text-(--primary)">*</span></label>
                    <input type="email" class="border border-(--primary)/70 py-3 px-4 rounded-lg outline-0" placeholder="example@gmail.com" required />
                </div>
                <div class="flex flex-col gap-1">
                    <label for="fullname" class="text-xs font-medium uppercase">Phone no.<span class="text-(--primary)">*</span></label>
                    <input type="number" min="0" max="9999999999" class="border border-(--primary)/70 py-3 px-4 rounded-lg outline-0" placeholder="9988776655" required />
                </div>
                <div class="flex flex-col gap-1">
                    <label for="fullname" class="text-xs font-medium uppercase">Write Your message</label>
                    <textarea type="number" rows="4" class="border border-(--primary)/70 py-3 px-4 rounded-lg outline-0"></textarea>
                </div>
                <button type="submit" class="text-(--background) bg-(--primary) font-semibold py-3 px-4 w-full text-center select-none cursor-pointer uppercase rounded-lg">Submit your message</button>
            </form>
        </div>
    </div>
  </div>
</section>
<div class="mb-16">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30161.483958921886!2d72.99293546955211!3d19.099516655008344!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c1922e485bdb%3A0x7e5fdf22d45f4120!2sThe%20Altruist%20Business%20Hotel%20Navi%20Mumbai-1!5e0!3m2!1sen!2sin!4v1768220033316!5m2!1sen!2sin" width="100%" height="550" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
@endsection