import React from 'react';
import { Bell, Smartphone, Laptop, Headphones, Watch, Home, Grid, Search, ShoppingCart, User } from 'lucide-react';

const HomeScreen = () => {
  return (
    <div className="bg-background min-h-screen">
      {/* Header */}
      <header className="bg-surface shadow-sm fixed top-0 left-0 right-0 z-10">
        <div className="flex items-center justify-between px-4 py-3">
          <h1 className="text-2xl font-bold text-primary">GizmoMart</h1>
          <div className="flex items-center space-x-4">
            <Bell className="w-6 h-6 text-textSecondary" />
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="pt-16 pb-20">
        {/* Hero Section */}
        <div className="relative w-full h-48 mb-6">
          <img 
            src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dyy.webp" 
            alt="Featured Gadget" 
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent flex items-end">
            <div className="p-4 text-white">
              <h2 className="text-2xl font-bold">New iPhone 15 Pro</h2>
              <p className="text-sm">Experience the future of smartphones</p>
            </div>
          </div>
        </div>

        {/* Flash Sale Section */}
        <section className="px-4 mb-8">
          <div className="flex items-center justify-between mb-4">
            <h2 className="text-xl font-bold text-textPrimary">Flash Sale</h2>
            <span className="text-primary text-sm">Ends in 05:23:45</span>
          </div>
          <div className="flex overflow-x-auto space-x-4 pb-4">
            <FlashSaleItem 
              image="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dxf.webp"
              title="Sony WH-1000XM5"
              subtitle="Wireless Headphones"
              price="299"
              originalPrice="399"
            />
            <FlashSaleItem 
              image="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dxk.webp"
              title="Apple Watch S8"
              subtitle="Smart Watch"
              price="349"
              originalPrice="429"
            />
          </div>
        </section>

        {/* Featured Categories */}
        <section className="px-4 mb-8">
          <h2 className="text-xl font-bold text-textPrimary mb-4">Featured Categories</h2>
          <div className="grid grid-cols-2 gap-4">
            <CategoryCard icon={<Smartphone className="w-8 h-8 text-primary mb-2" />} title="Smartphones" subtitle="Latest Models" />
            <CategoryCard icon={<Laptop className="w-8 h-8 text-primary mb-2" />} title="Laptops" subtitle="Power & Performance" />
            <CategoryCard icon={<Headphones className="w-8 h-8 text-primary mb-2" />} title="Audio" subtitle="Premium Sound" />
            <CategoryCard icon={<Watch className="w-8 h-8 text-primary mb-2" />} title="Wearables" subtitle="Smart Devices" />
          </div>
        </section>

        {/* New Arrivals */}
        <section className="px-4 mb-8">
          <h2 className="text-xl font-bold text-textPrimary mb-4">New Arrivals</h2>
          <div className="space-y-4">
            <div className="bg-surface rounded-lg shadow-sm overflow-hidden">
              <img 
                src="https://storage.googleapis.com/cades-dev.appspot.com/projects%2FHmkrpZdOySrsSGdh0Lwa%2Fassets%2F0_mb5g7dya.webp" 
                alt="Gaming Laptop" 
                className="w-full h-48 object-cover"
              />
              <div className="p-4">
                <h3 className="font-semibold text-textPrimary">Razer Blade 15</h3>
                <p className="text-sm text-textSecondary mb-2">Gaming Laptop with RTX 4080</p>
                <div className="flex items-center justify-between">
                  <span className="text-lg font-bold text-primary">$2,499</span>
                  <button className="bg-primary text-white px-4 py-2 rounded-lg text-sm">Add to Cart</button>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* Bottom Navigation */}
      <nav className="fixed bottom-0 left-0 right-0 bg-surface border-t border-border">
        <div className="flex justify-between px-6 py-2">
          <NavItem icon={<Home className="w-6 h-6 stroke-2" />} label="Home" active />
          <NavItem icon={<Grid className="w-6 h-6" />} label="Categories" />
          <NavItem icon={<Search className="w-6 h-6" />} label="Search" />
          <NavItem icon={<ShoppingCart className="w-6 h-6" />} label="Cart" />
          <NavItem icon={<User className="w-6 h-6" />} label="Account" />
        </div>
      </nav>
    </div>
  );
};

const FlashSaleItem = ({ image, title, subtitle, price, originalPrice }) => (
  <div className="flex-shrink-0 w-40 bg-surface rounded-lg shadow-md">
    <img src={image} alt={title} className="w-full h-40 object-cover rounded-t-lg" />
    <div className="p-3">
      <h3 className="text-sm font-semibold text-textPrimary">{title}</h3>
      <p className="text-xs text-textSecondary">{subtitle}</p>
      <div className="flex items-center justify-between mt-2">
        <span className="text-primary font-bold">${price}</span>
        <span className="text-xs line-through text-textSecondary">${originalPrice}</span>
      </div>
    </div>
  </div>
);

const CategoryCard = ({ icon, title, subtitle }) => (
  <div className="bg-surface rounded-lg p-4 shadow-sm">
    {icon}
    <h3 className="font-semibold text-textPrimary">{title}</h3>
    <p className="text-xs text-textSecondary">{subtitle}</p>
  </div>
);

const NavItem = ({ icon, label, active }) => (
  <a href="#" className={`flex flex-col items-center ${active ? 'text-primary' : 'text-textSecondary'}`}>
    {icon}
    <span className="text-xs mt-1">{label}</span>
  </a>
);

export default HomeScreen;