export default function SimPlatformMockup() {
  return (
    <div className="relative w-full max-w-3xl mx-auto">
      <div className="bg-iron-gray border border-charcoal-outline rounded-lg p-6 shadow-2xl">
        <div className="space-y-4">
          <div className="flex items-center justify-between pb-4 border-b border-charcoal-outline">
            <div className="text-sm font-semibold text-slate-300">Platform Support</div>
            <div className="text-xs text-slate-500">Active: 1 | Planned: 3</div>
          </div>
          
          <div className="grid grid-cols-2 gap-3">
            {/* iRacing - Active */}
            <div className="bg-deep-graphite border-2 border-primary-blue rounded-lg p-4 relative overflow-hidden">
              <div className="absolute top-2 right-2">
                <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 bg-primary-blue/10 flex items-center justify-center">
                  <span className="text-2xl font-bold text-primary-blue">iR</span>
                </div>
                <div>
                  <div className="font-semibold text-white">iRacing</div>
                  <div className="text-xs text-performance-green">Active</div>
                </div>
              </div>
              <div className="mt-3 text-xs text-slate-400">
                Full integration
              </div>
            </div>

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

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

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

          <div className="pt-4 border-t border-charcoal-outline">
            <div className="text-xs text-slate-500 text-center">
              Your identity stays with you across platforms
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}