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

const FinancialToolsInvestment = () => {
  // Mapping der Tool-Namen zu ihren URLs
  const getToolUrl = (toolName: string): string => {
    const toolUrlMap: { [key: string]: string } = {
      "Annual Rate of Return Calculator": "https://www.cchwebsites.com/content/calculators/AnnualReturn.html",
      "Annual Stock Option Grants": "https://www.cchwebsites.com/content/calculators/StockGrants.html",
      "Asset Allocation Calculator": "https://www.cchwebsites.com/content/calculators/AssetAllocator.html",
      "Compare Investment Fees": "https://www.cchwebsites.com/content/calculators/CompareFees.html",
      "Future Contracts Calculator": "https://www.cchwebsites.com/content/calculators/FutureContracts.html",
      "Future Value Calculator": "https://www.cchwebsites.com/content/calculators/FutureValue.html",
      "Internal Rate of Return (IRR) Calculator": "https://www.cchwebsites.com/content/calculators/IRRReturn.html",
      "Investment Distributions": "https://www.cchwebsites.com/content/calculators/InvestmentDistribution2.html",
      "Investment Goal": "https://www.cchwebsites.com/content/calculators/InvestmentVariables.html",
      "Investment Loan": "https://www.cchwebsites.com/content/calculators/InvestmentLoan.html",
      "Investment Property Calculator": "https://www.cchwebsites.com/content/calculators/InvestmentProperty.html",
      "Investment Questionnaire - Broad Portfolio": "https://www.cchwebsites.com/content/calculators/InvestmentProfile.html",
      "Investment Questionnaire - Cash, Fixed Income and Equities": "https://www.cchwebsites.com/content/calculators/InvestmentQuestionaire.html",
      "Investment Returns": "https://www.cchwebsites.com/content/calculators/InvestmentReturn.html",
      "Investment Savings and Distributions": "https://www.cchwebsites.com/content/calculators/InvestmentDistribution.html",
      "Lump Sum Annual Return Calculator": "https://www.cchwebsites.com/content/calculators/AnnualReturnAmount.html",
      "Lump Sum Future Value Calculator": "https://www.cchwebsites.com/content/calculators/FutureValueAmount.html",
      "Lump Sum Present Value Calculator": "https://www.cchwebsites.com/content/calculators/PresentValueAmount.html",
      "Municipal Bond Tax Equivalent Yield": "https://www.cchwebsites.com/content/calculators/TaxEquivYield.html",
      "Mutual Fund Expense Calculator": "https://www.cchwebsites.com/content/calculators/FundExpense.html",
      "Personal Economic Recovery Calculator": "https://www.cchwebsites.com/content/calculators/RecoverTime.html",
      "Present Value Calculator": "https://www.cchwebsites.com/content/calculators/PresentValue.html",
      "Present Value Goal Calculator": "https://www.cchwebsites.com/content/calculators/PresentValueGoal.html",
      "REIT Tax-Equivalent Distribution": "https://www.cchwebsites.com/content/calculators/REITTaxEquivYield.html",
      "Stock Option Calculator": "https://www.cchwebsites.com/content/calculators/StockOptions.html",
      "Taxable vs. Tax Deferred Investments": "https://www.cchwebsites.com/content/calculators/InvestCompare2.html",
      "Taxable vs. Tax Deferred vs. Tax Free Investment": "https://www.cchwebsites.com/content/calculators/InvestCompare.html"
    };
    
    return toolUrlMap[toolName] || "#";
  };

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

  const investmentTools = [
    {
      name: "Annual Rate of Return Calculator",
      description: "Use this calculator to determine the annual return of a known initial amount, a stream of deposits, plus a known final future value."
    },
    {
      name: "Annual Stock Option Grants",
      description: "Use this calculator to project how much a series of annual stock option grants could be worth to you."
    },
    {
      name: "Asset Allocation Calculator",
      description: "Your age, ability to tolerate risk and several other factors are used to calculate a desirable mix of stocks, bonds and cash."
    },
    {
      name: "Compare Investment Fees",
      description: "Even a small difference in the fees you pay on your investments can add up over time. Use this calculator to see how different fees impact your investment strategy!"
    },
    {
      name: "Future Contracts Calculator",
      description: "Use this calculator to determine the number of futures contracts you may wish to purchase based on your account equity and trading plan."
    },
    {
      name: "Future Value Calculator",
      description: "Use this calculator to determine the future value of an investment which can include an initial deposit and a stream of periodic deposits."
    },
    {
      name: "Internal Rate of Return (IRR) Calculator",
      description: "Use this calculator to determine an Internal Rate of Return (IRR). It calculates the IRR on an annual basis of an irregular stream of up to 20 payments and withdrawals."
    },
    {
      name: "Investment Distributions",
      description: "This calculator helps you determine either how long or how much periodic distributions can be taken out of an investment before it runs out."
    },
    {
      name: "Investment Goal",
      description: "Use this calculator to see if your investment plan is on track to meet your investment goals - and receive suggestions on how to change it if you are falling short."
    },
    {
      name: "Investment Loan",
      description: "This calculator helps illustrate the effect of using a loan to purchase an investment or appreciable asset. Using debt as leverage to purchase investments can magnify your return. The downside is that you also increase your risk."
    },
    {
      name: "Investment Property Calculator",
      description: "An investment property can be an excellent investment. This calculator is designed to examine the potential return you might receive from an investment property."
    },
    {
      name: "Investment Questionnaire - Broad Portfolio",
      description: "The Investment Questionnaire is designed to help you create a balanced portfolio from a broad range of investment classes."
    },
    {
      name: "Investment Questionnaire - Cash, Fixed Income and Equities",
      description: "This questionnaire is designed to help you create a balanced portfolio of the three basic investment classes: Cash, Fixed Income and Equities."
    },
    {
      name: "Investment Returns",
      description: "There is more to investing than knowing your annual rate of return. Use this calculator to help you see how inflation, taxes and your time horizon can impact your bottom line."
    },
    {
      name: "Investment Savings and Distributions",
      description: "Use this calculator to see how long your investment savings can last once you begin taking distributions."
    },
    {
      name: "Lump Sum Annual Return Calculator",
      description: "Use this calculator to determine the annual rate of return of known lump sum starting and ending amount."
    },
    {
      name: "Lump Sum Future Value Calculator",
      description: "Use this calculator to determine the future value of a lump sum."
    },
    {
      name: "Lump Sum Present Value Calculator",
      description: "Use this calculator to determine the present value of a future lump sum."
    },
    {
      name: "Municipal Bond Tax Equivalent Yield",
      description: "Income generated from municipal bond coupon payments are not subject to federal income tax and often are exempt from state taxes. Use this calculator to estimate the tax-equivalent yield (TEY) for a municipal bond."
    },
    {
      name: "Mutual Fund Expense Calculator",
      description: "This calculator can help you analyze the costs associated with buying shares in a mutual fund. By entering a few pieces of information, found in your fund's prospectus, you can see the impact of fees and operating expenses on your investment."
    },
    {
      name: "Personal Economic Recovery Calculator",
      description: "This calculator can help you determine exactly what it might take to return your to your original investment balance."
    },
    {
      name: "Present Value Calculator",
      description: "Use this calculator to determine the present value of a known final future value plus a stream of deposits."
    },
    {
      name: "Present Value Goal Calculator",
      description: "Use this calculator to determine the how much needs to be invested now to achieve a future goal. The total amount required immediately is reduced by the present value of a stream of additional deposits."
    },
    {
      name: "REIT Tax-Equivalent Distribution",
      description: "This calculator shows a REIT's hypothetical yield and how ROC impacts tax equivalent yield."
    },
    {
      name: "Stock Option Calculator",
      description: "Use this calculator to determine the value of your stock options for the next one to twenty five years."
    },
    {
      name: "Taxable vs. Tax Deferred Investments",
      description: "This calculator is designed to help compare a normal taxable investment vs. a tax deferred investment."
    },
    {
      name: "Taxable vs. Tax Deferred vs. Tax Free Investment",
      description: "This calculator is designed to help compare a normal taxable investment, a tax deferred investment and tax-free investment."
    }
  ];

  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">
                  <TrendingUp 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">
                    Investment Tools
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Investment analysis and portfolio planning tools to help you build wealth
                  </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>

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

export default FinancialToolsInvestment;
