"use client"

import Link from "next/link"
import { motion, animate, useMotionValue, useInView } from "framer-motion"
import { ArrowRight, Building2, Wrench, CheckCircle2, Bell } from "lucide-react"
import { useRef, useEffect } from "react"

// ── Animated counter ─────────────────────────────────────────────
function Counter({ to, prefix = "", suffix = "" }: { to: number; prefix?: string; suffix?: string }) {
  const ref = useRef<HTMLSpanElement>(null)
  const inView = useInView(ref, { once: true, margin: "-80px" })

  useEffect(() => {
    if (!inView) return
    const ctrl = animate(0, to, {
      duration: 2,
      ease: "easeOut",
      onUpdate: (v) => {
        if (ref.current) {
          ref.current.textContent = prefix + Math.floor(v).toLocaleString() + suffix
        }
      },
    })
    return ctrl.stop
  }, [inView, to, prefix, suffix])

  return <span ref={ref}>{prefix}0{suffix}</span>
}

// ── Word-by-word text reveal ─────────────────────────────────────
function WordReveal({ text, className = "", delay = 0 }: { text: string; className?: string; delay?: number }) {
  const words = text.split(" ")
  return (
    <span className={className}>
      {words.map((word, i) => (
        <motion.span
          key={i}
          initial={{ opacity: 1, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: delay + i * 0.08, ease: "easeOut" }}
          className="inline-block mr-[0.25em]"
        >
          {word}
        </motion.span>
      ))}
    </span>
  )
}

// ── Gradient border CTA button ───────────────────────────────────
function GradientBorderBtn({ href, children }: { href: string; children: React.ReactNode }) {
  return (
    <div className="gradient-border-wrapper">
      <Link href={href} className="gradient-border-btn">
        {children}
      </Link>
    </div>
  )
}

// ── Mini dashboard mockup ────────────────────────────────────────
const DASHBOARD_CARDS = [
  { label: "Rent collected", value: "$12,400", sub: "This month", color: "text-emerald-400", dot: "bg-emerald-400" },
  { label: "Open requests", value: "3", sub: "Maintenance", color: "text-amber-400", dot: "bg-amber-400" },
  { label: "Occupancy", value: "94%", sub: "12/13 units", color: "text-indigo-400", dot: "bg-indigo-400" },
]

const STATS = [
  { prefix: "", to: 200, suffix: "+", label: "Active landlords" },
  { prefix: "", to: 5000, suffix: "+", label: "Units managed" },
  { prefix: "$", to: 2, suffix: "M+", label: "Rent tracked / mo" },
  { prefix: "", to: 98, suffix: "%", label: "Collection rate" },
]

