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 { 
  ExternalLink, 
  DollarSign, 
  Building, 
  Newspaper, 
  FileText,
  Globe,
  Shield,
  TrendingUp
} from "lucide-react";

const Links = () => {
  const linkCategories = [
    {
      icon: DollarSign,
      title: "Financial",
      description: "Financial news, resources, and tools",
      links: [
        {
          name: "CNN Business",
          url: "https://edition.cnn.com/business",
          description: "CNN Business offers comprehensive business news, market updates, and financial information."
        }
      ]
    },
    {
      icon: Building,
      title: "Governmental",
      description: "Government agencies and official resources",
      links: [
        {
          name: "Social Security Online",
          url: "https://www.ssa.gov/",
          description: "The Official Website of the U.S. Social Security Administration."
        },
        {
          name: "U.S. Small Business Administration",
          url: "https://www.sba.gov/",
          description: "Small business programs and services to help you start, grow, and succeed."
        }
      ]
    },
    {
      icon: Newspaper,
      title: "News",
      description: "Financial and business news sources",
      links: [
        {
          name: "MSNBC - Microsoft & NBC",
          url: "https://www.msnbc.msn.com/",
          description: "MSNBC is the place for up to the minute news. Many of the news articles have audio and video clips."
        },
        {
          name: "Wall Street Journal",
          url: "https://www.wsj.com/",
          description: "Complete financial news service offers personalized news and market quotes. Plus, links to Barron's Online and Smart Money Interactive."
        }
      ]
    },
    {
      icon: FileText,
      title: "Tax",
      description: "Tax-related resources and tools",
      links: [
        {
          name: "Check IRS Refund Status",
          url: "https://sa.www4.irs.gov/wmr/",
          description: "Track your tax return through the IRS website."
        },
        {
          name: "The Internal Revenue Service",
          url: "https://www.irs.gov/",
          description: "Home of the IRS on the Web. The IRS has definitely done a nice job on their Website."
        },
        {
          name: "Texas Department of Revenue",
          url: "https://comptroller.texas.gov/taxes/",
          description: "Texas Department of Revenue - Official state tax information and resources."
        }
      ]
    }
  ];

  const additionalResources = [
    {
      icon: Shield,
      title: "Professional Organizations",
      links: [
        { name: "American Institute of CPAs (AICPA)", url: "https://www.aicpa.org" },
        { name: "Texas Society of CPAs", url: "https://www.tscpa.org" },
        { name: "National Association of Tax Professionals", url: "https://www.natptax.com" }
      ]
    },
    {
      icon: TrendingUp,
      title: "Investment Resources",
      links: [
        { name: "Securities and Exchange Commission", url: "https://www.sec.gov" },
        { name: "Financial Industry Regulatory Authority", url: "https://www.finra.org" },
        { name: "Morningstar", url: "https://www.morningstar.com" }
      ]
    },
    {
      icon: Globe,
      title: "Business Resources",
      links: [
        { name: "U.S. Chamber of Commerce", url: "https://www.uschamber.com" },
        { name: "Better Business Bureau", url: "https://www.bbb.org" },
        { name: "SCORE - Small Business Mentoring", url: "https://www.score.org" }
      ]
    }
  ];

  const handleLinkClick = (url: string) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div className="min-h-screen">
      <Navigation />
      <main className="pt-16">
        {/* Hero Section */}
        <section 
          className="relative py-24 flex items-center justify-center text-center"
          style={{
            backgroundImage: "url('/lovable-uploads/f8f08a1a-0132-4376-af8a-c5bb86f0627e.png')",
            backgroundSize: "90% 80%",
            backgroundPosition: "center",
            backgroundRepeat: "no-repeat"
          }}
        >
          <div className="absolute inset-0 bg-forest/60"></div>
          <div className="relative z-10 container mx-auto px-4 text-center">
            <h1 className="text-display-xl font-display font-bold text-cream mb-6">
              Links
            </h1>
            <p className="text-body-lg text-cream/90 max-w-3xl mx-auto">
              There are many great sites on the Web, but trying to find those great sites can be a frustrating experience. We have compiled a list of websites that we have found to be helpful sources of information. When you click on a link, a new window will pop up. Close the window when you are ready to return to this page.
            </p>
          </div>
        </section>

        {/* Main Link Categories */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">
              <div className="grid lg:grid-cols-2 gap-12">
                {linkCategories.map((category, index) => {
                  const Icon = category.icon;
                  return (
                    <div key={index}>
                      <div className="flex items-center gap-4 mb-8">
                        <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center">
                          <Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                        </div>
                        <div>
                          <h2 className="text-display-md font-display font-semibold text-forest">
                            {category.title}
                          </h2>
                          <p className="text-sage">{category.description}</p>
                        </div>
                      </div>
                      
                      <div className="space-y-4">
                        {category.links.map((link, linkIndex) => (
                          <Card key={linkIndex} className="rounded-xl card-elevation hover:shadow-lg gentle-transition cursor-pointer">
                            <CardContent className="p-6">
                              <div className="flex items-start justify-between">
                                <div className="flex-1">
                                  <h3 className="font-display font-semibold text-forest mb-2">
                                    {link.name}
                                  </h3>
                                  <p className="text-sage text-sm leading-relaxed">
                                    {link.description}
                                  </p>
                                </div>
                                <Button
                                  size="sm"
                                  variant="outline"
                                  className="ml-4 flex-shrink-0"
                                  onClick={() => handleLinkClick(link.url)}
                                >
                                  <ExternalLink className="w-4 h-4" strokeWidth={1.5} />
                                </Button>
                              </div>
                            </CardContent>
                          </Card>
                        ))}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        {/* Additional Resources */}
        <section className="py-24 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-6xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Additional Resources
                </h2>
                <p className="text-body-lg text-sage">
                  More helpful resources organized by category
                </p>
              </div>

              <div className="grid md:grid-cols-3 gap-8">
                {additionalResources.map((category, index) => {
                  const Icon = category.icon;
                  return (
                    <Card key={index} className="rounded-2xl card-elevation">
                      <CardContent className="p-8">
                        <div className="flex items-center gap-3 mb-6">
                          <div className="w-10 h-10 bg-brass/20 rounded-xl flex items-center justify-center">
                            <Icon className="w-5 h-5 text-brass" strokeWidth={1.5} />
                          </div>
                          <h3 className="text-display-md font-display font-semibold text-forest">
                            {category.title}
                          </h3>
                        </div>
                        
                        <div className="space-y-3">
                          {category.links.map((link, linkIndex) => (
                            <div
                              key={linkIndex}
                              className="flex items-center justify-between p-3 rounded-xl hover:bg-muted/50 gentle-transition cursor-pointer"
                              onClick={() => handleLinkClick(link.url)}
                            >
                              <span className="text-sage text-sm font-medium">{link.name}</span>
                              <ExternalLink className="w-4 h-4 text-brass flex-shrink-0" strokeWidth={1.5} />
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        {/* Quick Access */}
        <section className="py-24 bg-background">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <div className="text-center mb-12">
                <h2 className="text-display-lg font-display font-semibold text-forest mb-4">
                  Quick Access
                </h2>
                <p className="text-body-lg text-sage">
                  Most frequently accessed resources
                </p>
              </div>

              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {[
                  { name: "IRS Website", url: "https://www.irs.gov/", icon: FileText },
                  { name: "Social Security", url: "https://www.ssa.gov/", icon: Shield },
                  { name: "SBA", url: "https://www.sba.gov/", icon: Building },
                  { name: "Texas Comptroller", url: "https://comptroller.texas.gov/taxes/", icon: Globe }
                ].map((link, index) => {
                  const Icon = link.icon;
                  return (
                    <Card key={index} className="rounded-xl card-elevation hover:shadow-lg gentle-transition cursor-pointer">
                      <CardContent className="p-6 text-center">
                        <div className="w-12 h-12 bg-brass/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                          <Icon className="w-6 h-6 text-brass" strokeWidth={1.5} />
                        </div>
                        <h3 className="font-display font-semibold text-forest mb-2">
                          {link.name}
                        </h3>
                        <Button
                          size="sm"
                          variant="outline"
                          className="w-full"
                          onClick={() => handleLinkClick(link.url)}
                        >
                          <ExternalLink className="w-4 h-4 mr-2" strokeWidth={1.5} />
                          Visit Site
                        </Button>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            </div>
          </div>
        </section>

        {/* Disclaimer */}
        <section className="py-16 bg-muted/30">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <Card className="rounded-2xl bg-brass/10 border-brass/20">
                <CardContent className="p-6">
                  <div className="text-center">
                    <h3 className="font-display font-semibold text-forest mb-3">
                      Important Notice
                    </h3>
                    <p className="text-sage text-sm leading-relaxed">
                      These links are provided for your convenience and information only. We are not responsible for the content, accuracy, or availability of these external websites. The inclusion of any link does not imply endorsement by Greg Knopp, P.C. Please review the privacy policies and terms of use of any external websites you visit.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </section>
      </main>
      <Footer />
      <ScrollToTop />
    </div>
  );
};

export default Links;