Mobile-First Design: User Experience for the Modern Web

Base Layer (Mobile): Core content and basic functionality
Enhancement Layer (Tablet): Touch-optimized interactions, better layouts
Advanced Layer (Desktop): Hover states, complex animations, extensive navigation
Premium Layer (High-end): Advanced features, sophisticated interactions

/* Mobile-first breakpoint approach */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

/* Mobile-first approach with Tailwind */
.mobile-first {
  /* Mobile styles (default) */
  @apply text-sm px-4 py-2;
}

/* Tablet styles */
@media (min-width: 768px) {
  .mobile-first {
    @apply text-base px-6 py-3;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .mobile-first {
    @apply text-lg px-8 py-4;
  }
}

/* Custom Mobile-First Framework */
:root {
  --mobile-font-size: 14px;
  --tablet-font-size: 16px;
  --desktop-font-size: 18px;

  --mobile-spacing: 1rem;
  --tablet-spacing: 1.5rem;
  --desktop-spacing: 2rem;
}

/* Base mobile styles */
html {
  font-size: var(--mobile-font-size);
  line-height: 1.6;
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  html {
    font-size: var(--tablet-font-size);
  }
}

@media (min-width: 1024px) {
  html {
    font-size: var(--desktop-font-size);
  }
}

/* Fluid Grid System */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.col {
  flex: 1;
  padding: 0 10px;
  min-width: 0;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
  .col {
    flex: 0 0 100%;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .col {
    flex: 0 0 50%;
  }
}

@media (min-width: 1024px) {
  .col {
    flex: 0 0 33.333%;
  }
}

<!-- Device-Specific Layouts -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 767px)">
<link rel="stylesheet" href="tablet.css" media="screen and (min-width: 768px) and (max-width: 1023px)">
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)">

/* Mobile-Specific Styles (mobile.css) */
.layout {
  display: block;
  width: 100%;
  max-width: 767px;
}

.navigation {
  display: none; /* Hidden on mobile */
}

.mobile-menu {
  display: block;
}

/* Tablet-Specific Styles (tablet.css) */
.layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  width: 100%;
  max-width: 1023px;
}

.navigation {
  display: block;
}

.mobile-menu {
  display: none;
}

/* Desktop-Specific Styles (desktop.css) */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  width: 100%;
  max-width: 1200px;
}

.navigation {
  display: block;
}

.mobile-menu {
  display: none;
}

Level 1: Primary Action/Information (Above fold mobile)
Level 2: Supporting Information (Scroll-triggered)
Level 3: Additional Resources (Hidden/collapsible)
Level 4: Legal/Compliance (Footer/modal)

<!-- Mobile-First Content Structure -->
<main class="content">
  <!-- Primary content - always visible -->
  <section class="hero">
    <h1>Essential Information</h1>
    <p>Key message and call-to-action</p>
    <button class="cta-primary">Primary Action</button>
  </section>

  <!-- Supporting content - progressively disclosed -->
  <section class="details" data-collapsible>
    <h2>Additional Details</h2>
    <p>Secondary information</p>
  </section>

  <!-- Secondary content - collapsed by default -->
  <details class="supplementary">
    <summary>More Information</summary>
    <div class="details-content">
      <p>Additional resources and information</p>
    </div>
  </details>
</main>

/* Mobile-First Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; /* Prevents iOS zoom on form inputs */
  line-height: 1.6;
  color: #333;
}

/* Responsive Typography Scale */
@media (min-width: 768px) {
  body {
    font-size: 18px;
    line-height: 1.7;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 20px;
    line-height: 1.8;
  }
}

/* Heading Scale */
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 500; }

@media (min-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}

/* Bottom Tab Navigation */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  min-width: 44px;
  min-height: 44px;
}

.nav-item.active {
  color: #007AFF;
}

.nav-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

