@extends('layouts.main')

@section('meta')
    <title>Contact Us - Inspectorate</title>
    <meta name="description" content="Get in touch with Inspectorate for all your inspection needs." />
@endsection

@section('content')

    <section id="h1-breadcrumb">
        <div
        class="h1-breadcrumb w-full h-fit overflow-hidden relative bg-main-gray pb-16 md:pb-24"
        >
        <div
            class="win-grid win-grid-bg w-full h-full absolute left-0 top-0 z-0"
            id="win-grid"
        ></div>
        <div
            class="absolute left-1/4 w-full top-[300px] overflow-hidden z-0 pointer-events-none"
        >
            <div class="flex justify-center">
            <img
                src="assets/images/home-one-hero-circle-shadow.svg"
                alt=""
            />
            </div>
        </div>
        <div class="theme-container mx-auto h-fit w-fit relative z-20">
            <div
            class="mt-[120px] md:mt-[272px] w-fit mx-auto relative z-10"
            >
            <h1
                class="text-main-black text-34 sm:text-48 font-semibold w-full text-center"
            >
                Contact
            </h1>
            <div class="flex gap-5 items-center justify-center mt-4">
                <a
                href="{{ route('home') }}" 
                hx-get="{{ route('home') }}" 
                hx-target="#pageContent"
                hx-push-url="true"
                class="home-two-nav-item leading-5 relative text-18 font-inter text-paragraph transition-all duration-300 hover:text-purple"
                >
                Home
                </a>
                <svg
                width="6"
                height="12"
                viewBox="0 0 6 12"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                >
                <path
                    d="M1 1L5 6L1 11"
                    stroke="#794AFF"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                />
                </svg>
                <a
                href="#"
                class="home-two-nav-item leading-5 relative text-18 font-inter text-paragraph transition-all duration-300 hover:text-purple"
                >
                contact
                </a>
            </div>
            </div>
        </div>
        </div>
    </section>
    <!-- main container  start  -->
    <section class="py-16 md:py-[130px]">
        <div
        class="theme-container w-full mx-auto grid grid-cols-7 lg:grid-cols-12 gap-y-16 lg:gap-y-0 lg:gap-x-[70px]"
        >
        <!-- address start  -->
        <div class="col-span-7 lg:col-span-5">
            <h1 class="font-semibold text-main-black text-[35px]">
            Contact Us
            </h1>
            <p class="text-paragraph mt-[30px]">
            We peel back the layers uncertainty, uncovering hidden
            truths that lie beneath the surface of our reality.
            </p>
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-[70px] mt-10">
            <div class="col-span-1">
                <h1 class="flex gap-2.5">
                <img src="{{ asset('assets/images/svg/globe.svg') }}" alt="">
                <span
                    class="font-inter font-medium text-22 text-main-black"
                    >Keishampat</span
                >
                </h1>
                <p class="max-w-[209px] text-paragraph mt-5">
                Inspectorate Power Department Keishampat Imphal West
                </p>
                <p class="text-paragraph mt-1"><a href="https://quomodothemes.website/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f49d9a929b9086998091979cb49399959d98da979b99">[email&#160;protected]</a></p>
                <p class="text-paragraph mt-1">(+91)1221 09878</p>
            </div>
            <div class="col-span-1">
                <h1 class="flex gap-2.5">
                <img src="{{ asset('assets/images/svg/globe.svg') }}" alt="">
                <span
                    class="font-inter font-medium text-22 text-main-black"
                >
                    North AOC
                </span>
                </h1>
                <p class="max-w-[209px] text-paragraph mt-5">
                3rd Floor Secured Office Building, Near 2nd MR Gate North AOC
                </p>
                <p class="text-paragraph mt-1"><a href="https://quomodothemes.website/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd94939b92998f9089989e95bd9a909c9491d39e9290">[email&#160;protected]</a></p>
                <p class="text-paragraph mt-1">(+91)1221 09878</p>
            </div>
            </div>
            <hr class="border-purple/10 mt-11 mb-[50px]" />
            <div class="flex items-center gap-[15px]">
            <h1 class="font-semibold text-18 text-main-black pr-2.5">
                Follow Us
            </h1>
            <a
                href="#"
                target="blank"
                aria-label="facebook"
                class="w-10 h-10 text-[#CAB7FF] hover:text-white rounded-full flex justify-center items-center border border-purple/10 overflow-hidden relative before:inline-block before:absolute before:z-0 before:w-full before:h-full before:bg-purple before:scale-x-0 group hover:before:scale-x-100 before:origin-right hover:before:origin-left before:transition-transform before:ease-out before:duration-300"
            >
                <span class="relative z-10"
                >
                <svg
                    width="11"
                    height="16"
                    viewBox="0 0 11 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    d="M10.6667 0H8.55556C5.79413 0 3.55556 2.23857 3.55556 5V6.22222H0V9.77778H3.55556V16H7.11111V9.77778H10.6667V6.22222H7.11111V4.55556C7.11111 4.00327 7.55883 3.55556 8.11111 3.55556H10.6667V0Z"
                    fill="currentColor"
                    />
                </svg>
                </span>
            </a>
            <a
                href="#"
                aria-label="twitter"
                target="blank"
                class="w-10 h-10 text-[#CAB7FF] hover:text-white rounded-full flex justify-center items-center border border-purple/10 overflow-hidden relative before:inline-block before:absolute before:z-0 before:w-full before:h-full before:bg-purple before:scale-x-0 group hover:before:scale-x-100 before:origin-right hover:before:origin-left before:transition-transform before:ease-out before:duration-300"
            >
                <span class="relative z-10"
                ><svg
                    width="19"
                    height="17"
                    viewBox="0 0 19 17"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    d="M12.7642 0C10.5722 0 8.7953 1.86585 8.7953 4.1675C8.7953 4.5153 8.83587 4.85315 8.91232 5.17611C6.80469 5.17611 3.63013 4.74999 0.978868 2.09376C0.626315 1.74054 -0.0237835 1.9767 0.000670803 2.47516C0.393588 10.484 3.82353 12.8202 5.58986 12.9656C4.44926 14.0921 2.79242 14.9813 1.1252 15.3804C0.685191 15.4857 0.576494 15.9674 1.00675 16.1073C2.19973 16.4953 3.90729 16.6448 4.82642 16.67C11.3286 16.67 16.6134 11.1972 16.731 4.3991C17.5847 3.84394 18.1315 2.63855 18.4388 1.78464C18.5136 1.57667 18.1728 1.33436 17.9687 1.41931C17.331 1.68479 16.5214 1.74773 15.8318 1.52302C15.1039 0.593104 14 0 12.7642 0Z"
                    fill="currentColor"
                    />
                </svg>
                </span>
            </a>
            <a
                href="#"
                aria-label="instagram"
                target="blank"
                class="w-10 h-10 text-[#CAB7FF] hover:text-white rounded-full flex justify-center items-center border border-purple/10 overflow-hidden relative before:inline-block before:absolute before:z-0 before:w-full before:h-full before:bg-purple before:scale-x-0 group hover:before:scale-x-100 before:origin-right hover:before:origin-left before:transition-transform before:ease-out before:duration-300"
            >
                <span class="relative z-10"
                ><svg
                    width="17"
                    height="17"
                    viewBox="0 0 17 17"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M5 0C2.23858 0 0 2.23858 0 5V11.33C0 14.0914 2.23858 16.33 5 16.33H11.33C14.0914 16.33 16.33 14.0914 16.33 11.33V5C16.33 2.23858 14.0914 0 11.33 0H5ZM13.0645 4.08222C13.5155 4.08222 13.881 3.71666 13.881 3.26572C13.881 2.81478 13.5155 2.44922 13.0645 2.44922C12.6136 2.44922 12.248 2.81478 12.248 3.26572C12.248 3.71666 12.6136 4.08222 13.0645 4.08222ZM12.247 8.16551C12.247 10.4202 10.4192 12.248 8.16453 12.248C5.90983 12.248 4.08203 10.4202 4.08203 8.16551C4.08203 5.91081 5.90983 4.08301 8.16453 4.08301C10.4192 4.08301 12.247 5.91081 12.247 8.16551ZM8.16532 10.6138C9.51814 10.6138 10.6148 9.51717 10.6148 8.16434C10.6148 6.81152 9.51814 5.71484 8.16532 5.71484C6.8125 5.71484 5.71582 6.81152 5.71582 8.16434C5.71582 9.51717 6.8125 10.6138 8.16532 10.6138Z"
                    fill="currentColor"
                    />
                </svg>
                </span>
            </a>
            <a
                href="#"
                aria-label="dribble"
                target="blank"
                class="w-10 h-10 text-[#CAB7FF] hover:text-white rounded-full flex justify-center items-center border border-purple/10 overflow-hidden relative before:inline-block before:absolute before:z-0 before:w-full before:h-full before:bg-purple before:scale-x-0 group hover:before:scale-x-100 before:origin-right hover:before:origin-left before:transition-transform before:ease-out before:duration-300"
            >
                <span class="relative z-10"
                ><svg
                    width="17"
                    height="17"
                    viewBox="0 0 17 17"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                    <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M0.0787061 9.30823C0.479084 12.1658 2.35861 14.5492 4.91845 15.6594C5.03048 13.3562 5.50604 11.1434 6.2916 9.07041C5.45422 8.9105 4.5871 8.82648 3.69861 8.82648C2.44115 8.82648 1.22661 8.99477 0.0787061 9.30823ZM6.12757 16.0739C6.77863 16.2411 7.46109 16.33 8.1643 16.33C10.5078 16.33 12.6208 15.3427 14.1098 13.7613C12.4845 11.6965 10.1761 10.1288 7.49338 9.35723C6.67698 11.4629 6.2012 13.7215 6.12757 16.0739ZM14.8969 12.7858C15.8005 11.4718 16.3293 9.88016 16.3293 8.165C16.3293 8.02119 16.3256 7.87824 16.3182 7.73626C15.4488 7.89372 14.5515 7.97608 13.6344 7.97608C11.8389 7.97608 10.12 7.66043 8.53731 7.0839C8.33792 7.4571 8.14977 7.83648 7.97327 8.22164C10.7455 9.0492 13.1519 10.6609 14.8969 12.7858ZM16.1634 6.51947C15.7389 4.44499 14.5277 2.65708 12.8551 1.48108C11.4192 2.82433 10.1729 4.34473 9.15604 6.00404C10.5505 6.48713 12.0589 6.75133 13.6344 6.75133C14.5004 6.75133 15.346 6.67152 16.1634 6.51947ZM11.7599 0.832253C10.675 0.299297 9.4546 0 8.1643 0C6.27362 0 4.53304 0.642623 3.14905 1.72136C4.39853 3.34118 6.06515 4.66232 8.00312 5.54348C9.03743 3.81982 10.3032 2.23688 11.7599 0.832253ZM2.23946 2.54684C0.87291 3.98751 0.0262453 5.92618 -6.43421e-05 8.06238C1.1797 7.76185 2.41982 7.60173 3.69861 7.60173C4.7518 7.60173 5.77866 7.71034 6.76712 7.91649C6.96395 7.47512 7.17512 7.04087 7.40007 6.61427C5.35434 5.66603 3.58482 4.26501 2.23946 2.54684Z"
                    fill="currentColor"
                    />
                </svg>
                </span>
            </a>
            </div>
        </div>
        <!-- address end  -->
        <!-- contact form start -->
        <div class="col-span-7">
            <div
            class="border border-purple/10 bg-main-gray rounded-[10px] p-4 md:p-[50px]"
            >
            <h1
                class="text-[30px] tracking-tight font-semibold text-main-black pb-6"
            >
                Send Us Message
            </h1>
            <p class="text-paragraph mb-[30px]">
                Your email address will not be published. Required fields
                are marked *
            </p>
            <form
                action="#"
                class="grid grid-cols-6 md:grid-cols-12 gap-[30px]"
            >
                <input
                type="text"
                placeholder="Full Name"
                class="col-span-6 h-[30px] focus:outline-none border-b border-purple/10 focus:border-purple bg-transparent"
                />
                <input
                type="email"
                placeholder="Email"
                class="col-span-6 h-[30px] focus:outline-none border-b border-purple/10 focus:border-purple bg-transparent"
                />
                <input
                type="text"
                placeholder="Phone Number"
                class="col-span-6 h-[30px] focus:outline-none border-b border-purple/10 focus:border-purple bg-transparent"
                />
                <input
                type="email"
                placeholder="Subject"
                class="col-span-6 h-[30px] focus:outline-none border-b border-purple/10 focus:border-purple bg-transparent"
                />
                <textarea
                name=""
                placeholder="Comments"
                class="col-span-6 md:col-span-12 focus:outline-none border-b border-purple/10 focus:border-purple bg-transparent h-[83px]"
                ></textarea>

                <div class="col-span-6 md:col-span-12">
                <button
                    class="home-two-btn-bg py-3 group bg-[#4A7DFF] border-[#4A7DFF] inline-flex"
                >
                    <span
                    class="text-base text-white group-hover:text-[#4A7DFF] transition-all duration-300 font-inter relative z-10"
                    >
                    Send Message
                    </span>
                    <svg
                    class="relative z-10"
                    width="7"
                    height="12"
                    viewBox="0 0 7 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    >
                    <path
                        class="group-hover:stroke-[#4A7DFF] transition-all duration-300"
                        d="M1.10254 10.5L4.89543 6.70711C5.22877 6.37377 5.39543 6.20711 5.39543 6C5.39543 5.79289 5.22877 5.62623 4.89543 5.29289L1.10254 1.5"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    ></path>
                    </svg>
                </button>
                </div>
            </form>
            </div>
        </div>
        <!-- contact-form end  -->
        </div>
        <section class="overflow-hidden mt-10 md:mt-[130px] w-full">
        <div
            class="max-w-[1780px] relative w-full h-[240px] sm:h-[450px] md:h-[340px] lg:h-[340px] xl:h-[340px] mx-auto xl:rounded-lg overflow-hidden bg-red-300"
        >
            {{-- <iframe
            class="map-iframe"
            width="1780"
            height="850"
            frameborder="0"
            scrolling="no"
            marginheight="0"
            marginwidth="0"
            src="https://www.google.com/maps/d/embed?mid=1hPZlx7IzAPJ3ss2IAz8v2xVInwgYJ6Y&amp;ehbc=2E312F"
            ></iframe> --}}
        </div>
        </section>
    </section>
    <!-- main container  end  -->

    <!--Todo: consultation -->
    <section data-aos="fade-up" id="consultation">
        <div class="consultation-section-wrapper w-full relative">
        <div class="theme-container mx-auto relative z-10">
            <div
            class="w-full py-[80px] xl:pl-[110px] pl-10 border border-[#e7e3fa] rounded-[20px] bg-main-gray md:flex relative"
            >
            <div class="absolute bottom-0 left-0 pointer-events-none">
                <img src="assets/images/cta-dot-shape.webp" alt="" />
            </div>
            <div class="md:w-[432px] w-full">
                <span class="section-title-top-tag mb-5"
                >Get Consultations</span
                >
                <h2
                class="md:text-48 text-34 font-semibold text-main-black mb-[32px]"
                >
                Get your free digital marketing audit
                </h2>
                <p class="text-paragraph mb-[45px]">
                We’ve 25+ years of experience in digital marketing
                </p>

                <a href="contact.html">
                <div
                    class="home-two-btn-bg py-3 group bg-purple border-purple inline-flex"
                >
                    <span
                    class="text-base text-white group-hover:text-purple transition-all duration-300 font-inter relative z-10"
                    >
                    Get Consultation
                    </span>
                    <svg
                    class="relative z-10"
                    width="7"
                    height="12"
                    viewBox="0 0 7 12"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    >
                    <path
                        class="group-hover:stroke-blue-seo transition-all duration-300"
                        d="M1.10254 10.5L4.89543 6.70711C5.22877 6.37377 5.39543 6.20711 5.39543 6C5.39543 5.79289 5.22877 5.62623 4.89543 5.29289L1.10254 1.5"
                        stroke="white"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    ></path>
                    </svg>
                </div>
                </a>
            </div>
            <div class="flex-1">
                <div
                id="consaltaion-mouse-move-anim"
                class="flex justify-end w-full relative mt-10"
                >
                <div class="mr-10 moving-h2-hero-main-img">
                    <img src="assets/images/cta-shape.webp" alt="" />
                </div>
                <div data-depth="0.40" class="layer">
                    <img src="assets/images/cta-p-1.webp" alt="" />
                </div>
                <div
                    data-depth="0.20"
                    class="layer absolute md:right-40 right-10"
                >
                    <img src="assets/images/cta-p-2.webp" alt="" />
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="flex justify-between absolute top-20">
            <div id="line-lottie-style-2"></div>
            <div
            class="transform rotate-180"
            id="line-lottie2-style-2"
            ></div>
        </div>
        </div>
    </section>

@endsection