import { useState } from 'react'
import VideoGrid from './components/VideoGrid'
import AuthModal from './components/AuthModal'
import { categories } from './data/videos'

export default function App() {
  const [activeCategory, setActiveCategory] = useState('All')
  const [searchQuery, setSearchQuery] = useState('')
  const [authOpen, setAuthOpen] = useState(false)

  return (
    <div className="min-h-screen flex flex-col">
      {/* Header */}
      <header className="bg-white border-b border-amber-200 sticky top-0 z-30 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4">
          <div className="flex items-center gap-3 shrink-0">
            <div className="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center">
              <span className="text-white font-bold text-lg">AV</span>
            </div>
            <div className="hidden sm:block">
              <h1 className="font-bold text-amber-900 text-lg leading-tight">Amber Valley</h1>
              <p className="text-xs text-amber-600">Community Hub</p>
            </div>
          </div>

          {/* Search bar (decorative) */}
          <div className="flex-1 max-w-md">
            <div className="relative">
              <input
                type="text"
                placeholder="Search videos..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full rounded-full border border-amber-200 bg-amber-50 px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent"
              />
              <svg className="absolute left-3 top-2.5 h-4 w-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
            </div>
          </div>

          <button
            onClick={() => setAuthOpen(true)}
            className="shrink-0 bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-full text-sm font-medium transition-colors"
          >
            Sign In
          </button>
        </div>

        {/* Category tabs */}
        <div className="max-w-7xl mx-auto px-4 pb-2">
          <div className="flex gap-2 overflow-x-auto no-scrollbar">
            {categories.map((cat) => (
              <button
                key={cat}
                onClick={() => setActiveCategory(cat)}
                className={`shrink-0 px-3 py-1.5 rounded-full text-xs font-medium transition-colors ${
                  activeCategory === cat
                    ? 'bg-amber-500 text-white'
                    : 'bg-amber-100 text-amber-700 hover:bg-amber-200'
                }`}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>
      </header>

      {/* Main content */}
      <main className="flex-1 max-w-7xl mx-auto w-full px-4 py-6">
        <VideoGrid
          activeCategory={activeCategory}
          searchQuery={searchQuery}
          onVideoClick={() => setAuthOpen(true)}
        />
      </main>

      {/* Footer */}
      <footer className="bg-amber-900 text-amber-200 py-8 mt-8">
        <div className="max-w-7xl mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
              <h3 className="font-bold text-amber-100 mb-2">Amber Valley Community Hub</h3>
              <p className="text-sm text-amber-300">Bringing our community together through shared experiences and learning.</p>
            </div>
            <div>
              <h4 className="font-semibold text-amber-100 mb-2">Quick Links</h4>
              <ul className="text-sm space-y-1">
                <li><a href="#" onClick={(e) => { e.preventDefault(); setAuthOpen(true); }} className="hover:text-amber-100 transition-colors">My Account</a></li>
                <li><a href="#" onClick={(e) => e.preventDefault()} className="hover:text-amber-100 transition-colors">About Us</a></li>
                <li><a href="#" onClick={(e) => e.preventDefault()} className="hover:text-amber-100 transition-colors">Contact</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold text-amber-100 mb-2">Community Hours</h4>
              <p className="text-sm text-amber-300">Mon-Fri: 9am - 9pm<br />Sat-Sun: 10am - 6pm</p>
            </div>
          </div>
          <div className="border-t border-amber-800 mt-6 pt-4 text-xs text-amber-400 text-center">
            &copy; 2024 Amber Valley Community Hub. All rights reserved.
          </div>
        </div>
      </footer>

      {/* Auth modal */}
      {authOpen && <AuthModal onClose={() => setAuthOpen(false)} />}
    </div>
  )
}
