'use client';

import { useState, useEffect } from 'react';

export default function SimPlatformMockup() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  // Simple mobile version - just the essence of cross-platform
  if (isMobile) {
    return (
      <div className="relative w-full h-full bg-gradient-to-br from-deep-graphite to-iron-gray rounded-lg p-4 overflow-hidden flex items-center justify-center">
        <div className="space-y-3 w-full">
          {/* Active Platform - Clean */}
          <div className="bg-iron-gray/60 border-2 border-primary-blue rounded-xl p-4 relative">
            <div className="absolute top-3 right-3">
              <div className="w-2 h-2 rounded-full bg-performance-green animate-pulse" />
            </div>
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-lg bg-primary-blue/20 flex items-center justify-center flex-shrink-0">
                <span className="text-2xl font-bold text-primary-blue">iR</span>
              </div>
              <div>
                <div className="text-base font-semibold text-white">iRacing</div>
                <div className="text-xs text-performance-green">Active</div>
              </div>
            </div>
          </div>
          
          {/* Simple "more coming" indicator */}
          <div className="bg-iron-gray/30 rounded-xl p-3 border border-charcoal-outline/50">
            <div className="text-xs text-center text-slate-500">More platforms coming</div>
          </div>
        </div>
      </div>
    );
  }

  // Desktop version
  return (
    <div className="relative w-full max-w-3xl mx-auto">
      <div className="bg-iron-gray border border-charcoal-outline rounded-lg p-1.5 sm:p-3 md:p-4 lg:p-6 shadow-2xl">
        <div className="space-y-1.5 sm:space-y-2 md:space-y-3 lg:space-y-4">
          <div className="flex items-center justify-between pb-1.5 sm:pb-2 md:pb-3 lg:pb-4 border-b border-charcoal-outline">
            <div className="text-[9px] sm:text-xs md:text-sm font-semibold text-slate-300">Platform Support</div>
            <div className="text-[8px] sm:text-[10px] md:text-xs text-slate-500">Active: 1 | Planned: 3</div>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-1.5 sm:gap-2 md:gap-3">
            {/* iRacing - Active */}
            <div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 relative overflow-hidden">
              <div className="absolute top-1 sm:top-1.5 md:top-2 right-1 sm:right-1.5 md:right-2">
                <div className="w-1 sm:w-1.5 md:w-2 h-1 sm:h-1.5 md:h-2 rounded-full bg-performance-green animate-pulse" />
              </div>
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
                <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-primary-blue/10 flex items-center justify-center">
                  <span className="text-base sm:text-xl md:text-2xl font-bold text-primary-blue">iR</span>
                </div>
                <div>
                  <div className="text-xs sm:text-sm md:text-base font-semibold text-white">iRacing</div>
                  <div className="text-[8px] sm:text-[10px] md:text-xs text-performance-green">Active</div>
                </div>
              </div>
              <div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-400">
                Full integration
              </div>
            </div>

            {/* ACC - Future */}
            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
                <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
                  <span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">AC</span>
                </div>
                <div>
                  <div className="text-xs sm:text-sm font-semibold text-slate-500">ACC</div>
                  <div className="text-[9px] sm:text-xs text-slate-600">Planned</div>
                </div>
              </div>
              <div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
                Coming later
              </div>
            </div>

            {/* rFactor 2 - Future */}
            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
                <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
                  <span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">rF</span>
                </div>
                <div>
                  <div className="text-xs sm:text-sm md:text-base font-semibold text-slate-500">rFactor 2</div>
                  <div className="text-[8px] sm:text-[10px] md:text-xs text-slate-600">Planned</div>
                </div>
              </div>
              <div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
                Coming later
              </div>
            </div>

            {/* LMU - Future */}
            <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-1.5 sm:p-2 md:p-3 lg:p-4 opacity-40">
              <div className="flex items-center gap-1.5 sm:gap-2 md:gap-3">
                <div className="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded bg-slate-700/20 flex items-center justify-center">
                  <span className="text-base sm:text-xl md:text-2xl font-bold text-slate-600">LM</span>
                </div>
                <div>
                  <div className="text-xs sm:text-sm md:text-base font-semibold text-slate-500">Le Mans Ult.</div>
                  <div className="text-[8px] sm:text-[10px] md:text-xs text-slate-600">Planned</div>
                </div>
              </div>
              <div className="mt-1.5 sm:mt-2 md:mt-3 text-[8px] sm:text-[10px] md:text-xs text-slate-600">
                Coming later
              </div>
            </div>
          </div>

          <div className="pt-1.5 sm:pt-2 md:pt-3 lg:pt-4 border-t border-charcoal-outline">
            <div className="text-[8px] sm:text-[10px] md:text-xs text-slate-500 text-center">
              Your identity stays with you across platforms
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}