"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { Cpu, Lock, Sparkles, Layers, Fingerprint } from "lucide-react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } const PerformanceScreen = () => (

Pro Architecture

); const SecurityScreen = () => (

); const IntelligenceScreen = () => (

); const EcosystemScreen = () => (

); export interface DeviceFeature { id: string; title: string; description: string; icon: React.ElementType; Screen: React.FC; } const defaultFeatures: DeviceFeature[] = [ { id: "performance", title: "Pro Performance.", description: "Built on the next-generation architecture. Experience desktop-class power in an impossibly thin design, ready for your most demanding workflows.", icon: Cpu, Screen: PerformanceScreen }, { id: "security", title: "Privacy built in.", description: "Your data belongs to you. Advanced biometric encryption and a dedicated secure enclave ensure your personal information never leaves your device.", icon: Lock, Screen: SecurityScreen }, { id: "intelligence", title: "Intelligence evolved.", description: "Powered by advanced machine learning models running locally. It anticipates your needs and automates routines without compromising battery life.", icon: Sparkles, Screen: IntelligenceScreen }, { id: "ecosystem", title: "Seamless ecosystem.", description: "Start a task on one device and finish it on another. Universal clipboard, seamless handoff, and instant tethering work like magic.", icon: Layers, Screen: EcosystemScreen } ]; export interface AppleDeviceFeaturesProps { heading?: string; subheading?: string; features?: DeviceFeature[]; className?: string; } export function AppleDeviceFeatures({ heading = "Designed to change everything.", subheading = "Explore the groundbreaking technologies that make the impossible, possible.", features = defaultFeatures, className }: AppleDeviceFeaturesProps) { const [activeIndex, setActiveIndex] = useState(0); const activeFeature = features[activeIndex]; return (

{heading} {subheading}

{activeFeature.title}

{activeFeature.description}

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

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