<!-- Mobile Navigation -->
<nav class="mobile-navigation">
  <button class="menu-toggle" aria-expanded="false" aria-controls="nav-menu">
    <span class="hamburger"></span>
    <span class="hamburger"></span>
    <span class="hamburger"></span>
    <span class="sr-only">Toggle navigation</span>
  </button>

  <div class="nav-overlay" id="nav-menu">
    <div class="nav-content">
      <ul class="nav-list">
        <li><a href="#home">Home</a></li>
        <li><a href="#products">Products</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

/* Mobile Navigation Styles */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  padding: 12px;
  cursor: pointer;
  position: relative;
  z-index: 1001;
}

.hamburger {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  margin: 5px 0;
  transition: 0.3s;
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  z-index: 1000;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

.nav-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background: #fff;
  transform: translateX(100%);
  transition: transform 0.3s;
}

.nav-overlay.active .nav-content {
  transform: translateX(0);
}

.nav-list {
  list-style: none;
  padding: 60px 0;
  margin: 0;
}

.nav-list li {
  border-bottom: 1px solid #eee;
}

.nav-list a {
  display: block;
  padding: 16px 24px;
  text-decoration: none;
  color: #333;
  font-size: 16px;
  min-height: 44px;
  line-height: 44px;
}

<!-- Mobile-Optimized Form -->
<form class="mobile-form">
  <div class="form-group">
    <label for="email">Email Address</label>
    <input 
      type="email" 
      id="email" 
      name="email"
      inputmode="email"
      autocomplete="email"
      placeholder="your@email.com"
      required
    >
  </div>

  <div class="form-group">
    <label for="phone">Phone Number</label>
    <input 
      type="tel" 
      id="phone" 
      name="phone"
      inputmode="tel"
      autocomplete="tel"
      placeholder="(555) 123-4567"
      required
    >
  </div>

  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password" 
      name="password"
      autocomplete="new-password"
      required
    >
    <button type="button" class="password-toggle" aria-label="Show password">
      👁️
    </button>
  </div>

  <button type="submit" class="submit-button">
    Create Account
  </button>
</form>

/* Mobile Form Styles */
.mobile-form {
  padding: 20px;
}

.form-group {
  margin-bottom: 24px;
  position: relative;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 16px;
}

.form-group input {
  width: 100%;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px; /* Prevents iOS zoom */
  background: #fff;
  transition: border-color 0.3s;
}

.form-group input:focus {
  outline: none;
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.password-toggle {
  position: absolute;
  right: 16px;
  top: 44px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-button {
  width: 100%;
  padding: 16px;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background: #0056D2;
}

.submit-button:active {
  background: #003D82;
}

<!-- Responsive Images with srcset -->
<img 
  src="image-mobile.jpg"
  srcset="
    image-mobile.jpg 480w,
    image-tablet.jpg 768w,
    image-desktop.jpg 1024w,
    image-large.jpg 1440w
  "
  sizes="(max-width: 480px) 100vw,
         (max-width: 768px) 100vw,
         (max-width: 1024px) 100vw,
         1440px"
  alt="Description of image"
  loading="lazy"
>

<!-- Next-Generation Image Formats -->
<picture>
  <!-- AVIF format for modern browsers -->
  <source 
    srcset="image.avif" 
    type="image/avif"
  >
  <!-- WebP format as fallback -->
  <source 
    srcset="image.webp" 
    type="image/webp"
  >
  <!-- JPEG fallback -->
  <img 
    src="image.jpg" 
    alt="Description of image"
    loading="lazy"
  >
</picture>

/* Responsive Images with CSS */
.responsive-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Art Direction for Different Screen Sizes */
@media (max-width: 767px) {
  .hero-image {
    background-image: url('hero-mobile.jpg');
    background-size: cover;
    background-position: center;
    height: 200px;
  }
}

@media (min-width: 768px) {
  .hero-image {
    background-image: url('hero-desktop.jpg');
    height: 400px;
  }
}

/* Lazy Loading Implementation */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Critical CSS for above-the-fold content */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  text-align: center;
  max-width: 90%;
  margin: 0 auto;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  animation: fadeInUp 1s ease-out 0.2s both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Preload critical resources
const preloadCriticalResources = () => {
  // Preload hero image
  const heroImage = new Image();
  heroImage.src = 'hero-optimized.jpg';

  // Preload critical fonts
  const fontLink = document.createElement('link');
  fontLink.rel = 'preload';
  fontLink.href = 'critical-font.woff2';
  fontLink.as = 'font';
  fontLink.type = 'font/woff2';
  fontLink.crossOrigin = 'anonymous';
  document.head.appendChild(fontLink);
};

// Use requestIdleCallback for non-critical tasks
const optimizeImages = () => {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      lazyLoadImages();
    });
  } else {
    setTimeout(lazyLoadImages, 1);
  }
};

