import Image from "next/image";
import Link from "next/link";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import FAQTabs from "@/components/sections/FAQTabs";
import JoinCTA from "@/components/sections/JoinCTA";

function CardIcon({ src, alt }: { src: string; alt: string }) {
  return <Image src={src} alt={alt} width={36} height={36} className="h-9 w-9" />;
}

function SocialButton({ src, href, label }: { src: string; href: string; label: string }) {
  return (
    <Link href={href} aria-label={label}>
      <Image src={src} alt={label} width={36} height={36} className="h-7 w-7" />
    </Link>
  );
}

function ContactHero() {
  return (
    <section className="relative overflow-hidden bg-white text-coast-navy">
      <div className="absolute inset-0 z-0">
        <Image
          src="/assets/images/faq-bg.png"
          alt=""
          fill
          quality={95}
          sizes="100vw"
          className="object-cover object-center"
        />
      </div>

      <div className="relative z-10">
        <Navbar />

        <div className="mx-auto max-w-[1280px] px-5 pt-10 pb-32 text-center md:px-10 md:pt-20 md:pb-44 lg:pt-24 lg:pb-52">
          <h1 className="text-[32px] font-bold leading-tight text-coast-navy md:text-[40px] lg:text-[48px]">
            Contact us
          </h1>
          <p className="mx-auto mt-4 max-w-[820px] text-[15px] leading-relaxed text-coast-navy/80 md:text-base">
            We&rsquo;re all ears and excited to chat. Reach out to our team via chat, drop us an
            email with your questions and inquiries, and be sure to stay in the loop with Coast on
            our vibrant social media channels. Your thoughts matter to us!
          </p>
        </div>
      </div>
    </section>
  );
}

function ContactCards() {
  return (
    <section className="bg-white">
      <div className="relative z-10 mx-auto -mt-24 max-w-[1280px] px-5 pb-10 md:-mt-32 md:px-10 md:pb-14 lg:-mt-40">
        <div className="grid gap-5 md:grid-cols-3 md:gap-6">
          <article className="rounded-2xl bg-white p-7 shadow-[0_10px_30px_-12px_rgba(2,16,58,0.18)] md:p-8">
            <CardIcon src="/assets/icons/chat.svg" alt="Chat" />
            <h3 className="mt-5 text-[20px] font-bold text-coast-navy md:text-[22px]">Chat</h3>
            <p className="mt-3 text-[14px] leading-relaxed text-coast-navy/75 md:text-[15px]">
              The easiest way to contact us is via chat. Our support team is always ready to help.
            </p>
            <Link
              href="tel:+2349110992663"
              className="mt-5 inline-block text-[14px] font-semibold text-coast-blue underline-offset-4 md:text-[15px]"
            >
              +234 911 099 2663
            </Link>
          </article>

          <article className="rounded-2xl bg-white p-7 shadow-[0_10px_30px_-12px_rgba(2,16,58,0.18)] md:p-8">
            <CardIcon src="/assets/icons/social.svg" alt="Social Media" />
            <h3 className="mt-5 text-[20px] font-bold text-coast-navy md:text-[22px]">
              Social Media
            </h3>
            <p className="mt-3 text-[14px] leading-relaxed text-coast-navy/75 md:text-[15px]">
              Keep up to date with what we are doing via our social media platforms.
            </p>
            <div className="mt-5 flex items-center gap-3">
              <SocialButton
                src="/assets/icons/facebook.svg"
                href="https://www.facebook.com/profile.php?id=100089709452803&mibextid=ZbWKwL"
                label="Facebook"
              />
              <SocialButton
                src="/assets/icons/whatsapp.svg"
                href="https://wa.me/2348039126036"
                label="WhatsApp"
              />
              <SocialButton
                src="/assets/icons/instagram.svg"
                href="https://instagram.com/itscoastng?igshid=OGQ5ZDc2ODk2ZA=="
                label="Instagram"
              />
              <SocialButton
                src="/assets/icons/x.svg"
                href="https://x.com/Itscoastng?t=BwiK7DfT-rddvok-eQdNNw&s=31"
                label="X"
              />
              <SocialButton
                src="/assets/icons/tiktok.svg"
                href="https://www.tiktok.com/@coast.ng?_t=8heNCZddjrZ&_r=1"
                label="TikTok"
              />
            </div>
          </article>

          <article className="rounded-2xl bg-white p-7 shadow-[0_10px_30px_-12px_rgba(2,16,58,0.18)] md:p-8">
            <CardIcon src="/assets/icons/email.svg" alt="Email" />
            <h3 className="mt-5 text-[20px] font-bold text-coast-navy md:text-[22px]">Email</h3>
            <p className="mt-3 text-[14px] leading-relaxed text-coast-navy/75 md:text-[15px]">
              Let us know your suggestions and feedback. Kindly send an email to
            </p>
            <Link
              href="mailto:support@coastresources.io"
              className="mt-5 inline-block text-[14px] font-semibold text-coast-blue underline-offset-4 md:text-[15px]"
            >
              support@coastresources.io
            </Link>
            <Link
              href="mailto:admin@coastresources.io"
              className="inline-block text-[14px] font-semibold text-coast-blue underline-offset-4 md:text-[15px]"
            >
              admin@coastresources.io
            </Link>
          </article>
        </div>
      </div>
    </section>
  );
}

export default function ContactPage() {
  return (
    <main className="flex-1">
      <ContactHero />
      <ContactCards />
      <FAQTabs showHeading />
      <JoinCTA />
      <Footer />
    </main>
  );
}