import Image from "next/image";
import Link from "next/link";

function DarkStoreButton({
  href,
  iconSrc,
  iconAlt,
  caption,
  label,
}: {
  href: string;
  iconSrc: string;
  iconAlt: string;
  caption: string;
  label: string;
}) {
  return (
    <Link
      href={href}
      className="inline-flex w-full items-center justify-center gap-3 rounded-xl bg-[#000000] px-5 py-3 text-white shadow-sm transition hover:translate-y-[-1px] hover:shadow-md md:w-auto md:justify-start"
    >
      <Image
        src={iconSrc}
        alt={iconAlt}
        width={26}
        height={33}
        className="h-7 w-auto"
      />
      <span className="flex flex-col leading-tight text-left">
        <span className="text-[10px] font-semibold tracking-wide text-white/70">
          {caption}
        </span>
        <span className="text-base font-semibold">{label}</span>
      </span>
    </Link>
  );
}

export default function JoinCTA() {
  return (
    <>
      {/* Mobile layout */}
      <section className="relative overflow-hidden bg-gradient-to-b from-[#0e005a] via-[#1f3eef] to-[#3a5cf7] text-white md:hidden">
        <div className="px-5 pt-12 pb-6 text-center">
          <h2 className="text-[28px] font-bold leading-tight">
            Want hassle-free trading?
          </h2>
          <p className="mt-3 text-[15px] leading-relaxed text-white/90">
            Join the Coast family on the journey to a seamless trading experience
          </p>

          <div className="mt-6 flex flex-col gap-3">
            <DarkStoreButton
              href="https://play.google.com/store/apps/details?id=ng.coast.app&pli=1"
              iconSrc="/assets/icons/googleplay-icon.svg"
              iconAlt="Google Play"
              caption="Get it on"
              label="Google Play"
            />
            <DarkStoreButton
              href="https://apps.apple.com/us/app/coast-trade-digital-assets/id6444920508"
              iconSrc="/assets/icons/apple-icon.svg"
              iconAlt="App Store"
              caption="Download on"
              label="App Store"
            />
          </div>
        </div>

        <div className="relative h-[360px] w-full">
          <Image
            src="/assets/images/join.png"
            alt=""
            fill
            quality={95}
            sizes="100vw"
            className="object-cover object-right-bottom"
          />
        </div>
      </section>

      {/* Desktop layout */}
      <section className="relative hidden overflow-hidden bg-coast-navy text-white md:block">
        <div className="absolute inset-0 z-0">
          <Image
            src="/assets/images/join.png"
            alt=""
            fill
            quality={95}
            sizes="100vw"
            className="object-cover object-center"
          />
        </div>

        <div className="relative z-10 mx-auto max-w-[1280px] px-5 py-12 md:px-10 md:py-16 lg:py-30">
          <div className="max-w-[420px]">
            <h2 className="text-[28px] font-bold leading-tight md:text-[30px] lg:text-[32px]">
              Want hassle-free trading?
            </h2>
            <p className="mt-4 text-[15px] leading-relaxed text-white md:text-base">
              Join the Coast family on the journey to a seamless trading experience
            </p>

            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
              <DarkStoreButton
                href="https://play.google.com/store/apps/details?id=ng.coast.app&pli=1"
                iconSrc="/assets/icons/googleplay-icon.svg"
                iconAlt="Google Play"
                caption="Get it on"
                label="Google Play"
              />
              <DarkStoreButton
                href="https://apps.apple.com/us/app/coast-trade-digital-assets/id6444920508"
                iconSrc="/assets/icons/apple-icon.svg"
                iconAlt="App Store"
                caption="Download on"
                label="App Store"
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}