// Code splitting to reduce initial JavaScript bundle
const loadNonCriticalJavaScript = async () => {
  // Load analytics after user interaction
  if ('requestIdleCallback' in window) {
    requestIdleCallback(() => {
      import('./analytics.js');
    });
  } else {
    setTimeout(() => {
      import('./analytics.js');
    }, 3000);
  }
};

// Web Workers for heavy computations
const processData = (data) => {
  const worker = new Worker('data-processor.js');
  worker.postMessage(data);
  worker.onmessage = (result) => {
    updateUI(result.data);
  };
};

// Debounce user interactions
const debounce = (func, wait) => {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
};

// Apply debouncing to scroll events
window.addEventListener('scroll', debounce(handleScroll, 16));

/* Reserve space for images to prevent layout shift */
.image-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Font loading optimization */
@font-face {
  font-family: 'Custom Font';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Prevents invisible text during font load */
}

/* Avoid animating properties that trigger layout */
.smooth-animation {
  will-change: transform; /* Optimize for animations */
  transform: translateZ(0); /* Force hardware acceleration */
}

/* Loading skeleton to prevent layout shift */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

<!-- Critical Resource Preloading -->
<head>
  <!-- Preload critical CSS -->
  <link rel="preload" href="critical.css" as="style">

  <!-- Preload critical images -->
  <link rel="preload" href="hero-image.webp" as="image">

  <!-- Preload critical fonts -->
  <link rel="preload" href="main-font.woff2" as="font" type="font/woff2" crossorigin>

  <!-- DNS prefetch for external resources -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com">
  <link rel="dns-prefetch" href="//analytics.google.com">

  <!-- Preconnect to critical origins -->
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>

// Service Worker for Mobile Performance
const CACHE_NAME = 'mobile-first-v1';
const urlsToCache = [
  '/',
  '/styles/critical.css',
  '/scripts/main.js',
  '/images/hero.webp',
  '/fonts/main-font.woff2'
];

// Install event
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

// Fetch event
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => {
        // Return cached version or fetch from network
        return response || fetch(event.request);
      })
  );
});

// Network-first strategy for API calls
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      fetch(event.request)
        .then((response) => {
          // Cache successful responses
          const responseClone = response.clone();
          caches.open('api-cache').then((cache) => {
            cache.put(event.request, responseClone);
          });
          return response;
        })
        .catch(() => {
          // Fallback to cache
          return caches.match(event.request);
        })
    );
  }
});

// Performance Monitoring for Mobile
class MobilePerformanceMonitor {
  constructor() {
    this.metrics = {};
    this.initializeMonitoring();
  }

  initializeMonitoring() {
    // Monitor Core Web Vitals
    this.measureLCP();
    this.measureFID();
    this.measureCLS();

    // Monitor custom metrics
    this.measureTimeToInteractive();
    this.measureFirstContentfulPaint();
  }

