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

const stats = [
  { num: "Ξ 48.3", label: "Total Staked" },
  { num: "312", label: "Active Challenges" },
  { num: "89", label: "Streaks Completed" },
  { num: "Ξ 12.1", label: "ETH Returned" },
];

export default function Hero() {
  return (
    <section className="relative min-h-screen flex items-center justify-center px-6 pt-28 pb-20 text-center">
     
      <div
        className="absolute inset-0 opacity-30"
        style={{
          backgroundImage:
            "linear-gradient(#1c2128 1px, transparent 1px), linear-gradient(90deg, #1c2128 1px, transparent 1px)",
          backgroundSize: "60px 60px",
          maskImage:
            "radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 80%)",
        }}
      />
      
      <div
        className="absolute top-[10%] left-1/2 -translate-x-1/2 w-[700px] h-[400px] pointer-events-none"
        style={{
          background:
            "radial-gradient(ellipse, rgba(63,185,80,0.08) 0%, transparent 70%)",
        }}
      />

      <div className="relative max-w-3xl mx-auto">
        
        <div
          className="opacity-0 fade-up inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full mb-7 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] inline-block" />
        <p className="text-[14px]">On-Chain Accountability</p>  
        </div>

        
        <h1
          className="opacity-0 text-white fade-up delay-100 font-serif font-normal leading-[1.08] tracking-tight mb-6"
          style={{ fontSize: "clamp(48px, 7vw, 82px)" }}
        >
          Commit every day.
          <br />
          <em className="italic text-[#3fb950]">Or lose your Money.</em>
        </h1>

        
        <p className="opacity-0 fade-up delay-200 text-[#768390] text-lg font-light leading-relaxed max-w-xl mx-auto mb-10">
          Stake ETH. Build a 30-day GitHub streak. Miss a single day your
          stake is locked and the challenge resets. Skin in the game, on-chain.
        </p>

        
        <div className="opacity-0 fade-up delay-300 flex items-center justify-center gap-4 flex-wrap">
          <Link
            href="/startChallenge"
            className="inline-flex items-center gap-2.5 bg-[#3fb950] text-black font-semibold text-[15px] px-7 py-3.5 rounded-lg 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 8px 30px rgba(63,185,80,0.25)")
            }
            onMouseLeave={(e) =>
              (e.currentTarget.style.boxShadow = "0 0 0 0 transparent")
            }
          >
            
            Start a Challenge
          </Link>
          <Link
            href="#how-it-works"
            className="inline-flex items-center gap-2 text-[#768390] text-sm px-6 py-3.5 rounded-lg border border-[#2d3748] hover:text-[#e6edf3] hover:border-[#768390] transition-all no-underline"
          >
            See how it works
            <ArrowRight size={14} />
          </Link>
        </div>

        
        <div className="opacity-0 fade-up delay-400 flex justify-center gap-12 mt-16 pt-12 border-t border-[#1c2128] flex-wrap">
          {stats.map((s) => (
            <div key={s.label} className="text-center">
              <div className="font-mono text-[28px] font-semibold text-[#e6edf3]">
                {s.num}
              </div>
              <div className="text-[11px] text-[#768390] mt-1 uppercase tracking-widest">
                {s.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
