'use client'

import React from 'react'
import Link from 'next/link'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'
import { ChevronRight, Apple, Smartphone } from 'lucide-react'

const platforms = [
  {
    name: 'iOS (Swift)',
    href: '/sdk/consent/mobile/ios',
    description: 'Native Swift SDK fuer iOS 15+ und iPadOS',
    features: ['Swift 5.9+', 'iOS 15.0+', 'SwiftUI Support', 'Combine Integration'],
    color: 'bg-gray-900',
    icon: Apple,
  },
  {
    name: 'Android (Kotlin)',
    href: '/sdk/consent/mobile/android',
    description: 'Native Kotlin SDK fuer Android API 26+',
    features: ['Kotlin 1.9+', 'API 26+', 'Jetpack Compose', 'Coroutines'],
    color: 'bg-green-600',
    icon: Smartphone,
  },
  {
    name: 'Flutter',
    href: '/sdk/consent/mobile/flutter',
    description: 'Cross-Platform SDK fuer Flutter 3.16+',
    features: ['Dart 3.0+', 'Flutter 3.16+', 'iOS & Android', 'Web Support'],
    color: 'bg-blue-500',
    icon: Smartphone,
  },
]

export default function MobileSDKsPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex">
      <SDKDocsSidebar />

      <main className="flex-1 ml-64">
        <div className="max-w-4xl mx-auto px-8 py-12">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Mobile SDKs</h1>
          <p className="text-lg text-gray-600 mb-8">
            Native SDKs fuer iOS, Android und Flutter mit vollstaendiger DSGVO-Konformitaet.
          </p>

          <div className="space-y-4">
            {platforms.map((platform) => (
              <Link
                key={platform.name}
                href={platform.href}
                className="block bg-white rounded-xl border border-gray-200 p-6 hover:border-violet-300 hover:shadow-md transition-all group"
              >
                <div className="flex items-start gap-4">
                  <div className={`w-12 h-12 rounded-xl ${platform.color} flex items-center justify-center shrink-0`}>
                    <platform.icon className="w-6 h-6 text-white" />
                  </div>
                  <div className="flex-1">
                    <div className="flex items-center gap-2">
                      <h2 className="text-xl font-semibold text-gray-900 group-hover:text-violet-600 transition-colors">
                        {platform.name}
                      </h2>
                      <ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-violet-600 transition-colors" />
                    </div>
                    <p className="text-gray-600 mt-1">{platform.description}</p>
                    <div className="flex flex-wrap gap-2 mt-3">
                      {platform.features.map((feature) => (
                        <span
                          key={feature}
                          className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-md"
                        >
                          {feature}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>

          {/* Cross-Platform Note */}
          <div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-xl">
            <h3 className="font-medium text-blue-900">Cross-Platform Konsistenz</h3>
            <p className="text-sm text-blue-700 mt-1">
              Alle Mobile SDKs bieten dieselbe API-Oberflaeche wie das Web SDK.
              Consent-Daten werden ueber die API synchronisiert, sodass Benutzer auf allen Geraeten
              denselben Consent-Status haben.
            </p>
          </div>
        </div>
      </main>
    </div>
  )
}