Wdipl-react/pages/CaseStudies.tsx

import { motion } from "framer-motion";
import {
  Activity,
  ArrowRight,
  ArrowUpRight,
  Award,
  Building2,
  FlaskConical,
  Globe,
  Heart,
  Package,
  PartyPopper,
  Search,
  ShoppingCart,
  Star,
  Tractor,
  TrendingUp,
  Trophy,
  Tv,
  Users,
  Utensils
} from "lucide-react";
import { useState } from "react";
import { Helmet } from "react-helmet-async";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { Input } from "../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import ambleCase from "../src/images/amble-case.webp";
import ranoutofCase from "../src/images/ranoutof-case.webp";
// import seezunCase from "../src/images/seezun-case.webp";
import tcCase from "../src/images/tc-case.webp";
import wokaCase from "../src/images/woka-case.webp";
import gtCase from "../src/images/gt-case.webp";
import RrCase from "../src/images/resturant-reward-case.webp";
import dkCase from "../src/images/dkCase.webp";
import vib360Case from "../src/images/vib360Case.webp";
import niftyCase from "../src/images/niftyCase.webp";
import prospertyCase from "../src/images/prospertyCase.webp";
import simplitendCase from "../src/images/simplitendCase.webp";
import amozCase from "../src/images/amozCase.webp";
import farmCase from "../src/images/farmCase.webp";
import leanCase from "../src/images/leanCase.webp";
import { useNavigate } from "react-router-dom";


const caseStudies = [
  {
    id: 1,
    title: "RanOutOf",
    image: ranoutofCase,
    category: "Lifestyle",
    industry: "Consumer",
    featured: true,
    link: "/projects/ranoutof",
    icon: Package
  },
  // {
  //   id: 2,
  //   title: "Seezun",
  //   image: seezunCase,
  //   category: "E-commerce",
  //   industry: "Retail",
  //   featured: true,
  //   link: "/projects/seezun",
  //   icon: ShoppingCart
  // },
  {
    id: 3,
    title: "Woka",
    image: wokaCase,
    category: "Health & Fitness",
    industry: "Healthcare",
    featured: true,
    link: "/projects/woka",
    icon: Tv
  },
  {
    id: 6,
    title: "Traders Circuit",
    image: tcCase,
    category: "FinTech",
    industry: "Finance",
    featured: true,
    link: "/projects/traderscircuit",
    icon: TrendingUp
  },
  {
    id: 7,
    title: "Good Times",
    image: gtCase,
    category: "Events",
    industry: "Entertainment",
    featured: true,
    link: "/projects/goodtimes",
    icon: PartyPopper
  },
  {
    id: 8,
    title: "Resturant Reward App",
    image: RrCase,
    category: "Loyalty & Rewards",
    industry: "Hospitality",
    featured: false,
    link: "",
    icon: Utensils
  },
  {
    id: 9,
    title: "Amble",
    image: ambleCase,
    category: "Social",
    industry: "Heritage",
    featured: false,
    link: "/projects/amble",
    icon: Users
  },
  {
    id: 10,
    title: "Amoz",
    image: amozCase,
    category: "Lifestyle",
    industry: "Consumer",
    featured: false,
    link: "/projects/amoz",
    icon: Heart
  },
  {
    id: 11,
    title: "Dorf Ketal",
    image: dkCase,
    category: "Lifestyle",
    industry: "Chemicals",
    featured: false,
    link: "",
    icon: FlaskConical
  },
  {
    id: 12,
    title: "VIB360",
    image: vib360Case,
    category: "Lifestyle",
    industry: "Consumer",
    featured: false,
    link: "/projects/vib360",
    icon: Activity
  },
  {
    id: 13,
    title: "Nifty 11",
    image: niftyCase,
    category: "Lifestyle",
    industry: "Consumer",
    featured: false,
    link: "",
    icon: Trophy
  },
  {
    id: 13,
    title: "Prosperty",
    image: prospertyCase,
    category: "Lifestyle",
    industry: "Real Estate",
    featured: false,
    link: "/projects/prosperty",
    icon: Building2
  },
  {
    id: 14,
    title: "Simpletend",
    image: simplitendCase,
    category: "Health & Fitness",
    industry: "Healthcare",
    featured: false,
    link: "/projects/simpletend",
    icon: Activity
  },
  {
    id: 15,
    title: "Farm Feeder",
    image: farmCase,
    category: "AgriTech",
    industry: "Agriculture",
    featured: false,
    link: "",
    icon: Tractor
  },
  {
    id: 16,
    title: "Lean In  World",
    image: leanCase,
    category: "AgriTech",
    industry: "Agriculture",
    featured: false,
    link: "",
    icon: Globe
  },
];