function DashboardMockup() {
  return (
    <motion.div
      initial={{ opacity: 1, y: 40, rotateX: 8 }}
      animate={{ opacity: 1, y: 0, rotateX: 0 }}
      transition={{ duration: 0.9, delay: 0.5, ease: [0.16, 1, 0.3, 1] }}
      className="relative w-full max-w-2xl mx-auto"
    >
      <div className="absolute -inset-4 bg-gradient-to-r from-indigo-600/20 via-violet-600/20 to-indigo-600/20 rounded-3xl blur-3xl" />

      <div className="relative rounded-2xl border border-white/[0.08] bg-[#0f0f17] overflow-hidden shadow-2xl shadow-black/60">
        {/* Browser chrome */}
        <div className="flex items-center gap-2 border-b border-white/[0.06] bg-[#0a0a12] px-4 py-3">
          <div className="flex gap-1.5">
            <div className="h-3 w-3 rounded-full bg-red-500/60" />
            <div className="h-3 w-3 rounded-full bg-amber-500/60" />
            <div className="h-3 w-3 rounded-full bg-emerald-500/60" />
          </div>
          <div className="flex-1 mx-4 rounded-md bg-white/[0.04] px-3 py-1 text-xs text-white/30 font-mono">
            app.propertymanagement.network/dashboard
          </div>
        </div>

        <div className="p-5 space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-xs text-white/40">Good morning 👋</p>
              <p className="text-sm font-semibold text-white">Dashboard Overview</p>
            </div>
            <div className="flex items-center gap-1.5 rounded-lg bg-indigo-600/20 border border-indigo-500/30 px-3 py-1.5">
              <Bell className="h-3.5 w-3.5 text-indigo-400" />
              <span className="text-xs text-indigo-300">2 alerts</span>
            </div>
          </div>

          <div className="grid grid-cols-3 gap-3">
            {DASHBOARD_CARDS.map((c) => (
              <div key={c.label} className="rounded-xl border border-white/[0.06] bg-white/[0.03] p-3">
                <div className="flex items-center gap-1.5 mb-1.5">
                  <div className={`h-1.5 w-1.5 rounded-full ${c.dot}`} />
                  <span className="text-[10px] text-white/40">{c.label}</span>
                </div>
                <p className={`text-lg font-bold ${c.color}`}>{c.value}</p>
                <p className="text-[10px] text-white/30">{c.sub}</p>
              </div>
            ))}
          </div>

          <div className="rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden">
            <div className="px-4 py-2.5 border-b border-white/[0.04]">
              <p className="text-xs font-medium text-white/60">Recent Payments</p>
            </div>
            {[
              { name: "Sarah J.", amount: "$1,800", status: "paid", color: "text-emerald-400 bg-emerald-500/10" },
              { name: "Marcus L.", amount: "$1,350", status: "overdue", color: "text-red-400 bg-red-500/10" },
              { name: "Priya P.", amount: "$2,200", status: "pending", color: "text-amber-400 bg-amber-500/10" },
            ].map((row) => (
              <div key={row.name} className="flex items-center justify-between px-4 py-2.5 border-b border-white/[0.03] last:border-0">
                <div className="flex items-center gap-2">
                  <div className="h-6 w-6 rounded-full bg-indigo-600/30 flex items-center justify-center text-[9px] font-bold text-indigo-300">
                    {row.name[0]}
                  </div>
                  <span className="text-xs text-white/70">{row.name}</span>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-xs font-semibold text-white">{row.amount}</span>
                  <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${row.color}`}>{row.status}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Floating cards */}
      <motion.div
        animate={{ y: [0, -6, 0] }}
        transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
        className="absolute -right-8 top-16 hidden lg:block"
      >
        <div className="rounded-xl border border-emerald-500/20 bg-[#0f0f17]/90 backdrop-blur p-3 shadow-xl min-w-[140px]">
          <div className="flex items-center gap-2 mb-1">
            <CheckCircle2 className="h-4 w-4 text-emerald-400" />
            <span className="text-xs font-semibold text-white">Rent received</span>
          </div>
          <p className="text-lg font-bold text-emerald-400">$1,800</p>
          <p className="text-[10px] text-white/40">Unit 1A · Sarah J.</p>
        </div>
      </motion.div>

      <motion.div
        animate={{ y: [0, 6, 0] }}
        transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
        className="absolute -left-8 bottom-24 hidden lg:block"
      >
        <div className="rounded-xl border border-amber-500/20 bg-[#0f0f17]/90 backdrop-blur p-3 shadow-xl min-w-[160px]">
          <div className="flex items-center gap-2 mb-1">
            <Wrench className="h-4 w-4 text-amber-400" />
            <span className="text-xs font-semibold text-white">New request</span>
          </div>
          <p className="text-xs text-white/60">Leaking faucet</p>
          <p className="text-[10px] text-white/40 mt-0.5">Unit 2B · 2 min ago</p>
        </div>
      </motion.div>
    </motion.div>
  )
}

// ── Hero ──────────────────────────────────────────────────────────
export function Hero() {
  return (
    <section className="relative overflow-hidden pt-24 sm:pt-32 pb-12 sm:pb-16 min-h-screen flex flex-col justify-center">
      {/* Aurora background */}
      <div className="absolute inset-0 -z-10">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 h-[600px] w-[900px] rounded-full bg-indigo-600/20 blur-[120px]" />
        <div className="absolute top-20 left-1/4 h-[400px] w-[400px] rounded-full bg-violet-600/15 blur-[100px]" />
        <div className="absolute top-40 right-1/4 h-[300px] w-[300px] rounded-full bg-blue-600/10 blur-[80px]" />
        {/* Grid */}
        <div className="absolute inset-0" style={{
          backgroundImage: "linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)",
          backgroundSize: "60px 60px",
        }} />
        {/* Noise */}
        <div className="absolute inset-0 opacity-[0.025]" style={{
          backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")",
        }} />
      </div>

      <div className="mx-auto max-w-7xl px-4 sm:px-6 w-full">
        <div className="grid lg:grid-cols-2 gap-10 lg:gap-16 items-center">
          {/* Left — copy */}
          <div>
            {/* Badge */}
            <motion.div
              initial={{ opacity: 1, y: 16 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5 }}
              className="mb-6 inline-flex items-center gap-2 rounded-full border border-indigo-500/30 bg-indigo-500/10 px-4 py-1.5 text-xs font-medium text-indigo-300"
            >
              <span className="relative flex h-1.5 w-1.5">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75" />
                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-indigo-400" />
              </span>
              Trusted by 200+ landlords worldwide
            </motion.div>

            {/* Headline with word reveal */}
            <h1 className="text-4xl font-bold leading-[1.1] tracking-tight sm:text-5xl lg:text-6xl">
              <WordReveal text="Property management" delay={0.1} />
              {" "}
              <br className="hidden sm:block" />
              <span className="bg-gradient-to-r from-indigo-400 via-violet-400 to-indigo-400 bg-clip-text text-transparent bg-[length:200%] animate-gradient">
                <WordReveal text="without the chaos" delay={0.4} />
              </span>
            </h1>

            <motion.p
              initial={{ opacity: 1, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.8 }}
              className="mt-6 text-base sm:text-lg text-white/60 leading-relaxed"
            >
              Track rent, manage maintenance, monitor leases, and keep expenses organised — all in one dashboard built for independent landlords.
            </motion.p>

            {/* CTAs */}
            <motion.div
              initial={{ opacity: 1, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 1 }}
              className="mt-8 flex flex-col sm:flex-row flex-wrap gap-3"
            >
              {/* Gradient border primary CTA */}
              <div className="gradient-border-wrapper">
                <Link
                  href="/signup"
                  className="gradient-border-btn flex items-center gap-2"
                >
                  Start for free <ArrowRight className="h-4 w-4" />
                </Link>
              </div>

              <Link
                href="#features"
                className="flex items-center justify-center gap-2 rounded-xl border border-white/10 bg-white/[0.04] px-6 py-3.5 text-sm font-medium text-white/70 hover:text-white hover:bg-white/[0.08] transition-all"
              >
                See how it works
              </Link>
            </motion.div>

            {/* Trust signals */}
            <motion.div
              initial={{ opacity: 1 }}
              animate={{ opacity: 1 }}
              transition={{ duration: 0.6, delay: 1.2 }}
              className="mt-8 flex flex-wrap items-center gap-3 sm:gap-4 text-xs text-white/40"
            >
              {["Free plan forever", "No credit card required", "Setup in 5 minutes"].map((t) => (
                <div key={t} className="flex items-center gap-1.5">
                  <CheckCircle2 className="h-3.5 w-3.5 text-emerald-400" />
                  {t}
                </div>
              ))}
            </motion.div>

            {/* Animated stats */}
            <motion.div
              initial={{ opacity: 1, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 1.3 }}
              className="mt-10 grid grid-cols-2 sm:grid-cols-4 gap-4 pt-8 border-t border-white/[0.06]"
            >
              {STATS.map(({ prefix, to, suffix, label }) => (
                <div key={label}>
                  <p className="text-2xl font-bold text-white tabular-nums">
                    <Counter prefix={prefix} to={to} suffix={suffix} />
                  </p>
                  <p className="text-xs text-white/40 mt-0.5">{label}</p>
                </div>
              ))}
            </motion.div>
          </div>

          {/* Right — dashboard mockup */}
          <div className="hidden lg:flex justify-center">
            <DashboardMockup />
          </div>
        </div>
      </div>
    </section>
  )
}