"use client";

import Image from "next/image";
import Link from "next/link";
import { logEvent } from "@/utils/analytics";


import bannerAdsBg from "@/assets/images/bannerAdsBg.png";
import phoneImg from "@/assets/images/Phone.png";
import googlePlayBadge from "@/assets/images/googlePlay.png";
import appStoreBadge from "@/assets/images/appleStore.png";

export default function AppDownloadBanner() {
  return (
    <section className="relative rounded-2xl mb-6 text-white px-6 py-10 md:px-12 md:py-0 overflow-hidden">
      <Image
        src={bannerAdsBg}
        alt="Background"
        fill
        className="object-cover object-center"
        priority
      />
      <div className="relative flex flex-col md:flex-row items-stretch justify-between gap-10">
        {/* LEFT TEXT SECTION */}
        <div className="flex-1 flex flex-col justify-between text-center md:text-left space-y-4 md:py-10 md:pl-28 pb-8">
          <div className="space-y-3">
            <p className="text-sm md:text-base opacity-90">
              ReadyEats for iOS &amp; Android
            </p>

            <h2 className="text-2xl md:text-4xl font-semibold leading-snug">
              Take us on your next craving!
            </h2>

            <p className="text-2xl md:text-4xl font-semibold leading-snug">
              Your food, your flavour, <br /> delivered fast.
            </p>
          </div>

          {/* DOWNLOAD BUTTONS */}
          <div className="mt-6 flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4">
            <Link
              href="https://apps.apple.com/us/app/ReadyEats/id6738780714"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => logEvent("app_install_click", { store: "app_store", platform: "ios" })}
            >
              <Image
                src={appStoreBadge}
                alt="Download on the App Store"
                width={130}
                height={45}
                className="h-auto w-32 md:w-36 hover:opacity-90 transition"
              />
            </Link>

            <Link
              href="https://play.google.com/store/apps/details?id=com.food.hfdelivery"
              target="_blank"
              rel="noopener noreferrer"
              onClick={() => logEvent("app_install_click", { store: "play_store", platform: "android" })}
            >
              <Image
                src={googlePlayBadge}
                alt="Get it on Google Play"
                width={150}
                height={50}
                className="h-auto w-36 md:w-40 hover:opacity-90 transition"
              />
            </Link>
          </div>
        </div>

        {/* RIGHT IMAGE SECTION */}
        <div className="hidden md:flex flex-1 items-end justify-center md:justify-end md:pr-20 lg:pr-28 xl:pr-36">
          <div className="relative w-48 lg:w-56 xl:w-64">
            <Image
              src={phoneImg}
              alt="App preview on mobile"
              className="w-full h-auto drop-shadow-2xl"
              priority
            />
          </div>
        </div>
      </div>
    </section>
  );
}