const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate", "Heritage", "Chemicals", "Hospitality"];
const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech", "Loyalty & Rewards"];

export const CaseStudies = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedIndustry, setSelectedIndustry] = useState("All Industries");
  const [selectedCategory, setSelectedCategory] = useState("All Categories");
  const [showFeaturedOnly, setShowFeaturedOnly] = useState(false);

  // Filter case studies based on search and filters
  const filteredCaseStudies = caseStudies.filter((study) => {
    const search = searchTerm.toLowerCase();

    // Now we only check against `title`, `category`, and `industry`
    const matchesSearch =
      study.title.toLowerCase().includes(search) ||
      study.category.toLowerCase().includes(search) ||
      study.industry.toLowerCase().includes(search);

    const matchesIndustry =
      selectedIndustry === "All Industries" || study.industry === selectedIndustry;

    const matchesCategory =
      selectedCategory === "All Categories" || study.category === selectedCategory;

    const matchesFeatured = !showFeaturedOnly || study.featured;

    return matchesSearch && matchesIndustry && matchesCategory && matchesFeatured;
  });

  const navigate = useNavigate();

  return (
    <div className="min-h-screen dark bg-background">
      {/* <Navigation /> */}

      {/* Hero Section */}
      <section className="relative pt-24 pb-20 overflow-hidden bg-black">
        <Helmet>
          {/* Page Title and Meta Description */}
          <title>Case Studies | AI Web Development Projects by WDI</title>
          <meta
            name="description"
            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
          />

          {/* Canonical Link */}
          <link rel="canonical" href="https://www.wdipl.com/case-studies" />

          {/* Open Graph Tags (for Facebook, LinkedIn) */}
          <meta property="og:title" content="Case Studies | AI Web Development Projects by WDI" />
          <meta
            property="og:description"
            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
          />
          <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="Case Studies | AI Web Development Projects by WDI" />
          <meta
            name="twitter:description"
            content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
          />
          <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="absolute inset-0 bg-gradient-to-br from-accent/5 via-background to-background" />

        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="container relative px-6 mx-auto lg:px-8"
        >
          <div className="max-w-4xl mx-auto text-center">
            <Badge variant="outline" className="mb-6 border-accent/20 text-accent">
              Our Success Stories
            </Badge>
            <h1 className="mb-6 text-4xl font-semibold leading-tight md:text-6xl lg:text-7xl">
              <span className="text-white">Portfolios That </span>
              <span className="text-accent">Define Excellence</span>
            </h1>
            <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
              Explore our portfolio of AI‑driven, award‑winning projects that have transformed businesses and delighted millions of users across diverse industries.
            </p>
          </div>
        </motion.div>
      </section>

      {/* Filters Section */}
      <section className="py-12 border-b bg-background border-white/10">
        <div className="container px-6 mx-auto lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="max-w-6xl mx-auto"
          >
            <div className="grid items-end grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
              {/* Search */}
              <div className="relative">
                <Search className="absolute w-4 h-4 transform -translate-y-1/2 left-3 top-1/2 text-muted-foreground" />
                <Input
                  placeholder="Search portfolios..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10 bg-card/50 border-white/10"
                />
              </div>

              {/* Industry Filter */}
              <Select value={selectedIndustry} onValueChange={setSelectedIndustry}>
                <SelectTrigger className="bg-card/50 border-white/10">
                  <SelectValue placeholder="Select Industry" />
                </SelectTrigger>
                <SelectContent>
                  {industries.map((industry) => (
                    <SelectItem key={industry} value={industry}>
                      {industry}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              {/* Category Filter */}
              <Select value={selectedCategory} onValueChange={setSelectedCategory}>
                <SelectTrigger className="bg-card/50 border-white/10">
                  <SelectValue placeholder="Select Category" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map((category) => (
                    <SelectItem key={category} value={category}>
                      {category}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>

              {/* Featured Toggle */}
              <Button
                variant={showFeaturedOnly ? "default" : "outline"}
                onClick={() => setShowFeaturedOnly(!showFeaturedOnly)}
                className="justify-center h-9"
              >
                <Award className="w-4 h-4 mr-2" />
                Featured Only
              </Button>
            </div>

            {/* Results Count */}
            <div className="mt-6 text-center">
              <p className="text-muted-foreground">
                Showing {filteredCaseStudies.length} of {caseStudies.length} portfolios
              </p>
            </div>
          </motion.div>
        </div>
      </section>

      {/* Case Studies Grid */}
      <section className="py-20 bg-background">
        <div className="container px-6 mx-auto lg:px-8">
          <div className="mx-auto max-w-7xl">
            <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
              {filteredCaseStudies.map((study, index) => {
                const IconComponent = study.icon;
                return (
                  <motion.div
                    key={study.id}
                    initial={{ opacity: 0, y: 40 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.01 }}
                    viewport={{ once: true }}
                    whileHover={{ y: -8, scale: 1.02 }}
                    className="cursor-pointer group"
                    onClick={() => navigate(study.link)}
                  >
                    <Card className="h-full overflow-hidden transition-all duration-500 shadow-lg bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-2xl hover:shadow-accent/10 rounded-2xl"
                      onClick={(e) => {
                        e.stopPropagation();
                        navigate(study.link);
                      }}
                    >
                      <CardContent className="h-full p-0 pb-0 CardContentOverride">
                        {/* Image Header */}
                        <div className="relative overflow-hidden">
                          <ImageWithFallback
                            src={study.image}
                            alt={study.title}
                            className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-110"
                          />
                          <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />

                          {/* Category Badge */}
                          <div className="absolute top-2 left-4">
                            <Badge className="text-white border-0 bg-accent/90">
                              {study.category}
                            </Badge>
                          </div>

                          {/* Featured Badge */}
                          {study.featured && (
                            <div className="absolute top-2 right-4">
                              <div className="flex items-center gap-1 px-3 py-1 text-xs font-medium text-white rounded-full bg-amber-500/90">
                                <Star className="w-3 h-3 fill-current" />
                                Featured
                              </div>
                            </div>
                          )}

                          {/* Icon Overlay */}
                          <div className="absolute bottom-4 left-4">
                            <div className="flex items-center justify-center w-12 h-12 rounded-full bg-white/20 backdrop-blur-md">
                              <IconComponent className="w-6 h-6 text-white" />
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </motion.div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-black">
        <div className="container px-6 mx-auto lg:px-8">
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="max-w-4xl mx-auto text-center"
          >
            <h2 className="mb-6 text-3xl font-semibold text-white lg:text-4xl">
              Ready to Create Your Own Success Story?
            </h2>
            <p className="mb-8 text-xl leading-relaxed text-gray-300">
              Join the ranks of industry leaders who have transformed their businesses with our AI‑driven innovative solutions.
            </p>
            <div className="flex flex-col justify-center gap-4 sm:flex-row">
              <Button
                size="lg"
                className="text-white bg-accent hover:bg-accent/90"
                onClick={() => navigate("/start-a-project")}
              >
                Start Your Project
                <ArrowUpRight className="w-4 h-4 ml-2" />
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={() => navigate("/contact-us")}
              >
                Schedule Consultation
                <ArrowRight className="w-4 h-4 ml-2" />
              </Button>
            </div>
          </motion.div>
        </div>
      </section>

      {/* <Footer /> */}
    </div>
  );
};