From Code to Reality

300">"text-pink-400">import { 300">useEffect, 300">useRef, 300">useState, 300">useMemo, 300">useCallback } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { useWebGL, createShader, compileProgram } 300">"text-pink-400">from 300">"text-emerald-300">\'@webgl/core\';
300">"text-pink-400">import { 300">ParticleSystem, 300">PhysicsEngine, 300">CollisionDetector } 300">"text-pink-400">from 300">"text-emerald-300">\'@webgl/physics\';
300">"text-pink-400">import { useAnimationFrame, useResizeObserver, useMousePosition } 300">"text-pink-400">from 300">"text-emerald-300">\'@/hooks/utils\';
300">"text-pink-400">import { 300">Matrix4, 300">Vector3, 300">Quaternion } 300">"text-pink-400">from 300">"text-emerald-300">\'three/math\';
300">"text-pink-400">import { 300">HeroOverlay, 300">CallToAction, 300">AnimatedTitle } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui\';

300">"text-pink-400">const 300">PARTICLE_COUNT = 150000;
300">"text-pink-400">const 300">ATTRACTION_FORCE = 0.05;
300">"text-pink-400">const 300">FRICTION = 0.98;

300">"text-pink-400">export 300">"text-pink-400">function 300">HeroScene() {
  300">"text-pink-400">const canvasRef = 300">useRef<300">HTMLCanvasElement>(null);
  300">"text-pink-400">const [isLoaded, setIsLoaded] = 300">useState(false);
  300">"text-pink-400">const { initScene, drawParticles, updateUniforms, bindBuffer } = 300">useWebGL();
  300">"text-pink-400">const mousePos = 300">useMousePosition();
  300">"text-pink-400">const engineRef = 300">useRef<300">PhysicsEngine>(null);

  300">useEffect(() => {
    300">"text-pink-400">if (!canvasRef.current) 300">"text-pink-400">return;
    300">"text-pink-400">const ctx = 300">initScene(canvasRef.current, { antialias: true, alpha: false });
    300">"text-pink-400">const program = 300">compileProgram(ctx, vertexShader, fragmentShader);
    
    engineRef.current = new 300">PhysicsEngine({
      particles: 300">PARTICLE_COUNT,
      friction: 300">FRICTION,
      attraction: 300">ATTRACTION_FORCE
    });
    
    300">bindBuffer(ctx, engineRef.current.300">getPositions());
    300">setIsLoaded(true);
    
    300">"text-pink-400">return () => engineRef.current?.300">dispose();
  }, [initScene, bindBuffer]);

  300">useAnimationFrame((deltaTime) => {
    300">"text-pink-400">if (!isLoaded || !engineRef.current) 300">"text-pink-400">return;
    
    engineRef.current.300">update(deltaTime);
    engineRef.current.300">applyForce(mousePos.x, mousePos.y, 150);
    
    300">updateUniforms({
      uTime: performance.300">now() * 0.001,
      uMouse: [mousePos.x, mousePos.y],
      uResolution: [window.innerWidth, window.innerHeight]
    });
    
    300">drawParticles({ count: 300">PARTICLE_COUNT, mode: 300">"text-emerald-300">\'300">POINTS\' });
  });

  300">"text-pink-400">return (
    <div className=300">"relative w-full h-screen overflow-hidden bg-black">
      <canvas ref={canvasRef} className=300">"absolute inset-0 w-full h-full z-0" />
      <300">HeroOverlay className=300">"z-10">
        <300">AnimatedTitle text=300">"300">Next-300">Gen 300">Media 300">Solutions" />
        <300">CallToAction variant=300">"neon">300">Initialize 300">Sequence</300">CallToAction>
      </300">HeroOverlay>
    </div>
  );
}

300">"text-pink-400">import { 300">useState, 300">useEffect, 300">useMemo, 300">useCallback } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { useQuery, useMutation, useQueryClient } 300">"text-pink-400">from 300">"text-emerald-300">\'@tanstack/react-query\';
300">"text-pink-400">import { 300">AnalyticsChart, 300">RevenueGraph, 300">ConversionFunnel } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/charts\';
300">"text-pink-400">import { 300">DateRangePicker, 300">ExportButton, 300">MetricCard } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui\';
300">"text-pink-400">import { fetchMetrics, generateReport, calculateROI } 300">"text-pink-400">from 300">"text-emerald-300">\'@/api/analytics\';
300">"text-pink-400">import { formatCurrency, calculatePercentageChange } 300">"text-pink-400">from 300">"text-emerald-300">\'@/utils/formatters\';
300">"text-pink-400">import { motion, 300">AnimatePresence } 300">"text-pink-400">from 300">"text-emerald-300">\'framer-motion\';

