import { MdEmail, MdPhone } from "react-icons/md";
import { FaLinkedin } from "react-icons/fa";
import { IoSend, IoShareSocial } from "react-icons/io5";
import Footer from "../../components/Footer";
import Header from "../../components/Header";

export default function ContactUs() {
  return (
    <div className="flex flex-col min-h-screen justify-center bg-white px-3 sm:px-5 gap-3 sm:gap-5">
      <Header />
      <div
        className="rounded-2xl sm:rounded-3xl px-6 sm:pl-10 md:pl-14 lg:pl-28 w-full my-3 h-80 sm:h-100 flex flex-col justify-center gap-3 sm:gap-5 relative overflow-hidden py-16 sm:py-0"
        style={{
          background:
            "linear-gradient(135deg, #333333, #333333, #0061FF, #FF3B30, #F8CA32)",
        }}
      >
        <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl mt-24 sm:mt-32 text-white font-bold font-orbitron">
          CONTACT US
        </p>
        <p className="text-xs sm:text-sm md:text-md lg:text-lg text-white font-montserrat max-w-sm sm:max-w-lg lg:max-w-2xl">
          Get in touch with DCPH for partnerships, or any questions about the
          data center industry in the Philippines.
        </p>
      </div>
      <div className="flex flex-col justify-center gap-5">
        <div className="flex flex-col xl:flex-row gap-6 lg:gap-8 p-6 sm:p-10 md:p-14">
          <div className="flex flex-col gap-3 lg:min-w-[300px]">
            <p className="text-xl sm:text-3xl md:text-4xl font-black font-orbitron text-[#535353]">
              GET IN TOUCH
            </p>
            <p className="text-xs sm:text-base md:text-md font-montserrat max-w-md text-[#535353]">
              We'd love to hear from you. Reach out to us through any of the
              following channels.
            </p>
          </div>

          <div className="flex flex-wrap gap-6 flex-1">
            <div className="flex items-start gap-4">
              <div className="bg-[#535353] rounded-xl p-3 w-12 h-12 flex items-center justify-center shrink-0">
                <MdEmail className="w-6 h-6 text-white" />
              </div>
              <div>
                <p className="text-base sm:text-xl font-bold font-montserrat text-[#535353]">
                  EMAIL
                </p>
                <p className="text-xs sm:text-base md:text-md font-montserrat text-[#535353] whitespace-nowrap">
                  info@dcph.org
                </p>
                <p className="text-xs sm:text-base md:text-md font-montserrat text-[#535353] whitespace-nowrap">
                  secretariat@datacenterph.org
                </p>
                <p className="text-[10px] sm:text-sm text-[#535353] font-montserrat">
                  General inquiries
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="bg-[#535353] rounded-xl p-3 w-12 h-12 flex items-center justify-center shrink-0">
                <MdPhone className="w-6 h-6 text-white" />
              </div>
              <div>
                <p className="text-base sm:text-xl font-bold font-montserrat text-[#535353]">
                  PHONE
                </p>
                <p className="text-xs sm:text-base md:text-md font-montserrat text-[#535353] whitespace-nowrap">
                  +63 908 399 4599
                </p>
                <p className="text-[10px] sm:text-sm text-[#535353] font-montserrat">
                  Mon-Fri 8am-5pm PHT
                </p>
              </div>
            </div>

            <div className="flex items-start gap-4">
              <div className="bg-[#535353] rounded-xl p-3 w-12 h-12 flex items-center justify-center shrink-0">
                <IoShareSocial className="w-6 h-6 text-white" />
              </div>
              <div>
                <p className="text-base sm:text-xl font-bold font-montserrat text-[#535353]">
                  SOCIAL NETWORK
                </p>
                <a
                  href="https://www.linkedin.com/company/datacenterph/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-2 text-xs sm:text-base md:text-md font-montserrat text-[#535353] hover:opacity-70 transition"
                >
                  <FaLinkedin className="w-5 h-5" />
                  LinkedIn
                </a>
              </div>
            </div>
          </div>
        </div>
        <div className="flex-1 flex flex-col items-center justify-center gap-4 sm:gap-6 p-8 sm:p-10 md:p-14 bg-[#2C2C2C] rounded-2xl sm:rounded-3xl mb-6 sm:mb-10">
          <p className="text-xl sm:text-3xl md:text-4xl font-black font-orbitron text-white text-center px-4">
            HAVE A QUESTION?
          </p>
          <p className="text-xs sm:text-md lg:text-lg font-montserrat text-white text-center max-w-md px-4">
            Click the button below to compose an email to us using your default
            email client.
          </p>
          <a
            href="mailto:info@dcph.org"
            className="bg-white text-[#2C2C2C] text-[10px] sm:text-sm font-montserrat font-normal px-5 sm:px-8 py-2.5 sm:py-4 rounded-lg flex items-center gap-2 hover:bg-gray-200 transition cursor-pointer"
          >
            <IoSend className="w-3.5 h-3.5 sm:w-5 sm:h-5" />
            Email Us
          </a>
        </div>
      </div>
      <Footer />
    </div>
  );
}