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

const FinancialToolsRetirement = () => {
  // Mapping der Tool-Namen zu ihren URLs
  const getToolUrl = (toolName: string): string => {
    const toolUrlMap: { [key: string]: string } = {
      "401(k) Calculator": "https://www.cchwebsites.com/content/calculators/Retire401k.html",
      "401(k) Savings with Profit Sharing": "https://www.cchwebsites.com/content/calculators/Retire401kProfitShare.html",
      "401(k) Spend It or Save It Calculator": "https://www.cchwebsites.com/content/calculators/Rollover401k.html",
      "403(b) Savings Calculator": "https://www.cchwebsites.com/content/calculators/Retire403b.html",
      "457 Plan Contribution Effects on Your Paycheck": "https://www.cchwebsites.com/content/calculators/RetirePayrollSavings457.html",
      "457 Plan Withdrawal": "https://www.cchwebsites.com/content/calculators/RetirementWithdrawal457.html",
      "457 Plan: Roth vs. Pre-tax": "https://www.cchwebsites.com/content/calculators/RothvsTraditional457.html",
      "457 Savings Calculator": "https://www.cchwebsites.com/content/calculators/Retire457.html",
      "72(t) Calculator": "https://www.cchwebsites.com/content/calculators/Retire72T.html",
      "72(t) Distribution Impact": "https://www.cchwebsites.com/content/calculators/Retire72Alt.html",
      "Beneficiary Required Minimum Distributions": "https://www.cchwebsites.com/content/calculators/RetireBeneficiary.html",
      "Company Stock Distribution Analysis Calculator": "https://www.cchwebsites.com/content/calculators/StockRollover401k.html",
      "How Important is Social Security?": "https://www.cchwebsites.com/content/calculators/NoSocial.html",
      "How long will my retirement savings last?": "https://www.cchwebsites.com/content/calculators/RetirementDistribution.html",
      "Individual 401(k) Contribution Comparison": "https://www.cchwebsites.com/content/calculators/Individual401kContribution.html",
      "Individual 401(k) Savings Calculator": "https://www.cchwebsites.com/content/calculators/RetireSolo401k.html",
      "IRA Spend It or Save It Calculator": "https://www.cchwebsites.com/content/calculators/RolloverIRA.html",
      "Pension Plan Retirement Options": "https://www.cchwebsites.com/content/calculators/PensionOptions.html",
      "Required Minimum Distribution (RMD)": "https://www.cchwebsites.com/content/calculators/RetireDistrib.html",
      "Required Minimum Distribution (RMD) for Current Year": "https://www.cchwebsites.com/content/calculators/RetireDistrib3.html",
      "Retirement Account Contribution Accelerator": "https://www.cchwebsites.com/content/calculators/RetirePayrollSavings.html",
      "Retirement Contribution Effects on Your Paycheck": "https://www.cchwebsites.com/content/calculators/RetirementIncome.html",
      "Retirement Income": "https://www.cchwebsites.com/content/calculators/RetirementNestegg.html",
      "Retirement Nestegg Calculator": "https://www.cchwebsites.com/content/calculators/RetirementPlan3.html",
      "Retirement Pension Planner": "https://www.cchwebsites.com/content/calculators/RetirementWithdrawal.html",
      "Retirement Plan Withdrawal": "https://www.cchwebsites.com/content/calculators/RetirementPlan.html",
      "Retirement Planner": "https://www.cchwebsites.com/content/calculators/RetirementPlan4.html",
      "Retirement Planner with Retirement Earnings": "https://www.cchwebsites.com/content/calculators/RetireShort.html",
      "Retirement Shortfall": "https://www.cchwebsites.com/content/calculators/StretchIRA.html",
      "RMD & Stretch IRA Calculator": "https://www.cchwebsites.com/content/calculators/RothvsPreTaxAccount.html",
      "Roth (after-tax) Account or Pre-Tax Account?": "https://www.cchwebsites.com/content/calculators/RothvsTraditional401k.html",
      "Roth 401(k) vs. Traditional 401(k)": "https://www.cchwebsites.com/content/calculators/RothvsTraditional403b.html",
      "Roth 403(b) vs. Traditional 403(b)": "https://www.cchwebsites.com/content/calculators/RothIRA.html",
      "Roth IRA Calculator": "https://www.cchwebsites.com/content/calculators/RothTransfer.html",
      "Roth IRA Conversion": "https://www.cchwebsites.com/content/calculators/RothConversion.html",
      "Roth IRA Conversion with Distributions": "https://www.cchwebsites.com/content/calculators/RothvsRegular.html",
      "Roth IRA vs. Traditional IRA": "https://www.cchwebsites.com/content/calculators/Compare401k2.html",
      "Roth vs. Traditional 401(k) and your Paycheck": "https://www.cchwebsites.com/content/calculators/Borrow401k.html",
      "Should you Borrow From a 401(k) or 403(b)?": "https://www.cchwebsites.com/content/calculators/SocialSecurity.html",
      "Social Security Benefits": "https://www.cchwebsites.com/content/calculators/RegularIRA.html",
      "Traditional IRA Calculator": "https://www.cchwebsites.com/content/calculators/RegularIRA.html"
    };
    
    return toolUrlMap[toolName] || "#";
  };

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

  const retirementTools = [
    {
      name: "401(k) Calculator",
      description: "A 401(k) can be one of your best tools for creating a secure retirement. Use this calculator to see why this is a retirement savings plan you cannot afford to pass up."
    },
    {
      name: "401(k) Savings with Profit Sharing",
      description: "Use this calculator to how a 401(k) with profit sharing plan can help you save for retirement.."
    },
    {
      name: "401(k) Spend It or Save It Calculator",
      description: "There are several ways to manage your 401(k) when you leave an employer. Making the wrong decision can cost you thousands of dollars both in taxes and lost earnings."
    },
    {
      name: "403(b) Savings Calculator",
      description: "If you are an employee of a non-profit tax-exempt organization, a 403(b) can be one of your best tools for creating a secure retirement."
    },
    {
      name: "457 Plan Contribution Effects on Your Paycheck",
      description: "Use this calculator to see how increasing your contributions to a 457 plan can affect your paycheck as well as your retirement."
    },
    {
      name: "457 Plan Withdrawal",
      description: "Use this calculator to see what your net 457 plan withdrawal would be after taxes are taken into account."
    },
    {
      name: "457 Plan: Roth vs. Pre-tax",
      description: "Use this calculator to help determine whether a Roth or Pre-tax 457 might be best for you."
    },
    {
      name: "457 Savings Calculator",
      description: "A 457 plan can be one of your best tools for creating a secure retirement. Use this calculator to see why this is a retirement savings plan you cannot afford to pass up."
    },
    {
      name: "72(t) Calculator",
      description: "The IRS Rule 72T allows for penalty free, early withdrawals from retirement accounts. Use this calculator to determine your allowable 72T Distribution and how it can help fund your early retirement."
    },
    {
      name: "72(t) Distribution Impact",
      description: "This calculator is designed to examine the affects of 72T distributions on your retirement plan balance."
    },
    {
      name: "Beneficiary Required Minimum Distributions",
      description: "Use this calculator to determine your Required Minimum Distributions (RMD) as a beneficiary of a retirement account."
    },
    {
      name: "Company Stock Distribution Analysis Calculator",
      description: "If you own company stock in a retirement plan you may be able to take advantage of using the long term capital gains tax rate rather than your ordinary income tax rate on this investment."
    },
    {
      name: "How Important is Social Security?",
      description: "Use this calculator to determine how losing this important retirement asset could affect you."
    },
    {
      name: "How long will my retirement savings last?",
      description: "Use this calculator to see how long your retirement savings will last based on your retirement savings and your inflation adjusted withdrawals."
    },
    {
      name: "Individual 401(k) Contribution Comparison",
      description: "Use this calculator to determine your maximum Individual 401(k) contribution as compared to three other possible plan options."
    },
    {
      name: "Individual 401(k) Savings Calculator",
      description: "Use this calculator to see the benefits of an Individual 401(k) for the self-employed."
    },
    {
      name: "IRA Spend It or Save It Calculator",
      description: "Spending your IRA before your retire can be a costly decision. See how taking your out IRA early could cost you thousands of dollars both in taxes and lost earnings."
    },
    {
      name: "Pension Plan Retirement Options",
      description: "Use this calculator to help decide between joint survivorship and single survivorship pension options."
    },
    {
      name: "Required Minimum Distribution (RMD)",
      description: "Use this calculator to determine your Required Minimum Distributions (RMD) as an account owner of a retirement account. This financial calculator will also look at potential future year's distribution requirements."
    },
    {
      name: "Required Minimum Distribution (RMD) for Current Year",
      description: "Use this calculator to determine your Required Minimum Distributions (RMD) as an account owner of a retirement account for the current year."
    },
    {
      name: "Retirement Account Contribution Accelerator",
      description: "Use this calculator to see how increasing your contributions to qualified retirement plan help save for your retirement."
    },
    {
      name: "Retirement Contribution Effects on Your Paycheck",
      description: "Use this calculator to see how increasing your contributions to a 401(k), 403(b) or 457 plan can affect your paycheck as well as your retirement."
    },
    {
      name: "Retirement Income",
      description: "Use this calculator to determine how much monthly income your retirement savings may provide you in your retirement."
    },
    {
      name: "Retirement Nestegg Calculator",
      description: "Do you know how much it takes to create a secure retirement? Use this calculator to help determine what size your retirement nestegg should be."
    },
    {
      name: "Retirement Pension Planner",
      description: "Plan your retirement with a company pension, find out if you are on track - and learn how to stay there."
    },
    {
      name: "Retirement Plan Withdrawal",
      description: "Use this calculator to see what your net withdrawal would be after taxes and penalties are taken into account."
    },
    {
      name: "Retirement Planner",
      description: "Quickly determine if your retirement plan is on track - and learn how to keep it there."
    },
    {
      name: "Retirement Planner with Retirement Earnings",
      description: "Plan your retirement with pension and possible retirement employment income. Find out if you are on track - and learn how to stay there."
    },
    {
      name: "Retirement Shortfall",
      description: "Running out of your retirement savings too soon is one of the biggest risks to a comfortable retirement. Use this calculator to find a potential shortfall in your current retirement savings plan."
    },
    {
      name: "RMD & Stretch IRA Calculator",
      description: "Use this calculator to help determine how you can stretch out your retirement plan distributions for as long as possible."
    },
    {
      name: "Roth (after-tax) Account or Pre-Tax Account?",
      description: "Starting in 2006, you may have the option to contribute to Roth account. Use this calculator to help determine which retirement plan option might be best for you."
    },
    {
      name: "Roth 401(k) vs. Traditional 401(k)",
      description: "Use this calculator to determine which 401(k) contribution type might be right for you."
    },
    {
      name: "Roth 403(b) vs. Traditional 403(b)",
      description: "Use this calculator to determine which 403(b) contribution type might be right for you"
    },
    {
      name: "Roth IRA Calculator",
      description: "Use this calculator to compare the Roth IRA to an ordinary taxable investment."
    },
    {
      name: "Roth IRA Conversion",
      description: "This calculator will show the advantage, if any, of converting your IRA to a Roth."
    },
    {
      name: "Roth IRA Conversion with Distributions",
      description: "Use this calculator to help determine how you can stretch out your retirement plan distributions for as long as possible."
    },
    {
      name: "Roth IRA vs. Traditional IRA",
      description: "Use this calculator to determine which IRA may be right for you."
    },
    {
      name: "Roth vs. Traditional 401(k) and your Paycheck",
      description: "See how a Roth vs. Traditional 401(k) might affect your take home pay as well as your retirement savings."
    },
    {
      name: "Should you Borrow From a 401(k) or 403(b)?",
      description: "The majority of 401(k) plans and a growing number of 403(b) plans let you borrow money from your account. Use this calculator to help you determine if you should borrow, and the potential impact on your retirement savings."
    },
    {
      name: "Social Security Benefits",
      description: "Use this calculator to estimate your Social Security benefits."
    },
    {
      name: "Traditional IRA Calculator",
      description: "How can contributing to a regular IRA help you in your retirement?"
    }
  ];

  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">
                  <PiggyBank 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">
                    Retirement Tools
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Retirement planning and savings calculators to help you secure your financial future
                  </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>

        {/* Retirement 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">
                {retirementTools.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">
                          <PiggyBank 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 Retirement Planning?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Our experienced CPA team can help you develop a comprehensive retirement strategy and understand the best approach for your financial future.
              </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 Retirement Consultation
              </Button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default FinancialToolsRetirement;
