'use client';
import Image from 'next/image';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { DollarSign, Clock, FileText, CheckCircle2, Calculator, ArrowRight, Phone } from 'lucide-react';
import { useLanguage } from '@/lib/i18n/language-context';

const planIcons = [DollarSign, Clock, FileText];

export default function FinancingPage() {
  const { t } = useLanguage();
  const plans = t.financing.plans;
  const requirements = t.financing.requirements;

  return (
    <div>
      {/* Hero */}
      <section className="relative h-[400px] overflow-hidden">
        <div className="absolute inset-0">
          <Image src="/images/financing.jpg" alt="Financing options" fill className="object-cover" />
          <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/60 to-transparent" />
        </div>
        <div className="relative z-10 max-w-[1200px] mx-auto px-4 h-full flex items-center">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
            <h1 className="font-display text-4xl md:text-5xl font-bold text-white tracking-tight">{t.financing.title} <span className="text-red-500">{t.financing.titleHighlight}</span></h1>
            <p className="mt-3 text-gray-300 text-lg max-w-lg">{t.financing.subtitle}</p>
          </motion.div>
        </div>
      </section>

      {/* Options */}
      <section className="py-16 bg-[#faf5ef]">
        <div className="max-w-[1200px] mx-auto px-4">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} className="text-center mb-12">
            <h2 className="font-display text-3xl font-bold tracking-tight">{t.financing.plansTitle} <span className="text-red-600">{t.financing.plansHighlight}</span></h2>
            <p className="text-gray-500 mt-2">{t.financing.plansDesc}</p>
          </motion.div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {(plans ?? [])?.map((plan: any, i: number) => {
              const highlight = i === 1;
              const Icon = planIcons[i] || DollarSign;
              return (
                <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: i * 0.15 }} className={`rounded-xl p-8 ${highlight ? 'bg-red-600 text-white ring-4 ring-red-300' : 'bg-white shadow-lg'}`}>
                  <Icon className={`w-10 h-10 mb-4 ${highlight ? 'text-white' : 'text-red-600'}`} />
                  <h3 className="font-bold text-xl mb-4">{plan?.title ?? ''}</h3>
                  <ul className="space-y-3">
                    {(plan?.features ?? [])?.map((f: string, j: number) => (
                      <li key={j} className="flex items-center gap-2 text-sm">
                        <CheckCircle2 className={`w-4 h-4 shrink-0 ${highlight ? 'text-red-200' : 'text-green-500'}`} />
                        {f}
                      </li>
                    ))}
                  </ul>
                  <Link href="/contact" className={`mt-6 block text-center px-6 py-3 rounded-lg font-semibold text-sm transition ${highlight ? 'bg-white text-red-600 hover:bg-gray-100' : 'bg-red-600 text-white hover:bg-red-700'}`}>
                    {t.financing.apply}
                  </Link>
                </motion.div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Requirements */}
      <section className="py-16">
        <div className="max-w-[1200px] mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }}>
              <h2 className="font-display text-3xl font-bold tracking-tight">{t.financing.requirementsTitle} <span className="text-red-600">{t.financing.requirementsHighlight}</span></h2>
              <p className="text-gray-500 mt-3">{t.financing.requirementsDesc}</p>
              <div className="mt-6 space-y-4">
                {(requirements ?? [])?.map((req: string, i: number) => (
                  <div key={i} className="flex items-start gap-3">
                    <CheckCircle2 className="w-5 h-5 text-red-600 mt-0.5 shrink-0" />
                    <span className="text-gray-600">{req}</span>
                  </div>
                ))}
              </div>
            </motion.div>
            <motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} className="bg-[#1a1a1a] rounded-xl p-8 text-white">
              <Calculator className="w-10 h-10 text-red-500 mb-4" />
              <h3 className="font-bold text-xl mb-2">{t.financing.needQuote}</h3>
              <p className="text-gray-400 text-sm leading-relaxed">{t.financing.needQuoteDesc}</p>
              <div className="mt-6 flex flex-col gap-3">
                <Link href="/contact" className="bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-lg font-semibold text-sm text-center transition">
                  {t.financing.requestQuote}
                </Link>
                <a href="tel:9085909802" className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-semibold text-sm text-center transition flex items-center justify-center gap-2">
                  <Phone className="w-4 h-4" /> (908) 590-9802
                </a>
              </div>
            </motion.div>
          </div>
        </div>
      </section>
    </div>
  );
}