  measureLCP() {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.lcp = lastEntry.startTime;

      // Log to analytics
      this.sendMetric('lcp', lastEntry.startTime);
    });

    observer.observe({ entryTypes: ['largest-contentful-paint'] });
  }

  measureFID() {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach((entry) => {
        this.metrics.fid = entry.processingStart - entry.startTime;
        this.sendMetric('fid', entry.processingStart - entry.startTime);
      });
    });

    observer.observe({ entryTypes: ['first-input'] });
  }

  measureCLS() {
    let clsValue = 0;
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      entries.forEach((entry) => {
        if (!entry.hadRecentInput) {
          clsValue += entry.value;
        }
      });
      this.metrics.cls = clsValue;
      this.sendMetric('cls', clsValue);
    });

    observer.observe({ entryTypes: ['layout-shift'] });
  }

  sendMetric(name, value) {
    // Send to analytics service
    if (typeof gtag !== 'undefined') {
      gtag('event', 'performance_metric', {
        metric_name: name,
        metric_value: value,
        custom_parameter: 'mobile_first'
      });
    }
  }
}

// Initialize monitoring
new MobilePerformanceMonitor();

// Advanced Service Worker with offline strategies
const CACHE_NAME = 'pwa-v2';
const OFFLINE_URL = '/offline.html';

// Cache strategies
const cacheFirstStrategy = async (request) => {
  const cache = await caches.open(CACHE_NAME);
  const cachedResponse = await cache.match(request);
  return cachedResponse || fetch(request);
};

const networkFirstStrategy = async (request) => {
  try {
    const response = await fetch(request);
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());
    return response;
  } catch (error) {
    const cache = await caches.open(CACHE_NAME);
    return cache.match(request);
  }
};

// Install event with offline page
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => {
        return cache.addAll([
          '/',
          '/offline.html',
          '/styles/main.css',
          '/scripts/app.js'
        ]);
      })
  );
});

// Fetch event with intelligent routing
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // API calls use network-first
  if (url.pathname.startsWith('/api/')) {
    event.respondWith(networkFirstStrategy(request));
    return;
  }

  // Static assets use cache-first
  if (request.destination === 'image' || 
      request.destination === 'script' || 
      request.destination === 'style') {
    event.respondWith(cacheFirstStrategy(request));
    return;
  }

  // Default strategy
  event.respondWith(networkFirstStrategy(request));
});

{
  "name": "Mobile-First PWA",
  "short_name": "MobileApp",
  "description": "A progressive web app demonstrating mobile-first design",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007AFF",
  "orientation": "portrait-primary",
  "categories": ["productivity", "utilities"],
  "icons": [
    {
      "src": "icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "shortcuts": [
    {
      "name": "Quick Action",
      "short_name": "Quick",
      "description": "Perform quick action",
      "url": "/quick",
      "icons": [
        {
          "src": "icons/quick-96x96.png",
          "sizes": "96x96"
        }
      ]
    }
  ]
}

// PWA Installation Prompt
let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;

  // Show custom install button
  showInstallButton();
});

const showInstallButton = () => {
  const installButton = document.getElementById('install-button');
  installButton.style.display = 'block';

  installButton.addEventListener('click', async () => {
    if (deferredPrompt) {
      deferredPrompt.prompt();
      const { outcome } = await deferredPrompt.userChoice;

      if (outcome === 'accepted') {
        console.log('PWA installed successfully');
      }

      deferredPrompt = null;
      installButton.style.display = 'none';
    }
  });
};

// Track installation
window.addEventListener('appinstalled', (evt) => {
  console.log('PWA was installed');

  // Send analytics event
  if (typeof gtag !== 'undefined') {
    gtag('event', 'pwa_installed', {
      event_category: 'PWA',
      event_label: 'Installation'
    });
  }
});

// Touch gesture implementation
class TouchGestureHandler {
  constructor(element) {
    this.element = element;
    this.startX = 0;
    this.startY = 0;
    this.currentX = 0;
    this.currentY = 0;
    this.threshold = 50;

    this.initializeGestures();
  }

  initializeGestures() {
    this.element.addEventListener('touchstart', this.handleTouchStart.bind(this), { passive: false });
    this.element.addEventListener('touchmove', this.handleTouchMove.bind(this), { passive: false });
    this.element.addEventListener('touchend', this.handleTouchEnd.bind(this), { passive: false });
  }

