'use client'

function LogoDisplay() {
  return (
    <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">Logo</h3>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div className="bg-white border border-slate-200 rounded-xl p-8 flex items-center justify-center">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <span className="text-2xl font-bold text-white">B</span>
            </div>
            <div>
              <span className="text-2xl font-bold text-slate-900">BreakPilot</span>
              <span className="text-sm text-slate-500 block">Admin v2</span>
            </div>
          </div>
        </div>
        <div className="bg-slate-900 rounded-xl p-8 flex items-center justify-center">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #38bdf8, #e879f9)' }}>
              <span className="text-2xl font-bold text-white">B</span>
            </div>
            <div>
              <span className="text-2xl font-bold text-white">BreakPilot</span>
              <span className="text-sm text-slate-400 block">Admin v2</span>
            </div>
          </div>
        </div>
      </div>
      {/* Gradient Info */}
      <div className="mt-6 pt-4 border-t border-slate-200">
        <div className="flex items-center gap-4">
          <code className="bg-slate-100 px-3 py-1.5 rounded-lg font-mono text-xs text-slate-700">
            background: linear-gradient(to bottom right, #0ea5e9, #d946ef)
          </code>
          <span className="text-sm text-slate-500">Primary → Accent (Sky Blue → Fuchsia)</span>
        </div>
      </div>
    </div>
  )
}

function LogoVariations() {
  return (
    <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">Logo-Varianten</h3>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="border border-slate-200 rounded-xl p-4 flex flex-col items-center gap-2">
          <div className="w-12 h-12 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
            <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-xl 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-xl p-4 flex flex-col items-center gap-2">
          <div className="flex items-center gap-2">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <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-xl p-4 flex flex-col items-center gap-2">
          <div className="flex flex-col items-center">
            <div className="w-10 h-10 rounded-xl flex items-center justify-center mb-1" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <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>
  )
}

function FaviconSizes() {
  return (
    <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">Favicon & App Icon</h3>
      <div className="flex gap-6 items-end">
        {[
          { size: 'w-8 h-8', rounded: 'rounded', text: 'text-sm', label: '16x16' },
          { size: 'w-12 h-12', rounded: 'rounded-lg', text: 'text-xl', label: '32x32' },
          { size: 'w-16 h-16', rounded: 'rounded-xl', text: 'text-2xl', label: '180x180' },
          { size: 'w-24 h-24', rounded: 'rounded-2xl', text: 'text-4xl', label: '512x512' },
        ].map((icon) => (
          <div key={icon.label} className="text-center">
            <div className={`${icon.size} ${icon.rounded} flex items-center justify-center`} style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <span className={`${icon.text} font-bold text-white`}>B</span>
            </div>
            <span className="text-xs text-slate-500 mt-2 block">{icon.label}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

function LogoDonts() {
  return (
    <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">Nicht erlaubt</h3>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="border border-red-200 bg-red-50 rounded-xl 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-xl p-4 text-center">
          <div className="flex items-center gap-2 justify-center" style={{ transform: 'skewX(-10deg)' }}>
            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <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-xl p-4 text-center">
          <div className="flex items-center gap-2 justify-center">
            <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(to bottom right, #0ea5e9, #d946ef)' }}>
              <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>
  )
}

function StudioLogo() {
  return (
    <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
      <h3 className="text-lg font-semibold text-slate-900 mb-2">Studio Logo (BP mit Fluegeln)</h3>
      <p className="text-sm text-slate-500 mb-6">
        Das Studio-Logo verwendet ein rotes Farbschema und zeigt &quot;BP&quot; mit stilisierten Fluegeln.
        Es gibt drei Design-Varianten fuer unterschiedliche Anwendungsfaelle.
      </p>

      {/* Variante A: Cupertino Clean */}
      <div className="mb-6 p-4 bg-slate-50 rounded-xl">
        <h4 className="font-medium text-slate-700 mb-4">A: Cupertino Clean</h4>
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-3">
            <div className="w-12 h-12 relative">
              <div className="absolute inset-0 rounded-xl shadow-lg" style={{ background: 'linear-gradient(to bottom right, #ef4444, #b91c1c)' }} />
              <div className="absolute inset-0 flex items-center justify-center">
                <svg viewBox="0 0 40 40" className="w-9 h-9">
                  <circle cx="20" cy="20" r="14" fill="rgba(255,255,255,0.15)" />
                  <text x="20" y="26" textAnchor="middle" fill="white" fontSize="16" fontWeight="bold" fontFamily="system-ui">BP</text>
                  <path d="M6 22 L12 20 M28 20 L34 22" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round" />
                </svg>
              </div>
            </div>
            <div>
              <span className="font-semibold text-slate-900 text-lg">Break<span className="text-red-600">Pilot</span></span>
              <span className="text-slate-400 text-sm block">Studio</span>
            </div>
          </div>
          <div className="text-sm text-slate-600">
            <code className="bg-white px-2 py-1 rounded font-mono text-xs">#ef4444 → #b91c1c</code>
            <p className="mt-1 text-slate-500">Minimalistisch, SF-Style, BP mit Fluegel-Linien</p>
          </div>
        </div>
      </div>

      {/* Variante B: Glassmorphism Pro */}
      <div className="mb-6 p-4 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #312e81, #581c87, #831843)' }}>
        <h4 className="font-medium text-white/80 mb-4">B: Glassmorphism Pro</h4>
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 relative">
              <div className="absolute inset-0 rounded-2xl blur-md opacity-50" style={{ background: 'linear-gradient(to bottom right, #f87171, #dc2626)' }} />
              <div className="absolute inset-0 rounded-2xl border border-white/20 shadow-xl" style={{ background: 'linear-gradient(to bottom right, rgba(248,113,113,0.9), rgba(220,38,38,0.9))' }} />
              <div className="absolute inset-0 flex items-center justify-center">
                <svg viewBox="0 0 40 40" className="w-9 h-9">
                  <path d="M10 28 L20 8 L30 28 L20 22 Z" fill="rgba(255,255,255,0.9)" />
                  <path d="M14 24 L20 12 L26 24 L20 20 Z" fill="rgba(255,255,255,0.3)" />
                </svg>
              </div>
            </div>
            <div>
              <span className="font-semibold text-white text-lg">BreakPilot</span>
              <span className="text-white/60 text-sm block">Studio</span>
            </div>
          </div>
          <div className="text-sm text-white/70">
            <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#f87171 → #dc2626</code>
            <p className="mt-1 text-white/50">Glassmorphism, Glow-Effekt, Papierflugzeug-Silhouette</p>
          </div>
        </div>
      </div>

      {/* Variante C: Bento Style */}
      <div className="mb-6 p-4 bg-black rounded-xl">
        <h4 className="font-medium text-white/80 mb-4">C: Bento Style</h4>
        <div className="flex items-center gap-8">
          <div className="flex items-center gap-4">
            <div className="w-12 h-12 relative">
              <div className="absolute inset-0 rounded-xl" style={{ background: 'linear-gradient(to bottom right, #ef4444, #991b1b)' }} />
              <div className="absolute inset-0 flex items-center justify-center">
                <svg viewBox="0 0 40 40" className="w-9 h-9">
                  <circle cx="15" cy="14" r="5" stroke="white" strokeWidth="1.5" fill="none" />
                  <circle cx="15" cy="24" r="5" stroke="white" strokeWidth="1.5" fill="none" />
                  <line x1="27" y1="10" x2="27" y2="30" stroke="white" strokeWidth="1.5" strokeLinecap="round" />
                  <circle cx="27" cy="15" r="4" stroke="white" strokeWidth="1.5" fill="none" />
                </svg>
              </div>
            </div>
            <div>
              <span className="font-semibold text-white text-lg">BreakPilot</span>
              <span className="text-white/40 text-sm ml-2">Studio</span>
            </div>
          </div>
          <div className="text-sm text-white/70">
            <code className="bg-white/10 px-2 py-1 rounded font-mono text-xs">#ef4444 → #991b1b</code>
            <p className="mt-1 text-white/50">Geometrisch, Monoweight, B+P als Kreise/Linien</p>
          </div>
        </div>
      </div>

      {/* Studio Farbpalette */}
      <div className="pt-4 border-t border-slate-200">
        <h4 className="text-sm font-medium text-slate-700 mb-3">Studio Farbpalette (Rot)</h4>
        <div className="flex gap-3">
          {[
            { bg: '#fef2f2', label: 'red-50' },
            { bg: '#f87171', label: 'red-400' },
            { bg: '#ef4444', label: 'red-500' },
            { bg: '#dc2626', label: 'red-600' },
            { bg: '#b91c1c', label: 'red-700' },
            { bg: '#991b1b', label: 'red-800' },
          ].map((swatch) => (
            <div key={swatch.label} className="text-center">
              <div className="w-12 h-12 rounded-lg" style={{ backgroundColor: swatch.bg }} />
              <span className="text-xs text-slate-500 mt-1 block">{swatch.label}</span>
            </div>
          ))}
        </div>
        <p className="text-xs text-slate-500 mt-3">
          Quelle: <code className="bg-slate-100 px-1.5 py-0.5 rounded">/studio-v2/components/Logo.tsx</code>
        </p>
      </div>
    </div>
  )
}

export function LogoTab() {
  return (
    <div className="space-y-6">
      <LogoDisplay />
      <LogoVariations />
      <FaviconSizes />
      <LogoDonts />
      <StudioLogo />
    </div>
  )
}
