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

const FinancialToolsMortgage = () => {
  // Mapping der Tool-Namen zu ihren URLs
  const getToolUrl = (toolName: string): string => {
    const toolUrlMap: { [key: string]: string } = {
      "Adjustable Rate Mortgage Calculator": "https://www.cchwebsites.com/content/calculators/MortgageAdjustable.html",
      "APR Calculator for Adjustable Rate Mortgages": "https://www.cchwebsites.com/content/calculators/MortgageAprAdjustable.html",
      "ARM & Interest Only ARM vs. Fixed Rate Mortgage": "https://www.cchwebsites.com/content/calculators/MortgageArmvsFixed.html",
      "Balloon Mortgages": "https://www.cchwebsites.com/content/calculators/MortgageBalloon.html",
      "Bi-weekly Payment Calculator": "https://www.cchwebsites.com/content/calculators/Biweekly.html",
      "Bi-weekly Payments for an Existing Mortgage": "https://www.cchwebsites.com/content/calculators/ExistingBiweekly.html",
      "Blended Rate Mortgage Calculator": "https://www.cchwebsites.com/content/calculators/MortgageBlend.html",
      "FHA Maximum Financing Calculator": "https://www.cchwebsites.com/content/calculators/FHAMortgageQualifier.html",
      "Fixed Rate Mortgage vs. Interest Only Mortgage": "https://www.cchwebsites.com/content/calculators/MortgageFixedvsIO.html",
      "Fixed Rate Mortgage vs. LIBOR ARM": "https://www.cchwebsites.com/content/calculators/MortgageFixedvsLibor.html",
      "Interest Only ARM Calculator": "https://www.cchwebsites.com/content/calculators/MortgageIOAdjustable.html",
      "Interest Only Mortgage Calculator": "https://www.cchwebsites.com/content/calculators/MortgageInterestOnly.html",
      "Maximum Mortgage": "https://www.cchwebsites.com/content/calculators/MortgageApr.html",
      "Mortgage APR Calculator": "https://www.cchwebsites.com/content/calculators/MortgageCompare.html",
      "Mortgage Comparison: 15 Years vs. 30 Years": "https://www.cchwebsites.com/content/calculators/MortgageConsolidate.html",
      "Mortgage Debt Consolidation": "https://www.cchwebsites.com/content/calculators/MortgageLoan.html",
      "Mortgage Loan Calculator": "https://www.cchwebsites.com/content/calculators/MortgageLoan2.html",
      "Mortgage Loan Calculator (PITI)": "https://www.cchwebsites.com/content/calculators/MortgagePayoff.html",
      "Mortgage Payoff": "https://www.cchwebsites.com/content/calculators/MortgagePoints.html",
      "Mortgage Points Calculator": "https://www.cchwebsites.com/content/calculators/MortgageQualifier.html",
      "Mortgage Qualifier": "https://www.cchwebsites.com/content/calculators/MortgageRefinance.html",
      "Mortgage Refinance Break Even": "https://www.cchwebsites.com/content/calculators/MortgageIncome.html",
      "Mortgage Required Income": "https://www.cchwebsites.com/content/calculators/MortgageTaxes.html",
      "Mortgage Tax Savings Calculator": "https://www.cchwebsites.com/content/calculators/MortgageFixedvsNegAm.html",
      "Option ARM vs. Fixed Rate Mortgage": "https://www.cchwebsites.com/content/calculators/ShouldIRefi.html",
      "Refinance Interest Savings": "https://www.cchwebsites.com/content/calculators/ReverseMortgage.html",
      "Rent vs. Buy": "https://www.cchwebsites.com/content/calculators/ReverseMortgage.html",
      "Reverse Mortgage Calculator": "https://www.cchwebsites.com/content/calculators/ReverseMortgage.html"
    };
    
    return toolUrlMap[toolName] || "#";
  };

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

  const mortgageTools = [
    {
      name: "Adjustable Rate Mortgage Calculator",
      description: "This calculator helps you to determine what your adjustable mortgage payments will be."
    },
    {
      name: "APR Calculator for Adjustable Rate Mortgages",
      description: "Use this calculator to find the APR on your adjustable rate mortgage."
    },
    {
      name: "ARM & Interest Only ARM vs. Fixed Rate Mortgage",
      description: "Use this calculator to compare a fixed rate mortgage to two types of ARMs, a Fully Amortizing ARM and an Interest Only ARM."
    },
    {
      name: "Balloon Mortgages",
      description: "A balloon mortgage can be an excellent option for many home buyers, use this calculator to see if a balloon mortgage might fit your needs."
    },
    {
      name: "Bi-weekly Payment Calculator",
      description: "Using bi-weekly payments can accelerate your mortgage payoff and save you thousands in interest. Use this calculator to compare a typical monthly payment schedule to an accelerated bi-weekly payment."
    },
    {
      name: "Bi-weekly Payments for an Existing Mortgage",
      description: "This calculator shows you the possible savings by starting to pay your current mortgage with bi-weekly payments, instead of monthly payments."
    },
    {
      name: "Blended Rate Mortgage Calculator",
      description: "This calculator helps you determine the effective, or blended, interest rate you would pay if you use a first and a second mortgage to finance the purchase of a home."
    },
    {
      name: "FHA Maximum Financing Calculator",
      description: "Use this calculator to determine your maximum FHA mortgage and cash needed for closing."
    },
    {
      name: "Fixed Rate Mortgage vs. Interest Only Mortgage",
      description: "Use this calculator to compare a fixed rate mortgage to Interest Only Mortgage."
    },
    {
      name: "Fixed Rate Mortgage vs. LIBOR ARM",
      description: "Use this calculator to compare a fixed rate mortgage to a LIBOR ARM."
    },
    {
      name: "Interest Only ARM Calculator",
      description: "Interest only mortgages can provide you with very low monthly payments, however you are not paying off any principal during the interest only period."
    },
    {
      name: "Interest Only Mortgage Calculator",
      description: "Use this calculator to generate an amortization schedule for an interest only mortgage."
    },
    {
      name: "Maximum Mortgage",
      description: "Use this calculator to determine your maximum mortgage and how different interest rates affect your how much you can borrow."
    },
    {
      name: "Mortgage APR Calculator",
      description: "Use this calculator to find the APR on your mortgage."
    },
    {
      name: "Mortgage Comparison: 15 Years vs. 30 Years",
      description: "Use this calculator to compare these two mortgage terms, and let us help you decide which term is better for you."
    },
    {
      name: "Mortgage Debt Consolidation",
      description: "This calculator is designed to help determine whether using a mortgage to consolidate your debt is right for you."
    },
    {
      name: "Mortgage Loan Calculator",
      description: "Use this calculator to determine your monthly payment and amortization schedule."
    },
    {
      name: "Mortgage Loan Calculator (PITI)",
      description: "Use this calculator to determine your monthly mortgage principal, interest, taxes and insurance payment (PITI) and amortization schedule."
    },
    {
      name: "Mortgage Payoff",
      description: "Save thousands of dollars in interest by increasing your monthly mortgage payment."
    },
    {
      name: "Mortgage Points Calculator",
      description: "Should you buy points? Use this calculator to find out."
    },
    {
      name: "Mortgage Qualifier",
      description: "Can you buy your dream home? Find out just how much you can afford!"
    },
    {
      name: "Mortgage Refinance Break Even",
      description: "Should you refinance your mortgage? Use this calculator to determine when you will break even."
    },
    {
      name: "Mortgage Required Income",
      description: "Use this calculator to determine how much income you need to qualify for a mortgage and how different interest rates affect your required income."
    },
    {
      name: "Mortgage Tax Savings Calculator",
      description: "Interest and points paid for a home mortgage are tax deductible. Use this calculator to determine how much your mortgage could save you in income taxes."
    },
    {
      name: "Option ARM vs. Fixed Rate Mortgage",
      description: "Use this calculator see how a minimum payment on an Option ARM Mortgage can save you money on your monthly mortgage payment."
    },
    {
      name: "Refinance Interest Savings",
      description: "Use this calculator to see how much interest you can save by refinancing your mortgage!"
    },
    {
      name: "Rent vs. Buy",
      description: "Are you better off buying your home, or should you continue to rent?"
    },
    {
      name: "Reverse Mortgage Calculator",
      description: "This calculator is specifically designed to show you how the outstanding balance of a reverse mortgage can rapidly grow over a period of time."
    }
  ];

  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">
                  <Home 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">
                    Mortgage Tools
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Mortgage calculators and home financing tools to help you make informed home buying decisions
                  </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>

        {/* Mortgage 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">
                {mortgageTools.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">
                          <Home 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 Mortgage Decisions?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Our experienced CPA team can help you understand the financial implications of different mortgage options and develop a home buying strategy that fits your budget.
              </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 Mortgage Consultation
              </Button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default FinancialToolsMortgage;