  handleTouchStart(event) {
    this.startX = event.touches[0].clientX;
    this.startY = event.touches[0].clientY;
  }

  handleTouchMove(event) {
    if (event.touches.length > 1) return; // Ignore multi-touch

    this.currentX = event.touches[0].clientX;
    this.currentY = event.touches[0].clientY;
  }

  handleTouchEnd(event) {
    const deltaX = this.currentX - this.startX;
    const deltaY = this.currentY - this.startY;

    // Determine gesture direction
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
      // Horizontal swipe
      if (Math.abs(deltaX) > this.threshold) {
        if (deltaX > 0) {
          this.handleSwipeRight();
        } else {
          this.handleSwipeLeft();
        }
      }
    } else {
      // Vertical swipe
      if (Math.abs(deltaY) > this.threshold) {
        if (deltaY > 0) {
          this.handleSwipeDown();
        } else {
          this.handleSwipeUp();
        }
      }
    }
  }

  handleSwipeLeft() {
    // Navigate to next page/section
    this.navigateToNext();
  }

  handleSwipeRight() {
    // Navigate to previous page/section
    this.navigateToPrevious();
  }

  handleSwipeUp() {
    // Pull to refresh or show content
    this.triggerPullToRefresh();
  }

  handleSwipeDown() {
    // Show menu or header
    this.toggleMenu();
  }
}

// Initialize gesture handling
const gestureArea = document.getElementById('gesture-area');
const gestureHandler = new TouchGestureHandler(gestureArea);

// Voice search implementation
class VoiceSearch {
  constructor(options = {}) {
    this.recognition = null;
    this.isListening = false;
    this.language = options.language || 'en-US';
    this.onResult = options.onResult || (() => {});
    this.onError = options.onError || (() => {});

    this.initializeVoiceSearch();
  }

  initializeVoiceSearch() {
    if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
      console.warn('Speech recognition not supported');
      return;
    }

    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    this.recognition = new SpeechRecognition();

    this.recognition.continuous = false;
    this.recognition.interimResults = false;
    this.recognition.lang = this.language;

    this.recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      this.onResult(transcript);
    };

    this.recognition.onerror = (event) => {
      this.onError(event.error);
      this.isListening = false;
      this.updateUI();
    };

    this.recognition.onend = () => {
      this.isListening = false;
      this.updateUI();
    };
  }

  startListening() {
    if (this.recognition && !this.isListening) {
      this.isListening = true;
      this.updateUI();
      this.recognition.start();
    }
  }

  stopListening() {
    if (this.recognition && this.isListening) {
      this.isListening = false;
      this.updateUI();
      this.recognition.stop();
    }
  }

  updateUI() {
    const button = document.getElementById('voice-search-button');
    const indicator = document.getElementById('voice-indicator');

    if (this.isListening) {
      button.classList.add('listening');
      indicator.style.display = 'block';
      button.setAttribute('aria-label', 'Stop listening');
    } else {
      button.classList.remove('listening');
      indicator.style.display = 'none';
      button.setAttribute('aria-label', 'Start voice search');
    }
  }
}

// Initialize voice search
const voiceSearch = new VoiceSearch({
  onResult: (transcript) => {
    // Process voice input
    console.log('Voice input:', transcript);

    // Perform search
    performSearch(transcript);

    // Update input field
    document.getElementById('search-input').value = transcript;
  },
  onError: (error) => {
    console.error('Voice search error:', error);
    showErrorMessage('Voice search failed. Please try again.');
  }
});

// AI-powered predictive loading
class PredictiveLoader {
  constructor() {
    this.userBehavior = new UserBehaviorTracker();
    this.predictions = new Map();
    this.initializePredictions();
  }

