import Image from "next/image";
import Link from "next/link";
import Navbar from "../layout/Navbar";

function StoreButton({
  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-white px-5 py-2 text-coast-ink shadow-sm transition hover:translate-y-[-1px] hover:shadow-md md:w-auto md:justify-start"
    >
      <Image src={iconSrc} alt={iconAlt} width={28} height={28} className="h-7 w-7" />
      <span className="flex flex-col leading-tight">
        <span className="text-[10px] font-semibold uppercase tracking-wide text-coast-ink/70">
          {caption}
        </span>
        <span className="text-base font-semibold">{label}</span>
      </span>
    </Link>
  );
}

export default function Hero() {
  return (
    <section className="relative overflow-hidden bg-coast-navy text-white">
      <Navbar />

      <div className="mx-auto max-w-[1280px] px-5 pt-6 md:px-10 md:pt-10">
        <div className="grid items-end gap-10 lg:grid-cols-[1.05fr_1fr] lg:gap-8">
          <div className="max-w-[600px] self-center pb-10 md:pb-16 lg:pb-24">
            <h1 className="text-[36px] font-bold leading-[1.1] tracking-[-0.01em] sm:text-[44px] md:text-[50px] lg:text-[56px]">
              The best platform to trade your digital assets for instant cash
            </h1>
            <p className="mt-5 max-w-[520px] text-[15px] leading-relaxed text-white md:mt-6 md:text-base">
              At Coast, we are 100% committed to providing you swift and secured exchange of your
              digital assets and cryptocurrencies.
            </p>

            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:gap-4">
              <StoreButton
                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"
              />
              <StoreButton
                href="https://apps.apple.com/us/app/coast-trade-digital-assets/id6444920508"
                iconSrc="/assets/icons/apple.svg"
                iconAlt="App Store"
                caption="Download on"
                label="App Store"
              />
            </div>
          </div>

          <div className="relative mx-auto w-full max-w-[560px] self-end lg:max-w-none">
            <div className="relative aspect-[2785/3028] w-full">
              <Image
                src="/assets/images/hero-img.png"
                alt="Coast app on iPhone"
                fill
                priority
                sizes="(max-width: 1024px) 100vw, 600px"
                className="object-contain object-bottom"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}