frontend/src/pages/UseCases.tsx

import { useNavigate } from 'react-router-dom'
import { Button } from '@/components/ui/button'
import { Card, CardContent } from '@/components/ui/card'
import { Menu } from 'lucide-react'

export function UseCases() {
  const navigate = useNavigate()

  const useCases = [
    {
      id: 1,
      category: 'Use case 1: Outdoor Rescue',
      title: 'Offline AI that guides survival in extreme environments',
      description: 'When hikers, travelers, or drivers lose connection to mountains, forests, or rural roads, cloud AI systems can\'t offer real-time survival guidance, first aid tips, and emergency signaling — even without internet. Includes moments, it becomes your reliable voice of calm and safety.',
      image: '/api/placeholder/336/240',
      bgColor: 'from-blue-100 to-purple-100'
    },
    {
      id: 2,
      category: 'Use case 2: Offline Healthcare',
      title: 'A simple device for seniors to access trusted medical guidance',
      description: 'Many elderly users struggle with smartphones and digital devices. Our simple, voice-only need to press a button or speak a request to get clear, step-by-step medical advice. No internet, no accounts, no complicated setup — just instant, private support for everyday health concerns that helps.',
      image: '/api/placeholder/336/240',
      bgColor: 'from-green-100 to-blue-100'
    },
    {
      id: 3,
      category: 'Use case 3: AI Companion and Assistance',
      title: 'A private, always-available conversational partner',
      description: 'Life can be stressful and lonely at times. Our Offline AI device can be embedded inside a plush toy, transforming it into a private, always-available companion. It listens, talks, tells stories without uploading data to the cloud. AI partner that brings warmth, reassurance, and practical help whenever you need it.',
      image: '/api/placeholder/336/240',
      bgColor: 'from-purple-100 to-pink-100'
    }
  ]

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Navigation */}
      <nav className="bg-white border-b border-gray-200">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            {/* Logo */}
            <div className="flex items-center">
              <img 
                src="/assets/logo.png" 
                alt="EdgeLLM Logo" 
                className="h-16 w-16"
                onError={(e) => {
                  console.error('Logo failed to load')
                  e.currentTarget.style.display = 'none'
                }}
              />
            </div>

            {/* Navigation Links */}
            <div className="hidden md:flex items-center space-x-8">
              <button onClick={() => navigate('/')} className="text-gray-700 hover:text-purple-600 font-medium">
                Home
              </button>
              <button onClick={() => navigate('/technology')} className="text-gray-700 hover:text-purple-600 font-medium">
                Technology
              </button>
              <span className="text-white bg-purple-600 px-4 py-2 rounded-md font-medium">
                Use Cases
              </span>
              <Button 
                variant="outline" 
                onClick={() => navigate('/playground')}
                className="border-purple-600 text-purple-600 hover:bg-purple-50"
              >
                My device
              </Button>
            </div>

            {/* Mobile menu button */}
            <div className="md:hidden">
              <Button variant="ghost" size="sm">
                <Menu className="h-5 w-5" />
              </Button>
            </div>
          </div>
        </div>
      </nav>

      {/* Header Section */}
      <div className="py-24 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto text-center">
          {/* Title */}
          <h1 className="text-4xl md:text-5xl font-bold text-black mb-6">
            Use Case Examples
          </h1>
          <p className="text-xl text-purple-700 font-semibold max-w-2xl mx-auto mb-12">
            Bringing intelligent computing to the edge of connectivity
          </p>
        </div>
      </div>

      {/* Use Cases Content */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {useCases.map((useCase, index) => (
            <Card 
              key={useCase.id} 
              className="bg-white shadow-lg border-0 rounded-3xl overflow-hidden h-full flex flex-col"
            >
              <CardContent className="p-6 flex flex-col h-full">
                {/* Image */}
                <div className="w-full h-60 rounded-xl mb-6 overflow-hidden">
                  <img 
                    src={`/assets/${index === 0 ? 'outdoor_rescue.png' : index === 1 ? 'health_care.png' : 'companion.png'}`}
                    alt={useCase.title}
                    className="w-full h-full object-cover"
                    onError={(e) => {
                      console.error(`Failed to load image for use case ${index + 1}`)
                      // Fallback to gradient background with icon
                      e.currentTarget.style.display = 'none'
                      const fallbackDiv = document.createElement('div')
                      fallbackDiv.className = 'w-full h-60 bg-gradient-to-br from-gray-200 to-gray-300 rounded-xl flex items-center justify-center'
                      if (index === 0) fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-purple-500" fill="currentColor" viewBox="0 0 24 24"><path d="M14 6l-3.75 5L8 8l-4 6h16l-6-8z"/></svg>'
                      else if (index === 1) fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-green-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
                      else fallbackDiv.innerHTML = '<svg class="h-16 w-16 text-pink-500" fill="currentColor" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>'
                      if (e.currentTarget.parentNode) {
                        e.currentTarget.parentNode.appendChild(fallbackDiv)
                      }
                    }}
                  />
                </div>

                <div className="flex flex-col flex-grow space-y-4">
                  {/* Category */}
                  <div className="text-sm font-semibold text-purple-600">
                    {useCase.category}
                  </div>

                  {/* Title */}
                  <h3 className="text-xl font-semibold text-black leading-tight">
                    {useCase.title}
                  </h3>

                  {/* Description */}
                  <p className="text-gray-600 text-sm leading-relaxed flex-grow">
                    {useCase.description}
                  </p>

                  {/* Button */}
                  <div className="pt-4">
                    <Button 
                      className="bg-purple-600 hover:bg-purple-700 text-white text-sm px-4 py-2 w-auto"
                      onClick={() => {
                        // Handle use case selection
                        console.log('Selected use case:', useCase.id)
                      }}
                    >
                      Select
                    </Button>
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>

      {/* CTA Section */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16">
        <div className="relative">
          {/* Background with gradient and blur */}
          <div className="absolute inset-0 bg-gradient-to-r from-purple-400/30 via-blue-500/30 to-pink-500/30 backdrop-blur-sm rounded-3xl"></div>
          
          {/* Content */}
          <div className="relative bg-purple-400/20 backdrop-blur-lg rounded-3xl p-8 text-center">
            {/* Audio Visualizer Effect */}
            <div className="flex justify-center mb-6 space-x-1">
              {[...Array(20)].map((_, i) => (
                <div
                  key={i}
                  className="bg-purple-600 rounded-full animate-pulse"
                  style={{
                    width: '3px',
                    height: `${Math.random() * 40 + 10}px`,
                    animationDelay: `${i * 0.1}s`,
                    animationDuration: '1s'
                  }}
                />
              ))}
            </div>
            
            <h2 className="text-2xl font-medium text-white mb-4">
              Customize your own device
            </h2>
            
            <p className="text-gray-900 mb-6">
              Need help? Contact us to get customized device and services
            </p>
            
            <Button 
              className="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3"
              onClick={() => navigate('/playground')}
            >
              Get Started
            </Button>
          </div>
        </div>
      </div>
    </div>
  )
}