"use client";
import Image from "next/image";
import Link from "next/link";
import React, { useEffect, useRef } from "react";
import Form from "./Form";
import VantaBackground from "../components/VantaBackground";
import VantaFormBackground from "../components/VantaFormBackground";
import AOS from "aos";
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import InstagramIcon from '@mui/icons-material/Instagram';

function ContactUs() {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const splideRef = useRef<any>(null);
  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch(() => { });
    }
  }, []);
  useEffect(() => {
    AOS.init();
  }, []);
  return (
    <main>
      <section className="px-4">
        <div className="h-[60vh] lg:h-[83vh] mt-22 lg:mt-26 mx-auto container rounded-3xl bg-black overflow-hidden relative">
          <video
            ref={videoRef}
            className="absolute top-0 w-full h-[83vh] object-cover opacity-50"
            src="/assets/video/vds7.mp4"
            muted
            loop
            autoPlay
            playsInline
            webkit-playsinline="true"
          />
          <div className="px-4 w-full container mx-auto absolute top-[50%] -translate-y-1/2 left-1/2 -translate-x-1/2 z-50">
            <div className="flex flex-wrap gap-y-3">
              <div className="w-full flex justify-center flex-col gap-y-4 lg:gap-y-6">
                <div className="text-center">
                  <h1
                    className="text-[30px] md:text-[45px] xl:text-[65px] text-white font-semibold font-kanit leading-tight mb-4 lg:mb-12"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1500"
                  >
                    Talk to the <span className="text-[#c4262e]">experts</span>
                  </h1>
                  <p
                    className="md:text-[25px] font-semibold text-white w-full max-w-[800px] mx-auto"
                    data-aos="fade-up"
                    data-aos-anchor-placement="top-bottom"
                    data-aos-duration="1800"
                  >
                    Share a few details, and we’ll take it from there.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-12 relative z-10">
        <div className="container mx-auto px-4 relative z-10">
          <div className="lg:p-10 bg-neutral-100 w-full max-w-5xl mx-auto shadow-xl rounded-2xl">
            {/* <VantaFormBackground /> */}
            <div className="w-full max-w-[700px] mx-auto bg-white p-3 md:p-10 rounded-2xl relative z-20">
              <Form />
            </div>
            <div className="pb-5 lg:pb-0 mt-10">
              <p className="text-[18px] text-center">Your information is yours, safe and confidential.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="pt-6 lg:pt-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-wrap gap-y-10">
            <div className="w-full lg:w-[50%]">
              {/*  <Image
                className="max-w-full w-[1200px] md:h-[800px] object-cover hidden lg:block"
                src="/assets/img/others/206.webp"
                alt=""
                width={1200}
                height={1000}
              /> */}
              <div>
                <h2 className="text-[25px] lg:text-[45px] leading-tight mb-3">
                  We’ve Got the Answers, You’ve Got the Questions!
                </h2>

                <div className="flex flex-wrap gap-y-3 mt-5">
                  <div className="w-full md:w-[40%]">
                    <div>
                      <h3 className="text-[20px] font-semibold">Call</h3>
                      <div className="flex items-center gap-x-1 my-3">
                        <svg
                          className="w-6 h-6 text-gray-800"
                          aria-hidden="true"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke="currentColor"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M6 15h12M6 6h12m-6 12h.01M7 21h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1Z"
                          />
                        </svg>

                        <Link href="tel:+919830416061">+91 98304 16061</Link>
                      </div>
                      <div className="flex items-center gap-x-1 my-3">
                        <svg
                          className="w-6 h-6 text-gray-800"
                          aria-hidden="true"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke="currentColor"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M6 15h12M6 6h12m-6 12h.01M7 21h10a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1Z"
                          />
                        </svg>

                        <Link href="tel:+919831667775">+91 98316 67775</Link>
                      </div>
                    </div>
                  </div>
                  <div className="w-full md:w-[60%]">
                    <div>
                      <h3 className="text-[20px] font-semibold">
                        Our Location
                      </h3>
                      <div className="flex items-start gap-x-1 my-3">
                        <svg
                          className="w-7 h-7 text-gray-800"
                          aria-hidden="true"
                          xmlns="http://www.w3.org/2000/svg"
                          width="27"
                          height="27"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke="currentColor"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="m4 12 8-8 8 8M6 10.5V19a1 1 0 0 0 1 1h3v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h3a1 1 0 0 0 1-1v-8.5"
                          />
                        </svg>

                        <p className="text-[15px]">
                          8, 1/2, Sir UN Brahmachari Sarani, Park Street area, Kolkata, West Bengal 700017
                        </p>
                      </div>
                    </div>
                  </div>
                  <div className="w-full md:w-[40%]">
                    <div>
                      <h3 className="text-[20px] font-semibold">Email</h3>
                      <div className="flex items-center gap-x-1 my-1">
                        <svg
                          className="w-6 h-6 text-gray-800"
                          aria-hidden="true"
                          xmlns="http://www.w3.org/2000/svg"
                          width="24"
                          height="24"
                          fill="none"
                          viewBox="0 0 24 24"
                        >
                          <path
                            stroke="currentColor"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth="2"
                            d="M11 16v-5.5A3.5 3.5 0 0 0 7.5 7m3.5 9H4v-5.5A3.5 3.5 0 0 1 7.5 7m3.5 9v4M7.5 7H14m0 0V4h2.5M14 7v3m-3.5 6H20v-6a3 3 0 0 0-3-3m-2 9v4m-8-6.5h1"
                          />
                        </svg>
                        <Link className="mb-1" href="mailto:hello@eleantz.com">hello@eleantz.com</Link>
                      </div>

                    </div>
                  </div>
                  <div className="w-full md:w-[60%]">
                    <div>
                      <h3 className="text-[20px] font-semibold">
                        Social Networks
                      </h3>
                      <div className="flex items-center gap-x-1 mt-3">
                        {/*  <Link href="#">
                          <svg
                            className="w-6 h-6 text-gray-800"
                            aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            fill="currentColor"
                            viewBox="0 0 24 24"
                          >
                            <path
                              fillRule="evenodd"
                              d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z"
                              clipRule="evenodd"
                            />
                          </svg>
                        </Link> */}
                        <Link target="_blank" href="https://www.linkedin.com/company/eleantz/">
                          <LinkedInIcon />
                        </Link>
                        <Link target="_blank" href="https://www.instagram.com/eleantz?igsh=dzByZXNnMjF0czA5">
                          <InstagramIcon />
                        </Link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="w-full lg:w-[50%] flex justify-center flex-col">
              <p className="font-semibold text-[20px] mb-1">Easy to find us in India</p>
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14739.808936360087!2d88.355745!3d22.543462!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a02763615a6bb3b%3A0x889ea7ffa9a4caa3!2sEleAntz!5e0!3m2!1sen!2sin!4v1766687480132!5m2!1sen!2sin"
                width="100%"
                height="100%"
                style={{ border: 0, marginBottom:'15px' }}
                allowFullScreen
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              ></iframe>
              <p className="font-semibold text-[20px] mb-1">Easy to find us in USA</p>
              <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.1097408111846!2d-73.916027!3d40.759611!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25f3c30f12bf5%3A0xf3f6072e331ea1ec!2s31-31%2042nd%20St%2C%20Long%20Island%20City%2C%20NY%2011103%2C%20USA!5e0!3m2!1sen!2sin!4v1769062869605!5m2!1sen!2sin" 
              width="100%" 
              height="100%" 
              style={{ border: 0 }} 
              loading="lazy"
              ></iframe>
            </div>
          </div>
        </div>
      </section>

      <section className="py-6 lg:py-12">
        <div className="container mx-auto px-4">
          <div>
            <div className="bg-gray-900 rounded-3xl p-10 md:p-16 relative overflow-hidden">
              <div className="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-indigo-600 rounded-full blur-3xl opacity-20"></div>

              <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-8 text-center md:text-left">

                <div className="max-w-2xl">
                  <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                    Think you’d enjoy working here?
                  </h2>
                  <p className="text-indigo-200 text-lg font-light">
                    If our way of working resonates, we’d love to hear from you. Our HR might be searching for you right now.
                  </p>
                </div>

                <div className="shrink-0">
                  <Link href="mailto:careers@eleantz.com" className="bg-white text-gray-900 hover:bg-indigo-50 transition-colors px-8 py-4 rounded-xl font-bold text-lg shadow-lg flex items-center gap-2 group">
                    Drop your resume
                    <svg className="w-5 h-5 text-indigo-600 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                  </Link>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

export default ContactUs;