"use client"

import { motion } from "framer-motion"
import { CreditCard, Wrench, FileText, TrendingUp, Bell, Shield, Building2, Users } from "lucide-react"

const fadeUp = (delay = 0) => ({
  initial: { opacity: 0, y: 24 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true },
  transition: { duration: 0.5, delay },
})

// 8 cards — 2 large (col-span-2) + 4 small + 2 large on last row = clean 4-col grid
const BENTO = [
  // Row 1: [Large 2] [Small 1] [Small 1]
  {
    icon: CreditCard,
    title: "Rent Tracking",
    body: "Log every payment, set due dates, and automatically mark overdue rent. Know exactly who has paid and who hasn't — at a glance.",
    cols: "lg:col-span-2",
    gradient: "from-indigo-600/30 via-indigo-600/10 to-transparent",
    border: "border-indigo-500/30",
    iconBg: "bg-indigo-500/20",
    iconColor: "text-indigo-400",
    glow: "group-hover:shadow-indigo-500/10",
  },
  {
    icon: Wrench,
    title: "Maintenance Portal",
    body: "Tenants submit requests via their unique portal — no account needed. You track everything from open to resolved.",
    cols: "lg:col-span-1",
    gradient: "from-amber-600/25 via-amber-600/10 to-transparent",
    border: "border-amber-500/30",
    iconBg: "bg-amber-500/20",
    iconColor: "text-amber-400",
    glow: "group-hover:shadow-amber-500/10",
  },
  {
    icon: Bell,
    title: "Automated Reminders",
    body: "Rent due emails go out automatically. Tenants pay on time without you chasing.",
    cols: "lg:col-span-1",
    gradient: "from-emerald-600/25 via-emerald-600/10 to-transparent",
    border: "border-emerald-500/30",
    iconBg: "bg-emerald-500/20",
    iconColor: "text-emerald-400",
    glow: "group-hover:shadow-emerald-500/10",
  },
  // Row 2: [Small 1] [Large 2] [Small 1]
  {
    icon: FileText,
    title: "Lease Management",
    body: "Track lease dates, get 60-day expiry alerts, and renew with one click — fully pre-filled from the previous lease.",
    cols: "lg:col-span-1",
    gradient: "from-blue-600/25 via-blue-600/10 to-transparent",
    border: "border-blue-500/30",
    iconBg: "bg-blue-500/20",
    iconColor: "text-blue-400",
    glow: "group-hover:shadow-blue-500/10",
  },
  {
    icon: TrendingUp,
    title: "Expense Reports & CSV Export",
    body: "Categorise expenses per property, see your P&L, and export to CSV for your accountant in one click. All properties, all time.",
    cols: "lg:col-span-2",
    gradient: "from-violet-600/30 via-violet-600/10 to-transparent",
    border: "border-violet-500/30",
    iconBg: "bg-violet-500/20",
    iconColor: "text-violet-400",
    glow: "group-hover:shadow-violet-500/10",
  },
  {
    icon: Shield,
    title: "Secure by Default",
    body: "Every request is authenticated and scoped to your account. Tenants only see their own data — always.",
    cols: "lg:col-span-1",
    gradient: "from-rose-600/25 via-rose-600/10 to-transparent",
    border: "border-rose-500/30",
    iconBg: "bg-rose-500/20",
    iconColor: "text-rose-400",
    glow: "group-hover:shadow-rose-500/10",
  },
  // Row 3: [Large 2] [Large 2] — fills the row perfectly
  {
    icon: Building2,
    title: "Multi-Property Management",
    body: "One dashboard for all your properties and units. Switch between portfolios instantly — no per-property fees on the plans that matter.",
    cols: "lg:col-span-2",
    gradient: "from-cyan-600/25 via-cyan-600/10 to-transparent",
    border: "border-cyan-500/30",
    iconBg: "bg-cyan-500/20",
    iconColor: "text-cyan-400",
    glow: "group-hover:shadow-cyan-500/10",
  },
  {
    icon: Users,
    title: "Tenant Self-Service Portal",
    body: "Every tenant gets a private link to view their rent history and submit maintenance requests — no login, no app, no friction.",
    cols: "lg:col-span-2",
    gradient: "from-fuchsia-600/25 via-fuchsia-600/10 to-transparent",
    border: "border-fuchsia-500/30",
    iconBg: "bg-fuchsia-500/20",
    iconColor: "text-fuchsia-400",
    glow: "group-hover:shadow-fuchsia-500/10",
  },
]

export function Features() {
  return (
    <section id="features" className="mx-auto max-w-7xl px-4 sm:px-6 py-16 sm:py-24">
      <motion.div {...fadeUp()} className="text-center mb-14">
        <p className="text-xs font-semibold uppercase tracking-widest text-indigo-400 mb-3">Features</p>
        <h2 className="text-3xl font-bold text-white sm:text-4xl">Everything you need — nothing you don't</h2>
        <p className="mt-4 text-white/50 max-w-xl mx-auto">
          Built specifically for independent landlords. No enterprise bloat, no per-unit fees.
        </p>
      </motion.div>

      {/* Bento grid — 4 columns, clean row fills */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {BENTO.map((card, i) => (
          <motion.div
            key={card.title}
            {...fadeUp(i * 0.06)}
            whileHover={{ scale: 1.02, y: -3 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
            className={`relative rounded-2xl border bg-[#16161f] bg-gradient-to-br p-6 overflow-hidden group cursor-default shadow-lg transition-shadow duration-300
              ${card.border} ${card.gradient} ${card.cols} ${card.glow}
            `}
          >
            {/* Subtle inner glow on hover */}
            <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-white/[0.04] to-transparent rounded-2xl" />

            <div className={`mb-4 flex h-11 w-11 items-center justify-center rounded-xl ${card.iconBg} relative`}>
              <card.icon className={`h-5 w-5 ${card.iconColor}`} />
            </div>
            <h3 className="font-semibold text-white mb-2 text-[15px]">{card.title}</h3>
            <p className="text-sm text-white/55 leading-relaxed">{card.body}</p>
          </motion.div>
        ))}
      </div>
    </section>
  )
}