  initializePredictions() {
    // Track user behavior patterns
    this.userBehavior.onPatternDetected((pattern) => {
      this.generatePredictions(pattern);
    });

    // Load predictions during idle time
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        this.loadPredictedResources();
      });
    }
  }

  generatePredictions(pattern) {
    const predictions = [];

    // Predict next likely pages
    if (pattern.type === 'navigation') {
      predictions.push({
        type: 'page',
        url: this.predictNextPage(pattern.history),
        priority: 'high'
      });
    }

    // Predict likely user actions
    if (pattern.type === 'action') {
      predictions.push({
        type: 'api',
        endpoint: this.predictNextAction(pattern.history),
        priority: 'medium'
      });
    }

    this.predictions.set(pattern.timestamp, predictions);
  }

  loadPredictedResources() {
    this.predictions.forEach((predictions, timestamp) => {
      predictions.forEach((prediction) => {
        if (prediction.priority === 'high') {
          this.preloadResource(prediction);
        }
      });
    });
  }

  preloadResource(prediction) {
    if (prediction.type === 'page') {
      // Preload page resources
      const link = document.createElement('link');
      link.rel = 'prefetch';
      link.href = prediction.url;
      document.head.appendChild(link);
    } else if (prediction.type === 'api') {
      // Preload API data
      fetch(prediction.endpoint)
        .then(response => response.json())
        .then(data => {
          this.cachePredictionData(prediction, data);
        });
    }
  }
}

// User behavior tracking
class UserBehaviorTracker {
  constructor() {
    this.history = [];
    this.patterns = [];
    this.initializeTracking();
  }

  initializeTracking() {
    // Track page views
    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'hidden') {
        this.trackPageLeave();
      }
    });

    // Track scroll behavior
    let scrollTimeout;
    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimeout);
      scrollTimeout = setTimeout(() => {
        this.trackScrollBehavior();
      }, 250);
    });

    // Track interaction patterns
    document.addEventListener('click', (event) => {
      this.trackInteraction(event);
    });
  }

  trackInteraction(event) {
    const interaction = {
      type: 'click',
      element: event.target.tagName.toLowerCase(),
      timestamp: Date.now(),
      position: {
        x: event.clientX,
        y: event.clientY
      }
    };

    this.history.push(interaction);

    // Analyze patterns periodically
    if (this.history.length % 10 === 0) {
      this.analyzePatterns();
    }
  }

  analyzePatterns() {
    // Simple pattern detection (can be enhanced with ML)
    const recentInteractions = this.history.slice(-20);

    // Detect navigation patterns
    const navigationPattern = this.detectNavigationPattern(recentInteractions);
    if (navigationPattern) {
      this.patterns.push({
        type: 'navigation',
        history: navigationPattern,
        timestamp: Date.now()
      });
    }

    // Detect action patterns
    const actionPattern = this.detectActionPattern(recentInteractions);
    if (actionPattern) {
      this.patterns.push({
        type: 'action',
        history: actionPattern,
        timestamp: Date.now()
      });
    }
  }
}

// WebXR implementation for mobile AR experiences
class MobileAR {
  constructor() {
    this.session = null;
    this.referenceSpace = null;
    this.reticle = null;
    this.initializeAR();
  }

  async initializeAR() {
    if (!navigator.xr) {
      console.warn('WebXR not supported');
      return;
    }

    try {
      // Check AR support
      const isARSupported = await navigator.xr.isSessionSupported('immersive-ar');
      if (!isARSupported) {
        console.warn('AR not supported on this device');
        return;
      }

      // Create AR session
      this.session = await navigator.xr.requestSession('immersive-ar', {
        requiredFeatures: ['local'],
        optionalFeatures: ['dom-overlay'],
        domOverlay: { root: document.body }
      });

      // Set up XR reference space
      this.referenceSpace = await this.session.requestReferenceSpace('local');

      // Initialize AR scene
      this.initializeARScene();

    } catch (error) {
      console.error('Failed to initialize AR:', error);
    }
  }

