'use client'

export default function LogoTab() {
  return (
    <div className="space-y-6">
      {/* Logo Display */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo</h3>
        <div className="grid grid-cols-2 gap-8">
          <div className="bg-white border border-slate-200 rounded-lg p-8 flex items-center justify-center">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
                <span className="text-2xl font-bold text-white">B</span>
              </div>
              <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
            </div>
          </div>
          <div className="bg-slate-900 rounded-lg p-8 flex items-center justify-center">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-gradient-to-br from-primary-400 to-primary-500 rounded-xl flex items-center justify-center">
                <span className="text-2xl font-bold text-white">B</span>
              </div>
              <span className="text-2xl font-bold text-white">BreakPilot</span>
            </div>
          </div>
        </div>
      </div>

      {/* Logo Variations */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Logo-Varianten</h3>
        <div className="grid grid-cols-4 gap-4">
          <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
            <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
              <span className="text-2xl font-bold text-white">B</span>
            </div>
            <span className="text-xs text-slate-600">Icon Only</span>
          </div>
          <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
            <span className="text-xl font-bold text-slate-900">BreakPilot</span>
            <span className="text-xs text-slate-600">Text Only</span>
          </div>
          <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
            <div className="flex items-center gap-2">
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-white">B</span>
              </div>
              <span className="text-lg font-bold text-slate-900">BreakPilot</span>
            </div>
            <span className="text-xs text-slate-600">Horizontal</span>
          </div>
          <div className="border border-slate-200 rounded-lg p-4 flex flex-col items-center gap-2">
            <div className="flex flex-col items-center">
              <div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center mb-1">
                <span className="text-xl font-bold text-white">B</span>
              </div>
              <span className="text-sm font-bold text-slate-900">BreakPilot</span>
            </div>
            <span className="text-xs text-slate-600">Stacked</span>
          </div>
        </div>
      </div>

      {/* Clear Space */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Schutzzone</h3>
        <p className="text-sm text-slate-600 mb-4">
          Um das Logo herum sollte mindestens ein Abstand von der Höhe des Icons eingehalten werden.
        </p>
        <div className="bg-slate-50 rounded-lg p-8 inline-block">
          <div className="border-2 border-dashed border-slate-300 p-8">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center">
                <span className="text-2xl font-bold text-white">B</span>
              </div>
              <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
            </div>
          </div>
        </div>
      </div>

      {/* Don'ts */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Nicht erlaubt</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
            <div className="flex items-center gap-2 justify-center opacity-50">
              <div className="w-8 h-8 bg-red-500 rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-white">B</span>
              </div>
              <span className="text-lg font-bold text-red-500">BreakPilot</span>
            </div>
            <span className="text-xs text-red-600 mt-2 block">Falsche Farben</span>
          </div>
          <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
            <div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-white">B</span>
              </div>
              <span className="text-lg font-bold text-slate-900">BreakPilot</span>
            </div>
            <span className="text-xs text-red-600 mt-2 block">Verzerrt</span>
          </div>
          <div className="border border-red-200 bg-red-50 rounded-lg p-4 text-center">
            <div className="flex items-center gap-2 justify-center">
              <div className="w-8 h-8 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
                <span className="text-lg font-bold text-white">B</span>
              </div>
              <span className="text-lg font-bold text-slate-900">Break Pilot</span>
            </div>
            <span className="text-xs text-red-600 mt-2 block">Falsche Schreibweise</span>
          </div>
        </div>
      </div>
    </div>
  )
}
