'use client';

import { motion } from 'framer-motion';
import Link from 'next/link';
import { Calculator, BookOpen, Users, Receipt, ArrowRight } from 'lucide-react';
import { ThreeDIcon } from '@/components/three-d-icon';

const services = [
  {
    icon: Calculator,
    title: 'Tax Preparation',
    description: 'Comprehensive tax planning and preparation for individuals and businesses. Maximize deductions and ensure full IRS compliance.',
    slug: 'tax-preparation',
    accent: 'from-[var(--gold)]/10 to-[var(--gold)]/[0.02]',
  },
  {
    icon: BookOpen,
    title: 'Bookkeeping',
    description: 'Accurate, up-to-date financial records that give you clear visibility into your business performance.',
    slug: 'bookkeeping',
    accent: 'from-[var(--teal)]/10 to-[var(--teal)]/[0.02]',
  },
  {
    icon: Users,
    title: 'Payroll Services',
    description: 'Streamlined payroll processing, tax withholdings, and compliance reporting for your workforce.',
    slug: 'payroll-services',
    accent: 'from-[var(--navy-light)]/10 to-[var(--navy-light)]/[0.02]',
  },
  {
    icon: Receipt,
    title: 'Sales Tax Submission',
    description: 'Timely and accurate sales tax calculation, filing, and submission across all jurisdictions.',
    slug: 'sales-tax-submission',
    accent: 'from-[var(--gold)]/10 to-[var(--gold)]/[0.02]',
  },
];

export function ServicesPreview() {
  return (
    <section className="py-24 sm:py-32 bg-white relative overflow-hidden">
      {/* Background accents */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[var(--gold)]/[0.03] rounded-full blur-[100px] -translate-y-1/2 translate-x-1/3" />
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[var(--teal)]/[0.03] rounded-full blur-[80px] translate-y-1/3 -translate-x-1/4" />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-80px' }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <span className="inline-block px-4 py-1.5 bg-[var(--gold)]/10 text-[var(--gold)] text-sm font-semibold rounded-full mb-4">Our Services</span>
          <h2 className="font-display text-3xl sm:text-4xl font-bold text-[var(--navy)] tracking-tight mb-4">
            Comprehensive Financial <span className="text-gradient-gold">Solutions</span>
          </h2>
          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
            Tailored accounting and tax services designed to meet the unique needs of every client.
          </p>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {services?.map((service: any, i: number) => (
            <motion.div
              key={service?.slug}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: '-60px' }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
            >
              <Link href={`/services#${service?.slug ?? ''}`} className="block">
                <div className="card-3d group relative bg-white rounded-2xl p-8 border border-[var(--navy)]/[0.04] shadow-[var(--shadow-md)] hover:shadow-[var(--shadow-xl)] transition-all h-full overflow-hidden">
                  <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${service.accent} rounded-full blur-2xl -translate-y-1/2 translate-x-1/2`} />
                  <div className="relative flex items-start gap-5">
                    <ThreeDIcon icon={service?.icon ?? Calculator} />
                    <div className="flex-1">
                      <h3 className="font-display text-xl font-bold text-[var(--navy)] mb-2 group-hover:text-[var(--gold)] transition-colors">
                        {service?.title ?? ''}
                      </h3>
                      <p className="text-muted-foreground text-sm leading-relaxed mb-4">
                        {service?.description ?? ''}
                      </p>
                      <span className="inline-flex items-center gap-1.5 text-[var(--gold)] text-sm font-semibold group-hover:gap-2.5 transition-all">
                        Learn More <ArrowRight className="w-4 h-4" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}