import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { 
  FileText, 
  Calculator, 
  Users, 
  Shield, 
  Building,
  CheckCircle2,
  ArrowRight,
  Phone
} from "lucide-react";

const ServicesPage = () => {
  const services = [
    {
      icon: FileText,
      title: "Tax Preparation & Planning",
      description: "Comprehensive tax services designed to maximize your deductions and minimize your liability.",
      image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
      features: [
        "Individual and business tax returns",
        "Quarterly estimated tax planning",
        "Tax strategy optimization",
        "Multi-state tax compliance",
        "Audit-ready documentation",
        "Year-round tax consultation"
      ]
    },
    {
      icon: Calculator,
      title: "Accounting & Bookkeeping",
      description: "Professional accounting services to keep your financial records accurate and up-to-date.",
      image: "/lovable-uploads/1260e5db-df42-4f32-89c2-eecc054d669d.png",
      features: [
        "Monthly bookkeeping services",
        "Financial statement preparation",
        "Cash flow analysis and reporting",
        "Bank reconciliation",
        "Accounts payable/receivable management",
        "QuickBooks setup and training"
      ]
    },
    {
      icon: Users,
      title: "Payroll Solutions",
      description: "Complete payroll management ensuring compliance and accuracy for your team.",
      features: [
        "Full-service payroll processing",
        "Tax withholding and remittance",
        "Benefits administration support",
        "Compliance with federal and state regulations",
        "Employee self-service portals",
        "Year-end reporting and W-2 preparation"
      ]
    },
    {
      icon: Shield,
      title: "IRS Representation",
      description: "Expert advocacy and representation for all IRS matters and disputes.",
      image: "/lovable-uploads/741d6934-b230-43fb-9aac-a2699bba0915.png",
      features: [
        "Audit representation and defense",
        "Penalty abatement negotiations",
        "Installment payment agreements",
        "Offer in compromise submissions",
        "Tax lien and levy resolution",
        "Innocent spouse relief assistance"
      ]
    },
    {
      icon: Building,
      title: "Business Consulting & Formation",
      description: "Strategic guidance for business formation, growth, and operational optimization.",
      features: [
        "Entity selection and formation",
        "Business valuation services",
        "Operating agreement preparation",
        "Strategic business planning",
        "Merger and acquisition support",
        "Financial analysis and projections"
      ]
    }
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section className="py-24 bg-gradient-subtle">
          <div className="container mx-auto px-4 text-center">
            <h1 className="text-display-xl font-display font-bold text-forest mb-6">
              Comprehensive CPA Services for Your Financial Success
            </h1>
            <p className="text-body-lg text-sage max-w-3xl mx-auto mb-8">
              From tax preparation to strategic business consulting, we provide the expertise and personalized service you need to achieve your financial goals.
            </p>
            <Button size="lg" className="btn-shadow">
              <Phone className="mr-2 w-5 h-5" />
              Schedule Free Consultation
            </Button>
          </div>
        </section>

        {/* Services Grid */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="space-y-24">
              {services.map((service, index) => {
                const Icon = service.icon;
                const isEven = index % 2 === 0;
                
                return (
                  <div key={index} className={`grid lg:grid-cols-2 gap-16 items-center ${isEven ? '' : 'lg:grid-flow-dense'}`}>
                    {/* Image */}
                    {service.image && (
                      <div className={`${isEven ? '' : 'lg:col-start-2'}`}>
                        <img
                          src={service.image}
                          alt={`${service.title} illustration`}
                          className="rounded-2xl card-elevation w-full object-cover"
                        />
                      </div>
                    )}
                    
                    {/* Content */}
                    <div className={`${service.image ? (isEven ? '' : 'lg:col-start-1') : 'lg:col-span-2 max-w-4xl mx-auto'}`}>
                      <div className="flex items-center gap-4 mb-6">
                        <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center">
                          <Icon className="w-8 h-8 text-brass" strokeWidth={1.5} />
                        </div>
                        <h2 className="text-display-lg font-display font-semibold text-forest">
                          {service.title}
                        </h2>
                      </div>
                      
                      <p className="text-body-lg text-sage mb-8 leading-relaxed">
                        {service.description}
                      </p>
                      
                      <div className="grid md:grid-cols-2 gap-4 mb-8">
                        {service.features.map((feature, featureIndex) => (
                          <div key={featureIndex} className="flex items-center gap-3">
                            <CheckCircle2 className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
                            <span className="text-sage">{feature}</span>
                          </div>
                        ))}
                      </div>
                      
                      <Button variant="outline" className="group">
                        Learn More
                        <ArrowRight className="ml-2 w-4 h-4 group-hover:translate-x-1 gentle-transition" />
                      </Button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* CTA Section */}
        <section className="py-24 bg-gradient-hero">
          <div className="container mx-auto px-4 text-center">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-display-lg font-display font-semibold text-cream mb-6">
                Ready to Optimize Your Financial Strategy?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Let's discuss how our comprehensive CPA services can help you achieve your business and personal financial goals.
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <Button 
                  size="lg" 
                  variant="outline"
                  className="bg-cream text-forest hover:bg-cream/90 border-cream btn-shadow text-lg px-8 py-3 rounded-2xl"
                >
                  Schedule Free Consultation
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>
                
                <Button 
                  size="lg"
                  variant="outline"
                  className="border-cream/30 text-cream hover:bg-cream/10 text-lg px-8 py-3 rounded-2xl"
                  onClick={() => window.open('tel:+13618543711')}
                >
                  <Phone className="mr-2 w-5 h-5" />
                  Call (361) 854-3711
                </Button>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default ServicesPage;