'use client';

import { MobileAppDemo } from '@/features/shared/components/layout/mobile-layout';

/**
 * EN: Mobile App Demo Page
 * VI: Trang Demo Mobile App
 *
 * Showcases the native app-style mobile layout components.
 * Trình diễn các component mobile layout theo phong cách native app.
 */
export default function MobileDemoPage() {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="max-w-4xl mx-auto">
        <div className="text-center mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-4">
            Mobile App Layout Demo
          </h1>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Experience native app-style mobile layouts with pull-to-refresh,
            bottom navigation, and touch-optimized interactions.
          </p>
        </div>

        <div className="flex justify-center">
          <div className="bg-white rounded-2xl shadow-2xl overflow-hidden">
            <MobileAppDemo />
          </div>
        </div>

        <div className="mt-8 text-center text-sm text-gray-500">
          <p>Resize your browser window to mobile size to see the full experience!</p>
          <p className="mt-2">Try pulling down on the Home screen to test pull-to-refresh.</p>
        </div>
      </div>
    </div>
  );
}