import React, { useState } from 'react';
import { Search, Map, List, User, Bell, Menu } from 'lucide-react';

const styles = `
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  .animate-float { animation: float 3s ease-in-out infinite; }
  .bg-gradient { background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
`;

const categories = [
  { name: 'Restaurants', icon: 'restaurant' },
  { name: 'Cafes', icon: 'cafe' },
  { name: 'Attractions', icon: 'attraction' },
  { name: 'Shopping', icon: 'shopping' },
  { name: 'Hotels', icon: 'hotel' },
  { name: 'Services', icon: 'service' },
  { name: 'Events', icon: 'event' },
  { name: 'Nightlife', icon: 'nightlife' },
];

const SVGIcons = () => (
  <svg xmlns="http://www.w3.org/2000/svg" style={{ display: 'none' }}>
    <symbol id="icon-restaurant" viewBox="0 0 24 24">
      <path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/>
    </symbol>
    <symbol id="icon-cafe" viewBox="0 0 24 24">
      <path d="M18.5 3H6c-1.1 0-2 .9-2 2v5.71c0 3.83 2.95 7.18 6.78 7.29 3.96.12 7.22-3.06 7.22-7v-1h.5c1.93 0 3.5-1.57 3.5-3.5S20.43 3 18.5 3zM16 5v3H6V5h10zm2.5 3H18V5h.5c.83 0 1.5.67 1.5 1.5S19.33 8 18.5 8zM4 19h16v2H4v-2z"/>
    </symbol>
    <symbol id="icon-attraction" viewBox="0 0 24 24">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/>
    </symbol>
    <symbol id="icon-shopping" viewBox="0 0 24 24">
      <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
    </symbol>
    <symbol id="icon-hotel" viewBox="0 0 24 24">
      <path d="M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z"/>
    </symbol>
    <symbol id="icon-service" viewBox="0 0 24 24">
      <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/>
    </symbol>
    <symbol id="icon-event" viewBox="0 0 24 24">
      <path d="M17 12h-5v5h5v-5zM16 1v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-1V1h-2zm3 18H5V8h14v11z"/>
    </symbol>
    <symbol id="icon-nightlife" viewBox="0 0 24 24">
      <path d="M21 5V3H3v2l8 9v5H6v2h12v-2h-5v-5l8-9zM7.43 7L5.66 5h12.69l-1.78 2H7.43z"/>
    </symbol>
  </svg>
);

export default function GoLocalApp() {
  const [activeTab, setActiveTab] = useState('discover');

  return (
    <div className="h-screen flex flex-col bg-gray-50 text-gray-800 overflow-hidden">
      <style>{styles}</style>
      
      <SVGIcons />
      
      {/* Header */}
      <header className="bg-gradient p-4 shadow-lg">
        <div className="flex justify-between items-center">
          <h1 className="text-2xl font-bold text-white">GoLocal</h1>
          <div className="flex items-center space-x-4">
            <Bell className="text-white cursor-pointer hover:text-yellow-200 transition-colors" />
            <User className="text-white cursor-pointer hover:text-yellow-200 transition-colors" />
            <Menu className="text-white cursor-pointer hover:text-yellow-200 transition-colors" />
          </div>
        </div>
        <div className="mt-4 relative">
          <input
            type="text"
            placeholder="Discover local gems..."
            className="w-full p-3 pr-10 rounded-full bg-white bg-opacity-20 text-white placeholder-white focus:outline-none focus:ring-2 focus:ring-white focus:bg-opacity-30 transition-all"
          />
          <Search className="absolute right-3 top-3 text-white" size={20} />
        </div>
      </header>

      {/* Main Content Area */}
      <main className="flex-grow overflow-hidden">
        <div className="h-full p-4 overflow-y-auto">
          {/* Featured Section */}
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">Featured Local Spots</h2>
            <div className="flex space-x-4 overflow-x-auto pb-4">
              {[1, 2, 3].map((item) => (
                <div key={item} className="flex-shrink-0 w-64 bg-white rounded-lg shadow-md overflow-hidden animate-float">
                  <div className="h-32 bg-gradient"></div>
                  <div className="p-4">
                    <h3 className="font-semibold">Local Gem #{item}</h3>
                    <p className="text-sm text-gray-600">Discover this amazing local spot!</p>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* Categories Section */}
          <section className="mb-8">
            <h2 className="text-xl font-semibold mb-4">Explore Categories</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
              {categories.map((category) => (
                <div key={category.name} className="bg-white p-4 rounded-lg shadow-md text-center cursor-pointer hover:bg-gray-50 transition-colors">
                  <svg className="w-12 h-12 mx-auto mb-2 text-blue-500 fill-current">
                    <use xlinkHref={`#icon-${category.icon}`} />
                  </svg>
                  <span className="text-sm font-medium">{category.name}</span>
                </div>
              ))}
            </div>
          </section>

          {/* Recent Activity Section */}
          <section>
            <h2 className="text-xl font-semibold mb-4">Recent Activity</h2>
            <div className="space-y-4">
              {[1, 2, 3].map((item) => (
                <div key={item} className="bg-white p-4 rounded-lg shadow-md flex items-center space-x-4">
                  <div className="w-12 h-12 bg-gradient rounded-full flex-shrink-0"></div>
                  <div>
                    <h3 className="font-semibold">User visited Local Spot #{item}</h3>
                    <p className="text-sm text-gray-600">2 hours ago</p>
                  </div>
                </div>
              ))}
            </div>
          </section>
        </div>
      </main>

      {/* Bottom Navigation */}
      <nav className="bg-white border-t border-gray-200">
        <div className="flex justify-around">
          {[
            { name: 'Discover', icon: Search },
            { name: 'Map', icon: Map },
            { name: 'List', icon: List },
            { name: 'Profile', icon: User }
          ].map((item) => (
            <button
              key={item.name}
              onClick={() => setActiveTab(item.name.toLowerCase())}
              className={`p-4 flex flex-col items-center ${activeTab === item.name.toLowerCase() ? 'text-blue-500' : 'text-gray-500'}`}
            >
              <item.icon size={24} />
              <span className="text-xs mt-1">{item.name}</span>
            </button>
          ))}
        </div>
      </nav>
    </div>
  );
}