  initializeARScene() {
    // Create WebGL context
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl', { xrCompatible: true });

    // Set up renderer
    const renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      context: gl,
      antialias: true,
      alpha: true
    });

    renderer.xr.setSession(this.session);
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Create AR camera
    const camera = new THREE.PerspectiveCamera();

    // Add to DOM
    document.body.appendChild(canvas);

    // Start render loop
    renderer.setAnimationLoop(this.renderAR.bind(this));
  }

  renderAR(timestamp, frame) {
    // Update AR scene
    this.updateARScene(timestamp, frame);

    // Render scene
    // renderer.render(scene, camera);
  }

  updateARScene(timestamp, frame) {
    // Update AR content based on frame data
    if (frame) {
      const pose = frame.getViewerPose(this.referenceSpace);
      if (pose) {
        // Update AR objects based on pose
        this.updateARObjects(pose);
      }
    }
  }

  addARObject(object3D, position) {
    // Add 3D object to AR scene
    const arObject = new THREE.Group();
    arObject.add(object3D);
    arObject.position.set(position.x, position.y, position.z);

    // Store AR objects
    if (!this.arObjects) {
      this.arObjects = [];
    }
    this.arObjects.push(arObject);
  }
}

// Initialize AR when user requests it
document.getElementById('start-ar').addEventListener('click', () => {
  const ar = new MobileAR();
});

// 5G-aware performance optimization
class FiveGOptimizer {
  constructor() {
    this.connectionSpeed = this.getConnectionSpeed();
    this.adaptiveQuality = this.initializeAdaptiveQuality();
  }

  getConnectionSpeed() {
    if ('connection' in navigator) {
      const connection = navigator.connection;
      return {
        effectiveType: connection.effectiveType, // 'slow-2g', '2g', '3g', '4g'
        downlink: connection.downlink, // Mbps
        rtt: connection.rtt // milliseconds
      };
    }
    return null;
  }

  initializeAdaptiveQuality() {
    const qualitySettings = {
      'slow-2g': { imageQuality: 0.5, videoQuality: 'low', preload: false },
      '2g': { imageQuality: 0.6, videoQuality: 'low', preload: false },
      '3g': { imageQuality: 0.8, videoQuality: 'medium', preload: true },
      '4g': { imageQuality: 0.9, videoQuality: 'high', preload: true }
    };

    const effectiveType = this.connectionSpeed?.effectiveType || '3g';
    return qualitySettings[effectiveType] || qualitySettings['3g'];
  }

  adaptImageLoading(imageElement, src) {
    if (!this.connectionSpeed) return;

    const { imageQuality } = this.adaptiveQuality;

    // Use WebP with quality adjustment for supported browsers
    if (this.supportsWebP()) {
      const webpSrc = this.convertToWebP(src, imageQuality);
      imageElement.src = webpSrc;
    } else {
      // Use JPEG with quality adjustment
      const jpegSrc = this.compressJPEG(src, imageQuality);
      imageElement.src = jpegSrc;
    }
  }

  supportsWebP() {
    const canvas = document.createElement('canvas');
    return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
  }

  compressJPEG(src, quality) {
    return `${src}?quality=${Math.round(quality * 100)}&format=progressive`;
  }

  convertToWebP(src, quality) {
    return `${src}?quality=${Math.round(quality * 100)}&format=webp`;
  }

  // Edge computing integration
  async fetchFromEdge(endpoint) {
    // Use edge computing endpoint if available
    const edgeEndpoint = this.getEdgeEndpoint(endpoint);

    try {
      const response = await fetch(edgeEndpoint, {
        headers: {
          'X-5G-Optimized': 'true',
          'X-Quality-Level': this.adaptiveQuality.videoQuality
        }
      });

      return await response.json();
    } catch (error) {
      // Fallback to regular endpoint
      const response = await fetch(endpoint);
      return await response.json();
    }
  }

  getEdgeEndpoint(originalEndpoint) {
    // Map to nearest edge endpoint
    const edgeMap = {
      '/api/data': '/edge/data',
      '/api/media': '/edge/media',
      '/api/content': '/edge/content'
    };

    return edgeMap[originalEndpoint] || originalEndpoint;
  }
}

// Initialize 5G optimization
const fiveGOptimizer = new FiveGOptimizer();