import { useState } from "react";
import { Helmet } from "react-helmet-async";
import { Link } from "react-router-dom";
import { Search, Calculator, TrendingUp, Heart, Home as HomeIcon, DollarSign, Ruler, Clock, Percent, PiggyBank, BarChart3, ArrowRightCircle, Triangle, Circle, Zap, GraduationCap, Activity, Divide, Variable, Scale, Target, Shuffle, RotateCcw, Type, Hammer, Wrench, Star } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { allCalculators } from "@/pages/Calculators";

const calculatorCategories = [
  {
    id: "math",
    title: "Mathematics",
    icon: Calculator,
    color: "from-blue-500 to-purple-600",
    calculators: allCalculators.filter(calc => calc.category === "math").slice(0, 5).map(calc => calc.name)
  },
  {
    id: "finance",
    title: "Finance",
    icon: DollarSign,
    color: "from-green-500 to-teal-600",
    calculators: allCalculators.filter(calc => calc.category === "finance").slice(0, 5).map(calc => calc.name)
  },
  {
    id: "construction",
    title: "Construction",
    icon: Hammer,
    color: "from-orange-500 to-red-600",
    calculators: allCalculators.filter(calc => calc.category === "construction").slice(0, 5).map(calc => calc.name)
  },
  {
    id: "health",
    title: "Health",
    icon: Heart,
    color: "from-red-500 to-pink-600",
    calculators: allCalculators.filter(calc => calc.category === "health").slice(0, 5).map(calc => calc.name)
  },
  {
    id: "utility",
    title: "Utility",
    icon: Wrench,
    color: "from-purple-500 to-indigo-600",
    calculators: allCalculators.filter(calc => calc.category === "utility").slice(0, 5).map(calc => calc.name)
  },
  {
    id: "misc",
    title: "Miscellaneous",
    icon: Star,
    color: "from-yellow-500 to-orange-600",
    calculators: allCalculators.filter(calc => calc.category === "misc").slice(0, 5).map(calc => calc.name)
  }
];

const popularCalculators = [
  { name: "TDEE Calculator", path: "/calculator/tdee", icon: Activity },
  { name: "Car Loan Calculator", path: "/calculator/car-loan", icon: DollarSign },
  { name: "Business Loan Calculator", path: "/calculator/business-loan", icon: PiggyBank },
  { name: "EMI Calculator", path: "/calculator/emi", icon: PiggyBank },
  { name: "SIP Calculator", path: "/calculator/sip", icon: TrendingUp },
  { name: "Loan Calculator", path: "/calculator/loan", icon: DollarSign },
  { name: "BMI Calculator", path: "/calculator/bmi", icon: Heart },
  { name: "Percentage Calculator", path: "/calculator/percentage", icon: Percent },
  { name: "Compound Interest", path: "/calculator/compound-interest", icon: BarChart3 },
  { name: "GPA Calculator", path: "/calculator/gpa", icon: GraduationCap },
  { name: "Triangle Calculator", path: "/calculator/triangle", icon: Triangle },
  { name: "Statistics Calculator", path: "/calculator/statistics", icon: BarChart3 },
];

