"use client";

import { useEffect, useState } from "react";
import Link from "next/link";

const qrPattern = [
  1, 0, 0, 1,
  0, 1, 0, 0,
  0, 0, 1, 0,
  1, 0, 0, 1,
];

const cards = [
  {
    icon: "◇",
    title: "Credit Line on UPI",
    description:
      "A pre-approved line to spend from any UPI QR, underwritten on your payment behaviour rather than documents.",
    label: "CL ON UPI · FLAGSHIP",
    href: "/upi/credit-line",
  },
  {
    icon: "≡",
    title: "Credit Card on UPI",
    description:
      "Link your ShePays co-branded credit card to UPI and pay by QR anywhere cards were never accepted.",
    label: "CC ON UPI",
    href: "/upi/credit-card",
  },
  {
    icon: "⌗",
    title: "Scan & Pay",
    description:
      "Point, scan, done. Pay any UPI QR code in seconds, at any merchant across India.",
    label: "SCAN & PAY",
    href: "/upi/scan-pay",
  },
  {
    icon: "⇄",
    title: "Send & receive money",
    description:
      "Transfer to any bank account, UPI ID or phone number instantly, around the clock.",
    label: "SEND / RECEIVE",
    href: "/upi/send-receive",
  },
  {
    icon: "✦",
    title: "UPI Lite",
    description:
      "An on-device balance for small everyday spends — no PIN, no bank server round-trip, no clutter in your statement.",
    label: "UPI LITE",
    href: "/upi/lite",
  },
  {
    icon: "◐",
    title: "UPI Lite Autopay",
    description:
      "Let small recurring payments run themselves straight from your UPI Lite balance.",
    label: "UPI LITE AUTOPAY",
    href: "/upi/lite-autopay",
  },
  {
    icon: "Ⅱ",
    title: "UPI Autopay",
    description:
      "Set up recurring mandates once — subscriptions, SIPs, bills — and let them run on schedule.",
    label: "UPI AUTOPAY",
    href: "/upi/autopay",
  },
  {
    icon: "◔",
    title: "One-time mandates",
    description:
      "Block an amount now and let it debit later, for bookings, offers and instalments.",
    label: "ONE-TIME MANDATES",
    href: "/upi/mandates",
  },
  {
    icon: "⊙",
    title: "UPI Number",
    description:
      "Share a simple UPI number instead of your account details. Easier to give out, safer to share.",
    label: "UPI NUMBER",
    href: "/upi-number",
  },
];

