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

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-[#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>
  );
}

function GiftcardsHero() {
  return (
    <section className="relative overflow-hidden bg-coast-navy text-white">
      <div className="absolute inset-0 z-0">
        <Image
          src="/assets/images/transfer-hero.png"
          alt=""
          fill
          priority
          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-6 md:px-10 md:pt-0">
          <div className="grid items-end gap-10 lg:grid-cols-[1.05fr_1fr] lg:gap-8">
            <div className="max-w-[450px] self-center pt-4 md:pt-10">
              <h1 className="text-[26px] font-bold leading-[1.1] tracking-[-0.01em] sm:text-[44px] md:text-[40px] lg:text-[50px]">
                Unlock the Value in Every Gift Card
              </h1>
              <p className="mt-2 max-w-[520px] text-[15px] leading-relaxed text-white/85 md:mt-2 md:text-base">
                Effortlessly trade your gift card securely and at unbeatable rates. Whether it&rsquo;s an
                Amazon spree you skipped or a Steam code from a friend, convert it to cash in minutes
                and fund your next adventure.
              </p>

              <div className="mt-4 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-icon.svg"
                  iconAlt="App Store"
                  caption="Download on"
                  label="App Store"
                />
              </div>
            </div>

            <div className="relative ml-auto w-full max-w-[560px] self-start pt-4 md:pt-6 lg:max-w-none">
              <div className="relative aspect-[5/4] w-full">
                <Image
                  src="/assets/images/giftcard-hero.png"
                  alt="Coast wallet on iPhone with deposit and withdrawal notifications"
                  fill
                  priority
                  quality={95}
                  sizes="(max-width: 1024px) 100vw, 600px"
                  className="object-contain object-right-top"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );

}

type Benefit = {
  title: string;
  description: string;
  iconSrc: string;
};

const benefits: Benefit[] = [
  {
    title: "Best Rates",
    description:
      "Get the best exchange rates on all giftcards. No lowball offers — just mouth-watering value.",
    iconSrc: "/assets/icons/best-rate.svg",
  },
  {
    title: "Instant Payouts",
    description:
      "Sell your card, watch the cash hit your wallet or bank account in seconds. No waiting games.",
    iconSrc: "/assets/icons/instant.svg",
  },
  {
    title: "Zero Hassle Security",
    description:
      "Our platform is built with ironclad encryption, so your trades are safe from start to finish. Trade with confidence",
    iconSrc: "/assets/icons/zero.svg",
  },
  {
    title: "24/7 Availability",
    description:
      "Day or night, holidays or not — your gift cards are always ready to cash out.",
    iconSrc: "/assets/icons/avail.svg",
  },
];

type Step = {
  number: number;
  title: string;
  description: string;
};

const steps: Step[] = [
  {
    number: 1,
    title: "Download & Sign Up",
    description:
      "Grab the Coast app and create your account in under 2 minutes — no paperwork, just your vibe.",
  },
  {
    number: 2,
    title: "Select & Scan",
    description:
      "Choose your gift card type, enter the code or snap a quick photo. We'll verify it instantly.",
  },
  {
    number: 3,
    title: "Trade & Withdraw",
    description:
      "Lock in your rate, confirm the deal, and boom — Naira in your pocket. Ready to spend or save.",
  },
  {
    number: 4,
    title: "Receive Cash",
    description:
      "Get the payment instantly in your account, ready to spend or transfer however you like.",
  },
];

function HowToGetStarted() {
  return (
    <section className="bg-[#E2F2FF]">
      <div className="mx-auto max-w-full px-5 py-16 md:px-10 md:py-24">
        <div className="mx-auto max-w-[720px] text-center">
          <h2 className="text-[28px] font-bold leading-tight text-coast-navy md:text-[36px]">
            How to Get Started
          </h2>
          <p className="mt-3 text-[15px] leading-relaxed text-coast-navy/75 md:text-base">
            Your journey with Coast starts here! Just follow these easy steps
          </p>
        </div>

        <ol className="mt-14 hidden md:flex">
          {steps.map((step, idx) => {
            const active = step.number === 1;
            const isLast = idx === steps.length - 1;
            const connectorColor = idx === 0 ? "bg-coast-blue" : "bg-white";
            return (
              <li key={step.number} className="flex flex-1 flex-col">
                <div className="flex items-center">
                  <div
                    className={`flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-white text-[28px] font-bold ${active
                      ? "border-[3px] border-coast-blue text-coast-blue"
                      : "text-coast-navy"
                      }`}
                  >
                    {step.number}
                  </div>
                  {!isLast && <div className={`h-1 flex-1 ${connectorColor}`} />}
                  {isLast && <div className="h-1 flex-1 bg-white" />}
                </div>
                <h3 className="mt-6 text-[18px] font-bold text-coast-navy md:text-[20px]">
                  {step.title}
                </h3>
                <p className="mt-2 max-w-[260px] text-[14px] leading-relaxed text-coast-navy/75 md:text-[15px]">
                  {step.description}
                </p>
              </li>
            );
          })}
        </ol>

        <ol className="mt-12 flex flex-col md:hidden">
          {steps.map((step, idx) => {
            const active = step.number === 1;
            const isLast = idx === steps.length - 1;
            const lineColor = idx === 0 ? "bg-coast-blue" : "bg-white";
            return (
              <li key={step.number} className="flex gap-6">
                <div className="flex flex-col items-center">
                  <div
                    className={`flex h-16 w-16 shrink-0 items-center justify-center rounded-full bg-white text-[28px] font-bold ${active
                      ? "border-[3px] border-coast-blue text-coast-blue"
                      : "text-coast-navy"
                      }`}
                  >
                    {step.number}
                  </div>
                  {!isLast && <div className={`w-1 flex-1 ${lineColor}`} />}
                </div>

                <div className={`flex-1 ${isLast ? "" : "pb-10"}`}>
                  <h3 className="mt-3 text-[20px] font-bold text-coast-navy">
                    {step.title}
                  </h3>
                  <p className="mt-2 text-[15px] leading-relaxed text-coast-navy/75">
                    {step.description}
                  </p>
                </div>
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}

function WhyTradeSection() {
  return (
    <section className="bg-coast-ink text-white">
      <div className="mx-auto max-w-[1100px] px-5 py-16 md:px-10 md:py-14">
        <h2 className="mx-auto max-w-[640px] text-center text-[28px] font-bold leading-tight md:text-[40px] lg:text-[48px]">
          Why Trade Gift Cards with Coast?
        </h2>

        <div className="mt-12 grid gap-5 md:grid-cols-2 md:gap-6">
          {benefits.map((benefit) => (
            <article
              key={benefit.title}
              className="rounded-2xl bg-white p-7 text-coast-ink md:p-8"
            >
              <span className="flex h-12 w-12 items-center justify-center rounded-full">
                <Image src={benefit.iconSrc} alt="" width={52} height={52} className="h-[52px] w-[52px]" />
              </span>
              <h3 className="mt-6 text-[18px] font-bold text-coast-ink md:text-[20px]">
                {benefit.title}
              </h3>
              <p className="mt-2 text-[14px] leading-relaxed text-coast-ink/70 md:text-[15px]">
                {benefit.description}
              </p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

export default function GiftcardsPage() {
  return (
    <main className="flex-1">
      <GiftcardsHero />
      <WhyTradeSection />
      <HowToGetStarted />
      <FAQGiftcard />
      <JoinCTA />
      <Footer />
    </main>
  );
}