import React, { useState, useEffect } from 'react';
import { Plane, Building, Martini, Dumbbell, Zap, Users, ArrowRight, MapPin, Clock, Briefcase, GraduationCap, Waves } from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('itinerary');

  // Placeholder data - easy to update with real flight info
  const flightInfo = {
    outbound: {
      date: "Wednesday, Jan 21",
      airline: "American / United", 
      flightNum: "Flight ???",
      depart: "DFW/DAL",
      arrive: "LGA/JFK",
      time: "Morning/Afternoon"
    },
    inbound: {
      date: "Friday, Jan 23",
      airline: "American / United",
      flightNum: "Flight ???",
      depart: "LGA/JFK",
      arrive: "Home",
      time: "Lunchtime"
    }
  };

  return (
    <div className="min-h-screen bg-zinc-950 text-white font-sans selection:bg-orange-500 selection:text-white">
      {/* Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 z-50 bg-zinc-900/90 backdrop-blur-md border-t border-zinc-800 pb-safe">
        <div className="flex justify-around items-center p-4 max-w-md mx-auto">
          <button 
            onClick={() => setActiveTab('itinerary')}
            className={`flex flex-col items-center space-y-1 ${activeTab === 'itinerary' ? 'text-orange-500' : 'text-zinc-500'}`}
          >
            <Clock size={20} />
            <span className="text-xs font-medium">Schedule</span>
          </button>
          <button 
            onClick={() => setActiveTab('logistics')}
            className={`flex flex-col items-center space-y-1 ${activeTab === 'logistics' ? 'text-blue-500' : 'text-zinc-500'}`}
          >
            <Plane size={20} />
            <span className="text-xs font-medium">Logistics</span>
          </button>
          <button 
            onClick={() => setActiveTab('talent')}
            className={`flex flex-col items-center space-y-1 ${activeTab === 'talent' ? 'text-emerald-500' : 'text-zinc-500'}`}
          >
            <Users size={20} />
            <span className="text-xs font-medium">The Talent</span>
          </button>
        </div>
      </nav>

      {/* Header */}
      <header className="relative h-64 overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-b from-blue-900/20 to-zinc-950 z-10"></div>
        <img 
          src="https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" 
          alt="NYC Skyline" 
          className="absolute inset-0 w-full h-full object-cover opacity-40"
        />
        <div className="absolute inset-0 flex flex-col justify-end p-6 z-20 pb-12">
          <div className="inline-flex items-center space-x-2 bg-white/10 backdrop-blur-sm px-3 py-1 rounded-full w-fit mb-4 border border-white/10">
            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
            <span className="text-xs font-bold tracking-wider text-green-300 uppercase">Mission Active</span>
          </div>
          <h1 className="text-4xl font-black tracking-tighter leading-none mb-1">
            NYC <span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-blue-500">TAKEOVER</span>
          </h1>
          <p className="text-zinc-400 font-medium">The Luke & Tyler Protocol</p>
        </div>
      </header>

      <main className="px-4 pb-32 max-w-md mx-auto">
        
        {/* TAB: ITINERARY */}
        {activeTab === 'itinerary' && (
          <div className="space-y-8 animate-fadeIn">
            
            {/* Wednesday */}
            <div className="relative border-l-2 border-zinc-800 ml-3 pl-8 pb-4">
              <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-zinc-800 border-2 border-zinc-950"></div>
              <h2 className="text-2xl font-bold text-zinc-100 mb-4">Wednesday <span className="text-zinc-500 text-lg font-normal">Jan 21</span></h2>
              
              <div className="space-y-6">
                <EventCard 
                  icon={<Plane className="text-blue-400" />}
                  time="TBD"
                  title="Touchdown NYC"
                  desc="Arrival & Transit to Soho"
                />
                <EventCard 
                  icon={<Building className="text-purple-400" />}
                  time="Afternoon"
                  title="Check-in: NOMO SOHO"
                  desc="Secure the perimeter. Verify thread count."
                  location="9 Crosby St, New York"
                />
                <EventCard 
                  icon={<Martini className="text-amber-400" />}
                  time="Night"
                  title="CEO Summit"
                  desc="Drinks with the boss. Keep it professional... mostly."
                  tag="Networking"
                />
              </div>
            </div>

            {/* Thursday */}
            <div className="relative border-l-2 border-zinc-800 ml-3 pl-8 pb-4">
              <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-orange-500 border-2 border-zinc-950 shadow-[0_0_10px_rgba(249,115,22,0.5)]"></div>
              <h2 className="text-2xl font-bold text-zinc-100 mb-4">Thursday <span className="text-zinc-500 text-lg font-normal">Jan 22</span></h2>
              
              <div className="space-y-6">
                <EventCard 
                  icon={<Waves className="text-cyan-400" />}
                  time="Early AM"
                  title="The Plunge"
                  desc="Cold plunge session. Tyler's natural habitat."
                />
                <EventCard 
                  icon={<Dumbbell className="text-zinc-400" />}
                  time="AM"
                  title="Iron Temple"
                  desc="Workout. Get the pump before the demo."
                />
                <EventCard 
                  icon={<Zap className="text-yellow-400" />}
                  time="Mid-Day"
                  title="Wandercraft Demo"
                  desc="Onsite demo. Walking the walk. Literally."
                  highlight={true}
                />
                <EventCard 
                  icon={<Users className="text-pink-400" />}
                  time="Night"
                  title="UT Austin Reunion"
                  desc="Drinks with the ladies. Hook 'em."
                  tag="Social"
                />
              </div>
            </div>

             {/* Friday */}
             <div className="relative border-l-2 border-zinc-800 ml-3 pl-8">
              <div className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-zinc-800 border-2 border-zinc-950"></div>
              <h2 className="text-2xl font-bold text-zinc-100 mb-4">Friday <span className="text-zinc-500 text-lg font-normal">Jan 23</span></h2>
              
              <div className="space-y-6">
                <EventCard 
                  icon={<Plane className="text-red-400" />}
                  time="Lunchtime"
                  title="Extraction"
                  desc="Wheels up. Back to base."
                />
              </div>
            </div>
          </div>
        )}

        {/* TAB: LOGISTICS */}
        {activeTab === 'logistics' && (
          <div className="space-y-6 animate-fadeIn">
            
            {/* Hotel Card */}
            <div className="bg-zinc-900 rounded-2xl overflow-hidden border border-zinc-800">
              <img 
                src="https://nomosoho.com/wp-content/uploads/2022/07/NOMO-SOHO-Entrance.jpg" 
                className="w-full h-48 object-cover opacity-80"
                alt="NOMO SOHO"
                onError={(e) => {e.target.src = 'https://images.unsplash.com/photo-1566073771259-6a8506099945?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80'}}
              />
              <div className="p-6">
                <div className="flex justify-between items-start mb-2">
                  <h3 className="text-xl font-bold">NOMO SOHO</h3>
                  <span className="bg-zinc-800 text-xs px-2 py-1 rounded border border-zinc-700">HQ</span>
                </div>
                <p className="text-zinc-400 text-sm mb-4">9 Crosby St, New York, NY 10013</p>
                <div className="flex items-center space-x-2 text-sm text-zinc-500">
                  <Briefcase size={14} />
                  <span>2 Bedroom Suite</span>
                </div>
              </div>
            </div>

            {/* Flight Card Outbound */}
            <div className="bg-zinc-900 p-6 rounded-2xl border border-zinc-800 relative overflow-hidden group">
              <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <Plane size={80} />
              </div>
              <div className="flex justify-between items-center mb-6">
                <div className="text-left">
                  <div className="text-4xl font-black text-white">{flightInfo.outbound.depart}</div>
                  <div className="text-zinc-500 text-xs uppercase tracking-wider">Origin</div>
                </div>
                <div className="flex flex-col items-center">
                  <div className="h-[1px] w-12 bg-zinc-700 mb-1"></div>
                  <Plane size={16} className="text-zinc-500 rotate-90" />
                </div>
                <div className="text-right">
                  <div className="text-4xl font-black text-white">{flightInfo.outbound.arrive}</div>
                  <div className="text-zinc-500 text-xs uppercase tracking-wider">Destination</div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-zinc-500 text-xs">Date</div>
                  <div className="text-white font-medium">{flightInfo.outbound.date}</div>
                </div>
                <div className="text-right">
                  <div className="text-zinc-500 text-xs">Flight</div>
                  <div className="text-white font-medium">{flightInfo.outbound.flightNum}</div>
                </div>
              </div>
            </div>

            {/* Flight Card Inbound */}
            <div className="bg-zinc-900 p-6 rounded-2xl border border-zinc-800 relative overflow-hidden group">
               <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
                <Plane size={80} className="rotate-180" />
              </div>
              <div className="flex justify-between items-center mb-6">
                <div className="text-left">
                  <div className="text-4xl font-black text-white">{flightInfo.inbound.depart}</div>
                  <div className="text-zinc-500 text-xs uppercase tracking-wider">Origin</div>
                </div>
                <div className="flex flex-col items-center">
                  <div className="h-[1px] w-12 bg-zinc-700 mb-1"></div>
                  <Plane size={16} className="text-zinc-500 -rotate-90" />
                </div>
                <div className="text-right">
                  <div className="text-4xl font-black text-white">HOME</div>
                  <div className="text-zinc-500 text-xs uppercase tracking-wider">Destination</div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-zinc-500 text-xs">Date</div>
                  <div className="text-white font-medium">{flightInfo.inbound.date}</div>
                </div>
                <div className="text-right">
                  <div className="text-zinc-500 text-xs">Time</div>
                  <div className="text-white font-medium">{flightInfo.inbound.time}</div>
                </div>
              </div>
            </div>

          </div>
        )}

        {/* TAB: TALENT */}
        {activeTab === 'talent' && (
          <div className="space-y-6 animate-fadeIn">
            
            {/* Luke Card */}
            <div className="bg-gradient-to-br from-orange-900/40 to-zinc-900 p-1 rounded-2xl">
              <div className="bg-zinc-900 p-6 rounded-xl h-full">
                <div className="flex items-center space-x-4 mb-4">
                  <div className="w-16 h-16 rounded-full bg-orange-500 flex items-center justify-center text-2xl font-bold">LW</div>
                  <div>
                    <h3 className="text-xl font-bold">Luke Wade</h3>
                    <p className="text-orange-500 text-sm font-medium">The Connector</p>
                  </div>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center space-x-3 text-sm">
                    <GraduationCap size={16} className="text-zinc-500" />
                    <span>UT Austin Alum <span className="text-xs text-orange-500 ml-1">Hook 'em</span></span>
                  </div>
                  <div className="flex items-center space-x-3 text-sm">
                    <MapPin size={16} className="text-zinc-500" />
                    <span>Plano, TX</span>
                  </div>
                  <div className="flex items-center space-x-3 text-sm">
                    <Briefcase size={16} className="text-zinc-500" />
                    <span>Wandercraft Demo Lead</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Tyler Card */}
            <div className="bg-gradient-to-br from-red-900/40 to-zinc-900 p-1 rounded-2xl">
              <div className="bg-zinc-900 p-6 rounded-xl h-full">
                <div className="flex items-center space-x-4 mb-4">
                  <div className="w-16 h-16 rounded-full bg-red-700 flex items-center justify-center text-2xl font-bold">TS</div>
                  <div>
                    <h3 className="text-xl font-bold">Tyler Shedron</h3>
                    <p className="text-red-500 text-sm font-medium">The Dolphin</p>
                  </div>
                </div>
                <div className="space-y-3">
                  <div className="flex items-center space-x-3 text-sm">
                    <GraduationCap size={16} className="text-zinc-500" />
                    <span>Indiana University <span className="text-xs text-red-500 ml-1">Swimmer</span></span>
                  </div>
                  <div className="flex items-center space-x-3 text-sm">
                    <Waves size={16} className="text-zinc-500" />
                    <span>Cold Plunge Expert</span>
                  </div>
                   <div className="flex items-center space-x-3 text-sm">
                    <Briefcase size={16} className="text-zinc-500" />
                    <span>Coworker & Host</span>
                  </div>
                </div>
              </div>
            </div>

             <div className="bg-zinc-900/50 p-6 rounded-2xl border border-zinc-800 text-center">
                <h4 className="text-zinc-400 text-sm uppercase tracking-widest mb-2">Rivalry Watch</h4>
                <div className="flex justify-center items-center space-x-8">
                  <div className="text-center">
                    <div className="text-3xl font-black text-orange-500">UT</div>
                    <div className="text-[10px] text-zinc-500">Longhorns</div>
                  </div>
                  <div className="text-zinc-600 font-serif italic">vs</div>
                  <div className="text-center">
                    <div className="text-3xl font-black text-red-700">IU</div>
                    <div className="text-[10px] text-zinc-500">Hoosiers</div>
                  </div>
                </div>
             </div>

          </div>
        )}

      </main>
      
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out forwards;
        }
        .pb-safe {
          padding-bottom: env(safe-area-inset-bottom);
        }
      `}</style>
    </div>
  );
};

const EventCard = ({ icon, time, title, desc, location, tag, highlight }) => (
  <div className={`flex gap-4 ${highlight ? 'bg-zinc-900/80 p-4 rounded-xl border border-yellow-500/30' : ''}`}>
    <div className="flex flex-col items-center">
      <div className={`w-10 h-10 rounded-full flex items-center justify-center bg-zinc-900 border border-zinc-800 shadow-sm shrink-0`}>
        {icon}
      </div>
      <div className="h-full w-px bg-zinc-800 my-2"></div>
    </div>
    <div className="pb-6 w-full">
      <div className="flex justify-between items-start mb-1">
        <span className={`text-xs font-bold uppercase tracking-wider ${highlight ? 'text-yellow-500' : 'text-zinc-500'}`}>{time}</span>
        {tag && <span className="text-[10px] px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">{tag}</span>}
      </div>
      <h3 className="text-lg font-bold text-zinc-100">{title}</h3>
      <p className="text-zinc-400 text-sm leading-relaxed">{desc}</p>
      {location && (
        <div className="mt-2 flex items-center text-xs text-zinc-500">
          <MapPin size={12} className="mr-1" />
          {location}
        </div>
      )}
    </div>
  </div>
);

export default App;