'use client'

import { TYPOGRAPHY, SPACING } from '../constants'

export function TypographyTab() {
  return (
    <div className="space-y-6">
      {/* Font Family */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftart: Inter</h3>
        <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm text-slate-600 mb-4">
          font-family: {TYPOGRAPHY.fontFamily};
        </div>
        <p className="text-sm text-slate-600">
          Inter ist eine moderne, variable Sans-Serif Schrift, optimiert fuer Bildschirme.
          Sie ist unter der SIL Open Font License verfuegbar und frei fuer kommerzielle Nutzung.
        </p>
      </div>

      {/* Font Licenses */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Lizenzen</h3>
        <div className="space-y-4">
          {/* Inter License */}
          <div className="border border-slate-200 rounded-xl p-4">
            <div className="flex items-start justify-between mb-2">
              <div>
                <h4 className="font-semibold text-slate-900">Inter Font</h4>
                <p className="text-sm text-slate-500">Designer: Rasmus Andersson</p>
              </div>
              <span className="px-2.5 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">
                OFL-1.1
              </span>
            </div>
            <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
              <div>
                <span className="text-slate-500">Lizenz:</span>
                <span className="ml-2 text-slate-700">SIL Open Font License 1.1</span>
              </div>
              <div>
                <span className="text-slate-500">Kommerzielle Nutzung:</span>
                <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
              </div>
              <div>
                <span className="text-slate-500">Attribution erforderlich:</span>
                <span className="ml-2 text-slate-700">Nein</span>
              </div>
              <div>
                <span className="text-slate-500">Repository:</span>
                <a href="https://github.com/rsms/inter" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
                  github.com/rsms/inter
                </a>
              </div>
            </div>
          </div>

          {/* Heroicons License */}
          <div className="border border-slate-200 rounded-xl p-4">
            <div className="flex items-start justify-between mb-2">
              <div>
                <h4 className="font-semibold text-slate-900">Heroicons</h4>
                <p className="text-sm text-slate-500">Designer: Tailwind Labs</p>
              </div>
              <span className="px-2.5 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
                MIT
              </span>
            </div>
            <div className="grid grid-cols-2 gap-4 mt-3 text-sm">
              <div>
                <span className="text-slate-500">Lizenz:</span>
                <span className="ml-2 text-slate-700">MIT License</span>
              </div>
              <div>
                <span className="text-slate-500">Kommerzielle Nutzung:</span>
                <span className="ml-2 text-green-600 font-medium">Ja, uneingeschraenkt</span>
              </div>
              <div>
                <span className="text-slate-500">Attribution erforderlich:</span>
                <span className="ml-2 text-slate-700">Nein (empfohlen)</span>
              </div>
              <div>
                <span className="text-slate-500">Repository:</span>
                <a href="https://github.com/tailwindlabs/heroicons" target="_blank" rel="noopener noreferrer" className="ml-2 text-primary-600 hover:underline">
                  github.com/tailwindlabs/heroicons
                </a>
              </div>
            </div>
          </div>

          {/* License Summary */}
          <div className="bg-green-50 border border-green-200 rounded-xl p-4">
            <div className="flex items-center gap-2 mb-2">
              <svg className="w-5 h-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
              <h4 className="font-semibold text-green-800">Lizenz-Compliance</h4>
            </div>
            <p className="text-sm text-green-700">
              Alle verwendeten Schriftarten und Icons sind Open Source und fuer kommerzielle Nutzung freigegeben.
              Keine Attribution erforderlich. Vollstaendige Dokumentation in der SBOM.
            </p>
          </div>
        </div>
      </div>

      {/* Font Weights */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftschnitte</h3>
        <div className="space-y-4">
          {TYPOGRAPHY.weights.map((w) => (
            <div key={w.weight} className="flex items-center gap-6 pb-4 border-b border-slate-100 last:border-0 last:pb-0">
              <span
                className="text-2xl w-64"
                style={{ fontWeight: w.weight }}
              >
                The quick brown fox
              </span>
              <div className="flex-1">
                <span className="font-medium text-slate-900">{w.name} ({w.weight})</span>
                <span className="text-sm text-slate-500 ml-4">{w.usage}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Font Sizes */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schriftgroessen</h3>
        <div className="space-y-3">
          {TYPOGRAPHY.sizes.map((s) => (
            <div key={s.name} className="flex items-baseline gap-4 border-b border-slate-100 pb-3 last:border-0">
              <span className="w-16 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded">{s.name}</span>
              <span className="w-36 text-sm text-slate-600">{s.size}</span>
              <span className="text-sm text-slate-500">{s.usage}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Headings Preview */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Ueberschriften-Hierarchie</h3>
        <div className="space-y-4">
          <div className="text-4xl font-bold text-slate-900">H1: Hauptueberschrift</div>
          <div className="text-3xl font-bold text-slate-900">H2: Abschnittsueberschrift</div>
          <div className="text-2xl font-semibold text-slate-900">H3: Unterabschnitt</div>
          <div className="text-xl font-semibold text-slate-900">H4: Card-Titel</div>
          <div className="text-lg font-medium text-slate-900">H5: Kleiner Titel</div>
          <div className="text-base font-medium text-slate-900">H6: Label</div>
        </div>
      </div>

      {/* Spacing */}
      <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Spacing Scale</h3>
        <div className="space-y-3">
          {SPACING.map((s) => (
            <div key={s.name} className="flex items-center gap-4">
              <span className="w-12 text-sm font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded text-center">{s.name}</span>
              <div
                className="bg-primary-500 h-4 rounded"
                style={{ width: `${parseInt(s.value) * 16}px` }}
              />
              <span className="text-sm text-slate-600">{s.value}</span>
              <span className="text-sm text-slate-400">{s.usage}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
