import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import ScrollToTop from "@/components/ScrollToTop";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Shield, ArrowLeft, CheckCircle2, ArrowRight, Phone } from "lucide-react";
import { Link } from "react-router-dom";
import { useEffect } from "react";

const IRSRepresentation = () => {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const features = [
    "Audit representation and defense",
    "Penalty abatement negotiations",
    "Installment payment agreements",
    "Offer in compromise submissions",
    "Tax lien and levy resolution",
    "Innocent spouse relief assistance"
  ];

  const benefits = [
    "Expert advocacy before tax authorities",
    "Reduced stress and anxiety",
    "Professional handling of complex issues",
    "Potential penalty and interest reduction",
    "Confidential representation",
    "Peace of mind during proceedings"
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section 
          className="relative py-32 flex items-center justify-center"
          style={{
            backgroundImage: 'url(/lovable-uploads/financialtools-subpages.png)',
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
          }}
        >
          <div className="absolute inset-0 bg-black/60"></div>
          <div className="container mx-auto px-4 relative z-10">
            <div className="max-w-4xl mx-auto">
              <div className="flex items-center gap-4 mb-8">
                <Link 
                  to="/services" 
                  className="flex items-center gap-2 text-white hover:text-brass gentle-transition"
                >
                  <ArrowLeft className="w-5 h-5" />
                  <span className="font-medium">Back to Services</span>
                </Link>
              </div>
              
              <div className="flex items-center gap-4 mb-8">
                <div className="w-16 h-16 bg-brass/20 rounded-2xl flex items-center justify-center">
                  <Shield className="w-8 h-8 text-brass" strokeWidth={1.5} />
                </div>
                <div>
                  <h1 className="text-display-xl font-display font-bold text-white mb-2">
                    IRS Representation
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Expert advocacy and representation for all IRS matters and disputes
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Main Content */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              
              {/* Description */}
              <div className="mb-16">
                <p className="text-body-lg text-sage leading-relaxed mb-6">
                  During our years of experience dealing with many taxing authorities, we have achieved a level of competence that can ensure our clients they are being properly represented before the various federal and state tax agencies.
                </p>
                <p className="text-body-lg text-sage leading-relaxed">
                  We provide comprehensive representation services to protect your interests and help resolve tax issues efficiently and effectively, often reducing penalties and interest charges.
                </p>
              </div>

              {/* Features Grid */}
              <div className="grid lg:grid-cols-2 gap-12 mb-16">
                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                    Our Representation Services Include
                  </h2>
                  <div className="space-y-4">
                    {features.map((feature, index) => (
                      <div key={index} 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>
                </div>

                <div>
                  <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                    Key Benefits
                  </h2>
                  <div className="space-y-4">
                    {benefits.map((benefit, index) => (
                      <div key={index} className="flex items-center gap-3">
                        <CheckCircle2 className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
                        <span className="text-sage">{benefit}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Additional Details */}
              <div className="bg-card rounded-2xl p-8 card-elevation mb-16">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Professional Tax Advocacy
                </h2>
                <div className="prose prose-lg text-sage space-y-4">
                  <p>
                    When you're facing an IRS audit, assessment, or other tax matter, having experienced professional representation can make all the difference. We handle all communications with tax authorities on your behalf.
                  </p>
                  <p>
                    Our team has extensive experience in negotiating with the IRS and state tax agencies, often achieving favorable outcomes including penalty reductions, payment plans, and settlements that minimize financial impact.
                  </p>
                  <p>
                    We take a strategic approach to each case, thoroughly reviewing your situation and developing a comprehensive plan to resolve your tax issues as quickly and favorably as possible.
                  </p>
                </div>
              </div>

              {/* CTA Section */}
              <div className="text-center">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Need Professional Tax Representation?
                </h2>
                <p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
                  Don't face the IRS alone. Let our experienced team protect your interests and work toward the best possible resolution.
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <Button 
                    size="lg" 
                    className="bg-brass hover:bg-brass/90 text-white btn-shadow text-lg px-8 py-3 rounded-2xl"
                    onClick={() => window.location.href = '/contact'}
                  >
                    Schedule Consultation
                    <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                  <Button 
                    size="lg"
                    variant="outline"
                    className="border-brass text-brass hover:bg-brass/10 text-lg px-8 py-3 rounded-2xl"
                    onClick={() => window.open('tel:+13618839999')}
                  >
                    <Phone className="mr-2 w-5 h-5" />
                    (361) 883-8999
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default IRSRepresentation;