300">"text-pink-400">export 300">"text-pink-400">const 300">GrowthDashboard = ({ userId, subscriptionTier }) => {
  300">"text-pink-400">const queryClient = 300">useQueryClient();
  300">"text-pink-400">const [dateRange, setDateRange] = 300">useState({ 
    start: new 300">Date(300">Date.300">now() - 30 * 24 * 60 * 60 * 1000), 
    end: new 300">Date() 
  });
  300">"text-pink-400">const [activeTab, setActiveTab] = 300">useState(300">"text-emerald-300">\'overview\');

  300">"text-pink-400">const { data: metrics, isLoading, isError, refetch } = 300">useQuery({
    queryKey: [300">"text-emerald-300">\'growth-metrics\', userId, dateRange],
    queryFn: () => 300">fetchMetrics(userId, dateRange),
    staleTime: 5 * 60 * 1000,
    refetchInterval: subscriptionTier === 300">"text-emerald-300">\'enterprise\' ? 30000 : false,
  });

  300">"text-pink-400">const exportMutation = 300">useMutation({
    mutationFn: (format: string) => 300">generateReport(userId, dateRange, format),
    onSuccess: (url) => window.300">open(url, 300">"text-emerald-300">\'_blank\')
  });

  300">"text-pink-400">const roi = 300">useMemo(() => {
    300">"text-pink-400">if (!metrics) 300">"text-pink-400">return 0;
    300">"text-pink-400">return 300">calculateROI(metrics.revenue, metrics.adSpend);
  }, [metrics]);

  300">"text-pink-400">const handleExport = 300">useCallback(() => {
    exportMutation.300">mutate(300">"text-emerald-300">\'pdf\');
  }, [exportMutation]);

  300">"text-pink-400">if (isLoading) 300">"text-pink-400">return <300">DashboardSkeleton />;
  300">"text-pink-400">if (isError) 300">"text-pink-400">return <300">ErrorState onRetry={refetch} />;

  300">"text-pink-400">return (
    <div className=300">"flex flex-col w-full h-full p-6 bg-zinc-950 text-zinc-50">
      <header className=300">"flex justify-between items-center mb-8">
        <h1 className=300">"text-3xl font-bold tracking-tight">300">Growth 300">Command 300">Center</h1>
        <div className=300">"flex items-center gap-4">
          <300">DateRangePicker value={dateRange} onChange={setDateRange} />
          <300">ExportButton isLoading={exportMutation.isPending} onExport={handleExport} />
        </div>
      </header>

      <div className=300">"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <300">MetricCard title=300">"300">Total 300">Revenue" value={300">formatCurrency(metrics.revenue)} trend={metrics.revenueTrend} />
        <300">MetricCard title=300">"300">Active 300">Subscribers" value={metrics.subscribers} trend={metrics.subscriberTrend} />
        <300">MetricCard title=300">"300">Conversion 300">Rate" value={`${metrics.conversionRate}%`} trend={metrics.conversionTrend} />
        <300">MetricCard title=300">"300">Return on 300">Ad 300">Spend" value={`${roi}x`} trend={metrics.roiTrend} highlight />
      </div>

      <div className=300">"grid grid-cols-1 lg:grid-cols-3 gap-6 flex-grow">
        <div className=300">"lg:col-span-2 bg-zinc-900 border border-zinc-800 rounded-xl p-6">
          <h3 className=300">"text-lg font-medium mb-4">300">Revenue 300">Trajectory</h3>
          <300">RevenueGraph data={metrics.timeseriesData} predictions={metrics.forecast} />
        </div>
        <div className=300">"bg-zinc-900 border border-zinc-800 rounded-xl p-6">
          <h3 className=300">"text-lg font-medium mb-4">300">Acquisition 300">Funnel</h3>
          <300">ConversionFunnel data={metrics.funnelSteps} />
        </div>
      </div>
    </div>
  );
}

300">"text-pink-400">import { createStore } 300">"text-pink-400">from 300">"text-emerald-300">\'zustand\';
300">"text-pink-400">import { persist, devtools } 300">"text-pink-400">from 300">"text-emerald-300">\'zustand/middleware\';
300">"text-pink-400">import { 300">Table, 300">TableRow, 300">TableHeader, 300">TableBody, 300">TableCell } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui/table\';
300">"text-pink-400">import { 300">Badge, 300">Avatar, 300">DropdownMenu, 300">Button, 300">Input } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui\';
300">"text-pink-400">import { 300">Search, 300">Filter, 300">MoreHorizontal, 300">Mail, 300">Phone, 300">Calendar } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';
300">"text-pink-400">import { formatDistanceToNow } 300">"text-pink-400">from 300">"text-emerald-300">\'date-fns\';

300">"text-pink-400">interface 300">Lead {
  id: string;
  name: string;
  email: string;
  company: string;
  status: 300">"text-emerald-300">\'new\' | 300">"text-emerald-300">\'contacted\' | 300">"text-emerald-300">\'qualified\' | 300">"text-emerald-300">\'lost\';
  value: number;
  lastActivity: 300">Date;
  score: number;
}

