'use client'

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

const frameworks = [
  {
    name: 'React',
    href: '/sdk/consent/frameworks/react',
    logo: '/logos/react.svg',
    description: 'Hooks und Provider fuer React 17+ und Next.js',
    features: ['ConsentProvider', 'useConsent Hook', 'ConsentGate Component'],
    color: 'bg-cyan-500',
  },
  {
    name: 'Vue 3',
    href: '/sdk/consent/frameworks/vue',
    logo: '/logos/vue.svg',
    description: 'Composables und Plugin fuer Vue 3 und Nuxt',
    features: ['Vue Plugin', 'useConsent Composable', 'ConsentGate Component'],
    color: 'bg-emerald-500',
  },
  {
    name: 'Angular',
    href: '/sdk/consent/frameworks/angular',
    logo: '/logos/angular.svg',
    description: 'Service und Module fuer Angular 14+',
    features: ['ConsentService', 'ConsentModule', 'Dependency Injection'],
    color: 'bg-red-500',
  },
]

export default function FrameworksPage() {
  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">Framework Integration</h1>
          <p className="text-lg text-gray-600 mb-8">
            Das Consent SDK bietet native Integrationen fuer alle gaengigen Frontend-Frameworks.
          </p>

          <div className="space-y-4">
            {frameworks.map((framework) => (
              <Link
                key={framework.name}
                href={framework.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 ${framework.color} flex items-center justify-center shrink-0`}>
                    <span className="text-white font-bold text-lg">{framework.name[0]}</span>
                  </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">
                        {framework.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">{framework.description}</p>
                    <div className="flex flex-wrap gap-2 mt-3">
                      {framework.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>

          {/* Vanilla JS Note */}
          <div className="mt-8 p-4 bg-blue-50 border border-blue-200 rounded-xl">
            <h3 className="font-medium text-blue-900">Vanilla JavaScript</h3>
            <p className="text-sm text-blue-700 mt-1">
              Sie koennen das SDK auch ohne Framework verwenden. Importieren Sie einfach den ConsentManager direkt
              aus dem Hauptpaket. Siehe{' '}
              <Link href="/sdk/consent/installation" className="underline">
                Installation
              </Link>{' '}
              fuer Details.
            </p>
          </div>
        </div>
      </main>
    </div>
  )
}