"use client";

import Image from "next/image";
import Link from "next/link";
import { useState } from "react";
import Navbar from "@/components/layout/Navbar";
import Footer from "@/components/layout/Footer";
import FAQ from "@/components/sections/FAQ";
import JoinCTA from "@/components/sections/JoinCTA";

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 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 TransfersHero() {
  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]">
                Send, receive, and move money in minutes
              </h1>
              <p className="mt-2 max-w-[520px] text-[15px] leading-relaxed text-white/85 md:mt-2 md:text-base">
                Explore an easier and better way to make payments, manage your money whenever you
                want
              </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/transfer-img.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>
  );
}

function DigitalBankSection() {
  const checklist = [
    "Local NGN bank account details",
    "Instant account creation (no paperwork)",
    "Real-time balance updates",
  ];

  return (
    <section className="bg-white">
      <div className="mx-auto max-w-[1280px] px-5 py-8 md:px-10 md:py-0">
        <div className="grid items-center gap-10 md:grid-cols-2 md:gap-16">
          <div className="relative aspect-[5/5] w-full max-w-[480px] mx-auto md:mx-0">
            <Image
              src="/assets/images/influencer.png"
              alt="Person holding Coast app"
              fill
              quality={95}
              sizes="(max-width: 768px) 100vw, 480px"
              className="object-contain object-bottom"
            />
          </div>

          <div>
            <h2 className="text-[28px] font-bold leading-tight text-coast-navy md:text-[36px] lg:text-[30px]">
              Your Digital Bank Account, Reimagined and Get Paid Without the Hassle
            </h2>
            <p className="mt-5 text-[15px] leading-relaxed text-coast-ink/75 md:text-base">
              With a Coast.ng account, you get more than just a wallet — you get a fully functional
              bank account designed for cross-border living and business.
            </p>

            <h3 className="mt-8 text-[18px] font-bold text-coast-navy md:text-[20px]">
              What you get:
            </h3>
            <ul className="mt-4 flex flex-col gap-4">
              {checklist.map((item) => (
                <li key={item} className="flex items-start gap-3">
                  <CheckBullet />
                  <span className="text-[15px] text-coast-ink/85 md:text-base">{item}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

type StepCard = {
  title: string;
  intro: string;
  bullets: string[];
};

const stepCards: StepCard[] = [
  {
    title: "Get Paid Without the Hassle",
    intro:
      "Whether you’re receiving salary, client payments, or family support — Coast.ng makes it seamless.",
    bullets: [
      "Receive money from other Coast.ng users",
      "Share your account details",
      "Get notified instantly when funds arrive",
    ],
  },
  {
    title: "Safe and secure funds",
    intro: "Your money is safe with us",
    bullets: [
      "Encrypted transactions",
      "PIN & biometric protection",
      "KYC-verified accounts",
    ],
  },
];

function StepAccordion({ card }: { card: StepCard }) {
  const [open, setOpen] = useState(true);
  return (
    <div className="rounded-2xl bg-white p-6 shadow-[0_2px_10px_-4px_rgba(2,16,58,0.08)] md:p-7">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        className="flex w-full items-center justify-between gap-4 text-left"
      >
        <span className="text-[18px] font-bold text-coast-navy md:text-[20px]">
          {card.title}
        </span>
        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-coast-blue-soft/60">
          <svg
            width="14"
            height="14"
            viewBox="0 0 14 14"
            fill="none"
            aria-hidden
            className={`transition-transform ${open ? "" : "rotate-180"}`}
          >
            <path
              d="M3 9L7 5L11 9"
              stroke="#1f5cff"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </span>
      </button>

      <div
        className={`grid transition-all duration-300 ${open ? "mt-4 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
          }`}
      >
        <div className="overflow-hidden">
          <p className="text-[15px] leading-relaxed text-coast-navy/85 md:text-base">
            {card.intro}
          </p>
          <ul className="mt-4 flex flex-col gap-3">
            {card.bullets.map((b) => (
              <li
                key={b}
                className="flex items-start gap-3 text-[15px] text-coast-navy md:text-base"
              >
                <span className="mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-coast-navy" />
                {b}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

function PerfectForEveryone() {
  return (
    <section className="bg-[#E2F2FF]">
      <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]">
            Perfect for everyone
          </h2>
          <p className="mt-1 text-[15px] leading-relaxed text-coast-navy/75 md:text-base">
            Your journey with Coast starts here! Just follow these easy steps
          </p>
        </div>

        <div className="mt-12 grid items-start gap-8 md:grid-cols-2 md:gap-12">
          <div className="flex flex-col gap-6">
            {stepCards.map((card) => (
              <StepAccordion key={card.title} card={card} />
            ))}
          </div>

          <div className="relative mx-auto w-full max-w-[720px] md:mx-0">
            <div className="relative aspect-[5/5] w-full">
              <Image
                src="/assets/images/perfect.png"
                alt="Coast wallet on iPhone showing transaction history"
                fill
                quality={95}
                sizes="(max-width: 768px) 80vw, 420px"
                className="object-contain object-bottom"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

export default function TransfersPage() {
  return (
    <main className="flex-1">
      <TransfersHero />
      <DigitalBankSection />
      <PerfectForEveryone />
      <FAQ />
      <JoinCTA />
      <Footer />
    </main>
  );
}