import {
  Shield,
  Users, 
  BarChart, 
  Globe,
  ZoomIn,
  Code,
  Database,
  Cloud,
  Lock,
  Smartphone,
  Briefcase,
  GraduationCap,
  Heart
} from "lucide-react";
import { GridFeatures, type GridFeaturesData } from "./GridFeatures";

// ===== GRID FEATURES EXAMPLES =====

// 1. Three columns simple features
export const GridFeaturesThreeColumnsExample = () => {
  const content: GridFeaturesData = {
    badge: "Features",
    title: "Everything you need to succeed",
    description: "Our comprehensive platform provides all the essential tools and features to help you build, deploy, and scale your applications with confidence.",
    items: [
      {
        id: "1",
        title: "Easy Integration",
        description: "Connect with your existing tools and workflows seamlessly. Our API-first approach ensures compatibility with your current tech stack."
      },
      {
        id: "2", 
        title: "Real-time Collaboration",
        description: "Work together with your team in real-time. Share projects, leave comments, and track changes with our collaborative features."
      },
      {
        id: "3",
        title: "Advanced Security",
        description: "Enterprise-grade security with end-to-end encryption, SSO integration, and compliance with industry standards."
      },
      {
        id: "4",
        title: "Scalable Infrastructure", 
        description: "Auto-scaling infrastructure that grows with your business. Handle traffic spikes without missing a beat."
      },
      {
        id: "5",
        title: "24/7 Support",
        description: "Get help when you need it with our round-the-clock support team and comprehensive documentation."
      },
      {
        id: "6",
        title: "Analytics & Insights",
        description: "Make data-driven decisions with detailed analytics and reporting tools that provide actionable insights."
      }
    ]
  };

  return (
    <GridFeatures
      content={content}
      variant="threeColumns"
      cols="1-2-3"
    />
  );
};

// 2. Three columns with icons
export const GridFeaturesThreeColumnsIconsExample = () => {
  const content: GridFeaturesData = {
    badge: "Platform",
    title: "Built for developers, designed for scale",
    description: "Experience the power of our developer-first platform with tools and features that streamline your workflow and accelerate development.",
    items: [
      {
        id: "1",
        title: "Developer Experience",
        description: "Intuitive APIs, comprehensive SDKs, and excellent documentation to get you up and running quickly.",
        lucideIcon: Code
      },
      {
        id: "2",
        title: "Database Management",
        description: "Powerful database tools with automated backups, scaling, and performance optimization built-in.",
        lucideIcon: Database
      },
      {
        id: "3",
        title: "Cloud Infrastructure",
        description: "Reliable cloud infrastructure with global deployment, auto-scaling, and 99.99% uptime guarantee.",
        lucideIcon: Cloud
      },
      {
        id: "4",
        title: "Security First",
        description: "Enterprise-grade security with encryption, access controls, and compliance certifications.",
        lucideIcon: Lock
      },
      {
        id: "5",
        title: "Mobile Ready",
        description: "Build responsive applications that work seamlessly across all devices and platforms.",
        lucideIcon: Smartphone
      },
      {
        id: "6",
        title: "Performance Analytics",
        description: "Monitor application performance with real-time metrics, alerts, and detailed reporting.",
        lucideIcon: BarChart
      }
    ]
  };

  return (
    <GridFeatures
      content={content}
      variant="threeColumnsIcons"
      cols="1-2-3"
    />
  );
};

// 3. Grid with media cards
export const GridFeaturesMediaCardsExample = () => {
  const content: GridFeaturesData = {
    badge: "Solutions",
    title: "Comprehensive solutions for every need",
    description: "Discover our range of specialized solutions designed to address specific business challenges and drive growth.",
    items: [
      {
        id: "1",
        title: "E-commerce Platform",
        description: "Complete e-commerce solution with payment processing, inventory management, and customer analytics.",
        image: {
          src: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "E-commerce platform"
        },
        lucideIcon: Smartphone
      },
      {
        id: "2",
        title: "Data Analytics Suite",
        description: "Advanced analytics tools for data visualization, reporting, and business intelligence insights.",
        image: {
          src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "Data analytics dashboard"
        },
        lucideIcon: BarChart
      },
      {
        id: "3",
        title: "Team Collaboration",
        description: "Streamline team communication and project management with our collaboration tools.",
        image: {
          src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "Team collaboration"
        },
        lucideIcon: Users
      },
      {
        id: "4",
        title: "Security Management",
        description: "Comprehensive security suite with threat detection, monitoring, and incident response.",
        image: {
          src: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "Security management"
        },
        lucideIcon: Shield
      },
      {
        id: "5",
        title: "Cloud Infrastructure",
        description: "Scalable cloud solutions with automated deployment, monitoring, and optimization.",
        image: {
          src: "https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "Cloud infrastructure"
        },
        lucideIcon: Cloud
      },
      {
        id: "6",
        title: "API Development",
        description: "Powerful API development tools with testing, documentation, and version management.",
        image: {
          src: "https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80",
          alt: "API development"
        },
        lucideIcon: Code
      }
    ]
  };

  return (
    <GridFeatures
      content={content}
      variant="gridMediaCards"
      cols="1-2-3"
    />
  );
};

