function ResponsiveNavigation() {
  const { isMobile, isTablet, screenSize, orientation } = useMobile();

  const getLayoutConfig = () => {
    switch (screenSize) {
      case "mobile":
        return {
          showSidebar: false,
          itemsPerRow: 1,
          showSearch: false,
          navigationStyle: "bottom-tabs",
        };
      case "tablet":
        return {
          showSidebar: orientation === "landscape",
          itemsPerRow: orientation === "portrait" ? 2 : 3,
          showSearch: true,
          navigationStyle: "top-bar",
        };
      case "desktop":
      case "large":
        return {
          showSidebar: true,
          itemsPerRow: 4,
          showSearch: true,
          navigationStyle: "sidebar",
        };
    }
  };

  const layout = getLayoutConfig();

  return (
    <div className={`app-layout ${screenSize}`}>
      {layout.showSidebar && (
        <aside className="sidebar">
          <NavigationSidebar />
        </aside>
      )}

      <main className="main-content">
        {layout.showSearch && (
          <header className="search-header">
            <SearchBar expanded={!isMobile} />
          </header>
        )}

        <div
          className="content-grid"
          style={{
            gridTemplateColumns: `repeat(${layout.itemsPerRow}, 1fr)`,
          }}
        >
          <ContentItems />
        </div>
      </main>

      {layout.navigationStyle === "bottom-tabs" && (
        <nav className="bottom-navigation">
          <BottomTabs />
        </nav>
      )}
    </div>
  );
}

