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 { Briefcase, ArrowLeft, CheckCircle2, ArrowRight, Phone } from "lucide-react";
import { Link } from "react-router-dom";
import { useEffect } from "react";

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

  const features = [
    "Multi-state sales tax compliance",
    "Sales tax return preparation",
    "Audit representation",
    "Voluntary disclosure programs",
    "Nexus analysis",
    "Sales tax automation consulting"
  ];

  const benefits = [
    "Simplified compliance management",
    "Reduced audit risk",
    "Accurate tax calculations",
    "Timely filing and payments",
    "Professional representation",
    "Cost-effective solutions"
  ];

  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">
                  <Briefcase 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">
                    Sales Tax Services
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Assistance with sales tax collection, compilation, and preparation of returns across multiple jurisdictions
                  </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">
                  Many of our clients are responsible for collecting and submitting sales taxes in many different vicinities. We can assist your company in the compilation of information and preparation of sales tax returns in an efficient and timely manner.
                </p>
                <p className="text-body-lg text-sage leading-relaxed">
                  With the complexities of multi-state sales tax requirements and evolving nexus rules, having professional guidance ensures compliance while minimizing administrative burden and potential penalties.
                </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 Sales Tax 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">
                  Comprehensive Sales Tax Solutions
                </h2>
                <div className="prose prose-lg text-sage space-y-4">
                  <p>
                    Sales tax compliance has become increasingly complex with the growth of e-commerce and evolving state regulations. We help businesses navigate these challenges with expert guidance and efficient processes.
                  </p>
                  <p>
                    Our services include analyzing your business activities to determine nexus requirements, preparing and filing returns across multiple jurisdictions, and representing you in sales tax audits.
                  </p>
                  <p>
                    We also assist with voluntary disclosure programs that can help resolve past compliance issues while minimizing penalties and interest charges.
                  </p>
                </div>
              </div>

              {/* CTA Section */}
              <div className="text-center">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Ready to Simplify Your Sales Tax Compliance?
                </h2>
                <p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
                  Let us handle the complexities of multi-state sales tax requirements so you can focus on growing your business.
                </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 SalesTax;
