import { useState, useEffect } from 'react';
import { ShoppingBag, ArrowRight, Menu, X, Globe, Share2, Instagram, Search, ChevronRight, Apple, CreditCard, Box, Zap, Heart } from 'lucide-react';

export default function MinimalTheme({ posts, categories }: { posts?: any[], categories?: any[] }) {
  const handleSimulatedAction = (e: React.MouseEvent | React.FormEvent, msg: string) => {
    e.preventDefault();
    window.alert(`[SaaS Preview] Ação simulada: ${msg}\n\nEsta funcionalidade estará ativa após a publicação da sua loja minimalista.`);
  };
  const [view, setView] = useState<'home' | 'product'>('home');
  const [cartOpen, setCartOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

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

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [view]);

  const featured = {
     name: "Sonic One Headphones",
     price: "$349",
     desc: "Pure silence. Pure sound. The new standard in wireless audio.",
     img: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=1200"
  };

  const products = [
    { id: 1, name: "Minimalist Watch v2", price: "$199", img: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=800" },
    { id: 2, name: "Smart Speaker Aura", price: "$129", img: "https://images.unsplash.com/photo-1589492477829-5e65395b66cc?auto=format&fit=crop&q=80&w=800" },
    { id: 3, name: "Leather Laptop Sleeve", price: "$89", img: "https://images.unsplash.com/photo-1544333346-64e4fe18274b?auto=format&fit=crop&q=80&w=800" },
    { id: 4, name: "Aluminum Desk Lamp", price: "$159", img: "https://images.unsplash.com/photo-1534073828943-f801091bb18c?auto=format&fit=crop&q=80&w=800" },
  ];

  return (
    <div className="min-h-full bg-[#fbfbfb] text-[#1d1d1f] font-['-apple-system','BlinkMacSystemFont','Segoe_UI',Roboto,sans-serif] selection:bg-[#0066cc] selection:text-white">
      
      {/* Super-Clean Header */}
      <nav className={`fixed top-0 inset-x-0 z-50 transition-all duration-500 ${scrolled ? 'bg-white/80 backdrop-blur-xl border-b border-black/5 py-4' : 'bg-transparent py-8'}`}>
         <div className="max-w-[1400px] mx-auto px-6 flex items-center justify-between">
            <div className="flex items-center gap-12">
               <a href="/" onClick={(e) => {e.preventDefault(); setView('home');}} className="text-2xl font-bold tracking-tight hover:opacity-70 transition-opacity">
                  MINIMAL
               </a>
               <div className="hidden lg:flex items-center gap-8 text-[12px] font-medium text-black/60">
                  <a href="#" className="hover:text-black transition-colors">Products</a>
                  <a href="#" className="hover:text-black transition-colors">Store</a>
                  <a href="#" className="hover:text-black transition-colors">About</a>
               </div>
            </div>
            
            <div className="flex items-center gap-8">
               <Search className="w-5 h-5 opacity-60 hover:opacity-100 cursor-pointer transition-opacity" />
               <button onClick={() => setCartOpen(true)} className="relative group">
                  <ShoppingBag className="w-5 h-5 opacity-60 group-hover:opacity-100 transition-opacity" />
                  <span className="absolute -top-2 -right-2 bg-[#0066cc] text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-bold">1</span>
               </button>
            </div>
         </div>
      </nav>

      {view === 'home' ? (
        <main>
           {/* Section 1: Pure Hero */}
           <section className="pt-40 pb-20 px-6 text-center">
              <div className="max-w-4xl mx-auto mb-20 animate-[fade-in-up_1s_ease-out]">
                 <h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-8">{featured.name}</h1>
                 <p className="text-xl md:text-2xl text-black/50 font-medium mb-12 max-w-2xl mx-auto">{featured.desc}</p>
                 <div className="flex justify-center gap-8 items-center">
                    <button onClick={() => setView('product')} className="bg-[#0066cc] text-white px-10 py-4 rounded-full font-bold text-sm hover:bg-[#0077ee] transition-all shadow-xl shadow-blue-500/20">Buy Now</button>
                    <a href="#" className="text-[#0066cc] font-bold text-sm hover:underline flex items-center gap-2">Learn more <ChevronRight className="w-4 h-4"/></a>
                 </div>
              </div>
              <div className="max-w-6xl mx-auto rounded-[3rem] overflow-hidden bg-white shadow-2xl animate-[fade-in-up_1.2s_ease-out]">
                 <img src={featured.img} className="w-full h-full object-cover" alt="hero"/>
              </div>
           </section>

           {/* Section 2: Product Mosaic */}
           <section className="py-40 px-6 bg-white">
              <div className="max-w-[1400px] mx-auto">
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                    {products.map((p, idx) => (
                       <div key={p.id} className="group cursor-pointer bg-[#f5f5f7] rounded-[2.5rem] p-12 hover:bg-white hover:shadow-2xl transition-all duration-500 text-center flex flex-col items-center" onClick={() => setView('product')}>
                          <h3 className="text-4xl font-bold mb-4">{p.name}</h3>
                          <p className="text-lg text-black/50 mb-10">Starting from {p.price}</p>
                          <div className="w-full aspect-square overflow-hidden mb-10">
                             <img src={p.img} className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700" alt="product"/>
                          </div>
                          <button className="text-[#0066cc] font-bold text-sm hover:underline flex items-center gap-2">View details <ChevronRight className="w-4 h-4"/></button>
                       </div>
                    ))}
                 </div>
              </div>
           </section>

           {/* Section 3: Feature Highlight */}
           <section className="py-40 px-6 text-center">
              <div className="max-w-4xl mx-auto">
                 <Zap className="w-16 h-16 text-[#0066cc] mx-auto mb-10" />
                 <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-12">Seamless Integration.</h2>
                 <p className="text-xl md:text-2xl text-black/50 max-w-2xl mx-auto mb-20 leading-relaxed">Designed to work perfectly together. Connect your world with a single touch. Experience the future of minimalist technology.</p>
                 <div className="grid md:grid-cols-3 gap-12 text-left">
                    <div className="p-10 bg-white rounded-[2rem] shadow-sm">
                       <CreditCard className="w-10 h-10 mb-6 text-black/40" />
                       <h4 className="font-bold text-xl mb-4">Secure Checkout</h4>
                       <p className="text-sm text-black/50 leading-relaxed">Your data is always encrypted and protected by the latest security standards.</p>
                    </div>
                    <div className="p-10 bg-white rounded-[2rem] shadow-sm">
                       <Box className="w-10 h-10 mb-6 text-black/40" />
                       <h4 className="font-bold text-xl mb-4">Express Shipping</h4>
                       <p className="text-sm text-black/50 leading-relaxed">Global delivery within 48 hours for all premium members.</p>
                    </div>
                    <div className="p-10 bg-white rounded-[2rem] shadow-sm">
                       <Heart className="w-10 h-10 mb-6 text-black/40" />
                       <h4 className="font-bold text-xl mb-4">Lifetime Support</h4>
                       <p className="text-sm text-black/50 leading-relaxed">Our experts are available 24/7 to help you with anything you need.</p>
                    </div>
                 </div>
              </div>
           </section>
        </main>
      ) : (
        /* --- PRODUCT VIEW --- */
        <main className="max-w-[1400px] mx-auto px-6 py-40">
           <div className="grid lg:grid-cols-2 gap-20 items-center mb-40">
              <div className="bg-white rounded-[3rem] p-20 shadow-2xl">
                 <img src={products[0].img} className="w-full h-full object-contain" alt="product detail" />
              </div>
              
              <div className="flex flex-col">
                 <div className="mb-12">
                    <span className="text-[#0066cc] font-bold text-sm uppercase tracking-widest mb-6 block">New Arrival</span>
                    <h1 className="text-6xl md:text-8xl font-bold tracking-tight mb-10 leading-none">{products[0].name}</h1>
                    <p className="text-2xl text-black/50 font-medium mb-12">The perfect balance of form and function. Designed with premium materials and advanced audio technology.</p>
                 </div>

                 <div className="space-y-12 mb-16 border-t border-black/5 pt-12">
                    <div className="space-y-6">
                       <span className="text-[12px] font-bold uppercase tracking-widest text-black/30 block">Design Ethos</span>
                       <p className="text-xl text-black/60 leading-relaxed">
                          Nosso compromisso com o minimalismo vai além da estética. É sobre remover o desnecessário para destacar o essencial. Cada curva e cada material foram escolhidos para proporcionar uma experiência tátil e visual sublime.
                       </p>
                    </div>

                    <div className="grid grid-cols-2 gap-8 py-8 border-y border-black/5 text-[11px] font-bold uppercase tracking-widest text-black/40">
                       <div className="flex flex-col gap-2">
                          <span className="text-black">Battery Life</span>
                          <span>Up to 40 Hours</span>
                       </div>
                       <div className="flex flex-col gap-2">
                          <span className="text-black">Connectivity</span>
                          <span>Bluetooth 5.3</span>
                       </div>
                    </div>
                 </div>
                 
                 <div className="flex items-center gap-10 mb-16 pb-12">
                    <div className="text-4xl font-bold">{products[0].price}</div>
                    <div className="h-10 w-px bg-black/10"></div>
                    <div className="flex gap-4">
                       <button className="w-8 h-8 rounded-full bg-black ring-2 ring-offset-2 ring-black"></button>
                       <button className="w-8 h-8 rounded-full bg-gray-200"></button>
                       <button className="w-8 h-8 rounded-full bg-white border border-black/10"></button>
                    </div>
                 </div>

                 <button onClick={() => setCartOpen(true)} className="w-full bg-[#0066cc] text-white py-6 rounded-full font-bold text-lg hover:bg-[#0077ee] transition-all shadow-2xl shadow-blue-500/30">
                    Add to Cart
                 </button>
                 
                 <div className="mt-12 flex gap-8 text-[12px] font-bold text-black/40 uppercase tracking-widest">
                    <span>Free Shipping</span>
                    <span>2-Year Warranty</span>
                    <span>Easy Returns</span>
                 </div>
              </div>
           </div>

           {/* Section: Complete the Set */}
           <div className="border-t border-black/5 pt-40">
              <h2 className="text-4xl font-bold tracking-tight mb-20 text-center">Complete the Set</h2>
              <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
                 {products.slice(1).map((p) => (
                    <div key={p.id} className="group cursor-pointer flex flex-col items-center text-center" onClick={() => setView('product')}>
                       <div className="aspect-square w-full bg-[#f5f5f7] rounded-[2rem] p-8 mb-8 group-hover:bg-white group-hover:shadow-xl transition-all duration-500">
                          <img src={p.img} className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-700" alt="product"/>
                       </div>
                       <h3 className="text-xl font-bold mb-2">{p.name}</h3>
                       <span className="text-sm text-black/40 font-bold">{p.price}</span>
                    </div>
                 ))}
              </div>
           </div>
        </main>
      )}

      {/* Clean Minimal Footer */}
      <footer className="bg-[#f5f5f7] py-32 px-6">
         <div className="max-w-[1400px] mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-4 gap-20 mb-32 border-b border-black/5 pb-32">
               <div className="md:col-span-1">
                  <h2 className="text-2xl font-bold tracking-tight mb-10">MINIMAL</h2>
                  <p className="text-sm text-black/50 leading-relaxed mb-10">Crafting the essentials of the modern digital life with a focus on simplicity, quality, and performance.</p>
                  <div className="flex gap-6">
                     <button onClick={(e) => handleSimulatedAction(e, 'Instagram')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Instagram className="w-5 h-5"/></button>
                     <button onClick={(e) => handleSimulatedAction(e, 'Site')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Globe className="w-5 h-5"/></button>
                     <button onClick={(e) => handleSimulatedAction(e, 'Share')} className="text-black/40 hover:text-[#0066cc] transition-colors"><Share2 className="w-5 h-5"/></button>
                  </div>
               </div>
               
               <div>
                  <h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Services</h4>
                  <ul className="space-y-6 text-sm text-black/50">
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Privacidade')} className="hover:text-[#0066cc] transition-colors">Privacy Policy</a></li>
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Termos')} className="hover:text-[#0066cc] transition-colors">Terms of Service</a></li>
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Cookies')} className="hover:text-[#0066cc] transition-colors">Cookie Settings</a></li>
                  </ul>
               </div>

               <div>
                  <h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Support</h4>
                  <ul className="space-y-6 text-sm text-black/50">
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Suporte')} className="hover:text-[#0066cc] transition-colors">Help Center</a></li>
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Shipping')} className="hover:text-[#0066cc] transition-colors">Shipping Info</a></li>
                     <li><a href="#" onClick={(e) => handleSimulatedAction(e, 'Returns')} className="hover:text-[#0066cc] transition-colors">Returns & Refills</a></li>
                  </ul>
               </div>

               <div>
                  <h4 className="text-[12px] font-bold uppercase tracking-widest mb-10">Company</h4>
                  <ul className="space-y-6 text-sm text-black/50">
                     <li><a href="#" className="hover:text-[#0066cc] transition-colors">Our Story</a></li>
                     <li><a href="#" className="hover:text-[#0066cc] transition-colors">Careers</a></li>
                     <li><a href="#" className="hover:text-[#0066cc] transition-colors">Contact</a></li>
                  </ul>
               </div>
            </div>
            
            <div className="flex flex-col md:flex-row justify-between items-center text-[10px] font-bold text-black/30 uppercase tracking-widest gap-8">
               <span>© {new Date().getFullYear()} MINIMAL DESIGN CO. ALL RIGHTS RESERVED.</span>
               <div className="flex gap-10">
                  <span>UNITED STATES / ENGLISH</span>
               </div>
            </div>
         </div>
      </footer>

      {/* Glassmorphic Cart */}
      {cartOpen && (
         <div className="fixed inset-0 z-[100] flex justify-end">
            <div className="absolute inset-0 bg-black/5 backdrop-blur-md cursor-pointer" onClick={() => setCartOpen(false)}></div>
            <div className="w-full max-w-xl bg-white/90 backdrop-blur-2xl h-full flex flex-col relative z-[110] shadow-2xl border-l border-black/5">
               <div className="p-12 border-b border-black/5 flex justify-between items-center">
                  <h2 className="text-3xl font-bold tracking-tight">Shopping Cart</h2>
                  <button onClick={() => setCartOpen(false)} className="hover:opacity-50 transition-all"><X className="w-8 h-8"/></button>
               </div>
               
               <div className="flex-1 overflow-y-auto p-12 space-y-12">
                  <div className="flex gap-10">
                     <div className="w-32 h-32 bg-[#f5f5f7] rounded-3xl shrink-0 p-4">
                        <img src={products[0].img} className="w-full h-full object-contain" alt="item"/>
                     </div>
                     <div className="flex-1 flex flex-col justify-between py-2">
                        <div>
                           <h3 className="text-2xl font-bold">{products[0].name}</h3>
                           <p className="text-sm text-black/40 mt-1 font-medium">Space Black | 1 Unit</p>
                        </div>
                        <div className="flex justify-between items-end pt-8">
                           <span className="text-xl font-bold">{products[0].price}</span>
                           <button className="text-[12px] font-bold text-[#0066cc] hover:underline">Remove</button>
                        </div>
                     </div>
                  </div>
               </div>
               
               <div className="p-12 border-t border-black/5 bg-white">
                  <div className="flex justify-between items-center mb-12 text-2xl font-bold">
                     <span>Subtotal</span>
                     <span>{products[0].price}</span>
                  </div>
                  <button className="w-full bg-[#0066cc] text-white py-6 rounded-full font-bold text-lg hover:bg-[#0077ee] transition-all shadow-2xl shadow-blue-500/30">
                     Check Out
                  </button>
               </div>
            </div>
         </div>
      )}
    </div>
  );
}