popsite-ui 1.0.0

package/src/components/modules/EcommerceStoreModule.jsx

@@ -0,0 +1,405 @@
+import React, { useState, useEffect } from 'react';
+import { ecommerceMockData } from '../../data/systems/ecommerceStore';
+import { useToast } from '../system/Toast';
+
+export function EcommerceStoreModule() {
+  const [currentView, setCurrentView] = useState('grid'); // grid, details, checkout, success
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [cart, setCart] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [activeCategory, setActiveCategory] = useState('All');
+  const [isLoading, setIsLoading] = useState(false);
+  
+  const { showToast, ToastContainer } = useToast();
+
+  // Load cart from localStorage
+  useEffect(() => {
+    const savedCart = localStorage.getItem('popsite_cart');
+    if (savedCart) {
+      try {
+        setCart(JSON.parse(savedCart));
+      } catch (e) {
+        console.error('Failed to parse cart');
+      }
+    }
+  }, []);
+
+  // Save cart to localStorage
+  useEffect(() => {
+    localStorage.setItem('popsite_cart', JSON.stringify(cart));
+  }, [cart]);
+
+  // Simulated Network Delay Utility
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handleProductClick = (product) => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    setSelectedProduct({ ...product, selectedSize: product.sizes[0] || null, selectedColor: product.colors[0] || null });
+    setCurrentView('details');
+  };
+
+  const handleAddToCart = () => {
+    if (!selectedProduct.inStock) {
+      showToast('Product is currently out of stock', 'error');
+      return;
+    }
+    
+    // Check if exactly this item exists
+    const existingIndex = cart.findIndex(
+      item => item.id === selectedProduct.id && item.selectedSize === selectedProduct.selectedSize && item.selectedColor === selectedProduct.selectedColor
+    );
+
+    const updatedCart = [...cart];
+    if (existingIndex >= 0) {
+      updatedCart[existingIndex].quantity += 1;
+    } else {
+      updatedCart.push({ ...selectedProduct, quantity: 1 });
+    }
+    setCart(updatedCart);
+    showToast(`${selectedProduct.name} added to cart!`, 'success');
+  };
+
+  const handleRemoveFromCart = (index) => {
+    const updated = [...cart];
+    updated.splice(index, 1);
+    setCart(updated);
+    showToast('Item removed from cart', 'info');
+  };
+
+  const handleCheckout = () => {
+    if (cart.length === 0) {
+      showToast('Your cart is empty', 'error');
+      return;
+    }
+    withDelay(() => {
+      setCurrentView('success');
+      setCart([]);
+      showToast('Order placed successfully!', 'success');
+    });
+  };
+
+  const handleExportCSV = () => {
+    const headers = "ID,Name,Category,Price,InStock,Rating\n";
+    const rows = ecommerceMockData.products.map(p => 
+      `${p.id},"${p.name}","${p.category}",${p.price},${p.inStock},${p.rating}`
+    ).join("\n");
+    const blob = new Blob([headers + rows], { type: 'text/csv' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `products_export_${Date.now()}.csv`;
+    a.click();
+    showToast('Catalog exported to CSV', 'success');
+  };
+
+  const cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
+
+  // VIEWS
+  const renderGrid = () => {
+    const filteredProducts = ecommerceMockData.products.filter(p => {
+      const matchSearch = p.name.toLowerCase().includes(searchQuery.toLowerCase());
+      const matchCategory = activeCategory === 'All' || p.category === activeCategory;
+      return matchSearch && matchCategory;
+    });
+
+    return (
+      <div className="pk-container animate-fade-in">
+        <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '2rem', flexWrap: 'wrap', gap: '1rem' }}>
+          <div>
+            <h1 className="pk-heading-lg" style={{ marginBottom: '0.5rem' }}>{ecommerceMockData.storeName}</h1>
+            <p className="pk-text-body">Discover premium gear for modern living.</p>
+          </div>
+          <div className="pk-flex pk-items-center" style={{ gap: '1rem' }}>
+            <button className="pk-btn pk-btn-outline" onClick={handleExportCSV}>
+              ⬇️ Export CSV
+            </button>
+            <button className="pk-btn pk-btn-primary" onClick={() => setCurrentView('checkout')}>
+              🛒 Cart ({cart.length})
+            </button>
+          </div>
+        </div>
+
+        <div className="pk-card pk-glass" style={{ padding: '1.5rem', marginBottom: '2rem', display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <div className="pk-input-group" style={{ margin: 0, flex: 1, minWidth: '250px' }}>
+            <input 
+              type="text" 
+              className="pk-input" 
+              placeholder="Search products..." 
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <div className="pk-flex" style={{ gap: '0.5rem', overflowX: 'auto', paddingBottom: '4px' }}>
+            {ecommerceMockData.categories.map(cat => (
+              <button 
+                key={cat}
+                className={activeCategory === cat ? 'pk-badge' : 'pk-btn pk-btn-outline'}
+                style={activeCategory !== cat ? { padding: '0.25rem 0.75rem', borderRadius: 'var(--pk-radius-full)', border: '1px solid var(--pk-border)' } : { cursor: 'pointer' }}
+                onClick={() => setActiveCategory(cat)}
+              >
+                {cat}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {filteredProducts.length === 0 ? (
+          <div className="pk-empty-state">
+            <div className="pk-empty-icon">🏜️</div>
+            <h3 className="pk-heading-md">No products found</h3>
+            <p className="pk-text-body">Try adjusting your filters or search query.</p>
+            <button className="pk-btn pk-btn-secondary" style={{ marginTop: '1rem' }} onClick={() => { setSearchQuery(''); setActiveCategory('All'); }}>Clear Filters</button>
+          </div>
+        ) : (
+          <div className="pk-grid pk-grid-responsive">
+            {filteredProducts.map(product => (
+              <div key={product.id} className="pk-card pk-card-interactive" onClick={() => handleProductClick(product)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column' }}>
+                <div style={{ height: '250px', width: '100%', overflow: 'hidden', backgroundColor: 'var(--pk-primary-light)' }}>
+                  <img 
+                    src={product.image} 
+                    alt={product.name} 
+                    className="pk-object-cover pk-w-full pk-h-full"
+                    style={{ transition: 'transform 0.5s' }}
+                    onError={(e) => {
+                      e.target.style.display = 'none';
+                      e.target.nextSibling.style.display = 'flex';
+                    }}
+                  />
+                  {/* Image Fallback */}
+                  <div style={{ display: 'none', width: '100%', height: '100%', background: 'linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))', color: 'white', alignItems: 'center', justifyContent: 'center', fontSize: '2rem', fontWeight: 'bold' }}>
+                    {product.name.substring(0, 2).toUpperCase()}
+                  </div>
+                </div>
+                <div className="pk-card-body" style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+                  <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '0.5rem' }}>
+                    <span className="pk-badge">{product.category}</span>
+                    <span style={{ fontSize: '0.875rem', color: '#f59e0b', fontWeight: 600 }}>★ {product.rating}</span>
+                  </div>
+                  <h3 className="pk-heading-md" style={{ marginBottom: '0.5rem' }}>{product.name}</h3>
+                  <div className="pk-text-body" style={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', marginBottom: '1rem', flex: 1 }}>{product.description}</div>
+                  <div className="pk-flex pk-justify-between pk-items-center" style={{ marginTop: 'auto' }}>
+                    <span className="pk-heading-md" style={{ color: 'var(--pk-primary)' }}>${product.price.toFixed(2)}</span>
+                    {!product.inStock && <span className="pk-text-sm" style={{ color: 'var(--pk-danger)' }}>Out of Stock</span>}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const renderDetails = () => {
+    if (!selectedProduct) return null;
+    const p = selectedProduct;
+
+    return (
+      <div className="pk-container animate-fade-in">
+        <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('grid')}>
+          ← Back to Catalog
+        </button>
+
+        <div className="pk-card" style={{ display: 'flex', flexWrap: 'wrap' }}>
+          <div style={{ flex: '1 1 400px', height: '500px', backgroundColor: 'var(--pk-primary-light)', padding: '2rem' }}>
+            <img 
+              src={p.image} 
+              alt={p.name} 
+              className="pk-object-cover pk-w-full pk-h-full"
+              style={{ borderRadius: 'var(--pk-radius-lg)', boxShadow: 'var(--pk-shadow-lg)' }}
+              onError={(e) => {
+                e.target.style.display = 'none';
+                e.target.nextSibling.style.display = 'flex';
+              }}
+            />
+            <div style={{ display: 'none', width: '100%', height: '100%', background: 'linear-gradient(135deg, var(--pk-primary), var(--pk-secondary))', color: 'white', alignItems: 'center', justifyContent: 'center', fontSize: '4rem', fontWeight: 'bold', borderRadius: 'var(--pk-radius-lg)', boxShadow: 'var(--pk-shadow-lg)' }}>
+              {p.name.substring(0, 2).toUpperCase()}
+            </div>
+          </div>
+
+          <div style={{ flex: '1 1 400px', padding: '3rem' }}>
+            <div className="pk-flex pk-items-center" style={{ gap: '1rem', marginBottom: '1rem' }}>
+              <span className="pk-badge">{p.category}</span>
+              <span style={{ fontSize: '1rem', color: '#f59e0b', fontWeight: 600 }}>★ {p.rating} ({p.reviews} reviews)</span>
+            </div>
+            
+            <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{p.name}</h1>
+            <p className="pk-heading-lg" style={{ color: 'var(--pk-primary)', marginBottom: '1.5rem' }}>${p.price.toFixed(2)}</p>
+            
+            <p className="pk-text-body" style={{ fontSize: '1.125rem', marginBottom: '2rem' }}>{p.description}</p>
+
+            {p.sizes && p.sizes.length > 0 && (
+              <div style={{ marginBottom: '1.5rem' }}>
+                <h4 className="pk-label" style={{ marginBottom: '0.5rem' }}>Select Size</h4>
+                <div className="pk-flex" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
+                  {p.sizes.map(size => (
+                    <button 
+                      key={size}
+                      className={p.selectedSize === size ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                      style={{ padding: '0.5rem 1rem' }}
+                      onClick={() => setSelectedProduct({ ...p, selectedSize: size })}
+                    >
+                      {size}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {p.colors && p.colors.length > 0 && (
+              <div style={{ marginBottom: '2.5rem' }}>
+                <h4 className="pk-label" style={{ marginBottom: '0.5rem' }}>Select Color</h4>
+                <div className="pk-flex" style={{ gap: '0.5rem', flexWrap: 'wrap' }}>
+                  {p.colors.map(color => (
+                    <button 
+                      key={color}
+                      className={p.selectedColor === color ? 'pk-btn pk-btn-secondary' : 'pk-btn pk-btn-outline'}
+                      onClick={() => setSelectedProduct({ ...p, selectedColor: color })}
+                    >
+                      {color}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <button 
+              className={`pk-btn pk-btn-primary pk-w-full ${!p.inStock ? 'pk-btn-outline' : ''}`}
+              style={{ fontSize: '1.25rem', padding: '1rem' }}
+              disabled={!p.inStock}
+              onClick={handleAddToCart}
+            >
+              {p.inStock ? '🛒 Add to Cart' : 'Out of Stock'}
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const renderCheckout = () => (
+    <div className="pk-container animate-fade-in">
+      <div className="pk-flex pk-justify-between pk-items-center" style={{ marginBottom: '2rem' }}>
+        <h1 className="pk-heading-lg">Your Cart</h1>
+        <button className="pk-btn pk-btn-outline" onClick={() => setCurrentView('grid')}>
+          Keep Shopping
+        </button>
+      </div>
+
+      {cart.length === 0 ? (
+        <div className="pk-empty-state">
+          <div className="pk-empty-icon">🛍️</div>
+          <h3 className="pk-heading-md">Your cart is empty</h3>
+          <p className="pk-text-body" style={{ marginBottom: '2rem' }}>Looks like you haven't added anything yet.</p>
+          <button className="pk-btn pk-btn-primary" onClick={() => setCurrentView('grid')}>Start Shopping</button>
+        </div>
+      ) : (
+        <div className="pk-grid" style={{ gridTemplateColumns: 'minmax(300px, 2fr) minmax(300px, 1fr)' }}>
+          <div className="pk-flex pk-flex-col pk-gap-4">
+            {cart.map((item, idx) => (
+              <div key={idx} className="pk-card pk-flex pk-items-center" style={{ padding: '1rem', gap: '1.5rem' }}>
+                <div style={{ width: '100px', height: '100px', borderRadius: 'var(--pk-radius-md)', overflow: 'hidden', background: 'var(--pk-primary-light)' }}>
+                  <img src={item.image} alt={item.name} className="pk-object-cover pk-w-full pk-h-full" />
+                </div>
+                <div style={{ flex: 1 }}>
+                  <h3 className="pk-heading-md" style={{ fontSize: '1.25rem', marginBottom: '0.25rem' }}>{item.name}</h3>
+                  <p className="pk-text-sm">
+                    {item.selectedColor && `Color: ${item.selectedColor}`}
+                    {item.selectedColor && item.selectedSize && ` | `}
+                    {item.selectedSize && `Size: ${item.selectedSize}`}
+                  </p>
+                  <p className="pk-text-body" style={{ fontWeight: 600, marginTop: '0.5rem' }}>Qty: {item.quantity}</p>
+                </div>
+                <div className="pk-flex pk-flex-col pk-items-center" style={{ gap: '1rem', minWidth: '80px', alignItems: 'flex-end' }}>
+                  <span className="pk-heading-md">${(item.price * item.quantity).toFixed(2)}</span>
+                  <button className="pk-btn pk-btn-outline" style={{ padding: '0.25rem 0.5rem', color: 'var(--pk-danger)', border: 'none', background: 'var(--pk-danger-light)' }} onClick={() => handleRemoveFromCart(idx)}>
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div>
+            <div className="pk-card" style={{ position: 'sticky', top: '100px' }}>
+              <div className="pk-card-header">
+                <h3 className="pk-heading-md">Order Summary</h3>
+              </div>
+              <div className="pk-card-body pk-flex pk-flex-col pk-gap-4">
+                <div className="pk-flex pk-justify-between">
+                  <span className="pk-text-body">Subtotal</span>
+                  <span style={{ fontWeight: 600 }}>${cartTotal.toFixed(2)}</span>
+                </div>
+                <div className="pk-flex pk-justify-between">
+                  <span className="pk-text-body">Shipping</span>
+                  <span style={{ fontWeight: 600 }}>Free</span>
+                </div>
+                <div className="pk-flex pk-justify-between">
+                  <span className="pk-text-body">Tax (Estimated)</span>
+                  <span style={{ fontWeight: 600 }}>${(cartTotal * 0.08).toFixed(2)}</span>
+                </div>
+                <hr style={{ border: 0, borderTop: '1px solid var(--pk-border)', margin: '0.5rem 0' }} />
+                <div className="pk-flex pk-justify-between pk-items-center">
+                  <span className="pk-heading-md">Total</span>
+                  <span className="pk-heading-lg" style={{ color: 'var(--pk-primary)' }}>${(cartTotal * 1.08).toFixed(2)}</span>
+                </div>
+                <button 
+                  className="pk-btn pk-btn-primary pk-w-full" 
+                  style={{ marginTop: '1rem', fontSize: '1.25rem', padding: '1rem' }}
+                  onClick={handleCheckout}
+                >
+                  Proceed to Payment
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  const renderSuccess = () => (
+    <div className="pk-container animate-fade-in" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }}>
+      <div className="pk-card pk-text-center" style={{ padding: '4rem 2rem', maxWidth: '600px' }}>
+        <div style={{ fontSize: '5rem', marginBottom: '1rem' }}>🎉</div>
+        <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>Order Confirmed!</h1>
+        <p className="pk-text-body" style={{ fontSize: '1.25rem', marginBottom: '2rem' }}>
+          Thank you for your purchase. We've sent a receipt to your email and your items will ship shortly.
+        </p>
+        <button className="pk-btn pk-btn-primary" onClick={() => setCurrentView('grid')}>
+          Return to Store
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+      {isLoading && (
+        <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.7)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+          <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+          <h3 className="pk-heading-md">Processing...</h3>
+        </div>
+      )}
+
+      {/* Global CSS for fade animations inline for portability if app doesnt import it directly */}
+      <style>{`
+        .animate-fade-in { animation: popsiteFadeIn 0.4s ease-out; }
+        @keyframes popsiteFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+      `}</style>
+      
+      {currentView === 'grid' && renderGrid()}
+      {currentView === 'details' && renderDetails()}
+      {currentView === 'checkout' && renderCheckout()}
+      {currentView === 'success' && renderSuccess()}
+      
+      <ToastContainer />
+    </div>
+  );
+}

package/src/components/modules/EventTicketBookingModule.jsx

@@ -0,0 +1,253 @@
+import React, { useState, useEffect } from 'react';
+import { eventBookingMockData } from '../../data/systems/eventBooking';
+import { useToast } from '../system/Toast';
+
+export function EventTicketBookingModule() {
+  const [currentView, setCurrentView] = useState('feed'); // feed, details
+  const [selectedEvent, setSelectedEvent] = useState(null);
+  const [showModal, setShowModal] = useState(false);
+  const [activeTier, setActiveTier] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [bookedEvents, setBookedEvents] = useState([]);
+
+  const { showToast, ToastContainer } = useToast();
+
+  useEffect(() => {
+    const saved = localStorage.getItem('popsite_events');
+    if (saved) {
+      try { setBookedEvents(JSON.parse(saved)); } catch (e) {}
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem('popsite_events', JSON.stringify(bookedEvents));
+  }, [bookedEvents]);
+
+  // Global Countdown Timer Hook
+  const useCountdown = (targetDateStr) => {
+    const [timeLeft, setTimeLeft] = useState({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+
+    useEffect(() => {
+      const target = new Date(targetDateStr).getTime();
+      const interval = setInterval(() => {
+        const now = new Date().getTime();
+        const difference = target - now;
+
+        if (difference <= 0) {
+          clearInterval(interval);
+          setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
+        } else {
+          setTimeLeft({
+            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+            hours: Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+            minutes: Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)),
+            seconds: Math.floor((difference % (1000 * 60)) / 1000)
+          });
+        }
+      }, 1000);
+      return () => clearInterval(interval);
+    }, [targetDateStr]);
+
+    return timeLeft;
+  };
+
+  const withDelay = (callback, delay = 1500) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      setIsLoading(false);
+      callback();
+    }, delay);
+  };
+
+  const handlePurchase = () => {
+    withDelay(() => {
+       const newTicket = {
+          eventId: selectedEvent.id,
+          ticketId: `TKT-${Math.floor(Math.random()*10000)}-${Date.now().toString().slice(-4)}`,
+          tier: activeTier
+       };
+       setBookedEvents(prev => [...prev, newTicket]);
+       setShowModal(false);
+       setActiveTier(null);
+       showToast('Payment successful! Your ticket is secured.', 'success');
+    });
+  };
+
+  const renderFeed = () => (
+     <div className="pk-container animate-fade-in">
+        <div style={{ textAlign: 'center', marginBottom: '3rem' }}>
+           <h1 className="pk-heading-xl" style={{ marginBottom: '1rem' }}>{eventBookingMockData.platformName}</h1>
+           <p className="pk-text-body" style={{ fontSize: '1.25rem' }}>Secure your spot at the world's most exclusive events.</p>
+        </div>
+
+        <div className="pk-grid pk-flex-col pk-gap-6">
+           {eventBookingMockData.upcomingEvents.map(ev => {
+              const dateObj = new Date(ev.date);
+              return (
+                 <div key={ev.id} className="pk-card pk-card-interactive" style={{ display: 'flex', flexWrap: 'wrap' }}>
+                    <div style={{ flex: '1 1 300px', height: '250px' }}>
+                       <img src={ev.image} alt={ev.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                    </div>
+                    <div className="pk-card-body" style={{ flex: '2 1 400px', display: 'flex', flexDirection: 'column' }}>
+                       <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+                          <span className="pk-badge">{dateObj.toLocaleDateString(undefined, {month: 'long', day: 'numeric', year: 'numeric'})}</span>
+                          {bookedEvents.find(b => b.eventId === ev.id) && (
+                             <span style={{ color: 'var(--pk-success)', fontWeight: 'bold' }}>✓ Ticket Owned</span>
+                          )}
+                       </div>
+                       <h2 className="pk-heading-lg" style={{ marginBottom: '0.5rem' }}>{ev.title}</h2>
+                       <p className="pk-text-sm pk-text-muted" style={{ marginBottom: '1rem' }}>📍 {ev.location}</p>
+                       <p className="pk-text-body" style={{ flex: 1 }}>{ev.description}</p>
+                       
+                       <button className="pk-btn pk-btn-primary" style={{ alignSelf: 'flex-start', marginTop: '1.5rem' }} onClick={() => { setSelectedEvent(ev); setCurrentView('details'); }}>
+                          View Details & Tickets
+                       </button>
+                    </div>
+                 </div>
+              );
+           })}
+        </div>
+     </div>
+  );
+
+  const renderDetails = () => {
+     if (!selectedEvent) return null;
+     return (
+        <div className="pk-container animate-fade-in">
+           <button className="pk-btn pk-btn-outline" style={{ marginBottom: '2rem' }} onClick={() => setCurrentView('feed')}>← Back to Events</button>
+
+           <div style={{ position: 'relative', height: '400px', borderRadius: 'var(--pk-radius-lg)', overflow: 'hidden', marginBottom: '3rem' }}>
+              <img src={selectedEvent.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.8))', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '3rem' }}>
+                 <h1 className="pk-heading-xl" style={{ color: 'white', marginBottom: '0.5rem' }}>{selectedEvent.title}</h1>
+                 <p style={{ color: 'rgba(255,255,255,0.8)', fontSize: '1.25rem' }}>📍 {selectedEvent.location}</p>
+              </div>
+           </div>
+
+           <div className="pk-grid" style={{ gridTemplateColumns: 'minmax(300px, 2fr) minmax(300px, 1fr)' }}>
+              <div>
+                 <h2 className="pk-heading-lg" style={{ marginBottom: '1.5rem' }}>About this Event</h2>
+                 <p className="pk-text-body" style={{ fontSize: '1.125rem', marginBottom: '3rem' }}>{selectedEvent.description}</p>
+
+                 <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Who's Speaking</h3>
+                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '3rem' }}>
+                    {selectedEvent.speakers.map((s, i) => <div key={i} className="pk-card" style={{ padding: '1rem' }}>👤 {s}</div>)}
+                 </div>
+
+                 <h3 className="pk-heading-md" style={{ marginBottom: '1rem' }}>Agenda</h3>
+                 <div style={{ borderLeft: '2px solid var(--pk-border)', paddingLeft: '1.5rem', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+                    {selectedEvent.agenda.map((a, i) => (
+                       <div key={i} style={{ position: 'relative' }}>
+                          <div style={{ position: 'absolute', left: '-1.5rem', top: '5px', transform: 'translateX(-50%)', width: '12px', height: '12px', borderRadius: '50%', background: 'var(--pk-primary)' }}></div>
+                          <p className="pk-text-body" style={{ fontWeight: 600 }}>{a}</p>
+                       </div>
+                    ))}
+                 </div>
+              </div>
+
+              <div>
+                 <div className="pk-card" style={{ position: 'sticky', top: '20px', padding: '2rem' }}>
+                    <EventCountdownTimer targetDate={selectedEvent.date} />
+                    <button className="pk-btn pk-btn-primary pk-w-full" style={{ padding: '1.25rem', fontSize: '1.125rem' }} onClick={() => setShowModal(true)}>
+                       Get Tickets
+                    </button>
+                    {bookedEvents.find(b => b.eventId === selectedEvent.id) && (
+                       <p className="pk-text-sm pk-text-center" style={{ marginTop: '1rem', color: 'var(--pk-success)', fontWeight: 'bold' }}>You have a ticket for this event!</p>
+                    )}
+                 </div>
+              </div>
+           </div>
+
+           {/* Modal Implementation natively */}
+           {showModal && (
+              <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', zIndex: 100, display: 'flex', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(5px)' }}>
+                 <div className="pk-card animate-fade-in" style={{ width: '100%', maxWidth: '600px', padding: '2rem' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2rem' }}>
+                       <h2 className="pk-heading-lg">Select Tier</h2>
+                       <button className="pk-btn pk-btn-outline" style={{ border: 'none' }} onClick={() => setShowModal(false)}>✕</button>
+                    </div>
+
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', marginBottom: '2rem' }}>
+                       {selectedEvent.tiers.map(tier => {
+                          const isSoldOut = tier.capacity <= 0;
+                          return (
+                             <button
+                                key={tier.id}
+                                disabled={isSoldOut}
+                                className={activeTier?.id === tier.id ? 'pk-btn pk-btn-primary' : 'pk-btn pk-btn-outline'}
+                                style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '1.5rem', textAlign: 'left', opacity: isSoldOut ? 0.5 : 1 }}
+                                onClick={() => setActiveTier(tier)}
+                             >
+                                <div>
+                                   <h3 className="pk-heading-md" style={{ color: activeTier?.id === tier.id ? 'white' : 'var(--pk-text-main)' }}>{tier.name}</h3>
+                                   {isSoldOut ? (
+                                      <span style={{ color: 'var(--pk-danger)', fontWeight: 'bold', fontSize: '0.875rem' }}>SOLD OUT</span>
+                                   ) : (
+                                      <span style={{ fontSize: '0.875rem', opacity: 0.8 }}>Available</span>
+                                   )}
+                                </div>
+                                <span className="pk-heading-lg" style={{ color: activeTier?.id === tier.id ? 'white' : 'var(--pk-primary)' }}>${tier.price}</span>
+                             </button>
+                          );
+                       })}
+                    </div>
+
+                    <button 
+                       className="pk-btn pk-btn-primary pk-w-full" 
+                       style={{ padding: '1.25rem' }} 
+                       disabled={!activeTier}
+                       onClick={handlePurchase}
+                    >
+                       Confirm Checkout
+                    </button>
+                 </div>
+              </div>
+           )}
+        </div>
+     );
+  };
+
+  // Helper component to use hook cleanly
+  const EventCountdownTimer = ({ targetDate }) => {
+     const timeLeft = useCountdown(targetDate);
+     return (
+        <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
+           <p className="pk-text-muted pk-label" style={{ marginBottom: '1rem' }}>Event Starts In</p>
+           <div style={{ display: 'flex', justifyContent: 'space-between', gap: '0.5rem' }}>
+              <div style={{ background: 'var(--pk-bg-main)', padding: '0.75rem', borderRadius: 'var(--pk-radius-md)', flex: 1 }}>
+                 <div className="pk-heading-md">{timeLeft.days}</div>
+                 <div className="pk-text-sm">Days</div>
+              </div>
+              <div style={{ background: 'var(--pk-bg-main)', padding: '0.75rem', borderRadius: 'var(--pk-radius-md)', flex: 1 }}>
+                 <div className="pk-heading-md">{timeLeft.hours}</div>
+                 <div className="pk-text-sm">Hrs</div>
+              </div>
+              <div style={{ background: 'var(--pk-bg-main)', padding: '0.75rem', borderRadius: 'var(--pk-radius-md)', flex: 1 }}>
+                 <div className="pk-heading-md">{timeLeft.minutes}</div>
+                 <div className="pk-text-sm">Min</div>
+              </div>
+              <div style={{ background: 'var(--pk-bg-main)', padding: '0.75rem', borderRadius: 'var(--pk-radius-md)', flex: 1 }}>
+                 <div className="pk-heading-md">{timeLeft.seconds}</div>
+                 <div className="pk-text-sm">Sec</div>
+              </div>
+           </div>
+        </div>
+     );
+  };
+
+  return (
+    <div style={{ position: 'relative', minHeight: '100vh', backgroundColor: 'var(--pk-bg-main)' }}>
+       {isLoading && (
+         <div style={{ position: 'fixed', inset: 0, backgroundColor: 'rgba(255,255,255,0.8)', zIndex: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', backdropFilter: 'blur(4px)' }}>
+           <div className="pk-skeleton" style={{ width: '80px', height: '80px', borderRadius: '50%', marginBottom: '1rem' }}></div>
+           <h3 className="pk-heading-md">Processing Reservation...</h3>
+         </div>
+       )}
+
+       {currentView === 'feed' && renderFeed()}
+       {currentView === 'details' && renderDetails()}
+
+       <ToastContainer />
+    </div>
+  );
+}