import React, { useState, useEffect, useMemo } from "react";
import { createRoot } from "react-dom/client";

// --- Types ---
type Category = "Web" | "Mobile" | "Plugin" | "Marketing" | "UI";

interface Project {
  id: string;
  category: Category;
  industry: string;
  tech: string[];
  title: string;
  shortDescription: string;
  fullDescription: string;
  features: string[];
  image: string;
  detailImage?: string; 
  liveUrl: string;
}

// --- Expanded Industry Categories ---
const INDUSTRIES = [
  "All", "Music", "Event", "Agency", "Architecture", "Automotive", "Beauty", "Business", "Construction", 
  "Corporate", "Creative", "Dentist", "Digital Agency", "Education", "Fashion", "Fitness", "Health", 
  "Hotel", "Jewelry", "Landing Page", "Law", "Life Coach", "Logistics", "Marketing", "Medical", 
  "Nature", "Non Profit", "Photography", "Portfolio", "Real Estate", "Restaurant", 
  "SaaS", "Security", "Spa", "Sport", "Startup", "Technology", "Travel", 
  "Wedding", "Yoga"
];

const PROJECTS: Project[] = [
  // --- MASHUPMINATI THEME (Music/Event Focus) ---
  {
    id: "mashup-minati-music",
    category: "Web",
    industry: "Music",
    tech: ["Next.js", "GSAP", "Tailwind"],
    title: "MashupMinati",
    shortDescription: "Now Booking 2026 Season. India's premier high-energy event aggregator.",
    fullDescription: "WE DON'T JUST PLAY. WE CREATE. From stadium concerts to royal weddings, we handle the Sound, the Lights, the Stage, and the Soul. We are not just a DJ company. We are a full-stack event powerhouse providing the Full Spectrum of entertainment.",
    features: [
      "Entertainment & Artists Curating",
      "Event Planning (End-to-End)",
      "Production & Tech (Line Array Systems)",
      "Decor & Design (Ambient Lighting)",
      "Artist Management & Celebrity DJs"
    ],
    // Represents the high-impact hero image with the DJ deck
    image: "https://images.unsplash.com/photo-1598387181032-a3103a2db5b3?auto=format&fit=crop&q=80&w=1200", 
    // Represents the full vertical scroll screenshot provided
    detailImage: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?auto=format&fit=crop&q=80&w=1600",
    liveUrl: "#"
  },
  {
    id: "mashup-minati-event",
    category: "Web",
    industry: "Event",
    tech: ["Next.js", "GSAP", "Three.js"],
    title: "MashupMinati Pro",
    shortDescription: "The Big Fat Indian Wedding & Corporate Galas specialist.",
    fullDescription: "Scale doesn't scare us. Intimacy doesn't bore us. We specialize in award nights, product launches, and high-energy social gatherings. The ultimate blueprint for event management platforms.",
    features: [
      "The Big Fat Indian Wedding Saga",
      "Corporate Gala Specialists",
      "Social & Private Parties",
      "Visual Proof Portfolio Grid"
    ],
    image: "https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?auto=format&fit=crop&q=80&w=1200",
    detailImage: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&q=80&w=1600",
    liveUrl: "#"
  },
  // Other Standard Templates
  {
    id: "w1", category: "Web", industry: "Agency", tech: ["Elementor", "WP"], title: "Brix Digital",
    shortDescription: "Modern digital agency template with bold typography.",
    fullDescription: "Brix is a high-performance template for modern agencies. It features interactive case studies and a unique project grid.",
    features: ["Case Study Layouts", "Custom Mega Menu", "Performance Optimized"],
    image: "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&q=80&w=1200",
    liveUrl: "#"
  },
  {
    id: "w2", category: "Web", industry: "Architecture", tech: ["React", "Tailwind"], title: "Lira Studio",
    shortDescription: "Minimalist architecture and interior design template.",
    fullDescription: "Lira focuses on whitespace and high-quality photography, perfect for high-end architectural firms.",
    features: ["Project Masonry", "Dark/Light Mode", "Portfolio Filtering"],
    image: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?auto=format&fit=crop&q=80&w=1200",
    liveUrl: "#"
  }
];

// --- Components ---

const AuraBackground = () => (
  <div className="aura-bg">
    <div className="aura-blob aura-purple"></div>
    <div className="aura-blob aura-blue"></div>
    <div className="aura-grid"></div>
  </div>
);

