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

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

  const features = [
    "Monthly bookkeeping services",
    "Financial statement preparation",
    "Cash flow analysis and reporting",
    "Bank reconciliation",
    "Accounts payable/receivable management",
    "QuickBooks setup and training"
  ];

  const benefits = [
    "Accurate and up-to-date financial records",
    "Better cash flow management",
    "Improved business decision making",
    "Tax preparation efficiency",
    "Compliance with accounting standards",
    "Time savings for business operations"
  ];

  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">
                  <Calculator 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">
                    Accounting & Bookkeeping
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Professional accounting services to keep your financial records accurate and up-to-date
                  </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">
                  Meaningful, well-organized financial records ensure that your business operations will run more efficiently on a daily basis and are the foundation of a successful business. Our qualified staff can assist you with the day-to-day tasks associated with bookkeeping.
                </p>
                <p className="text-body-lg text-sage leading-relaxed">
                  We provide comprehensive accounting and bookkeeping services that give you the financial clarity you need to make informed business decisions and maintain compliance with regulatory requirements.
                </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 Accounting 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 Bookkeeping Solutions
                </h2>
                <div className="prose prose-lg text-sage space-y-4">
                  <p>
                    Our bookkeeping services are designed to free up your time so you can focus on growing your business. We handle the details of maintaining your financial records with accuracy and attention to detail.
                  </p>
                  <p>
                    From daily transaction recording to monthly financial statement preparation, we ensure your books are always current and accurate. This foundation enables better business planning and smoother tax preparation.
                  </p>
                  <p>
                    We also provide QuickBooks setup and training, helping you understand your financial reports and empowering you to make data-driven business decisions.
                  </p>
                </div>
              </div>

              {/* CTA Section */}
              <div className="text-center">
                <h2 className="text-display-md font-display font-semibold text-forest mb-6">
                  Ready to Streamline Your Financial Records?
                </h2>
                <p className="text-body-lg text-sage mb-8 max-w-2xl mx-auto">
                  Let us handle your bookkeeping and accounting needs so you can focus on what you do best - running 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 AccountingBookkeeping;
