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 FAQBill from "@/components/sections/FAQBill";

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 BillsHero() {
  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-[500px] 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]">
                Pay bills in seconds on Coast
              </h1>
              <p className="mt-2 max-w-[520px] text-[15px] leading-relaxed text-white/85 md:mt-2 md:text-base">
                No more jumping between apps. Pay your bills, top up airtime, buy data bundles,
                recharge your prepaid meter, or fund your betting wallet instantly
              </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/5] w-full">
                <Image
                  src="/assets/images/utility-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 FeatureBlock = {
  title: string;
  intro: string;
  bullets: string[];
  imageSrc: string;
  imageAlt: string;
  imageSide: "left" | "right";
};

const featureBlocks: FeatureBlock[] = [
  {
    title: "Buy airtime from any Nigerian mobile network.",
    intro:
      "Purchase airtime on MTN, Airtel, Glo, 9mobile and get instant delivery on every recharge",
    bullets: [
      "Works 24/7 — even at 2 AM",
      "No failed transactions, ever",
      "Same price for you and your friends",
    ],
    imageSrc: "/assets/images/buy1.png",
    imageAlt: "Coast airtime topup screen",
    imageSide: "left",
  },
  {
    title: "Buy internet data and subscribe to data plans easily",
    intro:
      "Purchase airtime on MTN, Airtel, Glo, 9mobile and get instant delivery on every recharge",
    bullets: [
      "Instant activation after recharge (browse immediately)",
      "Works on phones, MiFi, routers",
      "Choose from dozens of internet data plans in seconds.",
    ],
    imageSrc: "/assets/images/buy2.png",
    imageAlt: "Coast data subscription screen",
    imageSide: "right",
  },
  {
    title: "Buy units in seconds and get your token instantly.",
    intro:
      "Recharge your prepaid meter on any major DisCo and receive your token in seconds.",
    bullets: [
      "Token delivered in under 10 seconds",
      "Works with all major Nigerian DisCos",
      "Track your purchase history anytime",
    ],
    imageSrc: "/assets/images/buy3.png",
    imageAlt: "Coast electricity units screen",
    imageSide: "left",
  },
  {
    title: "Pay your TV subscriptions on time and easily.",
    intro:
      "Renew DSTV, GOtv, Startimes & Internet Never miss Champions League or Zee World again.",
    bullets: [
      "Instant activation – no downtime",
      "Pay for family & friends easily",
      "Never miss a show again.",
    ],
    imageSrc: "/assets/images/buy4.png",
    imageAlt: "Coast data subscription screen",
    imageSide: "right",
  },
  {
    title: "Fund Your Betting Account Instantly",
    intro:
      "Top up your favorite betting wallet directly from your Coast account .",
    bullets: [
      "100% automatic – no screenshot, no WhatsApp",
      "Zero extra charges",
      "Works 24/7, even during big matches",
    ],
    imageSrc: "/assets/images/buy5.png",
    imageAlt: "Coast electricity units screen",
    imageSide: "left",
  },
];

function CheckBullet() {
  return (
    <span className="flex h-6 w-6 shrink-0 items-center justify-center">
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden>
        <path
          d="M5 12.5L10 17L19 8"
          stroke="#0E005A"
          strokeWidth="2.4"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </span>
  );
}

function FeatureBlockRow({ block }: { block: FeatureBlock }) {
  const imageOnLeft = block.imageSide === "left";
  return (
    <div className="grid items-center gap-4 md:grid-cols-2 md:gap-2">
      <div
        className={`relative aspect-square w-full max-w-[460px] mx-auto md:mx-0 ${imageOnLeft ? "md:order-1" : "md:order-2"
          }`}
      >
        <div className="absolute inset-0 rounded-full" />
        <div className="relative z-10 flex h-full w-full items-center justify-center p-3">
          <div className="relative h-full w-full">
            <Image
              src={block.imageSrc}
              alt={block.imageAlt}
              fill
              quality={95}
              sizes="(max-width: 768px) 80vw, 460px"
              className="object-contain"
            />
          </div>
        </div>
      </div>

      <div className={imageOnLeft ? "md:order-2" : "md:order-1"}>
        <h3 className="text-[24px] font-bold leading-tight text-coast-navy md:text-[28px] lg:text-[32px]">
          {block.title}
        </h3>
        <p className="mt-4 text-[15px] leading-relaxed text-coast-ink/75 md:text-base">
          {block.intro}
        </p>
        <ul className="mt-6 flex flex-col gap-3">
          {block.bullets.map((b) => (
            <li key={b} className="flex items-start gap-3">
              <CheckBullet />
              <span className="text-[15px] text-coast-ink/85 md:text-base">{b}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

function SettleEverythingSection() {
  return (
    <section className="bg-white">
      <div className="mx-auto max-w-[1280px] px-5 py-16 md:px-10 md:py-14">
        <div className="mx-auto max-w-[720px] text-center">
          <h2 className="text-[28px] font-bold leading-tight text-coast-navy md:text-[36px] lg:text-[40px]">
            Settle Everything in Seconds with Coast
          </h2>
          <p className="mt-3 text-[15px] leading-relaxed text-coast-ink/75 md:text-base">
            Your journey with Coast starts here! Just follow these easy steps
          </p>
        </div>

        <div className="mt-16 flex flex-col gap-20 md:gap-24">
          {featureBlocks.map((block) => (
            <FeatureBlockRow key={block.title} block={block} />
          ))}
        </div>
      </div>
    </section>
  );
}

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

const steps: Step[] = [
  {
    number: 1,
    title: "Login to account",
    description:
      "Open the Coast app (or continue here if you’re already in)",
  },
  {
    number: 2,
    title: "Select your service",
    description:
      "Pick the service you want to use-  Airtime, Data, Electricity, Betting, etc.",
  },
  {
    number: 3,
    title: "Enter details",
    description:
      "Pay with your wallet by specifying the amount you wish to purchase",
  },
  {
    number: 4,
    title: "Get recharged",
    description:
      "You will get recharged instantly  allowing you connect with friends and family",
  },
];

function HowToPayBills() {
  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 Pay Bills & Recharge in 3 Taps
          </h2>
          <p className="mt-3 text-[15px] leading-relaxed text-coast-navy/75 md:text-base">
            Settle Everything in Seconds with Coast in simple 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>
  );
}

export default function BillsPage() {
  return (
    <main className="flex-1">
      <BillsHero />
      <SettleEverythingSection />
      <HowToPayBills />
      <FAQBill />
      <JoinCTA />
      <Footer />
    </main>
  );
}