import { ArticleHeader } from "@/components/ArticleHeader";
import { ProsConsSection } from "@/components/ProsConsSection";
import { PrivacyFooter } from "@/components/PrivacyFooter";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { CheckCircle, TrendingDown, DollarSign, Shield } from "lucide-react";

const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      <ArticleHeader />
      
      <main className="container mx-auto max-w-4xl px-4 py-12">
        <article className="prose prose-lg max-w-none">
          <h1 className="mb-4 text-4xl font-bold leading-tight text-article-heading md:text-5xl">
            Understanding Auto Loans: A Complete Guide to Financing Your Next Vehicle
          </h1>
          
          <p className="mb-8 text-lg text-article-meta">
            Whether you're buying your first car or upgrading to a newer model, understanding auto loans can save you thousands of dollars. Here's everything you need to know about getting the best financing deal.
          </p>

          <div className="my-8 overflow-hidden rounded-lg">
            <img 
              src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?auto=format&fit=crop&w=1200&q=80" 
              alt="Modern car dealership showroom" 
              className="h-96 w-full object-cover"
            />
          </div>

          <section className="my-8">
            <h2 className="mb-4 text-3xl font-bold text-article-heading">What is an Auto Loan?</h2>
            <p className="mb-4 leading-relaxed text-foreground">
              An auto loan is a financial product that allows you to borrow money to purchase a vehicle, whether new or used. Instead of paying the full price upfront, you make monthly payments over a set period, typically 36 to 72 months. The lender holds the car's title as collateral until you've paid off the loan in full.
            </p>
            <p className="leading-relaxed text-foreground">
              The key components of an auto loan include the principal amount (the amount borrowed), the interest rate (the cost of borrowing), the loan term (duration of repayment), and monthly payment amount. Understanding these elements is crucial for making informed decisions about your auto financing.
            </p>
          </section>

          <Card className="my-8 bg-accent/10 p-6">
            <div className="flex items-start gap-4">
              <TrendingDown className="mt-1 h-8 w-8 flex-shrink-0 text-accent" />
              <div>
                <h3 className="mb-2 text-xl font-semibold text-article-heading">Current Rates as Low as 6.24%</h3>
                <p className="text-foreground">
                  Auto loan rates are currently competitive, with qualified buyers seeing rates starting at 6.24% APR. Your actual rate will depend on factors like your credit score, down payment, loan term, and the type of vehicle you're purchasing.
                </p>
              </div>
            </div>
          </Card>

          <section className="my-8">
            <h2 className="mb-4 text-3xl font-bold text-article-heading">Types of Auto Loans</h2>
            
            <div className="space-y-6">
              <div>
                <h3 className="mb-2 text-xl font-semibold text-article-heading">New Car Loans</h3>
                <p className="leading-relaxed text-foreground">
                  New car loans typically offer lower interest rates because the vehicle serves as reliable collateral with a known value. Manufacturers often provide promotional rates or incentives, especially during certain times of the year. These loans usually range from 24 to 84 months, though longer terms mean paying more interest overall.
                </p>
              </div>

              <div>
                <h3 className="mb-2 text-xl font-semibold text-article-heading">Used Car Loans</h3>
                <p className="leading-relaxed text-foreground">
                  Used car loans may have slightly higher rates than new car loans, but they still offer competitive financing options. The age and condition of the vehicle can affect both your rate and the available loan terms. Many lenders offer special programs for certified pre-owned vehicles at rates closer to new car financing.
                </p>
              </div>

              <div>
                <h3 className="mb-2 text-xl font-semibold text-article-heading">Refinancing Loans</h3>
                <p className="leading-relaxed text-foreground">
                  If you already have an auto loan, refinancing can help you secure a better interest rate or adjust your monthly payment. This is particularly beneficial if your credit score has improved since you took out your original loan, or if market rates have decreased. Refinancing can save you hundreds or even thousands of dollars over the life of your loan.
                </p>
              </div>
            </div>
          </section>

          <section className="my-8">
            <h2 className="mb-4 text-3xl font-bold text-article-heading">How to Get the Best Auto Loan Rate</h2>
            
            <div className="space-y-4">
              <div className="flex items-start gap-3">
                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-trust-badge" />
                <div>
                  <h4 className="mb-1 font-semibold text-article-heading">Check Your Credit Score</h4>
                  <p className="text-foreground">
                    Your credit score is one of the most important factors in determining your interest rate. Scores above 720 typically qualify for the best rates, while scores below 600 may face higher rates or require a larger down payment.
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-trust-badge" />
                <div>
                  <h4 className="mb-1 font-semibold text-article-heading">Compare Multiple Lenders</h4>
                  <p className="text-foreground">
                    Don't settle for the first offer you receive. Shopping around can help you find significantly better rates. Many online platforms allow you to compare offers from multiple lenders with a single application, making the process much easier.
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-trust-badge" />
                <div>
                  <h4 className="mb-1 font-semibold text-article-heading">Consider Your Down Payment</h4>
                  <p className="text-foreground">
                    A larger down payment reduces the amount you need to borrow and can help you qualify for better rates. Experts recommend putting down at least 20% for a new car and 10% for a used car to avoid being underwater on your loan.
                  </p>
                </div>
              </div>

              <div className="flex items-start gap-3">
                <CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-trust-badge" />
                <div>
                  <h4 className="mb-1 font-semibold text-article-heading">Choose the Right Loan Term</h4>
                  <p className="text-foreground">
                    While longer loan terms offer lower monthly payments, they also mean paying more interest over time. A 48-60 month term often provides the best balance between affordable payments and total interest cost.
                  </p>
                </div>
              </div>
            </div>
          </section>

          <ProsConsSection />

          <Card className="my-12 bg-primary/5 p-8 text-center">
            <Shield className="mx-auto mb-4 h-12 w-12 text-primary" />
            <h2 className="mb-3 text-2xl font-bold text-article-heading">
              Ready to Find Your Best Auto Loan Rate?
            </h2>
            <p className="mb-6 text-lg text-foreground">
              Get pre-qualified offers from multiple lenders in minutes. Compare rates with no impact to your credit score.
            </p>
            <Button 
              size="lg" 
              className="text-lg"
              onClick={() => window.open('https://www.myautoloan.com', '_blank')}
            >
              <DollarSign className="mr-2 h-5 w-5" />
              Compare Auto Loan Rates Now
            </Button>
            <p className="mt-4 text-sm text-muted-foreground">
              Free to check • No obligation • Secure process
            </p>
          </Card>

          <section className="my-8">
            <h2 className="mb-4 text-3xl font-bold text-article-heading">Common Auto Loan Mistakes to Avoid</h2>
            <p className="mb-4 leading-relaxed text-foreground">
              Many car buyers make avoidable mistakes that cost them thousands of dollars. Being aware of these pitfalls can help you navigate the auto loan process more successfully:
            </p>
            
            <ul className="space-y-3">
              <li className="flex items-start gap-2">
                <span className="text-destructive">•</span>
                <span className="text-foreground">
                  <strong>Not getting pre-approved:</strong> Walking into a dealership without pre-approval puts you at a negotiating disadvantage and may result in higher rates.
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-destructive">•</span>
                <span className="text-foreground">
                  <strong>Focusing only on monthly payments:</strong> Dealers may extend the loan term to lower your payment, but you'll pay much more in interest over time.
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-destructive">•</span>
                <span className="text-foreground">
                  <strong>Skipping the test drive and inspection:</strong> Always thoroughly inspect and test drive any vehicle before committing to financing.
                </span>
              </li>
              <li className="flex items-start gap-2">
                <span className="text-destructive">•</span>
                <span className="text-foreground">
                  <strong>Ignoring additional costs:</strong> Remember to factor in insurance, registration, taxes, and maintenance when calculating affordability.
                </span>
              </li>
            </ul>
          </section>

          <section className="my-8">
            <h2 className="mb-4 text-3xl font-bold text-article-heading">Final Thoughts</h2>
            <p className="mb-4 leading-relaxed text-foreground">
              Securing the right auto loan is a crucial step in your car-buying journey. By understanding how auto loans work, comparing offers from multiple lenders, and avoiding common mistakes, you can save significant money and drive away with confidence.
            </p>
            <p className="leading-relaxed text-foreground">
              Remember that the lowest monthly payment isn't always the best deal – consider the total cost of the loan, including all interest charges. Take your time to review offers carefully, read all terms and conditions, and don't hesitate to ask questions before signing any agreement.
            </p>
          </section>
        </article>
      </main>

      <PrivacyFooter />
    </div>
  );
};

export default Index;