300">"text-pink-400">const useCRMStore = createStore<300">CRMState>()(
  300">devtools(
    300">persist(
      (set, get) => ({
        leads: [],
        isLoading: false,
        searchQuery: 300">"text-emerald-300">\'\',
        statusFilter: 300">"text-emerald-300">\'all\',
        addLead: (lead) => 300">set((state) => ({ leads: [lead, ...state.leads] })),
        updateLeadStatus: (id, status) => 300">set((state) => ({
          leads: state.leads.300">map(l => l.id === id ? { ...l, status, lastActivity: new 300">Date() } : l)
        })),
        setSearchQuery: (query) => 300">set({ searchQuery: query }),
        getFilteredLeads: () => {
          300">"text-pink-400">const { leads, searchQuery, statusFilter } = 300">get();
          300">"text-pink-400">return leads.300">filter(lead => {
            300">"text-pink-400">const matchesSearch = lead.name.300">toLowerCase().300">includes(searchQuery.300">toLowerCase()) || 
                                lead.company.300">toLowerCase().300">includes(searchQuery.300">toLowerCase());
            300">"text-pink-400">const matchesStatus = statusFilter === 300">"text-emerald-300">\'all\' || lead.status === statusFilter;
            300">"text-pink-400">return matchesSearch && matchesStatus;
          });
        }
      }),
      { name: 300">"text-emerald-300">\'crm-storage\' }
    )
  )
);

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">LeadManager() {
  300">"text-pink-400">const { searchQuery, setSearchQuery, updateLeadStatus, getFilteredLeads } = 300">useCRMStore();
  300">"text-pink-400">const filteredLeads = 300">getFilteredLeads();
  
  300">"text-pink-400">const getStatusColor = (status: string) => {
    300">"text-pink-400">switch(status) {
      300">"text-pink-400">case 300">"text-emerald-300">\'new\': 300">"text-pink-400">return 300">"text-emerald-300">\'bg-blue-500/20 text-blue-400 border-blue-500/30\';
      300">"text-pink-400">case 300">"text-emerald-300">\'contacted\': 300">"text-pink-400">return 300">"text-emerald-300">\'bg-yellow-500/20 text-yellow-400 border-yellow-500/30\';
      300">"text-pink-400">case 300">"text-emerald-300">\'qualified\': 300">"text-pink-400">return 300">"text-emerald-300">\'bg-green-500/20 text-green-400 border-green-500/30\';
      300">"text-pink-400">case 300">"text-emerald-300">\'lost\': 300">"text-pink-400">return 300">"text-emerald-300">\'bg-red-500/20 text-red-400 border-red-500/30\';
      300">"text-pink-400">default: 300">"text-pink-400">return 300">"text-emerald-300">\'bg-zinc-500/20 text-zinc-400 border-zinc-500/30\';
    }
  };
  
  300">"text-pink-400">return (
    <div className=300">"w-full h-full flex flex-col bg-[#0a0a0a] text-zinc-100">
      <div className=300">"flex items-center justify-between p-6 border-b border-zinc-800">
        <div className=300">"flex items-center gap-4">
          <h2 className=300">"text-xl font-semibold">300">Lead 300">Pipeline</h2>
          <300">Badge variant=300">"outline" className=300">"ml-2 bg-zinc-900">{filteredLeads.length} active</300">Badge>
        </div>
        <div className=300">"flex items-center gap-3">
          <div className=300">"relative">
            <300">Search className=300">"absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
            <300">Input 
              placeholder=300">"300">Search leads..." 
              value={searchQuery}
              onChange={(e) => 300">setSearchQuery(e.target.value)}
              className=300">"pl-9 w-64 bg-zinc-900 border-zinc-800"
            />
          </div>
          <300">Button variant=300">"outline" size=300">"icon"><300">Filter className=300">"w-4 h-4" /></300">Button>
          <300">Button className=300">"bg-primary hover:bg-primary/90 text-primary-foreground">300">New 300">Lead</300">Button>
        </div>
      </div>
      
      <div className=300">"flex-1 overflow-auto p-6">
        <300">Table>
          <300">TableHeader>
            <300">TableRow className=300">"border-zinc-800 hover:bg-transparent">
              <300">TableCell className=300">"text-zinc-400 font-medium">300">Contact</300">TableCell>
              <300">TableCell className=300">"text-zinc-400 font-medium">300">Company</300">TableCell>
              <300">TableCell className=300">"text-zinc-400 font-medium">300">Status</300">TableCell>
              <300">TableCell className=300">"text-zinc-400 font-medium">300">Value</300">TableCell>
              <300">TableCell className=300">"text-zinc-400 font-medium">300">Last 300">Activity</300">TableCell>
              <300">TableCell className=300">"text-right"></300">TableCell>
            </300">TableRow>
          </300">TableHeader>
          <300">TableBody>
            {filteredLeads.300">map((lead) => (
              <300">TableRow key={lead.id} className=300">"border-zinc-800/50 hover:bg-zinc-900/50 transition-colors group cursor-pointer">
                <300">TableCell>
                  <div className=300">"flex items-center gap-3">
                    <300">Avatar className=300">"h-9 w-9 border border-zinc-800">
                      <div className=300">"bg-zinc-800 w-full h-full flex items-center justify-center text-xs font-medium">
                        {lead.name.300">split(300">"text-emerald-300">\' \').300">map(n => n[0]).300">join(300">"text-emerald-300">\'\')}
                      </div>
                    </300">Avatar>
                    <div>
                      <div className=300">"font-medium text-zinc-200">{lead.name}</div>
                      <div className=300">"text-xs text-zinc-500 flex items-center gap-1 mt-0.5">
                        <300">Mail className=300">"w-3 h-3" /> {lead.email}
                      </div>
                    </div>
                  </div>
                </300">TableCell>
                <300">TableCell className=300">"text-zinc-300">{lead.company}</300">TableCell>
                <300">TableCell>
                  <300">Badge variant=300">"outline" className={`capitalize border px-2.5 py-0.5 font-medium ${300">getStatusColor(lead.status)}`}>
                    {lead.status}
                  </300">Badge>
                </300">TableCell>
                <300">TableCell className=300">"font-mono text-zinc-300">${lead.value.300">toLocaleString()}</300">TableCell>
                <300">TableCell>
                  <div className=300">"flex items-center gap-1.5 text-sm text-zinc-400">
                    <300">Calendar className=300">"w-3.5 h-3.5 opacity-70" />
                    {300">formatDistanceToNow(lead.lastActivity, { addSuffix: true })}
                  </div>
                </300">TableCell>
                <300">TableCell className=300">"text-right">
                  <300">Button variant=300">"ghost" size=300">"icon" className=300">"opacity-0 group-hover:opacity-100 transition-opacity">
                    <300">MoreHorizontal className=300">"w-4 h-4 text-zinc-400" />
                  </300">Button>
                </300">TableCell>
              </300">TableRow>
            ))}
          </300">TableBody>
        </300">Table>
      </div>
    </div>
  );
}

300">"text-pink-400">import { 300">useState, 300">useRef, 300">useEffect, 300">useCallback } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { 300">Play, 300">Pause, 300">SkipForward, 300">SkipBack, 300">Volume2, 300">VolumeX, 300">Repeat, 300">Shuffle } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';
300">"text-pink-400">import { 300">Slider } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui/slider\';
300">"text-pink-400">import { useAudioContext, useAnalyser, useAudioEffects } 300">"text-pink-400">from 300">"text-emerald-300">\'@/hooks/audio\';
300">"text-pink-400">import { 300">Visualizer } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/300">Visualizer\';
300">"text-pink-400">import { cn, formatTime } 300">"text-pink-400">from 300">"text-emerald-300">\'@/lib/utils\';
300">"text-pink-400">import { motion, useAnimation } 300">"text-pink-400">from 300">"text-emerald-300">\'framer-motion\';

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">AdvancedAudioPlayer({ playlist = [], initialTrackIndex = 0 }) {
  300">"text-pink-400">const [isPlaying, setIsPlaying] = 300">useState(false);
  300">"text-pink-400">const [currentTrackIndex, setCurrentTrackIndex] = 300">useState(initialTrackIndex);
  300">"text-pink-400">const [progress, setProgress] = 300">useState(0);
  300">"text-pink-400">const [duration, setDuration] = 300">useState(0);
  300">"text-pink-400">const [volume, setVolume] = 300">useState(80);
  300">"text-pink-400">const [isMuted, setIsMuted] = 300">useState(false);
  300">"text-pink-400">const [isShuffle, setIsShuffle] = 300">useState(false);
  300">"text-pink-400">const [repeatMode, setRepeatMode] = 300">useState<300">"text-emerald-300">\'off\' | 300">"text-emerald-300">\'all\' | 300">"text-emerald-300">\'one\'>(300">"text-emerald-300">\'off\');
  
  300">"text-pink-400">const audioRef = 300">useRef<300">HTMLAudioElement>(null);
  300">"text-pink-400">const { context, sourceNodes, masterGain } = 300">useAudioContext();
  300">"text-pink-400">const { analyser, frequencyData, getByteFrequencyData } = 300">useAnalyser(context);
  300">"text-pink-400">const { applyReverb, applyEQ, setBassBoost } = 300">useAudioEffects(context, masterGain);
  
  300">"text-pink-400">const currentTrack = playlist[currentTrackIndex];
  300">"text-pink-400">const controls = 300">useAnimation();

  300">useEffect(() => {
    300">"text-pink-400">if (!audioRef.current || !context) 300">"text-pink-400">return;
    
    300">"text-pink-400">const audio = audioRef.current;
    audio.volume = isMuted ? 0 : volume / 100;
    
    300">"text-pink-400">const onTimeUpdate = () => 300">setProgress(audio.currentTime);
    300">"text-pink-400">const onLoadedMetadata = () => 300">setDuration(audio.duration);
    300">"text-pink-400">const onEnded = () => 300">handleNextTrack();
    
    audio.300">addEventListener(300">"text-emerald-300">\'timeupdate\', onTimeUpdate);
    audio.300">addEventListener(300">"text-emerald-300">\'loadedmetadata\', onLoadedMetadata);
    audio.300">addEventListener(300">"text-emerald-300">\'ended\', onEnded);
    
    300">"text-pink-400">return () => {
      audio.300">removeEventListener(300">"text-emerald-300">\'timeupdate\', onTimeUpdate);
      audio.300">removeEventListener(300">"text-emerald-300">\'loadedmetadata\', onLoadedMetadata);
      audio.300">removeEventListener(300">"text-emerald-300">\'ended\', onEnded);
    };
  }, [context, volume, isMuted, currentTrackIndex, repeatMode]);

  300">"text-pink-400">const togglePlay = 300">useCallback(300">"text-pink-400">async () => {
    300">"text-pink-400">if (!audioRef.current) 300">"text-pink-400">return;
    
    300">"text-pink-400">if (context?.state === 300">"text-emerald-300">\'suspended\') {
      300">"text-pink-400">await context.300">resume();
    }
    
    300">"text-pink-400">if (isPlaying) {
      audioRef.current.300">pause();
      controls.300">start({ scale: 1 });
    } 300">"text-pink-400">else {
      300">"text-pink-400">await audioRef.current.300">play();
      controls.300">start({ scale: 1.02, transition: { duration: 0.4, yoyo: 300">Infinity } });
    }
    300">setIsPlaying(!isPlaying);
  }, [isPlaying, context, controls]);

  300">"text-pink-400">const handleSeek = (value: number[]) => {
    300">"text-pink-400">if (!audioRef.current) 300">"text-pink-400">return;
    audioRef.current.currentTime = value[0];
    300">setProgress(value[0]);
  };

  300">"text-pink-400">return (
    <div className=300">"w-full max-w-md mx-auto bg-zinc-950/80 backdrop-blur-xl border border-zinc-800/50 rounded-3xl p-6 shadow-2xl">
      <audio ref={audioRef} src={currentTrack?.url} crossOrigin=300">"anonymous" />
      
      <div className=300">"relative w-full aspect-square rounded-2xl overflow-hidden mb-8 shadow-[0_0_40px_rgba(0,0,0,0.5)] group">
        <motion.img 
          src={currentTrack?.coverArt} 
          alt=300">"300">Album 300">Art"
          className=300">"w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
          animate={controls}
        />
        <div className=300">"absolute inset-0 bg-gradient-to-t 400300">">from-black/80 via-transparent to-transparent opacity-60" />
        {isPlaying && <300">Visualizer analyser={analyser} className=300">"absolute bottom-0 left-0 w-full h-1/3" />}
      </div>

      <div className=300">"text-center mb-8">
        <h2 className=300">"text-2xl font-bold text-white mb-2 truncate">{currentTrack?.title || 300">"text-emerald-300">\'300">No 300">Track 300">Selected\'}</h2>
        <p className=300">"text-zinc-400 font-medium truncate">{currentTrack?.artist || 300">"text-emerald-300">\'300">Unknown 300">Artist\'}</p>
      </div>

      <div className=300">"space-y-4 mb-8">
        <300">Slider 
          value={[progress]} 
          max={duration || 100} 
          step={0.1}
          onValueChange={handleSeek}
          className=300">"w-full cursor-pointer"
        />
        <div className=300">"flex justify-between text-xs text-zinc-500 font-mono">
          <span>{300">formatTime(progress)}</span>
          <span>{300">formatTime(duration)}</span>
        </div>
      </div>

      <div className=300">"flex items-center justify-between">
        <button onClick={() => 300">setIsShuffle(!isShuffle)} className={300">cn(300">"p-2 rounded-full transition-colors", isShuffle ? 300">"text-primary bg-primary/10" : 300">"text-zinc-500 hover:text-white")}>
          <300">Shuffle size={20} />
        </button>
        
        <div className=300">"flex items-center gap-4">
          <button onClick={handlePrevTrack} className=300">"p-3 rounded-full text-zinc-300 hover:text-white hover:bg-zinc-800/50 transition-all">
            <300">SkipBack size={24} className=300">"fill-current" />
          </button>
          <button 
            onClick={togglePlay} 
            className=300">"p-5 rounded-full bg-white text-black hover:scale-105 active:scale-95 transition-all shadow-[0_0_20px_rgba(255,255,255,0.3)]"
          >
            {isPlaying ? <300">Pause size={28} className=300">"fill-current" /> : <300">Play size={28} className=300">"fill-current ml-1" />}
          </button>
          <button onClick={handleNextTrack} className=300">"p-3 rounded-full text-zinc-300 hover:text-white hover:bg-zinc-800/50 transition-all">
            <300">SkipForward size={24} className=300">"fill-current" />
          </button>
        </div>
        
        <button onClick={toggleRepeat} className={300">cn(300">"p-2 rounded-full transition-colors relative", repeatMode !== 300">"text-emerald-300">\'off\' ? 300">"text-primary bg-primary/10" : 300">"text-zinc-500 hover:text-white")}>
          <300">Repeat size={20} />
          {repeatMode === 300">"text-emerald-300">\'one\' && <span className=300">"absolute top-1 right-1 text-[8px] font-bold bg-background rounded-full w-3 h-3 flex items-center justify-center">1</span>}
        </button>
      </div>
    </div>
  );
}

300">"text-pink-400">import { 300">useState, 300">useEffect, 300">useRef, 300">useCallback } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { 300">AlertCircle, 300">ShieldAlert, 300">Crosshair, 300">Activity, 300">Timer, 300">Zap } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';
300">"text-pink-400">import { useHapticFeedback, useAccelerometer } 300">"text-pink-400">from 300">"text-emerald-300">\'@/hooks/device\';
300">"text-pink-400">import { 300">CircularProgressbar, buildStyles } 300">"text-pink-400">from 300">"text-emerald-300">\'react-circular-progressbar\';
300">"text-pink-400">import { motion, 300">AnimatePresence } 300">"text-pink-400">from 300">"text-emerald-300">\'framer-motion\';
300">"text-pink-400">import { playSound } 300">"text-pink-400">from 300">"text-emerald-300">\'@/utils/audio\';

300">"text-pink-400">type 300">WorkoutPhase = 300">"text-emerald-300">\'prep\' | 300">"text-emerald-300">\'combat\' | 300">"text-emerald-300">\'rest\' | 300">"text-emerald-300">\'complete\';

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">CombatTimer({ rounds = 5, combatTime = 180, restTime = 60 }) {
  300">"text-pink-400">const [phase, setPhase] = 300">useState<300">WorkoutPhase>(300">"text-emerald-300">\'prep\');
  300">"text-pink-400">const [timeLeft, setTimeLeft] = 300">useState(10); // 10s prep
  300">"text-pink-400">const [currentRound, setCurrentRound] = 300">useState(1);
  300">"text-pink-400">const [isActive, setIsActive] = 300">useState(false);
  300">"text-pink-400">const [intensity, setIntensity] = 300">useState(0);
  
  300">"text-pink-400">const triggerHaptic = 300">useHapticFeedback();
  300">"text-pink-400">const { acceleration } = 300">useAccelerometer();
  300">"text-pink-400">const timerRef = 300">useRef<300">NodeJS.300">Timeout>(null);

  // 300">Calculate intensity based on device movement during combat phase
  300">useEffect(() => {
    300">"text-pink-400">if (phase === 300">"text-emerald-300">\'combat\' && isActive) {
      300">"text-pink-400">const movement = 300">Math.300">sqrt(
        acceleration.x ** 2 + 
        acceleration.y ** 2 + 
        acceleration.z ** 2
      );
      300">setIntensity(prev => 300">Math.300">min(100, prev * 0.9 + (movement * 2)));
    }
  }, [acceleration, phase, isActive]);

  300">useEffect(() => {
    300">"text-pink-400">if (!isActive) 300">"text-pink-400">return;

    300">"text-pink-400">if (timeLeft > 0) {
      timerRef.current = 300">setTimeout(() => 300">setTimeLeft(t => t - 1), 1000);
      
      // 300">Sound & 300">Haptic warnings for last 3 seconds
      300">"text-pink-400">if (timeLeft <= 3) {
        300">playSound(300">"text-emerald-300">\'beep-short\');
        300">triggerHaptic(300">"text-emerald-300">\'light\');
      }
    } 300">"text-pink-400">else {
      300">handlePhaseTransition();
    }

    300">"text-pink-400">return () => 300">clearTimeout(timerRef.current!);
  }, [timeLeft, isActive, phase, currentRound]);

  300">"text-pink-400">const handlePhaseTransition = 300">useCallback(() => {
    300">playSound(300">"text-emerald-300">\'gong\');
    300">triggerHaptic(300">"text-emerald-300">\'heavy\');

    300">"text-pink-400">if (phase === 300">"text-emerald-300">\'prep\' || phase === 300">"text-emerald-300">\'rest\') {
      300">setPhase(300">"text-emerald-300">\'combat\');
      300">setTimeLeft(combatTime);
    } 300">"text-pink-400">else 300">"text-pink-400">if (phase === 300">"text-emerald-300">\'combat\') {
      300">"text-pink-400">if (currentRound < rounds) {
        300">setPhase(300">"text-emerald-300">\'rest\');
        300">setTimeLeft(restTime);
        300">setCurrentRound(r => r + 1);
      } 300">"text-pink-400">else {
        300">setPhase(300">"text-emerald-300">\'complete\');
        300">setIsActive(false);
        300">playSound(300">"text-emerald-300">\'victory\');
      }
    }
  }, [phase, currentRound, rounds, combatTime, restTime, triggerHaptic]);

  300">"text-pink-400">return (
    <div className=300">"w-full h-full flex flex-col items-center justify-center bg-zinc-950 p-8">
      <div className=300">"w-64 h-64 mb-12 relative">
        <300">CircularProgressbar
          value={(timeLeft / (phase === 300">"text-emerald-300">\'combat\' ? combatTime : restTime)) * 100}
          text={`${300">Math.300">floor(timeLeft / 60)}:${(timeLeft % 60).300">toString().300">padStart(2, 300">"text-emerald-300">\'0\')}`}
          styles={300">buildStyles({
            pathColor: phase === 300">"text-emerald-300">\'combat\' ? 300">"text-emerald-300">\'#ef4444\' : 300">"text-emerald-300">\'#22c55e\',
            textColor: 300">"text-emerald-300">\'#fff\',
            trailColor: 300">"text-emerald-300">\'#18181b\',
          })}
        />
        {isActive && phase === 300">"text-emerald-300">\'combat\' && (
          <motion.div 
            className=300">"absolute -inset-4 rounded-full border-4 border-red-500/20"
            animate={{ scale: [1, 1.1, 1], opacity: [0.2, 0.5, 0.2] }}
            transition={{ duration: 0.5, repeat: 300">Infinity }}
          />
        )}
      </div>
      
      <div className=300">"flex gap-4">
        <300">Button 
          size=300">"lg" 
          variant={isActive ? 300">"outline" : 300">"400300">">default"}
          onClick={() => 300">setIsActive(!isActive)}
          className=300">"w-32"
        >
          {isActive ? 300">"text-emerald-300">\'300">Pause\' : 300">"text-emerald-300">\'300">Start\'}
        </300">Button>
        <300">Button 
          size=300">"lg" 
          variant=300">"secondary"
          onClick={() => {
            300">setIsActive(false);
            300">setPhase(300">"text-emerald-300">\'prep\');
            300">setTimeLeft(10);
            300">setCurrentRound(1);
          }}
        >
          300">Reset
        </300">Button>
      </div>
    </div>
  );
}

300">"text-pink-400">import { 300">useState, 300">useMemo } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { 300">Calendar, 300">Clock, 300">User, 300">ChevronRight, 300">CheckCircle2 } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';
300">"text-pink-400">import { format, addDays, startOfToday } 300">"text-pink-400">from 300">"text-emerald-300">\'date-fns\';
300">"text-pink-400">import { cn } 300">"text-pink-400">from 300">"text-emerald-300">\'@/lib/utils\';

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">AppointmentBooking() {
  300">"text-pink-400">const [step, setStep] = 300">useState(1);
  300">"text-pink-400">const [selectedDate, setSelectedDate] = 300">useState<300">Date>(300">startOfToday());
  300">"text-pink-400">const [selectedTime, setSelectedTime] = 300">useState<string | null>(null);
  
  300">"text-pink-400">const timeSlots = [300">"text-emerald-300">\'09:00\', 300">"text-emerald-300">\'09:30\', 300">"text-emerald-300">\'10:00\', 300">"text-emerald-300">\'11:00\', 300">"text-emerald-300">\'14:00\', 300">"text-emerald-300">\'14:30\', 300">"text-emerald-300">\'15:30\', 300">"text-emerald-300">\'16:00\'];
  
  300">"text-pink-400">const nextStep = () => 300">setStep(s => s + 1);
  
  300">"text-pink-400">return (
    <div className=300">"w-full max-w-4xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row">
      <div className=300">"w-full md:w-1/3 bg-blue-600 p-10 text-white flex flex-col justify-between">
        <div>
          <h2 className=300">"text-3xl font-bold mb-4">300">Book 300">Your 300">Visit</h2>
          <p className=300">"text-blue-100 opacity-80">300">Experience modern dentistry with a gentle touch.</p>
        </div>
        <div className=300">"space-y-4">
          {[1, 2, 3].300">map(i => (
            <div key={i} className={300">cn(300">"flex items-center gap-3 transition-opacity", step < i && 300">"opacity-40")}>
              <div className=300">"w-8 h-8 rounded-full border-2 border-white flex items-center justify-center font-bold text-sm">
                {i}
              </div>
              <span className=300">"font-medium">{i === 1 ? 300">"text-emerald-300">\'300">Select 300">Date\' : i === 2 ? 300">"text-emerald-300">\'300">Choose 300">Time\' : 300">"text-emerald-300">\'300">Confirm\'}</span>
            </div>
          ))}
        </div>
      </div>
      
      <div className=300">"flex-1 p-10 bg-zinc-50">
        {step === 1 && (
          <div className=300">"animate-in fade-in slide-in-400300">">from-right-4 duration-500">
            <h3 className=300">"text-xl font-bold mb-6 text-zinc-900">300">Choose a 300">Date</h3>
            <div className=300">"grid grid-cols-4 gap-3">
              {300">Array.300">"text-pink-400">from({ length: 12 }).300">map((_, i) => {
                300">"text-pink-400">const date = 300">addDays(300">startOfToday(), i);
                300">"text-pink-400">return (
                  <button
                    key={i}
                    onClick={() => { 300">setSelectedDate(date); 300">nextStep(); }}
                    className=300">"p-4 rounded-2xl bg-white border border-zinc-200 hover:border-blue-500 hover:shadow-md transition-all text-center"
                  >
                    <div className=300">"text-xs text-zinc-500 uppercase font-bold">{300">format(date, 300">"text-emerald-300">\'eee\')}</div>
                    <div className=300">"text-xl font-bold text-zinc-900">{300">format(date, 300">"text-emerald-300">\'d\')}</div>
                  </button>
                );
              })}
            </div>
          </div>
        )}
        
        {step === 2 && (
          <div className=300">"animate-in fade-in slide-in-400300">">from-right-4 duration-500">
            <h3 className=300">"text-xl font-bold mb-6 text-zinc-900">300">Available 300">Times for {300">format(selectedDate, 300">"text-emerald-300">\'300">MMMM d\')}</h3>
            <div className=300">"grid grid-cols-2 gap-3">
              {timeSlots.300">map(time => (
                <button
                  key={time}
                  onClick={() => { 300">setSelectedTime(time); 300">nextStep(); }}
                  className=300">"flex items-center justify-between p-4 rounded-2xl bg-white border border-zinc-200 hover:border-blue-500 transition-all group"
                >
                  <span className=300">"font-bold text-zinc-900">{time}</span>
                  <300">ChevronRight className=300">"w-4 h-4 text-zinc-300 group-hover:text-blue-500" />
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

300">"text-pink-400">import { motion, useScroll, useTransform } 300">"text-pink-400">from 300">"text-emerald-300">\'framer-motion\';
300">"text-pink-400">import { 300">Home, 300">Ruler, 300">Hammer, 300">Paintbrush, 300">Check } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">PortfolioShowcase() {
  300">"text-pink-400">const { scrollYProgress } = 300">useScroll();
  300">"text-pink-400">const scale = 300">useTransform(scrollYProgress, [0, 1], [1, 1.2]);
  
  300">"text-pink-400">const projects = [
    { title: 300">"text-emerald-300">\'300">Modern 300">Extension\', category: 300">"text-emerald-300">\'300">Residential\', image: 300">"text-emerald-300">\'/ext-1.jpg\' },
    { title: 300">"text-emerald-300">\'300">Luxury 300">Loft\', category: 300">"text-emerald-300">\'300">Renovation\', image: 300">"text-emerald-300">\'/loft-1.jpg\' },
    { title: 300">"text-emerald-300">\'300">Office 300">Hub\', category: 300">"text-emerald-300">\'300">Commercial\', image: 300">"text-emerald-300">\'/off-1.jpg\' }
  ];

  300">"text-pink-400">return (
    <div className=300">"bg-zinc-50 min-h-screen">
      <section className=300">"h-screen relative flex items-center justify-center overflow-hidden">
        <motion.div style={{ scale }} className=300">"absolute inset-0 z-0">
          <img src=300">"/hero-arch.jpg" className=300">"w-full h-full object-cover brightness-50" />
        </motion.div>
        <div className=300">"relative z-10 text-center text-white px-6">
          <h1 className=300">"text-6xl md:text-8xl font-serif mb-6">300">Building 300">Excellence</h1>
          <p className=300">"text-xl md:text-2xl font-light tracking-widest uppercase">300">Design • 300">Build • 300">Transform</p>
        </div>
      </section>
      
      <section className=300">"py-32 px-6 max-w-7xl mx-auto">
        <div className=300">"grid md:grid-cols-2 gap-24 items-center">
          <div>
            <span className=300">"text-blue-600 font-bold tracking-widest uppercase text-sm">300">Our 300">Process</span>
            <h2 className=300">"text-5xl font-serif mt-4 mb-8 text-zinc-900">300">Precision in every detail.</h2>
            <div className=300">"space-y-12">
              {[
                { icon: 300">Ruler, title: 300">"text-emerald-300">\'300">Concept & 300">Planning\', desc: 300">"text-emerald-300">\'300">Detailed architectural drawings and feasibility studies.\' },
                { icon: 300">Hammer, title: 300">"text-emerald-300">\'300">Construction\', desc: 300">"text-emerald-300">\'300">Expert craftsmanship using premium sustainable materials.\' },
                { icon: 300">Paintbrush, title: 300">"text-emerald-300">\'300">Interior 300">Finish\', desc: 300">"text-emerald-300">\'300">High-end finishes tailored to your aesthetic vision.\' }
              ].300">map((step, i) => (
                <div key={i} className=300">"flex gap-6">
                  <div className=300">"shrink-0 w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
                    <step.icon size={24} />
                  </div>
                  <div>
                    <h4 className=300">"text-xl font-bold text-zinc-900 mb-2">{step.title}</h4>
                    <p className=300">"text-zinc-600 leading-relaxed">{step.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className=300">"grid grid-cols-2 gap-4">
            <div className=300">"space-y-4">
              <img src=300">"/p-1.jpg" className=300">"rounded-3xl shadow-lg" />
              <img src=300">"/p-2.jpg" className=300">"rounded-3xl shadow-lg" />
            </div>
            <div className=300">"pt-12 space-y-4">
              <img src=300">"/p-3.jpg" className=300">"rounded-3xl shadow-lg" />
              <img src=300">"/p-4.jpg" className=300">"rounded-3xl shadow-lg" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

300">"text-pink-400">import { useForm } 300">"text-pink-400">from 300">"text-emerald-300">\'react-hook-form\';
300">"text-pink-400">import { zodResolver } 300">"text-pink-400">from 300">"text-emerald-300">\'@hookform/resolvers/zod\';
300">"text-pink-400">import * as z 300">"text-pink-400">from 300">"text-emerald-300">\'zod\';
300">"text-pink-400">import { 300">Input, 300">Button, 300">Slider, 300">Checkbox } 300">"text-pink-400">from 300">"text-emerald-300">\'@/components/ui\';
300">"text-pink-400">import { 300">CreditCard, 300">ShieldCheck, 300">Zap, 300">Info } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';

300">"text-pink-400">const quoteSchema = z.300">object({
  amount: z.300">number().300">min(500).300">max(10000),
  term: z.300">number().300">min(3).300">max(24),
  email: z.300">string().300">email(),
  agree: z.300">boolean().300">refine(v => v === true)
});

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">QuoteCalculator() {
  300">"text-pink-400">const { register, watch, setValue, handleSubmit } = 300">useForm({
    resolver: 300">zodResolver(quoteSchema),
    defaultValues: { amount: 2500, term: 12, agree: false }
  });

  300">"text-pink-400">const amount = 300">watch(300">"text-emerald-300">\'amount\');
  300">"text-pink-400">const term = 300">watch(300">"text-emerald-300">\'term\');
  
  300">"text-pink-400">const monthlyPayment = (amount * 1.05) / term;

  300">"text-pink-400">return (
    <div className=300">"min-h-screen bg-slate-50 flex items-center justify-center p-6">
      <div className=300">"w-full max-w-2xl bg-white rounded-[2.5rem] shadow-2xl shadow-slate-200/50 p-12">
        <div className=300">"flex items-center gap-4 mb-10">
          <div className=300">"w-12 h-12 rounded-2xl bg-indigo-600 flex items-center justify-center text-white">
            <300">Zap size={24} />
          </div>
          <h2 className=300">"text-3xl font-black text-slate-900">300">Instant 300">Quote</h2>
        </div>
        
        <div className=300">"space-y-12">
          <div className=300">"space-y-6">
            <div className=300">"flex justify-between items-end">
              <label className=300">"text-sm font-bold text-slate-500 uppercase tracking-widest">300">Financing 300">Amount</label>
              <span className=300">"text-4xl font-black text-slate-900">£{amount.300">toLocaleString()}</span>
            </div>
            <300">Slider 
              value={[amount]} 
              min={500} max={10000} step={100}
              onValueChange={(v) => 300">setValue(300">"text-emerald-300">\'amount\', v[0])}
            />
          </div>

          <div className=300">"grid grid-cols-2 gap-8 p-8 bg-slate-50 rounded-3xl border border-slate-100">
            <div>
              <p className=300">"text-sm font-medium text-slate-500 mb-1">300">Monthly 300">Payment</p>
              <p className=300">"text-3xl font-black text-indigo-600">£{monthlyPayment.300">toFixed(2)}</p>
            </div>
            <div>
              <p className=300">"text-sm font-medium text-slate-500 mb-1">300">Total 300">Repayable</p>
              <p className=300">"text-3xl font-black text-slate-900">£{(amount * 1.05).300">toFixed(0)}</p>
            </div>
          </div>

          <300">Button className=300">"w-full h-16 bg-indigo-600 hover:bg-indigo-700 text-white text-lg font-bold rounded-2xl shadow-lg shadow-indigo-200 transition-all">
            300">Apply 300">Now
          </300">Button>
        </div>
      </div>
    </div>
  );
}

300">"text-pink-400">import { 300">useState, 300">useEffect } 300">"text-pink-400">from 300">"text-emerald-300">\'react\';
300">"text-pink-400">import { 300">Timer, 300">Trophy, 300">ChevronRight } 300">"text-pink-400">from 300">"text-emerald-300">\'lucide-react\';

300">"text-pink-400">export 300">"text-pink-400">default 300">"text-pink-400">function 300">CompetitionLanding() {
  300">"text-pink-400">const [timeLeft, setTimeLeft] = 300">useState({
    days: 18, hours: 4, minutes: 21, seconds: 22
  });

  300">useEffect(() => {
    300">"text-pink-400">const timer = 300">setInterval(() => {
      300">setTimeLeft(prev => {
        300">"text-pink-400">if (prev.seconds > 0) 300">"text-pink-400">return { ...prev, seconds: prev.seconds - 1 };
        300">"text-pink-400">if (prev.minutes > 0) 300">"text-pink-400">return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
        300">"text-pink-400">if (prev.hours > 0) 300">"text-pink-400">return { ...prev, hours: prev.hours - 1, minutes: 59, seconds: 59 };
        300">"text-pink-400">if (prev.days > 0) 300">"text-pink-400">return { ...prev, days: prev.days - 1, hours: 23, minutes: 59, seconds: 59 };
        300">"text-pink-400">return prev;
      });
    }, 1000);
    300">"text-pink-400">return () => 300">clearInterval(timer);
  }, []);

  300">"text-pink-400">return (
    <div className=300">"min-h-screen bg-zinc-950 text-white flex flex-col items-center justify-center p-6 relative overflow-hidden">
      <div className=300">"absolute inset-0 bg-[300">url(300300">">\'/sushi-bg.jpg\')] bg-cover bg-center opacity-40" />
      <div className=300">"absolute inset-0 bg-gradient-to-t 400300">">from-black via-black/50 to-transparent" />
      
      <div className=300">"relative z-10 w-full max-w-md flex flex-col items-center text-center">
        <div className=300">"inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-amber-900/40 border border-amber-700/50 text-amber-500 text-sm font-bold uppercase tracking-widest mb-8">
          <300">Trophy className=300">"w-4 h-4" />
          300">Exclusive 300">Competition
        </div>
        
        <h1 className=300">"text-5xl font-black uppercase tracking-tight mb-2">300">Win a 300">Free</h1>
        <h2 className=300">"text-5xl font-serif italic text-amber-500 mb-2">300">Sushi 300">Hinoki</h2>
        <h1 className=300">"text-6xl font-black uppercase tracking-tight mb-8">300">Meal for 2</h1>
        
        <p className=300">"text-lg text-zinc-300 mb-10 leading-relaxed font-medium">
          300">Enter now for your chance to enjoy an unforgettable authentic 300">Kosher 300">Japanese dining experience. 300">Plus, 9 lucky runners-up will receive <strong className=300">"text-white">25% 300">OFF</strong> their first order.
        </p>
        
        <button className=300">"w-full py-4 rounded-xl bg-[#b5925c] hover:bg-[#a37e47] text-white font-bold text-lg tracking-wider flex items-center justify-center gap-2 transition-all shadow-xl shadow-amber-900/20 mb-12">
          300">CLAIM 300">YOUR 300">ENTRY <300">ChevronRight className=300">"w-5 h-5" />
        </button>
        
        <div className=300">"w-full bg-zinc-800/80 backdrop-blur-md rounded-2xl p-6 border border-zinc-700/50">
          <div className=300">"flex items-center justify-center gap-2 text-zinc-400 mb-4 font-medium tracking-widest text-sm uppercase">
            <300">Timer className=300">"w-4 h-4" /> 300">Competition closes in
          </div>
          
          <div className=300">"grid grid-cols-4 gap-3">
            {300">Object.300">entries(timeLeft).300">map(([unit, value]) => (
              <div key={unit} className=300">"flex flex-col items-center">
                <div className=300">"w-full aspect-square rounded-xl bg-zinc-700/50 border border-zinc-600 flex items-center justify-center text-2xl font-bold mb-2">
                  {value.300">toString().300">padStart(2, 300">"text-emerald-300">\'0\')}
                </div>
                <span className=300">"text-[10px] uppercase tracking-widest text-zinc-500">{unit}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}