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, ExternalLink, ArrowLeft } from "lucide-react";
import { Link } from "react-router-dom";

const FinancialToolsTax = () => {
  // Mapping der Tool-Namen zu ihren URLs
  const getToolUrl = (toolName: string): string => {
    const toolUrlMap: { [key: string]: string } = {
      "1040 Tax Calculator": "https://www.cchwebsites.com/content/calculators/Tax1040.html",
      "457 Payroll Deductions": "https://www.cchwebsites.com/content/calculators/457Payroll.html",
      "Earned Income Credit (EIC) Calculator": "https://www.cchwebsites.com/content/calculators/EarnedIncomeCredit.html",
      "Estate Tax Planning": "https://www.cchwebsites.com/content/calculators/EstatePlan.html",
      "Flexible Spending Account (FSA) Calculator": "https://www.cchwebsites.com/content/calculators/Payroll125.html",
      "Hourly Paycheck Calculator": "https://www.cchwebsites.com/content/calculators/PayrollHourly.html",
      "Marginal Tax Rate Calculator": "https://www.cchwebsites.com/content/calculators/TaxMargin.html",
      "Net to Gross Paycheck Calculator": "https://www.cchwebsites.com/content/calculators/PayrollGross.html",
      "Payroll Deductions Calculator": "https://www.cchwebsites.com/content/calculators/Payroll.html",
      "Self-Employment Tax Calculator": "https://www.cchwebsites.com/content/calculators/TaxSelfEmployment.html",
      "U.S. 1040EZ Tax Form Calculator": "https://www.cchwebsites.com/content/calculators/TaxEZ1040.html"
    };
    
    return toolUrlMap[toolName] || "#";
  };

  const handleToolClick = (toolName: string) => {
    const url = getToolUrl(toolName);
    if (url !== "#") {
      window.open(url, '_blank', 'noopener,noreferrer');
    }
  };

  const taxTools = [
    {
      name: "1040 Tax Calculator",
      description: "Enter your filing status, income, deductions and credits and we will estimate your total tax. Based on your projected withholdings for the year, we can also estimate your tax refund or amount you may owe the IRS next April."
    },
    {
      name: "457 Payroll Deductions",
      description: "Use this calculator to help you determine the impact of changing your payroll deductions."
    },
    {
      name: "Earned Income Credit (EIC) Calculator",
      description: "Use this calculator to determine if you qualify for the Earned Income Credit and if so, how much it might be worth."
    },
    {
      name: "Estate Tax Planning",
      description: "Knowing your potential estate tax liability is a great place to start your estate tax plan. Use this calculator to estimate your estate tax liability."
    },
    {
      name: "Flexible Spending Account (FSA) Calculator",
      description: "Use this calculator to see how participating in Flexible Spending Account (FSA) contributions can help you pay less tax, and increase your net take home pay."
    },
    {
      name: "Hourly Paycheck Calculator",
      description: "Use this calculator to help you determine your paycheck for hourly wages."
    },
    {
      name: "Marginal Tax Rate Calculator",
      description: "Use this calculator to determine your marginal and effective tax rates. This calculator sorts through the tax brackets and filing options to calculate your true tax liability."
    },
    {
      name: "Net to Gross Paycheck Calculator",
      description: "Determine the gross paycheck needed to provide a required net amount."
    },
    {
      name: "Payroll Deductions Calculator",
      description: "Use this calculator to help you determine the impact of changing your payroll deductions."
    },
    {
      name: "Self-Employment Tax Calculator",
      description: "If you are self-employed, operate a farm or are a church employee use this calculator to determine your self-employment taxes for tax year 2019."
    },
    {
      name: "U.S. 1040EZ Tax Form Calculator",
      description: "Many people can use the 1040EZ tax form instead of the more complicated 1040 to calculate their taxes. Containing only seven required inputs, the 1040EZ is one of the quickest forms to calculate your tax bill."
    }
  ];

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section
          className="py-24 bg-gradient-subtle relative"
          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="/financial-tools" 
                  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 Financial Tools</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">
                    Tax Tools
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Tax planning and calculation tools to help you understand your tax obligations
                  </p>
                </div>
              </div>
              
              <div className="bg-white/95 rounded-2xl p-6 card-elevation">
                <p className="text-forest 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>
          </div>
        </section>

        {/* Tax Tools Grid */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {taxTools.map((tool, index) => (
                  <Card 
                    key={index} 
                    className="rounded-xl card-elevation hover:shadow-lg gentle-transition cursor-pointer h-full"
                    onClick={() => handleToolClick(tool.name)}
                  >
                    <CardContent className="p-6 h-full flex flex-col">
                      <div className="flex items-start justify-between mb-4">
                        <div className="w-12 h-12 bg-brass/20 rounded-xl flex items-center justify-center flex-shrink-0">
                          <Calculator className="w-6 h-6 text-brass" strokeWidth={1.5} />
                        </div>
                        <ExternalLink className="w-5 h-5 text-brass flex-shrink-0" strokeWidth={1.5} />
                      </div>
                      
                      <h3 className="text-display-sm font-display font-semibold text-forest mb-3 leading-tight">
                        {tool.name}
                      </h3>
                      
                      <p className="text-sage text-sm leading-relaxed flex-grow">
                        {tool.description}
                      </p>
                      
                      <div className="mt-4 pt-4 border-t border-sage/20">
                        <Button 
                          variant="outline" 
                          size="sm" 
                          className="w-full text-brass border-brass hover:bg-brass hover:text-cream"
                        >
                          Use Calculator
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </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 with Tax Planning?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Our experienced CPA team can help you understand your tax obligations and develop a comprehensive tax strategy to minimize your tax burden.
              </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 Tax Consultation
              </Button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default FinancialToolsTax;
