import { useAuthStore } from '../store/authStore';
import { Box, Layers, Zap, Globe, Sparkles, Wand2, Image as ImageIcon, BoxSelect, ArrowRight } from 'lucide-react';
import { useEffect, useState } from 'react';

export default function Home() {
  const { openAuthModal, user } = useAuthStore();
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="min-h-screen bg-zinc-950 text-white font-sans selection:bg-primary/30">
      
      {/* Navbar */}
      <nav className={`fixed top-0 left-0 w-full p-6 flex justify-between items-center z-50 transition-all duration-300 ${scrolled ? 'bg-zinc-950/80 backdrop-blur-xl border-b border-white/5' : 'bg-transparent'}`}>
        <div className="flex items-center gap-2 font-bold text-2xl tracking-tighter">
          <Box className="text-primary" /> Titan<span className="text-primary">3d</span>
        </div>
        <div className="flex gap-4">
          {user ? (
            <button 
              onClick={() => window.location.href = '/dashboard'}
              className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.5)]"
            >
              Go to Dashboard
            </button>
          ) : (
            <>
              <button 
                onClick={() => openAuthModal('login')}
                className="px-6 py-2 hover:text-primary font-medium transition-all"
              >
                Log In
              </button>
              <button 
                onClick={() => openAuthModal('register')}
                className="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all shadow-[0_0_15px_rgba(var(--primary-rgb),0.3)] hover:shadow-[0_0_25px_rgba(var(--primary-rgb),0.5)]"
              >
                Sign Up
              </button>
            </>
          )}
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative pt-40 pb-20 md:pt-52 md:pb-32 px-6 overflow-hidden">
        {/* Background glow */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/20 rounded-full blur-[120px] opacity-50 pointer-events-none" />
        
        <div className="max-w-7xl mx-auto flex flex-col items-center text-center relative z-10">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-md mb-8 animate-fade-in-up">
            <Sparkles size={16} className="text-primary" />
            <span className="text-sm font-medium tracking-wide uppercase text-zinc-300">The Future of E-Commerce</span>
          </div>
          
          <h1 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-tight mb-8">
            Interactive 3D <br />
            <span className="bg-clip-text text-transparent bg-gradient-to-r from-primary via-blue-400 to-purple-500">
              Made Effortless.
            </span>
          </h1>
          
          <p className="text-xl md:text-2xl text-zinc-400 max-w-3xl mb-12 font-light leading-relaxed">
            Turn flat images into stunning 3D models, edit materials in real-time, and embed a photorealistic product configurator directly into your store.
          </p>
          
          <div className="flex flex-wrap justify-center gap-4">
            {user ? (
              <button onClick={() => window.location.href = '/dashboard'} className="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-semibold text-lg transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(var(--primary-rgb),0.4)] hover:shadow-[0_0_40px_rgba(var(--primary-rgb),0.6)] hover:-translate-y-1">
                Go to Dashboard <ArrowRight size={20} />
              </button>
            ) : (
              <button onClick={() => openAuthModal('register')} className="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full font-semibold text-lg transition-all flex items-center gap-2 shadow-[0_0_20px_rgba(var(--primary-rgb),0.4)] hover:shadow-[0_0_40px_rgba(var(--primary-rgb),0.6)] hover:-translate-y-1">
                Start Creating Free <ArrowRight size={20} />
              </button>
            )}
            <button className="px-8 py-4 bg-white/5 hover:bg-white/10 text-white rounded-full font-semibold text-lg backdrop-blur-md border border-white/10 transition-all hover:-translate-y-1">
              View Examples
            </button>
          </div>
        </div>
        
        {/* Hero Image Mockup */}
        <div className="max-w-6xl mx-auto mt-24 relative">
          <div className="absolute inset-0 bg-gradient-to-t from-zinc-950 via-transparent to-transparent z-10" />
          <img 
            src="/assets/images/3d_rendering_interface.jpg" 
            alt="3D Interface Mockup" 
            className="w-full rounded-2xl md:rounded-[2.5rem] border border-white/10 shadow-2xl shadow-black"
          />
        </div>
      </section>

      {/* Feature 1: AI Generation */}
      <section className="py-24 px-6 bg-zinc-900/30">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
          <div className="flex-1 space-y-8">
            <div className="w-16 h-16 rounded-2xl bg-purple-500/20 border border-purple-500/30 flex items-center justify-center">
              <Wand2 className="text-purple-400" size={32} />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
              AI Image-to-3D <br /><span className="text-zinc-400">Powered Generation</span>
            </h2>
            <p className="text-xl text-zinc-400 font-light leading-relaxed">
              Don't have 3D assets? No problem. Upload a simple 2D sketch or product photo, and let our advanced AI reconstruction engine build a fully textured 3D mesh in under a minute.
            </p>
            <ul className="space-y-4">
              {['Meshy & Tripo3D integrations', 'High-poly mesh reconstruction', 'Automatic diffuse mapping'].map((feature, i) => (
                <li key={i} className="flex items-center gap-3 text-zinc-300">
                  <div className="w-2 h-2 rounded-full bg-primary" /> {feature}
                </li>
              ))}
            </ul>
          </div>
          <div className="flex-1">
            <img 
              src="/assets/images/ai_generation_demo.jpg" 
              alt="AI Generation" 
              className="w-full rounded-2xl border border-white/10 shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* Feature 2: UV Editor */}
      <section className="py-24 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row-reverse items-center gap-16">
          <div className="flex-1 space-y-8">
            <div className="w-16 h-16 rounded-2xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center">
              <Layers className="text-blue-400" size={32} />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
              Real-time UV & <br /><span className="text-zinc-400">Material Editor</span>
            </h2>
            <p className="text-xl text-zinc-400 font-light leading-relaxed">
              Achieve photorealistic results instantly. Our web-based PBR (Physically Based Rendering) editor lets you adjust roughness, metalness, and maps on the fly without heavy desktop software.
            </p>
            <div className="grid grid-cols-2 gap-6 pt-4">
              <div className="p-6 rounded-2xl bg-white/5 border border-white/5">
                <ImageIcon className="text-primary mb-4" />
                <h4 className="font-bold text-lg mb-2">Texture Maps</h4>
                <p className="text-sm text-zinc-400">Upload custom normal, roughness, and metalness maps.</p>
              </div>
              <div className="p-6 rounded-2xl bg-white/5 border border-white/5">
                <BoxSelect className="text-primary mb-4" />
                <h4 className="font-bold text-lg mb-2">Live Preview</h4>
                <p className="text-sm text-zinc-400">See material changes instantly under HDRI lighting.</p>
              </div>
            </div>
          </div>
          <div className="flex-1">
            <img 
              src="/assets/images/3d_rendering_interface.jpg" 
              alt="UV Editor" 
              className="w-full rounded-2xl border border-white/10 shadow-2xl"
            />
          </div>
        </div>
      </section>

      {/* Feature 3: E-Commerce Showcase */}
      <section className="py-24 px-6 bg-zinc-900/30">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row items-center gap-16">
          <div className="flex-1 space-y-8">
            <div className="w-16 h-16 rounded-2xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center">
              <Zap className="text-emerald-400" size={32} />
            </div>
            <h2 className="text-4xl md:text-5xl font-bold tracking-tight">
              Embed Seamlessly <br /><span className="text-zinc-400">Into Your Store</span>
            </h2>
            <p className="text-xl text-zinc-400 font-light leading-relaxed">
              Boost your conversion rates by giving customers the power to configure products in full 3D before buying. Export a simple iframe or React component and drop it directly into Shopify, WooCommerce, or any custom site.
            </p>
            <button className="text-primary font-bold hover:underline flex items-center gap-2">
              View integration docs <ArrowRight size={16} />
            </button>
          </div>
          <div className="flex-1 relative">
            <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/20 to-transparent blur-3xl -z-10 rounded-full" />
            <img 
              src="/assets/images/product_list_mockup.jpg" 
              alt="Product Showcase" 
              className="w-full rounded-2xl border border-white/10 shadow-2xl rotate-2 hover:rotate-0 transition-transform duration-500"
            />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-32 px-6 relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-t from-primary/10 via-transparent to-transparent pointer-events-none" />
        <div className="max-w-4xl mx-auto text-center relative z-10 flex flex-col items-center">
          <Globe size={64} className="text-primary mb-8 animate-pulse drop-shadow-[0_0_15px_rgba(var(--primary-rgb),0.5)]" />
          <h2 className="text-5xl md:text-7xl font-bold tracking-tighter mb-6">
            Ready to Transform Your <span className="text-primary">E-Commerce?</span>
          </h2>
          <p className="text-2xl text-zinc-400 mb-12 font-light">
            Join hundreds of forward-thinking brands using Titan 3D today.
          </p>
          <button 
            onClick={() => openAuthModal('register')}
            className="px-12 py-5 bg-white text-black hover:bg-zinc-200 rounded-full font-bold text-xl transition-all hover:scale-105 shadow-xl"
          >
            Create Your Free Account
          </button>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t border-white/5 py-12 px-6">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-6">
          <div className="flex items-center gap-2 font-bold text-xl tracking-tighter text-zinc-400">
            <Box size={24} /> Titan<span className="text-zinc-600">3d</span>
          </div>
          <div className="text-sm text-zinc-600">
            &copy; {new Date().getFullYear()} Titan 3D Configurator. All rights reserved.
          </div>
          <div className="flex gap-6 text-sm text-zinc-500 font-medium">
            <a href="#" className="hover:text-white transition-colors">Privacy</a>
            <a href="#" className="hover:text-white transition-colors">Terms</a>
            <a href="#" className="hover:text-white transition-colors">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}