export default function UpiHeroSection() {
  const [activeShift, setActiveShift] = useState(false);

  useEffect(() => {
    const timer = setInterval(() => {
      setActiveShift((prev) => !prev);
    }, 1400);

    return () => clearInterval(timer);
  }, []);

  return (
    <section className="w-full bg-white">
      <div
        className="
          mx-auto
          w-full
          max-w-[1180px]
          px-5
          py-16
          sm:px-6
          md:py-20
          lg:px-0
          lg:py-[86px]
        "
      >
        {/* TOP CONTENT */}
        <div className="max-w-[660px]">
          <div className="flex items-center gap-[10px]">
            {/* <span className="h-px w-[28px] bg-[#ddd3de]" />

            <span className="text-[10px] font-medium tracking-[0.22em] text-[#8d7f90]">
              07
            </span> */}

            <span className="text-[10px] font-semibold uppercase tracking-[0.26em] text-[#5e4e64]">
              UPI Services
            </span>
          </div>

          <h1
            className="
              mt-[24px]
              max-w-[620px]
              text-[40px]
              font-[800]
              leading-[1.02]
              tracking-[-0.05em]
              text-[#250022]
              sm:text-[48px]
              md:text-[48px]
              lg:text-[48px]
            "
          >
            Everything UPI can do, in 
            <br className="hidden sm:block" />
            one place.
          </h1>

          <p
            className="
              font-nunito
              mt-[18px]
              max-w-[550px]
              text-[15px]
              leading-[1.7]
              text-[#6d6172]
              sm:text-[17px]
            "
          >
            ShePays runs on NPCI-licensed TPAP infrastructure, so every part of
            the UPI stack is available to her — including the part that turns
            her payment history into credit.
          </p>
        </div>

        {/* FEATURE CARD */}
        <div
          className="
            mt-[56px]
            grid
            grid-cols-1
            gap-10
            overflow-hidden
            rounded-[22px]
            bg-[#31002e]
            px-6
            py-10
            shadow-[0_22px_50px_rgba(49,0,46,0.12)]
            sm:px-8
            md:px-10
            lg:mt-[64px]
            lg:grid-cols-[1.2fr_0.8fr]
            lg:items-center
            lg:px-[44px]
            lg:py-[44px]
          "
        >
          {/* LEFT */}
          <div>
            <div
              className="
                inline-flex
                items-center
                rounded-full
                bg-gradient-to-r
                from-[#a328d7]
                via-[#ef1495]
                to-[#ff6f2d]
                px-[12px]
                py-[6px]
                text-[9px]
                font-bold
                uppercase
                tracking-[0.16em]
                text-white
              "
            >
              Our flagship
            </div>

            <h2
              className="
                mt-[18px]
                text-[34px]
                font-[800]
                leading-[1.05]
                tracking-[-0.04em]
                text-white
                sm:text-[40px]
                lg:text-[44px]
              "
            >
              Credit Line on UPI
            </h2>

            <p
              className="
                font-nunito
                mt-[14px]
                max-w-[560px]
                text-[14px]
                leading-[1.75]
                text-white/80
                sm:text-[16px]
              "
            >
              The reason we exist. A pre-approved credit line she can spend straight from any UPI QR. It is underwritten on how she already pays rather than on a salary slip she was never asked to keep. Credit reaches 15 crore women who use UPI monthly but have no bureau file.
            </p>

            <div className="mt-[20px] flex flex-wrap gap-[9px]">
              <Tag>Behavioural underwriting</Tag>
              <Tag>No paperwork</Tag>
              <Tag>Spend at 50 Cr+ merchants</Tag>
            </div>
          </div>

          {/* RIGHT QR */}
          <div className="flex flex-col items-center justify-center">
            <div
              className="
                rounded-[18px]
                bg-white
                p-[14px]
                shadow-[0_14px_40px_rgba(0,0,0,0.08)]
                sm:p-[16px]
              "
            >
              <div
                className="
                  grid
                  grid-cols-4
                  gap-[7px]
                  sm:gap-[8px]
                "
              >
                {qrPattern.map((active, index) => (
                  <div
                    key={index}
                    className={`
                      h-[25px]
                      w-[25px]
                      rounded-[4px]
                      sm:h-[28px]
                      sm:w-[28px]
                      ${
                        active
                          ? `
                            bg-gradient-to-br
                            from-[#a528dd]
                            via-[#e60a9b]
                            to-[#ff3c7f]
                            transition-transform
                            duration-[1400ms]
                            ease-in-out
                            ${
                              activeShift
                                ? "scale-[1.08] rotate-[2deg]"
                                : "scale-100 rotate-0"
                            }
                          `
                          : "bg-[#d8d4da]"
                      }
                    `}
                  />
                ))}
              </div>
            </div>

            <p
              className="
                mt-[14px]
                text-[8px]
                font-semibold
                uppercase
                tracking-[0.28em]
                text-white/55
              "
            >
              Scan • Spend • Build credit
            </p>
          </div>
        </div>

        {/* =========================
            PART 2 — UPI SERVICES GRID
        ========================== */}

        <div
        className="
            mt-[26px]
            grid
            grid-cols-1
            gap-[16px]
            sm:grid-cols-2
            lg:grid-cols-3
        "
        >
        {cards.map((card) => (
            <Link
            key={card.title}
            href={card.href}
            onMouseMove={(e) => {
                const rect = e.currentTarget.getBoundingClientRect();

                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;

                e.currentTarget.style.setProperty("--mouse-x", `${x}px`);
                e.currentTarget.style.setProperty("--mouse-y", `${y}px`);
            }}
            onMouseEnter={() => {
                window.dispatchEvent(new Event("card-cursor-enter"));
            }}
            onMouseLeave={() => {
                window.dispatchEvent(new Event("card-cursor-leave"));
            }}
                className="
                  group
                  relative
                  flex
                  min-h-[190px]
                  flex-col
                  overflow-hidden
                  rounded-[16px]
                  border
                  border-[#ece6ed]
                  bg-white
                  px-6
                  py-6
                  shadow-[0_6px_20px_rgba(42,0,45,0.05)]

                  transition-all
                  duration-300
                  ease-out

                  hover:-translate-y-[4px]
                  hover:shadow-[0_16px_36px_rgba(72,0,80,0.10)]

                  sm:min-h-[195px]
                  sm:px-10
                  sm:py-10
              "
            >
            {/* Animated top gradient border */}
            <span
                className="
                pointer-events-none
                absolute
                left-0
                top-0
                z-20
                h-[2px]
                w-full
                origin-left
                scale-x-0

                bg-gradient-to-r
                from-[#9d28e8]
                via-[#ed008c]
                to-[#ff6a23]

                transition-transform
                duration-500
                ease-out

                group-hover:scale-x-100
                "
            />

            {/* Soft hover glow */}
            <span
                className="
                  pointer-events-none
                  absolute
                  left-[var(--mouse-x)]
                  top-[var(--mouse-y)]
                  z-0
                  h-[180px]
                  w-[180px]
                  -translate-x-1/2
                  -translate-y-1/2
                  rounded-full

                  bg-[radial-gradient(circle,rgba(220,10,165,0.20)_0%,rgba(157,40,232,0.10)_35%,transparent_70%)]

                  opacity-0
                  blur-[28px]

                  transition-opacity
                  duration-300

                  group-hover:opacity-100
              "
            />


            {/* Icon */}
            <div
                className="
                relative
                z-10

                flex
                h-[42px]
                w-[42px]
                items-center
                justify-center

                rounded-[8px]
                border
                border-[#e9dded]
                bg-[#f8f2fb]

                text-[11px]
                font-semibold
                text-[#a023d4]

                transition-all
                duration-500
                ease-out

                group-hover:rotate-[-10deg]
                group-hover:border-transparent

                group-hover:bg-gradient-to-br
                group-hover:from-[#a824d7]
                group-hover:via-[#dc0aa5]
                group-hover:to-[#f00088]

                group-hover:text-white
                group-hover:shadow-[0_7px_18px_rgba(220,0,148,0.18)]
                "
            >
                {card.icon}
            </div>

            {/* Title */}
            <h3
                className="
                relative
                z-10

                mt-[18px]

                text-[14px]
                font-[700]
                leading-[1.35]
                text-[#250022]

                sm:text-[17px]
                "
            >
                {card.title}
            </h3>

            {/* Description */}
            <p
                className="
                relative
                z-10

                mt-[10px]

                text-[12px]
                leading-[1.65]
                text-[#75697b]

                sm:text-[15px]
                "
            >
                {card.description}
            </p>

            {/* Bottom label */}
            <p
                className="
                relative
                z-10

                mt-auto
                pt-[16px]

                text-[11px]
                font-semibold
                uppercase
                tracking-[0.24em]
                text-[#8b7b8d]
                "
            >
                {card.label}
            </p>
            </Link>
        ))}
        </div>
      </div>
    </section>
  );
}

function Tag({ children }: { children: React.ReactNode }) {
  return (
    <span
      className="
        inline-flex
        min-h-[30px]
        items-center
        rounded-full
        border
        border-white/20
        px-[12px]
        text-[13px]
        font-semibold
        text-white/85
      "
    >
      {children}
    </span>
    
  );
}