'use client';

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

const services = [
  {
    id: 'tax-preparation',
    icon: Calculator,
    title: 'Tax Preparation',
    subtitle: 'Individual & Business Tax Filing',
    description: 'Our experienced CPAs provide comprehensive tax preparation services that maximize your deductions while ensuring full compliance with federal and state tax laws.',
    features: [
      'Individual Tax Returns (Form 1040)',
      'Business Tax Returns (1120, 1120-S, 1065)',
      'Tax Planning & Strategy',
      'IRS Audit Representation',
      'Multi-State Tax Filing',
      'Estimated Tax Calculations',
      'Tax Amendment Preparation',
      'Year-round Tax Advisory',
    ],
  },
  {
    id: 'bookkeeping',
    icon: BookOpen,
    title: 'Bookkeeping',
    subtitle: 'Accurate Financial Record Keeping',
    description: 'Keep your financial records organized and up-to-date with our professional bookkeeping services. We provide clear visibility into your business performance.',
    features: [
      'Monthly Financial Statements',
      'Accounts Payable & Receivable',
      'Bank & Credit Card Reconciliation',
      'General Ledger Maintenance',
      'QuickBooks Setup & Support',
      'Financial Report Generation',
      'Expense Categorization',
      'Year-End Adjustments',
    ],
  },
  {
    id: 'payroll-services',
    icon: Users,
    title: 'Payroll Services',
    subtitle: 'Streamlined Payroll Processing',
    description: 'Eliminate the complexities of payroll with our comprehensive processing services. We handle everything from calculations to tax filings.',
    features: [
      'Payroll Processing & Direct Deposit',
      'Federal & State Tax Withholdings',
      'W-2 and 1099 Preparation',
      'Quarterly Payroll Tax Returns',
      'New Hire Reporting',
      'Workers Compensation Audits',
      'Employee Pay Stub Generation',
      'Year-End Payroll Reporting',
    ],
  },
  {
    id: 'sales-tax-submission',
    icon: Receipt,
    title: 'Sales Tax Submission',
    subtitle: 'Multi-Jurisdiction Compliance',
    description: 'Navigate the complex landscape of sales tax with confidence. We handle calculation, filing, and submission across all required jurisdictions.',
    features: [
      'Sales Tax Registration',
      'Monthly/Quarterly Filings',
      'Multi-State Compliance',
      'Nexus Analysis & Determination',
      'Sales Tax Audit Support',
      'Exemption Certificate Management',
      'Use Tax Calculations',
      'Voluntary Disclosure Agreements',
    ],
  },
];

export function ServicesContent() {
  return (
    <>
      {/* Hero */}
      <section className="relative py-20 sm:py-28 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
        <div className="absolute inset-0 bg-mesh" />
        <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '32px 32px' }} />
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative">
          <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
            <span className="inline-block px-4 py-1.5 bg-white/[0.06] backdrop-blur-md border border-white/10 text-[var(--gold-light)] text-sm font-semibold rounded-full mb-4">Our Services</span>
            <h1 className="font-display text-4xl sm:text-5xl font-bold text-white tracking-tight mb-4">
              Professional Financial <span className="text-gradient-gold">Services</span>
            </h1>
            <p className="text-white/60 text-lg max-w-2xl mx-auto">Comprehensive accounting solutions tailored to meet the unique needs of businesses and individuals.</p>
          </motion.div>
        </div>
      </section>

      {/* Services */}
      <section className="py-16 sm:py-24">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="space-y-20">
            {services?.map((service: any, i: number) => (
              <motion.div
                key={service?.id}
                id={service?.id ?? ''}
                initial={{ opacity: 0, y: 40 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true, margin: '-80px' }}
                transition={{ duration: 0.6 }}
                className={`scroll-mt-28 flex flex-col ${i % 2 === 1 ? 'lg:flex-row-reverse' : 'lg:flex-row'} gap-10 items-start`}
              >
                {/* Info */}
                <div className="flex-1">
                  <div className="flex items-center gap-4 mb-4">
                    <ThreeDIcon icon={service?.icon ?? Calculator} />
                    <div>
                      <h2 className="font-display text-2xl sm:text-3xl font-bold text-[var(--navy)] tracking-tight">{service?.title ?? ''}</h2>
                      <p className="text-[var(--gold)] font-medium text-sm">{service?.subtitle ?? ''}</p>
                    </div>
                  </div>
                  <p className="text-muted-foreground text-base leading-relaxed mb-6">{service?.description ?? ''}</p>
                  <Link
                    href="/contact"
                    className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-[var(--navy)] to-[var(--navy-light)] text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-[var(--navy)]/20 transition-all duration-300 hover:-translate-y-0.5"
                  >
                    Get Started <ArrowRight className="w-4 h-4" />
                  </Link>
                </div>

                {/* Features */}
                <div className="flex-1 w-full">
                  <div className="bg-gradient-to-br from-[hsl(var(--muted))] to-white rounded-2xl p-8 shadow-[var(--shadow-sm)] border border-[var(--navy)]/[0.04]">
                    <h3 className="font-display font-semibold text-[var(--navy)] mb-5">What&apos;s Included</h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                      {(service?.features ?? [])?.map((f: string, fi: number) => (
                        <motion.div
                          key={fi}
                          initial={{ opacity: 0, x: -10 }}
                          whileInView={{ opacity: 1, x: 0 }}
                          viewport={{ once: true }}
                          transition={{ delay: fi * 0.05 }}
                          className="flex items-start gap-2.5"
                        >
                          <CheckCircle2 className="w-4.5 h-4.5 text-[var(--gold)] mt-0.5 shrink-0" />
                          <span className="text-sm text-[var(--navy)]/80">{f}</span>
                        </motion.div>
                      ))}
                    </div>
                  </div>
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-16 bg-[hsl(var(--muted))]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.6 }}>
            <h2 className="font-display text-2xl sm:text-3xl font-bold text-[var(--navy)] tracking-tight mb-4">Not Sure Which Service You Need?</h2>
            <p className="text-muted-foreground text-lg mb-8">Schedule a free consultation and we&apos;ll help you find the right solution.</p>
            <Link href="/contact" className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-[var(--gold)] to-[#d4b060] text-[var(--navy-dark)] font-bold rounded-xl hover:shadow-xl hover:shadow-[var(--gold)]/20 transition-all duration-300 hover:-translate-y-0.5">
              Schedule Free Consultation <ArrowRight className="w-5 h-5" />
            </Link>
          </motion.div>
        </div>
      </section>
    </>
  );
}