function InteractiveComponent() {
  const { touchScreen, isMobile, userAgent } = useMobile();
  const [interactionMode, setInteractionMode] = useState("auto");

  // Adapt interaction patterns based on device
  const getInteractionProps = () => {
    if (touchScreen) {
      return {
        // Touch-friendly props
        onTouchStart: handleTouchStart,
        onTouchMove: handleTouchMove,
        onTouchEnd: handleTouchEnd,
        // Larger touch targets
        className: "touch-target-large",
        // Prevent hover states on touch devices
        style: { "--hover-enabled": "none" },
      };
    } else {
      return {
        // Mouse interaction props
        onMouseEnter: handleMouseEnter,
        onMouseLeave: handleMouseLeave,
        onClick: handleClick,
        onDoubleClick: handleDoubleClick,
        className: "hover-enabled",
      };
    }
  };

  const handleGesture = (gesture: string) => {
    if (touchScreen && isMobile) {
      switch (gesture) {
        case "swipe-left":
          navigateNext();
          break;
        case "swipe-right":
          navigatePrevious();
          break;
        case "pinch-zoom":
          toggleZoom();
          break;
        case "long-press":
          showContextMenu();
          break;
      }
    }
  };

  return (
    <div className="interactive-component">
      <div {...getInteractionProps()}>
        <h3>Interactive Content</h3>

        {touchScreen ? (
          <div className="touch-instructions">
            <p>👆 Touch interactions available:</p>
            <ul>
              <li>Swipe left/right to navigate</li>
              <li>Pinch to zoom</li>
              <li>Long press for context menu</li>
            </ul>
          </div>
        ) : (
          <div className="mouse-instructions">
            <p>🖱️ Mouse interactions available:</p>
            <ul>
              <li>Hover for preview</li>
              <li>Click to select</li>
              <li>Double-click to open</li>
            </ul>
          </div>
        )}

        {/* iOS-specific features */}
        {userAgent.isIOS && (
          <div className="ios-features">
            <button onClick={() => addToHomeScreen()}>
              📱 Add to Home Screen
            </button>
          </div>
        )}

        {/* Android-specific features */}
        {userAgent.isAndroid && (
          <div className="android-features">
            <button onClick={() => requestInstallPrompt()}>
              📲 Install App
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

function PlatformOptimizedApp() {
  const { userAgent, isMobile, touchScreen, viewport } = useMobile();

  const getPlatformFeatures = () => {
    const features = {
      notifications: "Notification" in window,
      geolocation: "geolocation" in navigator,
      camera: "mediaDevices" in navigator,
      fullscreen: "requestFullscreen" in document.documentElement,
      sharing: "share" in navigator,
      orientation: "orientation" in screen,
      vibration: "vibrate" in navigator,
    };

    return features;
  };

  const features = getPlatformFeatures();

  const optimizeForPlatform = () => {
    // iOS-specific optimizations
    if (userAgent.isIOS) {
      // Handle iOS viewport quirks
      if (viewport.height < 500) {
        document.documentElement.style.setProperty(
          "--vh",
          `${viewport.height * 0.01}px`
        );
      }

      // iOS Safari bounce prevention
      document.body.style.overscrollBehavior = "none";
    }

    // Android-specific optimizations
    if (userAgent.isAndroid) {
      // Android keyboard handling
      if (isMobile) {
        const originalHeight = viewport.height;
        const onResize = () => {
          const currentHeight = window.innerHeight;
          const keyboardHeight = originalHeight - currentHeight;
          if (keyboardHeight > 150) {
            document.body.classList.add("keyboard-open");
          } else {
            document.body.classList.remove("keyboard-open");
          }
        };
        window.addEventListener("resize", onResize);
        return () => window.removeEventListener("resize", onResize);
      }
    }

    // Safari-specific optimizations
    if (userAgent.isSafari) {
      // Handle Safari's aggressive memory management
      const images = document.querySelectorAll("img");
      images.forEach((img) => {
        img.loading = "lazy";
      });
    }
  };

  useEffect(() => {
    const cleanup = optimizeForPlatform();
    return cleanup;
  }, [userAgent, viewport]);

  return (
    <div className="platform-optimized-app">
      <header>
        <h1>Platform Features</h1>
        <div className="platform-info">
          <span className="platform-badge">
            {userAgent.isIOS && "🍎 iOS"}
            {userAgent.isAndroid && "🤖 Android"}
            {!userAgent.isIOS && !userAgent.isAndroid && "💻 Desktop"}
          </span>
        </div>
      </header>

      <main>
        <section className="feature-grid">
          {features.notifications && (
            <FeatureCard
              icon="🔔"
              title="Push Notifications"
              available={features.notifications}
              onEnable={() => requestNotificationPermission()}
            />
          )}

          {features.geolocation && (
            <FeatureCard
              icon="📍"
              title="Location Services"
              available={features.geolocation}
              onEnable={() => getCurrentLocation()}
            />
          )}

          {features.camera && isMobile && (
            <FeatureCard
              icon="📷"
              title="Camera Access"
              available={features.camera}
              onEnable={() => accessCamera()}
            />
          )}

          {features.sharing && (
            <FeatureCard
              icon="📤"
              title="Native Sharing"
              available={features.sharing}
              onEnable={() => shareContent()}
            />
          )}

          {features.vibration && touchScreen && (
            <FeatureCard
              icon="📳"
              title="Haptic Feedback"
              available={features.vibration}
              onEnable={() => navigator.vibrate(200)}
            />
          )}
        </section>

        {/* Platform-specific UI elements */}
        {userAgent.isIOS && (
          <div className="ios-ui">
            <button className="ios-button">iOS Style Button</button>
          </div>
        )}

        {userAgent.isAndroid && (
          <div className="material-ui">
            <button className="material-button">Material Button</button>
          </div>
        )}
      </main>
    </div>
  );
}

function PerformanceOptimizedComponent() {
  const { isMobile, isTablet, viewport, screenSize } = useMobile();

  // Adjust performance based on device capabilities
  const getPerformanceConfig = () => {
    const baseConfig = {
      imageQuality: 90,
      animationDuration: 300,
      maxConcurrentRequests: 6,
      lazyLoadThreshold: 100,
      prefetchCount: 3,
    };

    if (isMobile) {
      return {
        ...baseConfig,
        imageQuality: 70, // Lower quality for mobile
        animationDuration: 200, // Faster animations
        maxConcurrentRequests: 3, // Fewer concurrent requests
        lazyLoadThreshold: 50, // More aggressive lazy loading
        prefetchCount: 1, // Less prefetching
      };
    }

    if (isTablet) {
      return {
        ...baseConfig,
        imageQuality: 80,
        maxConcurrentRequests: 4,
        prefetchCount: 2,
      };
    }

    return baseConfig;
  };

  const config = getPerformanceConfig();

  // Responsive image loading
  const getImageSrc = (baseUrl: string, size: string) => {
    const sizeMap = {
      mobile: "small",
      tablet: "medium",
      desktop: "large",
      large: "xlarge",
    };

    const targetSize = sizeMap[screenSize];
    return `${baseUrl}?size=${targetSize}&quality=${config.imageQuality}`;
  };

  // Conditional feature loading
  const shouldLoadFeature = (feature: string) => {
    const heavyFeatures = ["3d-animations", "video-background", "particles"];

    if (isMobile && heavyFeatures.includes(feature)) {
      return false; // Skip heavy features on mobile
    }

    return true;
  };

  // Memory-aware component rendering
  const getComponentLimit = () => {
    if (isMobile) return 10;
    if (isTablet) return 20;
    return 50;
  };

  return (
    <div className="performance-optimized">
      <div className="content-grid">
        {/* Responsive images */}
        <img
          src={getImageSrc("/api/image/hero", "large")}
          alt="Hero image"
          loading="lazy"
          style={{
            maxWidth: "100%",
            height: "auto",
          }}
        />

        {/* Conditional heavy components */}
        {shouldLoadFeature("3d-animations") && (
          <Suspense fallback={<div>Loading 3D content...</div>}>
            <Heavy3DComponent />
          </Suspense>
        )}

        {shouldLoadFeature("video-background") ? (
          <VideoBackground quality={isMobile ? "low" : "high"} />
        ) : (
          <StaticBackground />
        )}

        {/* Performance metrics display */}
        <div className="performance-info">
          <h3>Performance Configuration</h3>
          <ul>
            <li>Device: {screenSize}</li>
            <li>Image Quality: {config.imageQuality}%</li>
            <li>Animation Duration: {config.animationDuration}ms</li>
            <li>Max Requests: {config.maxConcurrentRequests}</li>
            <li>Component Limit: {getComponentLimit()}</li>
          </ul>
        </div>
      </div>
    </div>
  );
}

// Example of memory-efficient list rendering
function OptimizedList({ items }: { items: any[] }) {
  const { isMobile } = useMobile();
  const [visibleItems, setVisibleItems] = useState(isMobile ? 10 : 50);

  const loadMore = () => {
    setVisibleItems((prev) => prev + (isMobile ? 10 : 20));
  };

  return (
    <div className="optimized-list">
      {items.slice(0, visibleItems).map((item, index) => (
        <ListItem key={item.id} item={item} />
      ))}

      {visibleItems < items.length && (
        <button onClick={loadMore} className="load-more">
          Load More ({items.length - visibleItems} remaining)
        </button>
      )}
    </div>
  );
}