import { motion } from "framer-motion";
import {
  Activity,
  ChevronRight,
  Clock,
  Eye,
  Heart,
  MessageSquare,
  Target,
  Trophy,
  Users,
  Zap,
} from "lucide-react";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";

// Fitness & Wellness Hero Section
const FitnessWellnessHero = () => {
  const navigate = useNavigate();
  return (
    <section className="relative py-20 overflow-hidden bg-black">
      <Helmet>
        {/* Page Title and Meta Description */}
        <title>Fitness & Wellness Platforms | WDI – Digital Health Solutions</title>
        <meta
          name="description"
          content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
        />

        {/* Canonical Link */}
        <link rel="canonical" href="https://www.wdipl.com/industries/healthcare/fitness-wellness-platforms" />

        {/* Open Graph Tags (for Facebook, LinkedIn) */}
        <meta property="og:title" content="Fitness & Wellness Platforms | WDI – Digital Health Solutions" />
        <meta
          property="og:description"
          content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
        />
        <meta property="og:url" content="https://www.wdipl.com/services" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Twitter Card Tags */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content="Fitness & Wellness Platforms | WDI – Digital Health Solutions" />
        <meta
          name="twitter:description"
          content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
        />
        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />

        {/* Social Profiles (using JSON-LD Schema) */}
        <script type="application/ld+json">
          {`
                              {
                                "@context": "https://schema.org",
                                "@type": "Organization",
                                "name": "WDI",
                                "url": "https://www.wdipl.com",
                                "sameAs": [
                                  "https://www.facebook.com/wdideas",
                                  "https://www.linkedin.com/in/website-developers-india/",
                                  "https://www.instagram.com/wdipl/"
                                ]
                              }
                            `}
        </script>
      </Helmet>
      <div className="container mx-auto px-6 lg:px-8">
        <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
          <motion.div
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
            className="space-y-8"
          >
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
            >
              <span className="text-white/70 text-sm font-medium">
                Industries • Healthcare
              </span>
            </motion.div>

            <div className="space-y-6">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
                Fitness & Wellness Platforms
              </h1>

              <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                Inspire healthier living and build thriving communities with
                engaging, personalized, and data-driven fitness and wellness
                digital platforms.
              </p>
            </div>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
              className="flex flex-col sm:flex-row gap-4"
            >
              <ShimmerButton
                className="text-lg px-8 py-4"
                onClick={() => navigate("/start-a-project")}
              >
                <div className="inline-flex items-center gap-2">
                  <MessageSquare className="w-5 h-5 flex-shrink-0" />
                  <span>Get a Free Consultation</span>
                </div>
              </ShimmerButton>
              <Button
                variant="outline"
                size="lg"
                className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
              >
                <div className="inline-flex items-center gap-2">
                  <Eye className="w-5 h-5 flex-shrink-0" />
                  <span>View Wellness Case Studies</span>
                </div>
              </Button>
            </motion.div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
            className="relative flex flex-col items-center"
          >
            <div className="relative w-full max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 0.4 }}
                className="relative"
              >
                <motion.div
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  transition={{ duration: 0.8, delay: 0.6 }}
                  className="relative bg-gray-900 rounded-3xl p-6 mx-auto max-w-2xl shadow-2xl border border-gray-700"
                >
                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 1.0 }}
                    className="flex items-center justify-between mb-6"
                  >
                    <div>
                      <h3 className="text-xl font-semibold text-white">
                        Fitness Dashboard
                      </h3>
                      <p className="text-gray-400 text-sm">
                        Personal wellness tracking
                      </p>
                    </div>
                    <Badge
                      variant="secondary"
                      className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
                    >
                      <Heart className="w-3 h-3 mr-1" />
                      Active
                    </Badge>
                  </motion.div>

                  <motion.div
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ duration: 0.8, delay: 1.2 }}
                    className="bg-gradient-to-br from-purple-600 to-pink-600 rounded-2xl p-6 mb-6"
                  >
                    <div className="flex items-center justify-between mb-4">
                      <div>
                        <div className="text-purple-100 text-sm mb-1">
                          Today's Goal Progress
                        </div>
                        <motion.div
                          initial={{ opacity: 0 }}
                          animate={{ opacity: 1 }}
                          transition={{ duration: 1, delay: 1.4 }}
                          className="text-white text-3xl font-bold"
                        >
                          8,432 steps
                        </motion.div>
                      </div>
                      <div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
                        <Activity className="w-6 h-6 text-white" />
                      </div>
                    </div>

                    <div className="flex items-center justify-between text-purple-100 text-sm">
                      <span className="flex items-center gap-1">
                        <Target className="w-4 h-4" />
                        Goal: 10,000
                      </span>
                      <span>84% Complete</span>
                    </div>
                  </motion.div>

                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 1.6 }}
                    className="grid grid-cols-2 gap-4 mb-6"
                  >
                    {[
                      {
                        name: "Calories Burned",
                        value: "420",
                        unit: "kcal",
                        icon: Zap,
                        color: "orange",
                      },
                      {
                        name: "Workout Time",
                        value: "45",
                        unit: "min",
                        icon: Clock,
                        color: "blue",
                      },
                      {
                        name: "Heart Rate",
                        value: "72",
                        unit: "bpm",
                        icon: Heart,
                        color: "red",
                      },
                      {
                        name: "Sleep Score",
                        value: "8.5",
                        unit: "/10",
                        icon: Activity,
                        color: "green",
                      },
                    ].map((metric, i) => (
                      <motion.div
                        key={i}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.5, delay: 1.8 + i * 0.1 }}
                        className="bg-gray-800/50 rounded-xl p-4"
                      >
                        <div className="flex items-center gap-2 mb-2">
                          <metric.icon
                            className={`w-4 h-4 ${metric.color === "orange"
                                ? "text-orange-400"
                                : metric.color === "blue"
                                  ? "text-blue-400"
                                  : metric.color === "red"
                                    ? "text-red-400"
                                    : "text-green-400"
                              }`}
                          />
                          <span className="text-white font-medium text-sm">
                            {metric.name}
                          </span>
                        </div>
                        <div className="text-gray-300 text-lg font-semibold">
                          {metric.value}
                        </div>
                        <div className="text-gray-400 text-xs">
                          {metric.unit}
                        </div>
                      </motion.div>
                    ))}
                  </motion.div>

                  <motion.div
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.8, delay: 2.6 }}
                    className="space-y-3"
                  >
                    <div className="flex items-center justify-between text-white">
                      <span className="font-medium">Recent Activities</span>
                      <ChevronRight className="w-4 h-4 text-gray-400" />
                    </div>

                    {[
                      {
                        activity: "Morning Yoga",
                        detail: "30 min session completed",
                        time: "2h ago",
                        icon: Heart,
                        color: "purple",
                      },
                      {
                        activity: "Evening Run",
                        detail: "5K distance covered",
                        time: "1 day ago",
                        icon: Activity,
                        color: "green",
                      },
                      {
                        activity: "Strength Training",
                        detail: "Upper body workout",
                        time: "2 days ago",
                        icon: Trophy,
                        color: "blue",
                      },
                    ].map((activity, i) => (
                      <motion.div
                        key={i}
                        initial={{ opacity: 0, x: -20 }}
                        animate={{ opacity: 1, x: 0 }}
                        transition={{ duration: 0.5, delay: 2.8 + i * 0.1 }}
                        className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
                      >
                        <div
                          className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "purple"
                              ? "bg-purple-500/20"
                              : activity.color === "green"
                                ? "bg-green-500/20"
                                : "bg-blue-500/20"
                            }`}
                        >
                          <activity.icon
                            className={`w-4 h-4 ${activity.color === "purple"
                                ? "text-purple-400"
                                : activity.color === "green"
                                  ? "text-green-400"
                                  : "text-blue-400"
                              }`}
                          />
                        </div>
                        <div className="flex-1">
                          <div className="text-white text-sm">
                            {activity.activity}
                          </div>
                          <div className="text-gray-400 text-xs">
                            {activity.detail}
                          </div>
                        </div>
                        <div className="text-gray-400 text-xs">
                          {activity.time}
                        </div>
                      </motion.div>
                    ))}
                  </motion.div>
                </motion.div>
              </motion.div>

              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.8, delay: 3.6 }}
                className="flex justify-center gap-4 flex-wrap mt-8"
              >
                <Badge
                  variant="secondary"
                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
                >
                  <Heart className="w-3 h-3 mr-1" />
                  Personalized
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
                >
                  <Users className="w-3 h-3 mr-1" />
                  Community
                </Badge>
                <Badge
                  variant="secondary"
                  className="bg-green-500/20 text-green-300 border-green-500/30"
                >
                  <Trophy className="w-3 h-3 mr-1" />
                  Gamified
                </Badge>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
};

// Main Fitness & Wellness Page
export const FitnessWellnessPlatforms = () => {
  return (
    <div className="dark min-h-screen">
      {/* <Navigation /> */}

      <section className="bg-black">
        <FitnessWellnessHero />
      </section>

      {/* Additional sections would go here following the same pattern as other industry pages */}

      <section className="bg-card">
        {/* <Footer /> */}
      </section>
    </div>
  );
};