"use client";
import Link from "next/link";
import { Clock } from "lucide-react";

export default function CTA() {
  return (
    <section className="relative py-32 px-6 text-center overflow-hidden">
     
      <div
        className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse, rgba(63,185,80,0.07) 0%, transparent 70%)",
        }}
      />

      <div className="relative max-w-2xl mx-auto">
        <div
          className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full mb-6 border text-[11px] font-mono uppercase tracking-widest text-[#3fb950]"
          style={{
            background: "#1a3a22",
            borderColor: "rgba(63,185,80,0.3)",
          }}
        >
          <span className="w-1.5 h-1.5 rounded-full bg-[#3fb950] logo-pulse inline-block" />
          <p className="text-[14px]">Ready to stake?</p>
        </div>

        <h2
          className="font-serif text-white font-normal leading-[1.1] mb-5"
          style={{ fontSize: "clamp(36px, 5vw, 62px)" }}
        >
          Your next commit
          <br />
          is{" "}
          <em className="italic text-[#3fb950]">already overdue.</em>
        </h2>

        <p className="text-[#768390] text-[17px] mb-10 max-w-sm mx-auto leading-relaxed">
          Minimum stake is 0.01 ETH. No maximum. Your discipline is the only
          variable.
        </p>

        <Link
          href="#"
          className="inline-flex items-center gap-3 bg-[#3fb950] text-black font-semibold text-base px-8 py-4 rounded-xl hover:bg-[#4de066] hover:-translate-y-px transition-all no-underline"
          style={{ boxShadow: "0 0 0 0 transparent" }}
          onMouseEnter={(e) =>
            (e.currentTarget.style.boxShadow =
              "0 12px 40px rgba(63,185,80,0.3)")
          }
          onMouseLeave={(e) =>
            (e.currentTarget.style.boxShadow = "0 0 0 0 transparent")
          }
        >
          <Clock size={20} />
          <p>Sign in with Clock</p>
        </Link>
      </div>
    </section>
  );
}
