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

const FinancialToolsInsurance = () => {
  // Mapping der Tool-Namen zu ihren URLs
  const getToolUrl = (toolName: string): string => {
    const toolUrlMap: { [key: string]: string } = {
      "Comprehensive Life Insurance Analysis": "https://www.cchwebsites.com/content/calculators/EnhancedLifeIns.html",
      "Disability Insurance": "https://www.cchwebsites.com/content/calculators/Disability.html",
      "Fixed Annuity Calculator": "https://www.cchwebsites.com/content/calculators/FixedAnnuity.html",
      "Health Savings Account (HSA) Contribution Calculator": "https://www.cchwebsites.com/content/calculators/HSAContribution.html",
      "Health Savings Account (HSA) Goal Calculator": "https://www.cchwebsites.com/content/calculators/HSAGoal.html",
      "Health Savings Account (HSA) Savings Calculator": "https://www.cchwebsites.com/content/calculators/HSASavings.html",
      "Health Savings Account (HSA) vs. Traditional Health Plan": "https://www.cchwebsites.com/content/calculators/HSAvsTraditional.html",
      "Health Savings Accounts (HSA) Employer Benefit": "https://www.cchwebsites.com/content/calculators/HSABusiness.html",
      "Human Life Value": "https://www.cchwebsites.com/content/calculators/HumanLifeValue.html",
      "Immediate Annuity Calculator": "https://www.cchwebsites.com/content/calculators/ImmediateAnnuity.html",
      "Life Insurance Calculator": "https://www.cchwebsites.com/content/calculators/LifeInsurance.html",
      "Long Term Care Calculator": "https://www.cchwebsites.com/content/calculators/LongtermCare.html",
      "Variable Annuity Calculator": "https://www.cchwebsites.com/content/calculators/Annuity.html",
      "Variable Annuity without Surrender Charges": "https://www.cchwebsites.com/content/calculators/AnnuityNoSurrender.html"
    };
    
    return toolUrlMap[toolName] || "#";
  };

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

  const insuranceTools = [
    {
      name: "Comprehensive Life Insurance Analysis",
      description: "How much life insurance do you need? This comprehensive life calculator includes detailed net worth analysis, budgeting and college savings helps you find out."
    },
    {
      name: "Disability Insurance",
      description: "Use this calculator to determine how much disability insurance you may need to cover expenses if you are unable to work due to illness or injury."
    },
    {
      name: "Fixed Annuity Calculator",
      description: "A fixed annuity can provide a secure, tax-deferred investment. Use this calculator to see how a fixed annuity might fit into your retirement plan."
    },
    {
      name: "Health Savings Account (HSA) Contribution Calculator",
      description: "This Health Savings Account (HSA) calculator determines the amount you are allowed to deposit into an HSA account for the current tax year."
    },
    {
      name: "Health Savings Account (HSA) Goal Calculator",
      description: "Are you looking at the Health Savings Account (HSA) as a retirement account? This calculator will help you determine what you need to do in order to reach your goal."
    },
    {
      name: "Health Savings Account (HSA) Savings Calculator",
      description: "Use this calculator to help you determine how much your Health Savings Account (HSA) will be worth over time."
    },
    {
      name: "Health Savings Account (HSA) vs. Traditional Health Plan",
      description: "Compare an High Deductible Health Plan (HDHP) with a Health Savings Account (HSA) to a traditional health plan."
    },
    {
      name: "Health Savings Accounts (HSA) Employer Benefit",
      description: "This calculator helps estimate the value of creating a High Deductible Health Plan (HDHP) with Heath Savings Accounts (HSA) for your employees."
    },
    {
      name: "Human Life Value",
      description: "One of your most important assets is your ability to earn a paycheck. This calculator is designed to help you understand today's value of your future earning."
    },
    {
      name: "Immediate Annuity Calculator",
      description: "Estimate what your monthly payments might be from an immediate annuity."
    },
    {
      name: "Life Insurance Calculator",
      description: "Find out how much life insurance you really need!"
    },
    {
      name: "Long Term Care Calculator",
      description: "Long term care is needed by those who can't perform the basic tasks required to take care of themselves. This calculator can help you determine if you are financially prepared for this impending expense."
    },
    {
      name: "Variable Annuity Calculator",
      description: "How can a variable annuity help you save for retirement? Use this calculator to find out."
    },
    {
      name: "Variable Annuity without Surrender Charges",
      description: "How can a variable annuity help you save for retirement? Use this calculator to find out."
    }
  ];

  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">
                  <Shield 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">
                    Insurance Tools
                  </h1>
                  <p className="text-body-lg text-white/90">
                    Insurance analysis and planning calculators to help you protect 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>

        {/* Insurance 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">
                {insuranceTools.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">
                          <Shield 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 Insurance Planning?
              </h2>
              
              <p className="text-body-lg text-cream/90 mb-8 leading-relaxed">
                Our experienced CPA team can help you understand your insurance needs and develop a comprehensive protection strategy 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 Insurance Consultation
              </Button>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default FinancialToolsInsurance;