const Navbar = ({ onHome }: { onHome: () => void }) => (
  <nav className="glass-nav">
    <div className="nav-content">
      <div className="nav-logo" onClick={onHome}>
        BYS <span className="logo-accent">HUB</span>
      </div>
      <div className="nav-links">
        <a href="#" className="external-link">TEMPLATES</a>
        <button className="primary-btn">GET STARTED</button>
      </div>
    </div>
  </nav>
);

const BentoGrid = ({ onNavigate }: { onNavigate: (cat: Category) => void }) => (
  <div className="bento-container fade-in">
    <div className="bento-main">
      <div className="bento-cell cell-featured" onClick={() => onNavigate("Web")}>
        <div className="cell-overlay"></div>
        <div className="cell-info">
          <span className="cell-tag">01 / FEATURED</span>
          <h2>Web Systems</h2>
          <p>High-energy themes for Music, Events, and Creative Agencies.</p>
          <div className="cell-action">BROWSE MASHUPMINATI & MORE →</div>
        </div>
        <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800" alt="Web" />
      </div>
      <div className="bento-cell cell-tall" onClick={() => onNavigate("Mobile")}>
        <div className="cell-overlay"></div>
        <div className="cell-info">
          <span className="cell-tag">02 / INTERFACE</span>
          <h2>App Demos</h2>
          <p>Native app experiences for event booking and management.</p>
        </div>
        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?auto=format&fit=crop&q=80&w=800" alt="Apps" />
      </div>
      <div className="bento-cell cell-small" onClick={() => onNavigate("Plugin")}>
        <div className="cell-overlay"></div>
        <div className="cell-info"><h3>Plugins</h3></div>
        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80&w=800" alt="Tools" />
      </div>
      <div className="bento-cell cell-small" onClick={() => onNavigate("Marketing")}>
        <div className="cell-overlay"></div>
        <div className="cell-info"><h3>Marketing</h3></div>
        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80&w=800" alt="Marketing" />
      </div>
      <div className="bento-cell cell-wide" onClick={() => onNavigate("UI")}>
        <div className="cell-overlay"></div>
        <div className="cell-info">
          <span className="cell-tag">05 / DESIGN</span>
          <h2>UI Systems</h2>
        </div>
        <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?auto=format&fit=crop&q=80&w=800" alt="Design" />
      </div>
    </div>
  </div>
);

