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

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 CryptoHero() {
  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-[600px] self-center pt-4 md:pt-10">
              <h1 className="text-[36px] font-bold leading-[1.05] tracking-[-0.01em] sm:text-[44px] md:text-[52px] lg:text-[60px]">
                Sell your crypto for Naira in minutes
              </h1>
              <p className="mt-5 max-w-[520px] text-[15px] leading-relaxed text-white/85 md:mt-6 md:text-base">
                Looking to sell crypto in Nigeria and get paid instantly?<br />
                With Coast, you can convert your digital assets to Naira in minutes. Fast. Easy. Reliable.
              </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-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/crypto-hero.png"
                  alt="Coast Trade Crypto screen with Bitcoin and Tether prices"
                  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 Crypto Rates in Nigeria",
    description: "We offer competitive, real-time rates so you always get the best value for your crypto.",
    iconSrc: "/assets/icons/best-rate.svg",
  },
  {
    title: "Instant Crypto to Naira Payouts",
    description: "Once your transaction is confirmed on the blockchain, your funds are paid instantly — straight to your bank account or wallet.",
    iconSrc: "/assets/icons/instant.svg",
  },
  {
    title: "Zero Fees",
    description: "You get what you see.",
    iconSrc: "/assets/icons/zero.svg",
  },
  {
    title: "24/7 Availability",
    description: "Day or night, holidays or not — we are always available to help you out.",
    iconSrc: "/assets/icons/avail.svg",
  },
];

type Stat = {
  value: string;
  label: string;
};

const cryptoStats: Stat[] = [
  { value: "$10,000,000", label: "Trades Executed" },
  { value: "3,000", label: "successful crypto trades" },
  { value: "$50,000", label: "Maximum Payout per transaction" },
];

type SupportedAsset = {
  name: string;
  ticker: string;
  iconSrc: string;
};

const supportedAssets: SupportedAsset[] = [
  { name: "Bitcoin", ticker: "BTC", iconSrc: "/assets/images/btc.png" },
  { name: "Ethereum", ticker: "ETH", iconSrc: "/assets/images/eth.png" },
  { name: "Tether", ticker: "USDT", iconSrc: "/assets/images/tether.png" },
  { name: "USD Coin", ticker: "USDC", iconSrc: "/assets/images/usd.png" },
];

function CryptoBenefitsSection() {
  return (
    <section className="bg-coast-ink text-white">
      <div className="mx-auto max-w-[1100px] px-5 py-16 md:px-10 md:py-20">
        <h2 className="mx-auto max-w-[640px] text-center text-[28px] font-bold leading-tight md:text-[40px] lg:text-[44px]">
          Coast is the #1 Crypto to Naira app
        </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 className="mt-8 grid gap-10 pt-12 sm:grid-cols-3">
          {cryptoStats.map((stat) => (
            <div key={stat.label} className="text-center">
              <p className="text-[32px] font-bold leading-none md:text-[36px]">
                {stat.value}
              </p>
              <p className="mt-2 text-[14px] text-[#9B9B9B] md:text-[15px]">
                {stat.label}
              </p>
            </div>
          ))}
        </div>

        <div className="mt-16 border-t border-white/10">
          <p className="text-center text-[15px] text-white pt-8">
            Support for the popular assets
          </p>
          <ul className="mt-6 flex flex-col items-center gap-6 md:flex-row md:flex-wrap md:justify-center md:gap-x-14 md:gap-y-4">
            {supportedAssets.map((asset) => (
              <li key={asset.ticker} className="flex items-center gap-2">
                <Image
                  src={asset.iconSrc}
                  alt={asset.name}
                  width={28}
                  height={28}
                  className="h-7 w-7"
                />
                <span className="text-[15px] font-semibold">
                  {asset.name}{" "}
                  <span className="text-white/55">{asset.ticker}</span>
                </span>
              </li>
            ))}
          </ul>
        </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 trade crypto",
    description:
      "Choose your coin and network you want to send from your exchange",
  },
  {
    number: 3,
    title: "Send crypto to wallet address",
    description:
      "Copy the exact wallet address we give you and send the crypto to your wallet",
  },
  {
    number: 4,
    title: "Get credited instantly",
    description:
      "Get the value for your crypto instantly in  your account without any fees",
  },
];

function HowToSell() {
  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 Sell Crypto in 4 Simple Steps
          </h2>
          <p className="mt-3 text-[15px] leading-relaxed text-coast-navy/75 md:text-base">
            Trading your crypto to cash is very easy with Coast. Here’s how to get started
          </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 CryptoPage() {
  return (
    <main className="flex-1">
      <CryptoHero />
      <CryptoBenefitsSection />
      <HowToSell />
      <FAQCrypto />
      <JoinCTA />
      <Footer />
    </main>
  );
}