import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { 
  Calculator, 
  Car, 
  Building, 
  CreditCard, 
  Shield, 
  TrendingUp, 
  Home, 
  PiggyBank, 
  DollarSign,
  FileText,
  Search,
  ExternalLink
} from "lucide-react";

const FinancialTools = () => {
  const calculatorCategories = [
    {
      icon: Car,
      title: "Auto",
      description: "Auto loan calculators and financing tools",
      tools: [
        "Auto Loan Early Payoff",
        "Auto Rebate vs. Low Interest Financing", 
        "Auto Refinance Interest Savings",
        "Bi-weekly Payments for an Auto Loan",
        "Bi-weekly Payments for an Auto Loan with Fees",
        "Car Loan Calculator",
        "Dealer Financing vs. Credit Union Financing",
        "Home Equity Loan vs. Auto loan",
        "Lease vs. Buy",
        "Low Interest Financing Savings"
      ]
    },
    {
      icon: Building,
      title: "Business",
      description: "Business financial analysis and planning tools",
      tools: [
        "Breakeven Analysis",
        "Business Debt Consolidation Calculator",
        "Business Valuation - Discounted Cash Flow",
        "Cash Flow Calculator",
        "Commercial Loan Calculator",
        "Debt Service Coverage",
        "Equipment Buy vs. Lease",
        "Financial Ratios",
        "Inventory Analysis",
        "Like Kind Exchange",
        "Profit Margin Calculator",
        "Repossession of Personal Property from a Deferred Payment Sale",
        "Repossession of Personal Property from an Installment Payment Sale",
        "Repossession of Real Property",
        "Working Capital Needs"
      ]
    },
    {
      icon: CreditCard,
      title: "Debt and Credit Cards",
      description: "Debt management and credit card optimization tools",
      tools: [
        "Accelerated Debt Payoff",
        "Consolidation Loan Investment Calculator",
        "Cost-of-Debt Calculator",
        "Credit Card Minimum Payment Calculator",
        "Credit Card Optimizer",
        "Credit Card Pay Off",
        "Home Equity Debt Consolidation",
        "How much do you owe?",
        "Personal Debt Consolidation",
        "Roll-Down Your Credit Card Debt!",
        "Snowball Debt Elimination Calculator",
        "Student Loan Consolidation and Debt Payoff"
      ]
    },
    {
      icon: Shield,
      title: "Insurance",
      description: "Insurance analysis and planning calculators",
      tools: [
        "Comprehensive Life Insurance Analysis",
        "Disability Insurance",
        "Fixed Annuity Calculator",
        "Health Savings Account (HSA) Contribution Calculator",
        "Health Savings Account (HSA) Goal Calculator",
        "Health Savings Account (HSA) Savings Calculator",
        "Health Savings Account (HSA) vs. Traditional Health Plan",
        "Health Savings Accounts (HSA) Employer Benefit",
        "Human Life Value",
        "Immediate Annuity Calculator",
        "Life Insurance Calculator",
        "Long Term Care Calculator",
        "Variable Annuity Calculator",
        "Variable Annuity without Surrender Charges"
      ]
    },
    {
      icon: TrendingUp,
      title: "Investment",
      description: "Investment analysis and portfolio planning tools",
      tools: [
        "Annual Rate of Return Calculator",
        "Annual Stock Option Grants",
        "Asset Allocation Calculator",
        "Compare Investment Fees",
        "Future Contracts Calculator",
        "Future Value Calculator",
        "Internal Rate of Return (IRR) Calculator",
        "Investment Distributions",
        "Investment Goal",
        "Investment Loan",
        "Investment Property Calculator",
        "Investment Questionnaire - Broad Portfolio",
        "Investment Questionnaire - Cash, Fixed Income and Equities",
        "Investment Returns",
        "Investment Savings and Distributions",
        "Lump Sum Annual Return Calculator",
        "Lump Sum Future Value Calculator",
        "Lump Sum Present Value Calculator",
        "Municipal Bond Tax Equivalent Yield",
        "Mutual Fund Expense Calculator",
        "Personal Economic Recovery Calculator",
        "Present Value Calculator",
        "Present Value Goal Calculator",
        "REIT Tax-Equivalent Distribution",
        "Stock Option Calculator",
        "Taxable vs. Tax Deferred Investments",
        "Taxable vs. Tax Deferred vs. Tax Free Investment"
      ]
    },
    {
      icon: DollarSign,
      title: "Loan",
      description: "Loan calculators and payment analysis tools",
      tools: [
        "Alternative Payment Frequencies",
        "Amortizing Loan Calculator",
        "Balloon Loan Calculator",
        "Debt Consolidation Calculator",
        "Enhanced Loan Calculator",
        "Equity Line of Credit Payments",
        "Existing Loan Calculator",
        "Home Equity Line of Credit Calculator",
        "Line of Credit Payoff",
        "Loan & Credit Line Payment",
        "Loan & Credit Line Tax Savings",
        "Loan Comparison Calculator",
        "Loan Prequalification Calculator"
      ]
    },
    {
      icon: Home,
      title: "Mortgage",
      description: "Mortgage calculators and home financing tools",
      tools: [
        "Adjustable Rate Mortgage Calculator",
        "APR Calculator for Adjustable Rate Mortgages",
        "ARM & Interest Only ARM vs. Fixed Rate Mortgage",
        "Balloon Mortgages",
        "Bi-weekly Payment Calculator",
        "Bi-weekly Payments for an Existing Mortgage",
        "Blended Rate Mortgage Calculator",
        "FHA Maximum Financing Calculator",
        "Fixed Rate Mortgage vs. Interest Only Mortgage",
        "Fixed Rate Mortgage vs. LIBOR ARM",
        "Interest Only ARM Calculator",
        "Interest Only Mortgage Calculator",
        "Maximum Mortgage",
        "Mortgage APR Calculator",
        "Mortgage Comparison: 15 Years vs. 30 Years",
        "Mortgage Debt Consolidation",
        "Mortgage Loan Calculator",
        "Mortgage Loan Calculator (PITI)",
        "Mortgage Payoff",
        "Mortgage Points Calculator",
        "Mortgage Qualifier",
        "Mortgage Refinance Break Even",
        "Mortgage Required Income",
        "Mortgage Tax Savings Calculator",
        "Option ARM vs. Fixed Rate Mortgage",
        "Refinance Interest Savings",
        "Rent vs. Buy",
        "Reverse Mortgage Calculator"
      ]
    },
    {
      icon: FileText,
      title: "Personal Finance",
      description: "Personal finance management and budgeting tools",
      tools: [
        "Basic Calculator",
        "Basic Financial Calculator",
        "Checkbook Balancer",
        "Credit Assessment",
        "Home Budget Analysis",
        "Life Expectancy",
        "Net Worth",
        "Should my spouse work?",
        "Student Budget"
      ]
    },
    {
      icon: PiggyBank,
      title: "Retirement",
      description: "Retirement planning and savings calculators",
      tools: [
        "401(k) Calculator",
        "401(k) Savings with Profit Sharing",
        "401(k) Spend It or Save It Calculator",
        "403(b) Savings Calculator",
        "457 Plan Contribution Effects on Your Paycheck",
        "457 Plan Withdrawal",
        "457 Plan: Roth vs. Pre-tax",
        "457 Savings Calculator",
        "72(t) Calculator",
        "72(t) Distribution Impact",
        "Beneficiary Required Minimum Distributions",
        "Company Stock Distribution Analysis Calculator",
        "How Important is Social Security?",
        "How long will my retirement savings last?",
        "Individual 401(k) Contribution Comparison",
        "Individual 401(k) Savings Calculator",
        "IRA Spend It or Save It Calculator",
        "Pension Plan Retirement Options",
        "Required Minimum Distribution (RMD)",
        "Required Minimum Distribution (RMD) for Current Year",
        "Retirement Account Contribution Accelerator",
        "Retirement Contribution Effects on Your Paycheck",
        "Retirement Income",
        "Retirement Nestegg Calculator",
        "Retirement Pension Planner",
        "Retirement Plan Withdrawal",
        "Retirement Planner",
        "Retirement Planner with Retirement Earnings",
        "Retirement Shortfall",
        "RMD & Stretch IRA Calculator",
        "Roth (after-tax) Account or Pre-Tax Account?",
        "Roth 401(k) vs. Traditional 401(k)",
        "Roth 403(b) vs. Traditional 403(b)",
        "Roth IRA Calculator",
        "Roth IRA Conversion",
        "Roth IRA Conversion with Distributions",
        "Roth IRA vs. Traditional IRA",
        "Roth vs. Traditional 401(k) and your Paycheck",
        "Should you Borrow From a 401(k) or 403(b)?",
        "Social Security Benefits",
        "Traditional IRA Calculator"
      ]
    },
    {
      icon: DollarSign,
      title: "Savings",
      description: "Savings planning and goal calculators",
      tools: [
        "Benefit of Spending Less",
        "CD Ladder Calculator",
        "Certificate of Deposit Calculator",
        "College Savings",
        "Compare Savings Rates",
        "Compound Savings Calculator",
        "Compounding and Your Return",
        "Cool Million",
        "Credit Union Certificate Calculator",
        "Credit Union Certificate Ladder Calculator",
        "Don't Delay Your Savings!",
        "Emergency Savings Calculator",
        "Home Buyer Savings Calculator",
        "Lunch Savings",
        "Savings Distribution Calculator",
        "Savings Goals",
        "Savings, Taxes, and Inflation",
        "Vice Savings"
      ]
    },
    {
      icon: Calculator,
      title: "Tax",
      description: "Tax planning and calculation tools",
      tools: [
        "1040 Tax Calculator",
        "457 Payroll Deductions",
        "Earned Income Credit (EIC) Calculator",
        "Estate Tax Planning",
        "Flexible Spending Account (FSA) Calculator",
        "Hourly Paycheck Calculator",
        "Marginal Tax Rate Calculator",
        "Net to Gross Paycheck Calculator",
        "Payroll Deductions Calculator",
        "Self-Employment Tax Calculator",
        "U.S. 1040EZ Tax Form Calculator"
      ]
    }
  ];

  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">
              Financial Tools
            </h1>
            <p className="text-body-lg text-sage max-w-3xl mx-auto mb-8">
              Should I refinance my mortgage? How much do I need to save for my child's college education? As accounting professionals, these are some of the questions that are posed to us on a daily basis. We are providing these interactive financial calculators and other tools to assist you with some of the day-to-day questions and concerns that may arise.
            </p>
            <div className="bg-card rounded-2xl p-6 card-elevation max-w-2xl mx-auto">
              <p className="text-sage text-sm">
                <strong>Disclaimer:</strong> While these financial tools are not a substitute for financial advice from a qualified professional, they can be used as a starting point in the decision making process.
              </p>
            </div>
          </div>
        </section>

        {/* Calculator Categories */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="space-y-12">
              {calculatorCategories.map((category, index) => {
                const Icon = category.icon;
                return (
                  <div key={index}>
                    <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">
                        <Icon className="w-8 h-8 text-brass" strokeWidth={1.5} />
                      </div>
                      <div>
                        <h2 className="text-display-lg font-display font-semibold text-forest">
                          {category.title}
                        </h2>
                        <p className="text-sage">{category.description}</p>
                      </div>
                    </div>
                    
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                      {category.tools.map((tool, toolIndex) => (
                        <Card key={toolIndex} className="rounded-xl card-elevation hover:shadow-lg gentle-transition cursor-pointer">
                          <CardContent className="p-4">
                            <div className="flex items-center justify-between">
                              <span className="text-sage text-sm font-medium">{tool}</span>
                              <ExternalLink className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                            </div>
                          </CardContent>
                        </Card>
                      ))}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* Featured Calculator */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Featured Calculator
                </h2>
                <p className="text-body-lg text-sage">
                  Try our most popular financial calculator
                </p>
              </div>

              <Card className="rounded-2xl card-elevation">
                <CardContent className="p-8">
                  <div className="grid lg:grid-cols-2 gap-8">
                    <div>
                      <h3 className="text-display-md font-display font-semibold text-forest mb-4">
                        Mortgage Loan Calculator
                      </h3>
                      <p className="text-sage mb-6">
                        Calculate your monthly mortgage payment including principal, interest, taxes, and insurance (PITI).
                      </p>
                      
                      <div className="space-y-4">
                        <div>
                          <label className="block text-sm font-medium text-forest mb-2">
                            Loan Amount ($)
                          </label>
                          <Input 
                            type="number" 
                            placeholder="300,000"
                            className="rounded-xl"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-forest mb-2">
                            Interest Rate (%)
                          </label>
                          <Input 
                            type="number" 
                            placeholder="6.5"
                            step="0.01"
                            className="rounded-xl"
                          />
                        </div>
                        <div>
                          <label className="block text-sm font-medium text-forest mb-2">
                            Loan Term (Years)
                          </label>
                          <Input 
                            type="number" 
                            placeholder="30"
                            className="rounded-xl"
                          />
                        </div>
                        <Button className="w-full btn-shadow">
                          Calculate Payment
                        </Button>
                      </div>
                    </div>
                    
                    <div className="bg-muted/30 rounded-xl p-6">
                      <h4 className="font-display font-semibold text-forest mb-4">
                        Payment Breakdown
                      </h4>
                      <div className="space-y-3">
                        <div className="flex justify-between">
                          <span className="text-sage">Principal & Interest:</span>
                          <span className="font-medium text-forest">$1,896.20</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sage">Property Tax:</span>
                          <span className="font-medium text-forest">$250.00</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-sage">Insurance:</span>
                          <span className="font-medium text-forest">$100.00</span>
                        </div>
                        <div className="flex justify-between border-t border-sage/20 pt-3">
                          <span className="font-medium text-forest">Total Monthly Payment:</span>
                          <span className="font-bold text-forest text-lg">$2,246.20</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </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">
                Need Help Interpreting Your Results?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Our financial calculators are a great starting point, but every situation is unique. Let our experienced CPA team help you understand your results and develop a comprehensive financial strategy.
              </p>
              
              <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
              </Button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
};

export default FinancialTools;
