"use client"

import { motion } from "framer-motion"
import { useInView } from "framer-motion"
import { useRef } from "react"
import { X, Check } from "lucide-react"

const BEFORE = [
  "Chasing rent via text message every month",
  "Spreadsheets breaking when you add a new property",
  "Tenants calling you at 11pm about maintenance",
  "Losing track of lease expiry dates",
  "No idea which property is actually profitable",
  "Receipts and invoices scattered in email",
]

const AFTER = [
  "Automated reminders — tenants pay on time",
  "One dashboard for all properties, all tenants",
  "Tenants submit requests through their portal",
  "60-day lease expiry alerts, auto-renewal ready",
  "Per-property expense tracking and P&L view",
  "Expenses categorised and exportable as CSV",
]

function fadeIn(delay = 0) {
  return {
    initial: { opacity: 0, y: 20 },
    whileInView: { opacity: 1, y: 0 },
    viewport: { once: true },
    transition: { duration: 0.5, delay },
  }
}

export function Problem() {
  return (
    <section className="mx-auto max-w-7xl px-4 sm:px-6 py-16 sm:py-24">
      <motion.div {...fadeIn()} className="text-center mb-14">
        <p className="text-xs font-semibold uppercase tracking-widest text-indigo-400 mb-3">Sound familiar?</p>
        <h2 className="text-3xl font-bold text-white sm:text-4xl">The old way is exhausting</h2>
        <p className="mt-4 text-white/50 max-w-xl mx-auto">
          Most landlords are drowning in WhatsApp messages, broken spreadsheets, and missed follow-ups. There's a better way.
        </p>
      </motion.div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Before */}
        <motion.div {...fadeIn(0.1)} className="rounded-2xl border border-red-500/20 bg-red-500/[0.04] p-7">
          <div className="flex items-center gap-2 mb-6">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-red-500/20">
              <X className="h-4 w-4 text-red-400" />
            </div>
            <h3 className="font-semibold text-red-400">Before Property Management Network</h3>
          </div>
          <ul className="space-y-3">
            {BEFORE.map((item, i) => (
              <motion.li
                key={item}
                initial={{ opacity: 0, x: -10 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.15 + i * 0.07 }}
                className="flex items-start gap-3 text-sm text-white/60"
              >
                <X className="h-4 w-4 text-red-500/60 mt-0.5 shrink-0" />
                {item}
              </motion.li>
            ))}
          </ul>
        </motion.div>

        {/* After */}
        <motion.div {...fadeIn(0.2)} className="rounded-2xl border border-emerald-500/20 bg-emerald-500/[0.04] p-7">
          <div className="flex items-center gap-2 mb-6">
            <div className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500/20">
              <Check className="h-4 w-4 text-emerald-400" />
            </div>
            <h3 className="font-semibold text-emerald-400">With Property Management Network</h3>
          </div>
          <ul className="space-y-3">
            {AFTER.map((item, i) => (
              <motion.li
                key={item}
                initial={{ opacity: 0, x: 10 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ delay: 0.15 + i * 0.07 }}
                className="flex items-start gap-3 text-sm text-white/60"
              >
                <Check className="h-4 w-4 text-emerald-400 mt-0.5 shrink-0" />
                {item}
              </motion.li>
            ))}
          </ul>
        </motion.div>
      </div>
    </section>
  )
}