1"use client";
2
3import { useState } from "react";
4import { Button } from "@/components/ui/button";
5import { Card, CardContent } from "@/components/ui/card";
6import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
7import { Code, Palette, Zap, Shield } from "lucide-react";
8
9export function FeatureBlock4() {
10  const features = [
11    {
12      id: "development",
13      label: "Development",
14      icon: Code,
15      title: "Advanced Development Tools",
16      description:
17        "Professional-grade development environment with everything you need to build modern applications.",
18      image:
19        "https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=600",
20      points: [
21        "Intelligent code completion and syntax highlighting",
22        "Built-in debugging and testing tools",
23        "Git integration with visual diff viewer",
24        "Package management and dependency tracking",
25      ],
26    },
27    {
28      id: "design",
29      label: "Design",
30      icon: Palette,
31      title: "Beautiful Design System",
32      description:
33        "Create stunning user interfaces with our comprehensive design system and component library.",
34      image:
35        "https://images.pexels.com/photos/3184394/pexels-photo-3184394.jpeg?auto=compress&cs=tinysrgb&w=600",
36      points: [
37        "Pre-built components and templates",
38        "Customizable design tokens and themes",
39        "Responsive design utilities",
40        "Accessibility-first approach",
41      ],
42    },
43    {
44      id: "performance",
45      label: "Performance",
46      icon: Zap,
47      title: "Lightning Fast Performance",
48      description:
49        "Optimized for speed with automatic performance enhancements and global CDN delivery.",
50      image:
51        "https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=600",
52      points: [
53        "Automatic code splitting and lazy loading",
54        "Image optimization and WebP conversion",
55        "Global CDN with edge caching",
56        "Performance monitoring and alerts",
57      ],
58    },
59    {
60      id: "security",
61      label: "Security",
62      icon: Shield,
63      title: "Enterprise-Grade Security",
64      description:
65        "Built-in security features to protect your applications and user data from threats.",
66      image:
67        "https://images.pexels.com/photos/3184291/pexels-photo-3184291.jpeg?auto=compress&cs=tinysrgb&w=600",
68      points: [
69        "SSL certificates and HTTPS enforcement",
70        "DDoS protection and rate limiting",
71        "Regular security audits and updates",
72        "Compliance with GDPR and SOC 2",
73      ],
74    },
75  ];
76
77  return (
78    <section className="w-full py-20 md:py-32 bg-muted/30">
79      <div className="container mx-auto px-4 md:px-6">
80        <div className="text-center space-y-4 mb-16">
81          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">
82            Everything You Need in One Platform
83          </h2>
84          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
85            Discover how our integrated features work together to streamline
86            your development workflow.
87          </p>
88        </div>
89
90        <Tabs defaultValue="development" className="w-full">
91          <TabsList className="grid w-full grid-cols-2 lg:grid-cols-4 mb-12">
92            {features.map((feature) => (
93              <TabsTrigger
94                key={feature.id}
95                value={feature.id}
96                className="gap-2"
97              >
98                <feature.icon className="h-4 w-4" />
99                {feature.label}
100              </TabsTrigger>
101            ))}
102          </TabsList>
103
104          {features.map((feature) => (
105            <TabsContent key={feature.id} value={feature.id}>
106              <div className="grid lg:grid-cols-2 gap-12 items-center">
107                <div className="space-y-6">
108                  <div className="space-y-4">
109                    <h3 className="text-2xl font-bold">{feature.title}</h3>
110                    <p className="text-lg text-muted-foreground">
111                      {feature.description}
112                    </p>
113                  </div>
114
115                  <div className="space-y-3">
116                    {feature.points.map((point, index) => (
117                      <div key={index} className="flex items-start gap-3">
118                        <div className="w-2 h-2 bg-primary rounded-full mt-2 flex-shrink-0"></div>
119                        <span className="text-muted-foreground">{point}</span>
120                      </div>
121                    ))}
122                  </div>
123
124                  <Button size="lg">Learn More About {feature.label}</Button>
125                </div>
126
127                <Card className="overflow-hidden">
128                  <CardContent className="p-0">
129                    <img
130                      src={feature.image}
131                      alt={feature.title}
132                      className="w-full aspect-video object-cover"
133                    />
134                  </CardContent>
135                </Card>
136              </div>
137            </TabsContent>
138          ))}
139        </Tabs>
140      </div>
141    </section>
142  );
143}