"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Leaf, Sun, Droplets, Recycle, Globe2, ArrowRight } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface EcoFeature { id: string; title: string; subtitle: string; description: string; icon: React.ElementType; themeColor: string; blobShapes: string[]; pattern: React.ReactNode; } const defaultFeatures: EcoFeature[] = [ { id: "carbon-neutral", title: "Carbon-Neutral Edge", subtitle: "Zero Emissions", description: "Our entire global infrastructure is powered by 100% renewable energy. We offset every byte transferred, ensuring your digital footprint leaves no physical trace on the planet.", icon: Leaf, themeColor: "from-[#4F7942] to-[#2E4A25]", blobShapes: [ "60% 40% 30% 70% / 60% 30% 70% 40%", "40% 60% 70% 30% / 40% 60% 30% 70%", "70% 30% 40% 60% / 50% 40% 60% 50%" ], pattern: ( ) }, { id: "resource-optimization", title: "Resource Optimization", subtitle: "Energy Efficient", description: "Advanced algorithms put idle microservices into deep sleep mode, reducing server energy consumption by up to 68% during off-peak hours without sacrificing wake times.", icon: Sun, themeColor: "from-[#D4A373] to-[#A06A38]", blobShapes: [ "30% 70% 70% 30% / 30% 30% 70% 70%", "50% 50% 20% 80% / 25% 80% 20% 75%", "60% 40% 50% 50% / 60% 30% 70% 40%" ], pattern: ( ) }, { id: "circular-data", title: "Circular Data Lifecycle", subtitle: "Waste Reduction", description: "We employ aggressive data deduplication and automated archival protocols. This minimizes the physical hardware required, drastically reducing e-waste across our data centers.", icon: Recycle, themeColor: "from-[#6B9080] to-[#3B5449]", blobShapes: [ "50% 50% 50% 50% / 50% 50% 50% 50%", "40% 60% 30% 70% / 60% 30% 70% 40%", "70% 30% 60% 40% / 30% 60% 40% 70%" ], pattern: ( ) }, { id: "water-cooling", title: "Closed-Loop Cooling", subtitle: "Water Conservation", description: "Our next-generation facilities utilize closed-loop, greywater cooling systems. We consume 90% less fresh water than traditional data centers, preserving vital local ecosystems.", icon: Droplets, themeColor: "from-[#4A8DB7] to-[#1E4A66]", blobShapes: [ "40% 60% 60% 40% / 60% 40% 60% 40%", "60% 40% 30% 70% / 40% 60% 40% 60%", "30% 70% 50% 50% / 50% 30% 70% 50%" ], pattern: ( ) } ]; export interface EcoOrganicFeaturesProps { badge?: string; heading?: string; subheading?: string; features?: EcoFeature[]; className?: string; } export function EcoOrganicFeatures({ badge = "Sustainability", heading = "In harmony with nature.", subheading = "Technology shouldn't cost the earth. Discover how our architecture is engineered from the ground up to protect and preserve our planet.", features = defaultFeatures, className }: EcoOrganicFeaturesProps) { const [activeIndex, setActiveIndex] = useState(0); const activeFeature = features[activeIndex]; const ActiveIcon = activeFeature.icon; return (

{badge && (

{badge}

)} {heading} {subheading}

{features.map((feature, index) => { const isActive = activeIndex === index; const Icon = feature.icon; return ( ); })}

{activeFeature.pattern}

); } export default function EcoOrganicFeaturesDemo() { return ; }

{feature.title}