export default function Home() {
  const [searchQuery, setSearchQuery] = useState("");

  const filteredCalculators = allCalculators.filter(calc =>
    calc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    calc.description?.toLowerCase().includes(searchQuery.toLowerCase())
  );

  return (
    <>
      <Helmet>
        <title>Free Online Calculators - Math, Finance, Health & More | QuickSolve Central</title>
        <meta name="description" content="100+ free online calculators for instant results! Math, finance, health, business & more. No registration required. Fast, accurate & mobile-friendly. Try now!" />
        <meta name="keywords" content="free online calculator, math calculator, finance calculator, health calculator, loan calculator, EMI calculator, BMI calculator, business calculator, TDEE calculator, car loan calculator" />
        <link rel="canonical" href="https://quicksolvecentral.com/" />
        
        <meta property="og:title" content="Free Online Calculators - 100+ Tools for Math, Finance & Health" />
        <meta property="og:description" content="Get instant, accurate calculations for FREE! 100+ professional calculators. No registration required." />
        <meta property="og:url" content="https://quicksolvecentral.com/" />
        <meta property="og:type" content="website" />
        <meta property="og:site_name" content="QuickSolve Central" />
        
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Free Online Calculators - Math, Finance, Health & More" />
        <meta name="twitter:description" content="100+ free calculators for instant results. Math, finance, health & business tools." />
        
        <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large" />
        <meta name="author" content="QuickSolve Central" />
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "WebSite",
            "name": "QuickSolve Central",
            "url": "https://quicksolvecentral.com",
            "description": "100+ free online calculators for math, finance, health, and business calculations",
            "potentialAction": {
              "@type": "SearchAction",
              "target": "https://quicksolvecentral.com/?search={search_term_string}",
              "query-input": "required name=search_term_string"
            },
            "publisher": {
              "@type": "Organization",
              "name": "QuickSolve Central",
              "url": "https://quicksolvecentral.com"
            }
          })}
        </script>
        <script type="application/ld+json">
          {JSON.stringify({
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [
              {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "https://quicksolvecentral.com/"
              }
            ]
          })}
        </script>
      </Helmet>
      <div className="space-y-12 animate-fade-in">
      {/* Hero Section - Enhanced */}
      <div className="relative text-center space-y-6 py-12 md:py-20">
        {/* Animated Background Elements */}
        <div className="absolute inset-0 -z-10 overflow-hidden">
          <div className="absolute top-1/4 left-1/4 w-72 h-72 bg-primary/10 rounded-full blur-3xl animate-pulse" />
          <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }} />
        </div>
        
        <div className="inline-flex items-center justify-center w-20 h-20 rounded-3xl bg-gradient-primary shadow-purple animate-pulse-glow hover-lift">
          <Calculator className="w-10 h-10 text-white" />
        </div>
        
        <div className="space-y-4">
          <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold bg-gradient-primary bg-clip-text text-transparent animate-fade-in leading-tight">
            QuickSolve Central
          </h1>
          <p className="text-xl md:text-2xl text-muted-foreground max-w-3xl mx-auto animate-fade-in font-medium" style={{ animationDelay: '0.2s' }}>
            100+ Free Online Calculators for Instant Results
          </p>
          <p className="text-base md:text-lg text-muted-foreground/80 max-w-2xl mx-auto animate-fade-in" style={{ animationDelay: '0.3s' }}>
            Math, Finance, Health, Business & More - Fast, Accurate & Mobile-Friendly
          </p>
        </div>

        {/* CTA Buttons */}
        <div className="flex flex-wrap items-center justify-center gap-4 pt-4 animate-fade-in" style={{ animationDelay: '0.4s' }}>
          <Link to="/calculators">
            <Button size="lg" className="rounded-xl shadow-lg hover-lift group">
              <Zap className="w-5 h-5 mr-2 group-hover:animate-pulse" />
              Explore All Calculators
            </Button>
          </Link>
          <Link to="#popular">
            <Button variant="outline" size="lg" className="rounded-xl hover-lift">
              <Star className="w-5 h-5 mr-2" />
              Popular Tools
            </Button>
          </Link>
        </div>
      </div>

      {/* Enhanced Search Bar with Blog Link */}
      <div className="relative max-w-2xl mx-auto space-y-4">
        <div className="relative group">
          <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-muted-foreground w-5 h-5 transition-colors group-focus-within:text-primary z-10" />
          <Input
            placeholder="Search 100+ calculators... (e.g., BMI, Loan, Tax)"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="pl-12 pr-4 h-14 rounded-2xl border-2 border-border/50 bg-card/50 backdrop-blur-sm text-base focus:border-primary focus:shadow-[0_0_30px_rgba(var(--primary-rgb),0.2)] transition-all duration-300 hover:border-border focus:bg-card"
          />
          {searchQuery && (
            <button
              onClick={() => setSearchQuery('')}
              className="absolute right-4 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors z-10"
            >
              <ArrowRightCircle className="w-5 h-5 rotate-45" />
            </button>
          )}
          {/* Subtle glow effect */}
          <div className="absolute inset-0 rounded-2xl bg-gradient-to-r from-primary/5 via-primary/10 to-accent/5 opacity-0 group-focus-within:opacity-100 blur-xl transition-opacity duration-500 -z-10" />
        </div>
        
        {/* Blog CTA */}
        <div className="flex items-center justify-center gap-2 text-sm">
          <span className="text-muted-foreground">Looking for tips & guides?</span>
          <Link to="/blog" className="font-medium text-primary hover:underline inline-flex items-center gap-1 group">
            Visit our Blog
            <ArrowRightCircle className="w-3 h-3 group-hover:translate-x-0.5 transition-transform" />
          </Link>
        </div>
      </div>

      {/* All Calculator Options */}
      <section className="space-y-3">
        <h2 className="text-2xl font-semibold">
          {searchQuery ? `Search Results (${filteredCalculators.length})` : "All Calculator Options"}
        </h2>
        <div className="flex gap-2 overflow-x-auto py-2 -mx-4 px-4">
          {(searchQuery ? filteredCalculators : allCalculators).map((item) => (
            <Link key={item.id} to={item.path} className="shrink-0">
              <Button variant="outline" size="sm" className="rounded-full">
                <item.icon className="w-4 h-4 mr-2" />
                {item.name}
              </Button>
            </Link>
          ))}
        </div>
        {searchQuery && filteredCalculators.length === 0 && (
          <p className="text-center text-muted-foreground py-8">
            No calculators found matching "{searchQuery}"
          </p>
        )}
      </section>

      {/* Popular Calculators - Clean 3D Design */}
      <section id="popular" className="space-y-6 scroll-mt-20">
        <div className="flex items-center justify-between">
          <h2 className="text-2xl sm:text-3xl font-bold bg-gradient-primary bg-clip-text text-transparent">
            Popular Calculators
          </h2>
          <Link to="/calculators">
            <Button variant="ghost" size="sm" className="hover-scale group text-xs sm:text-sm">
              View All
              <ArrowRightCircle className="w-3 h-3 sm:w-4 sm:h-4 ml-1 sm:ml-2 group-hover:translate-x-1 transition-transform" />
            </Button>
          </Link>
        </div>
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
          {popularCalculators.map((calc, index) => (
            <Link
              key={calc.path}
              to={calc.path}
              className="group animate-fade-in"
              style={{ animationDelay: `${index * 0.05}s` }}
            >
              {/* Clean 3D Card */}
              <Card className="relative h-full overflow-hidden bg-gradient-to-br from-card via-card/95 to-card/90 backdrop-blur-sm border border-border/50 hover:border-primary/30 transition-all duration-500 hover:scale-[1.02] hover:shadow-[0_15px_50px_-12px_rgba(0,0,0,0.25)]">
                {/* Subtle Glow */}
                <div className="absolute -inset-px bg-gradient-to-br from-primary/10 via-transparent to-accent/10 rounded-lg opacity-0 group-hover:opacity-100 blur-lg transition-opacity duration-500" />
                
                <CardContent className="relative p-3 sm:p-4 md:p-5 space-y-2.5 sm:space-y-3">
                  {/* Minimalist Icon Container */}
                  <div className="relative inline-flex">
                    <div className="relative w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 rounded-xl sm:rounded-2xl bg-gradient-to-br from-primary/10 via-primary/5 to-transparent group-hover:from-primary/20 group-hover:to-primary/10 flex items-center justify-center transform group-hover:scale-105 group-hover:rotate-3 transition-all duration-500 shadow-md group-hover:shadow-lg group-hover:shadow-primary/20">
                      <calc.icon className="w-5 h-5 sm:w-6 sm:h-6 md:w-7 md:h-7 text-primary transition-all group-hover:brightness-110" />
                    </div>
                  </div>
                  
                  <div>
                    <h3 className="font-semibold text-xs sm:text-sm md:text-base leading-tight group-hover:text-primary transition-colors duration-300 line-clamp-2">
                      {calc.name}
                    </h3>
                  </div>
                  
                  {/* Bottom Accent */}
                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary/0 via-primary/50 to-primary/0 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                </CardContent>
              </Card>
            </Link>
          ))}
        </div>
      </section>

      {/* Categories - Enhanced */}
      <section className="space-y-6">
        <h2 className="text-3xl font-bold bg-gradient-primary bg-clip-text text-transparent">
          Browse by Category
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {calculatorCategories.map((category, index) => (
            <Card 
              key={category.id} 
              className="hover-lift border-2 border-border/50 hover:border-primary/50 transition-all duration-300 bg-card/50 backdrop-blur-sm animate-fade-in hover:shadow-glow"
              style={{ animationDelay: `${index * 0.1}s` }}
            >
              <CardHeader>
                <div className="flex items-center space-x-4">
                  <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${category.color} flex items-center justify-center shadow-lg`}>
                    <category.icon className="w-7 h-7 text-white" />
                  </div>
                  <CardTitle className="text-xl font-bold">{category.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="space-y-2">
                  {category.calculators.slice(0, 4).map((calcName) => {
                    const calc = allCalculators.find(c => c.name === calcName);
                    return calc ? (
                      <Link
                        key={calc.id}
                        to={calc.path}
                        className="flex items-center text-sm text-muted-foreground hover:text-primary transition-colors group"
                      >
                        <Circle className="w-2 h-2 mr-2 fill-current opacity-50 group-hover:opacity-100" />
                        {calc.name}
                      </Link>
                    ) : null;
                  })}
                </div>
                <Link
                  to={`/calculators?category=${category.id}`}
                  className="inline-flex items-center text-sm font-medium text-primary hover:gap-2 transition-all duration-200 pt-2 border-t border-border/50"
                >
                  View all {category.calculators.length}+ calculators
                  <ArrowRightCircle className="w-4 h-4 ml-1" />
                </Link>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Features - Enhanced */}
      <section className="py-12 space-y-8">
        <div className="text-center space-y-3">
          <h2 className="text-3xl md:text-4xl font-bold bg-gradient-primary bg-clip-text text-transparent">
            Why Choose QuickSolve Central?
          </h2>
          <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
            Trusted by millions for accurate, fast, and reliable calculations
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <Card className="text-center border-2 border-border/50 hover:border-primary/50 transition-all duration-300 bg-card/50 backdrop-blur-sm hover-lift animate-fade-in">
            <CardHeader>
              <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-primary shadow-purple flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                <Zap className="w-8 h-8 text-white" />
              </div>
              <CardTitle className="text-xl font-bold">Lightning Fast</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription className="text-base leading-relaxed">
                Get instant results with our optimized calculators. No waiting, no delays - just immediate, accurate answers.
              </CardDescription>
            </CardContent>
          </Card>

          <Card className="text-center border-2 border-border/50 hover:border-primary/50 transition-all duration-300 bg-card/50 backdrop-blur-sm hover-lift animate-fade-in" style={{ animationDelay: '0.1s' }}>
            <CardHeader>
              <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-primary shadow-purple flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                <Target className="w-8 h-8 text-white" />
              </div>
              <CardTitle className="text-xl font-bold">100% Accurate</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription className="text-base leading-relaxed">
                Precise calculations you can trust. Powered by proven mathematical formulas and validated algorithms.
              </CardDescription>
            </CardContent>
          </Card>

          <Card className="text-center border-2 border-border/50 hover:border-primary/50 transition-all duration-300 bg-card/50 backdrop-blur-sm hover-lift animate-fade-in" style={{ animationDelay: '0.2s' }}>
            <CardHeader>
              <div className="mx-auto w-16 h-16 rounded-2xl bg-gradient-primary shadow-purple flex items-center justify-center mb-3 group-hover:scale-110 transition-transform">
                <Shuffle className="w-8 h-8 text-white" />
              </div>
              <CardTitle className="text-xl font-bold">Easy to Use</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription className="text-base leading-relaxed">
                Intuitive design that anyone can use. Beautiful interface with mobile-friendly responsive layout.
              </CardDescription>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* Quick Access */}
      <section className="space-y-4">
        <h2 className="text-2xl font-semibold">Quick Access</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <Link to="/calculator/percentage">
            <Card className="hover-lift gradient-primary text-white group">
              <CardContent className="p-6 text-center">
                <Calculator className="w-8 h-8 mx-auto mb-2" />
                <h3 className="font-semibold mb-1">Percentage Calculator</h3>
                <p className="text-sm opacity-90">Calculate percentages easily</p>
              </CardContent>
            </Card>
          </Link>
          
          <Link to="/history">
            <Card className="hover-lift gradient-accent text-white group">
              <CardContent className="p-6 text-center">
                <Clock className="w-8 h-8 mx-auto mb-2" />
                <h3 className="font-semibold mb-1">History</h3>
                <p className="text-sm opacity-90">View past calculations</p>
              </CardContent>
            </Card>
          </Link>
          
          <Link to="/calculators">
            <Card className="hover-lift gradient-purple text-white group">
              <CardContent className="p-6 text-center">
                <BarChart3 className="w-8 h-8 mx-auto mb-2" />
                <h3 className="font-semibold mb-1">All Calculators</h3>
                <p className="text-sm opacity-90">Browse complete collection</p>
              </CardContent>
            </Card>
          </Link>
        </div>
      </section>
    </div>
    </>
  );
}