// 4. Career positions grid
export const GridFeaturesCareerPositionsExample = () => {
  const content: GridFeaturesData = {
    badge: "Careers",
    title: "Join our growing team",
    description: "We're looking for talented individuals to help us build the future of technology. Explore our open positions and find your next opportunity.",
    items: [
      {
        id: "1",
        title: "Senior Frontend Developer",
        description: "Lead frontend development using React, TypeScript, and modern web technologies. Work on user-facing features and improve developer experience.",
        department: "Engineering",
        location: "Remote / San Francisco",
        lucideIcon: Code
      },
      {
        id: "2",
        title: "Product Manager",
        description: "Drive product strategy and roadmap for our core platform. Work closely with engineering and design teams to deliver exceptional user experiences.",
        department: "Product",
        location: "New York / Remote",
        lucideIcon: Briefcase
      },
      {
        id: "3",
        title: "UX/UI Designer",
        description: "Design intuitive and beautiful user interfaces for our applications. Conduct user research and create design systems.",
        department: "Design",
        location: "Remote",
        lucideIcon: ZoomIn
      },
      {
        id: "4",
        title: "DevOps Engineer",
        description: "Build and maintain our cloud infrastructure. Implement CI/CD pipelines and ensure system reliability and scalability.",
        department: "Engineering",
        location: "Remote / London",
        lucideIcon: Cloud
      },
      {
        id: "5",
        title: "Data Scientist",
        description: "Analyze user behavior and business metrics to drive data-informed decisions. Build machine learning models and predictive analytics.",
        department: "Data",
        location: "San Francisco",
        lucideIcon: BarChart
      },
      {
        id: "6",
        title: "Customer Success Manager",
        description: "Help our customers achieve their goals and maximize value from our platform. Build relationships and drive customer satisfaction.",
        department: "Customer Success",
        location: "Remote",
        lucideIcon: Users
      }
    ]
  };

  return (
    <GridFeatures
      content={content}
      variant="careerPositions"
      cols="1-2"
    />
  );
};

// 5. Career stats with metrics
export const GridFeaturesCareerStatsExample = () => {
  const content: GridFeaturesData = {
    badge: "Company",
    title: "Why join our team?",
    description: "We're building an inclusive workplace where everyone can thrive. Here's what makes us different and why our team loves working here.",
    items: [
      {
        id: "1",
        title: "Team Members",
        description: "Talented professionals from around the world working together to build amazing products.",
        stats: {
          value: "150+",
          label: "Team Members"
        },
        lucideIcon: Users
      },
      {
        id: "2",
        title: "Countries",
        description: "Global remote-first company with team members spanning across multiple continents.",
        stats: {
          value: "25+",
          label: "Countries"
        },
        lucideIcon: Globe
      },
      {
        id: "3",
        title: "Customer Satisfaction",
        description: "Our customers love what we build, and that's reflected in our consistently high satisfaction scores.",
        stats: {
          value: "98%",
          label: "Customer Satisfaction"
        },
        lucideIcon: Heart
      },
      {
        id: "4",
        title: "Learning Budget",
        description: "Annual learning and development budget for each team member to grow their skills.",
        stats: {
          value: "$2,500",
          label: "Learning Budget"
        },
        lucideIcon: GraduationCap
      },
      {
        id: "5",
        title: "Company Growth",
        description: "Year-over-year revenue growth demonstrating our strong market position and stability.",
        stats: {
          value: "300%",
          label: "YoY Growth"
        },
        lucideIcon: BarChart
      },
      {
        id: "6",
        title: "Work-Life Balance",
        description: "Flexible working hours and unlimited PTO to help maintain a healthy work-life balance.",
        stats: {
          value: "Unlimited",
          label: "PTO Days"
        },
        lucideIcon: Heart
      }
    ]
  };

  return (
    <GridFeatures
      content={content}
      variant="careerStats"
      cols="1-2-3"
    />
  );
};

// Export all examples
export const gridFeaturesExamples = {
  threeColumns: GridFeaturesThreeColumnsExample,
  threeColumnsIcons: GridFeaturesThreeColumnsIconsExample,
  gridMediaCards: GridFeaturesMediaCardsExample, // Исправлен ключ
  mediaCards: GridFeaturesMediaCardsExample, // Для обратной совместимости
  careerPositions: GridFeaturesCareerPositionsExample,
  careerStats: GridFeaturesCareerStatsExample
};