const GalleryView = ({ category, onSelect, onBack }: { category: Category, onSelect: (p: Project) => void, onBack: () => void }) => {
  const [activeIndustry, setActiveIndustry] = useState("All");

  const filtered = useMemo(() => {
    return PROJECTS.filter(p => p.category === category && (activeIndustry === "All" || p.industry === activeIndustry));
  }, [category, activeIndustry]);

  return (
    <div className="gallery-layout fade-in">
      <aside className="gallery-sidebar">
        <div className="sidebar-header">
          <button className="back-btn-simple" onClick={onBack}>← RETURN TO HUB</button>
          <h3>INDUSTRIES</h3>
        </div>
        <div className="sidebar-nav">
          {INDUSTRIES.map(ind => (
            <button 
              key={ind} 
              className={`sidebar-item ${activeIndustry === ind ? 'active' : ''}`}
              onClick={() => setActiveIndustry(ind)}
            >
              {ind}
            </button>
          ))}
        </div>
      </aside>

      <section className="gallery-main">
        <div className="mobile-industry-nav">
          <select value={activeIndustry} onChange={(e) => setActiveIndustry(e.target.value)} className="industry-select">
            {INDUSTRIES.map(ind => <option key={ind} value={ind}>{ind}</option>)}
          </select>
        </div>

        <div className="gallery-header-content">
          <h1 className="gallery-title">
            {activeIndustry === 'All' ? category : activeIndustry} <span className="text-glow">LIBRARY</span>
          </h1>
          <p className="gallery-count">{filtered.length} curated designs</p>
        </div>

        <div className="projects-grid">
          {filtered.map((p, i) => (
            <div key={p.id} className="project-card" onClick={() => onSelect(p)}>
              <div className="project-image">
                <img src={p.image} alt={p.title} loading="lazy" />
                <div className="project-hover-ui">
                  <button className="view-btn">EXPLORE THEME</button>
                </div>
              </div>
              <div className="project-details">
                <div className="tech-chips">
                  <span className="industry-badge">{p.industry}</span>
                </div>
                <h4>{p.title}</h4>
                <p>{p.shortDescription}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const ProjectDetailView = ({ project, onBack }: { project: Project, onBack: () => void }) => {
  useEffect(() => { window.scrollTo(0,0); }, []);

  return (
    <div className="detail-container fade-in">
      <div className="detail-hero">
        <div className="detail-hero-content">
          <button className="back-btn" onClick={onBack}>← BACK TO COLLECTION</button>
          <span className="cell-tag">{project.industry.toUpperCase()} // DESIGN BLUEPRINT</span>
          <h1 className="detail-title">{project.title}</h1>
          <p className="detail-lead">{project.fullDescription}</p>
          <div className="detail-cta-group">
            <a href={project.liveUrl} target="_blank" className="live-btn-lg">VIEW LIVE DEMO</a>
            <button className="secondary-btn-lg">LICENCE THIS DESIGN</button>
          </div>
        </div>
        <div className="detail-hero-media">
          <img src={project.image} alt={project.title} />
          <div className="media-glow"></div>
        </div>
      </div>

      <div className="detail-specs-grid">
        <div className="spec-card">
          <h3>CORE SPECIFICATIONS</h3>
          <ul>
            {project.features.map(f => <li key={f}>{f}</li>)}
          </ul>
        </div>
        <div className="spec-card">
          <h3>ENGINEERING STACK</h3>
          <div className="tech-chips large">
            {project.tech.map(t => <span key={t} className="chip">{t}</span>)}
            <span className="chip">Native Performance</span>
            <span className="chip">Cloud Scale</span>
          </div>
        </div>
      </div>

      <div className="full-preview-section">
        <div className="preview-label">LONG-FORM PREVIEW</div>
        <div className="preview-container">
           {/* Displays the exclusive full-page screenshot provided by the user */}
           <img src={project.detailImage || project.image} alt="Full Page Preview" className="preview-img" />
           <div className="preview-watermark">BLUEPRINT PROTECTED BY BYS HUB</div>
        </div>
      </div>
    </div>
  );
};

function App() {
  const [view, setView] = useState<{ type: 'home' | 'gallery' | 'detail', category?: Category, project?: Project }>({ type: 'home' });

  const navigateToHome = () => setView({ type: 'home' });
  const navigateToGallery = (cat: Category) => setView({ type: 'gallery', category: cat });
  const navigateToDetail = (proj: Project) => setView({ type: 'detail', project: proj });

  return (
    <div className="app-shell">
      <AuraBackground />
      <Navbar onHome={navigateToHome} />
      
      <main className="main-stage">
        {view.type === 'home' && (
          <>
            <div className="hero-text-center">
              <span className="hero-tag">INNOVATION HUB</span>
              <h1>Premium Web <span className="purple-gradient">Architectures.</span></h1>
              <p>Explore elite-level design blueprints for high-energy industries.</p>
            </div>
            <BentoGrid onNavigate={navigateToGallery} />
          </>
        )}
        
        {view.type === 'gallery' && view.category && (
          <GalleryView 
            category={view.category} 
            onSelect={navigateToDetail} 
            onBack={navigateToHome} 
          />
        )}

        {view.type === 'detail' && view.project && (
          <ProjectDetailView 
            project={view.project} 
            onBack={() => navigateToGallery(view.project!.category)} 
          />
        )}
      </main>

      <footer className="hub-footer">
        <div className="footer-content">
          <div className="footer-logo">BYS / HUB</div>
          <p>The definitive library for modern web design excellence.</p>
          <div className="footer-bottom">
            <div className="socials">
              <a href="#">TWITTER</a>
              <a href="#">LINKEDIN</a>
            </div>
            <div className="legal">©{new Date().getFullYear()} BYS MARKETING SOLUTIONS</div>
          </div>
        </div>
      </footer>

      <style>{`
        :root {
          --bg: #05010d;
          --accent: #a855f7;
          --accent-glow: rgba(168, 85, 247, 0.4);
          --secondary: #3b82f6;
          --text: #ffffff;
          --text-dim: #94a3b8;
          --glass: rgba(18, 14, 35, 0.6);
          --border: rgba(168, 85, 247, 0.15);
          --font-display: 'Inter', sans-serif;
          --font-mono: 'JetBrains Mono', monospace;
          --sidebar-width: 280px;
        }

        body {
          margin: 0;
          background: var(--bg);
          color: var(--text);
          font-family: var(--font-display);
          overflow-x: hidden;
          -webkit-font-smoothing: antialiased;
        }

        .app-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; }

        .aura-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: var(--bg); overflow: hidden; }
        .aura-blob { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(140px); opacity: 0.12; animation: float 30s infinite alternate; }
        .aura-purple { background: var(--accent); top: -20%; left: -20%; }
        .aura-blue { background: var(--secondary); bottom: -20%; right: -20%; animation-delay: -10s; }
        .aura-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.08; }
        @keyframes float { 0% { transform: translate(0,0) scale(1); } 100% { transform: translate(10%, 10%) scale(1.1); } }

        .glass-nav { height: 80px; display: flex; align-items: center; padding: 0 4%; position: sticky; top: 0; z-index: 1000; backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); background: rgba(5,1,13,0.7); }
        .nav-content { width: 100%; max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
        .nav-logo { font-size: 1.3rem; font-weight: 900; letter-spacing: 2px; cursor: pointer; }
        .logo-accent { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
        .nav-links { display: flex; align-items: center; gap: 2rem; }
        .external-link { color: var(--text-dim); text-decoration: none; font-size: 0.8rem; font-weight: 700; letter-spacing: 1px; }
        .primary-btn { background: var(--accent); color: white; border: none; padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 800; font-size: 0.8rem; cursor: pointer; transition: 0.3s; box-shadow: 0 0 25px var(--accent-glow); }

        .hero-text-center { text-align: center; padding: 80px 6% 40px; max-width: 900px; margin: 0 auto; }
        .hero-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); letter-spacing: 3px; font-weight: 700; margin-bottom: 1rem; display: block; }
        .hero-text-center h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 900; margin: 0 0 1.5rem; letter-spacing: -3px; line-height: 1; }
        .purple-gradient { background: linear-gradient(90deg, #fff, var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .hero-text-center p { font-size: 1.2rem; color: var(--text-dim); line-height: 1.6; }

        .bento-container { padding: 40px 6% 100px; max-width: 1400px; margin: 0 auto; width: 100%; }
        .bento-main { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 240px; gap: 1.5rem; }
        .bento-cell { background: var(--glass); border: 1px solid var(--border); border-radius: 24px; position: relative; overflow: hidden; cursor: pointer; transition: 0.6s cubic-bezier(0.2, 1, 0.2, 1); padding: 2.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
        .bento-cell:hover { border-color: var(--accent); transform: translateY(-8px); }
        .bento-cell img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.15; transition: 0.8s; }
        .bento-cell:hover img { transform: scale(1.1); opacity: 0.3; }
        .cell-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, var(--bg) 10%, transparent 80%); }
        .cell-info { position: relative; z-index: 2; }
        .cell-tag { font-family: var(--font-mono); font-size: 0.65rem; color: var(--accent); display: block; margin-bottom: 0.5rem; letter-spacing: 2px; }
        .cell-info h2 { font-size: 1.8rem; font-weight: 900; margin: 0; letter-spacing: -1px; }
        .cell-info p { color: var(--text-dim); font-size: 0.95rem; margin: 0.8rem 0 0; line-height: 1.4; }
        .cell-action { margin-top: 1.5rem; font-weight: 800; color: var(--accent); font-size: 0.75rem; letter-spacing: 1px; }

        .cell-featured { grid-column: span 8; grid-row: span 2; }
        .cell-tall { grid-column: span 4; grid-row: span 2; }
        .cell-small { grid-column: span 3; grid-row: span 1; }
        .cell-wide { grid-column: span 6; grid-row: span 1; }

        .gallery-layout { display: flex; min-height: calc(100vh - 80px); }
        .gallery-sidebar { width: var(--sidebar-width); height: calc(100vh - 80px); border-right: 1px solid var(--border); position: sticky; top: 80px; background: rgba(5,1,13,0.3); overflow-y: auto; padding: 40px 0; scrollbar-width: none; }
        .sidebar-header { padding: 0 30px; margin-bottom: 30px; }
        .back-btn-simple { background: none; border: none; color: var(--text-dim); font-family: var(--font-mono); font-size: 0.7rem; cursor: pointer; letter-spacing: 1px; margin-bottom: 10px; padding: 0; }
        .sidebar-header h3 { font-size: 0.8rem; font-weight: 900; letter-spacing: 2px; color: var(--accent); margin: 0; }
        .sidebar-item { background: none; border: none; color: var(--text-dim); text-align: left; padding: 12px 30px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s; border-left: 3px solid transparent; }
        .sidebar-item.active { color: #fff; border-left-color: var(--accent); background: rgba(168, 85, 247, 0.08); }

        .gallery-main { flex: 1; padding: 40px 4% 100px; position: relative; }
        .mobile-industry-nav { display: none; margin-bottom: 30px; }
        .industry-select { width: 100%; background: var(--glass); border: 1px solid var(--border); color: #fff; padding: 12px 20px; border-radius: 12px; }

        .gallery-title { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; margin: 0 0 10px; text-transform: uppercase; letter-spacing: -2px; }
        .gallery-count { color: var(--text-dim); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 1px; }

        .projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem; }
        .project-card { background: var(--glass); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; cursor: pointer; transition: 0.4s; }
        .project-card:hover { border-color: var(--accent); transform: translateY(-10px); }
        .project-image { height: 220px; position: relative; overflow: hidden; }
        .project-image img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
        .project-hover-ui { position: absolute; inset: 0; background: rgba(5,1,13,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.3s; backdrop-filter: blur(8px); }
        .project-card:hover .project-hover-ui { opacity: 1; }
        .view-btn { background: #fff; color: #000; border: none; padding: 0.9rem 1.8rem; border-radius: 50px; font-weight: 900; font-size: 0.75rem; cursor: pointer; }

        .project-details { padding: 1.8rem; }
        .tech-chips { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
        .industry-badge { background: var(--accent); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 0.55rem; font-weight: 900; text-transform: uppercase; }
        .project-details h4 { font-size: 1.4rem; margin: 0 0 0.8rem; font-weight: 800; }
        .project-details p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; }

        .detail-container { padding: 60px 6% 120px; max-width: 1400px; margin: 0 auto; width: 100%; }
        .detail-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-bottom: 80px; }
        .detail-title { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 900; line-height: 1; margin: 15px 0 25px; letter-spacing: -3px; }
        .detail-lead { font-size: 1.2rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 40px; }
        .detail-cta-group { display: flex; gap: 1.5rem; flex-wrap: wrap; }
        .live-btn-lg { background: var(--accent); color: #fff; text-decoration: none; padding: 1.1rem 2.2rem; border-radius: 12px; font-weight: 900; font-size: 1rem; box-shadow: 0 0 30px var(--accent-glow); }

        .detail-hero-media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
        .detail-hero-media img { width: 100%; height: auto; display: block; }
        
        .detail-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 80px; padding: 60px 0; border-top: 1px solid var(--border); }
        .spec-card h3 { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); margin-bottom: 25px; letter-spacing: 3px; }
        .spec-card ul { list-style: none; padding: 0; }
        .spec-card li { font-size: 1.1rem; color: var(--text-dim); margin-bottom: 12px; padding-left: 20px; position: relative; }
        .spec-card li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
        .tech-chips.large .chip { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); background: rgba(168, 85, 247, 0.1); padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border); margin: 0 10px 10px 0; display: inline-block; }

        .full-preview-section { background: rgba(0,0,0,0.4); padding: 80px 4%; border-radius: 40px; border: 1px solid var(--border); }
        .preview-label { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim); text-align: center; margin-bottom: 40px; letter-spacing: 10px; }
        .preview-container { border-radius: 20px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 40px 100px rgba(0,0,0,0.8); position: relative; }
        .preview-img { width: 100%; height: auto; display: block; }
        .preview-watermark { position: absolute; bottom: 20px; right: 20px; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255,255,255,0.2); letter-spacing: 2px; }

        .hub-footer { padding: 100px 6% 60px; border-top: 1px solid var(--border); background: #020106; text-align: center; }
        .footer-logo { font-weight: 900; letter-spacing: 3px; font-size: 1.4rem; margin-bottom: 15px; }
        .footer-bottom { margin-top: 60px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 30px; }
        .socials { display: flex; gap: 2rem; }
        .socials a { color: var(--text-dim); text-decoration: none; font-size: 0.7rem; }

        @media (max-width: 1024px) {
          .gallery-sidebar { display: none; }
          .mobile-industry-nav { display: block; }
          .detail-hero { grid-template-columns: 1fr; }
          .detail-specs-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
          .bento-main { grid-template-columns: 1fr; grid-auto-rows: auto; }
          .bento-cell { grid-column: span 1 !important; min-height: 260px; }
          .footer-bottom { flex-direction: column; gap: 20px; }
        }

        .fade-in { animation: fadeIn 0.8s cubic-bezier(0.2, 1, 0.2, 1) forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}

const rootElement = document.getElementById("root")!;
const root = createRoot(rootElement);
root.render(<App />);