breakpilot-lehrer/studio-v2/components/Logo.tsx

'use client'

// ============================================
// BREAKPILOT LOGO KOMPONENTEN
// Drei Design-Varianten für das Studio
// ============================================

interface LogoProps {
  size?: 'sm' | 'md' | 'lg' | 'xl'
  showText?: boolean
  className?: string
}

const sizes = {
  sm: { icon: 'w-8 h-8', text: 'text-base', subtitle: 'text-[10px]' },
  md: { icon: 'w-10 h-10', text: 'text-lg', subtitle: 'text-xs' },
  lg: { icon: 'w-12 h-12', text: 'text-xl', subtitle: 'text-sm' },
  xl: { icon: 'w-16 h-16', text: 'text-2xl', subtitle: 'text-base' },
}

// ============================================
// VARIANTE A: Cupertino Clean
// Minimalistisch, SF-Style, subtile Schatten
// ============================================

export function LogoCupertinoClean({ size = 'md', showText = true, className = '' }: LogoProps) {
  const s = sizes[size]

  return (
    <div className={`flex items-center gap-3 ${className}`}>
      {/* Icon: Abgerundetes Quadrat mit Gradient */}
      <div className={`${s.icon} relative`}>
        <div className="absolute inset-0 bg-gradient-to-br from-red-500 to-red-700 rounded-xl shadow-lg shadow-red-500/20" />
        <div className="absolute inset-0 flex items-center justify-center">
          {/* Stilisiertes "BP" mit Piloten-Motiv */}
          <svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
            {/* Hintergrund-Kreis (Cockpit-Fenster) */}
            <circle cx="20" cy="20" r="14" fill="rgba(255,255,255,0.15)" />
            {/* B und P kombiniert */}
            <text
              x="20"
              y="26"
              textAnchor="middle"
              className="fill-white font-bold"
              style={{ fontSize: '16px', fontFamily: 'system-ui' }}
            >
              BP
            </text>
            {/* Kleine Flügel-Andeutung */}
            <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>

      {showText && (
        <div>
          <div className={`font-semibold text-slate-900 ${s.text} leading-none tracking-tight`}>
            Break<span className="text-red-600">Pilot</span>
          </div>
          <div className={`text-slate-400 ${s.subtitle} mt-0.5`}>Studio</div>
        </div>
      )}
    </div>
  )
}

// ============================================
// VARIANTE B: Glassmorphism Pro
// Frosted Glass, lebendige Farben, Glow-Effekte
// ============================================

export function LogoGlassmorphism({ size = 'md', showText = true, className = '' }: LogoProps) {
  const s = sizes[size]

  return (
    <div className={`flex items-center gap-4 ${className}`}>
      {/* Icon: Glasmorphism mit Glow */}
      <div className={`${s.icon} relative`}>
        {/* Outer Glow */}
        <div className="absolute inset-0 bg-gradient-to-br from-red-400 to-red-600 rounded-2xl blur-md opacity-50" />
        {/* Glass Card */}
        <div className="absolute inset-0 bg-gradient-to-br from-red-400/90 to-red-600/90 backdrop-blur-xl rounded-2xl border border-white/20 shadow-xl" />
        {/* Content */}
        <div className="absolute inset-0 flex items-center justify-center">
          <svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
            {/* Pilot-Silhouette stilisiert */}
            <defs>
              <linearGradient id="glassGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="rgba(255,255,255,0.9)" />
                <stop offset="100%" stopColor="rgba(255,255,255,0.7)" />
              </linearGradient>
            </defs>
            {/* Stilisierter Flieger/Papierflugzeug */}
            <path
              d="M8 28 L20 8 L32 28 L20 22 Z"
              fill="url(#glassGradient)"
              opacity="0.9"
            />
            {/* Innerer Akzent */}
            <path
              d="M14 24 L20 12 L26 24 L20 20 Z"
              fill="rgba(255,255,255,0.3)"
            />
          </svg>
        </div>
      </div>

      {showText && (
        <div>
          <div className={`font-semibold text-white ${s.text} leading-none`}>
            BreakPilot
          </div>
          <div className={`text-white/60 ${s.subtitle} mt-0.5`}>Studio</div>
        </div>
      )}
    </div>
  )
}

// ============================================
// VARIANTE C: Bento Style
// Minimalistisch, Monoweight, Dark Mode optimiert
// ============================================

export function LogoBento({ size = 'md', showText = true, className = '' }: LogoProps) {
  const s = sizes[size]

  return (
    <div className={`flex items-center gap-4 ${className}`}>
      {/* Icon: Minimal, geometrisch */}
      <div className={`${s.icon} relative`}>
        <div className="absolute inset-0 bg-gradient-to-br from-red-500 to-red-700 rounded-xl" />
        <div className="absolute inset-0 flex items-center justify-center">
          <svg viewBox="0 0 40 40" className="w-3/4 h-3/4">
            {/* Geometrisches B+P Symbol */}
            {/* B als zwei übereinander liegende Kreise */}
            <circle cx="16" cy="14" r="6" stroke="white" strokeWidth="2" fill="none" />
            <circle cx="16" cy="24" r="6" stroke="white" strokeWidth="2" fill="none" />
            {/* P als Linie mit Kreis */}
            <line x1="28" y1="10" x2="28" y2="30" stroke="white" strokeWidth="2" strokeLinecap="round" />
            <circle cx="28" cy="16" r="5" stroke="white" strokeWidth="2" fill="none" />
          </svg>
        </div>
      </div>

      {showText && (
        <div>
          <span className={`font-semibold text-white ${s.text} tracking-tight`}>
            BreakPilot
          </span>
          <span className={`text-white/40 ${s.subtitle} ml-2`}>Studio</span>
        </div>
      )}
    </div>
  )
}

// ============================================
// ICON-ONLY VARIANTEN (für Favicon, App-Icon)
// ============================================

interface IconOnlyProps {
  variant: 'cupertino' | 'glass' | 'bento'
  size?: number
  className?: string
}

export function BPIcon({ variant, size = 40, className = '' }: IconOnlyProps) {
  const svgSize = `${size}px`

  switch (variant) {
    case 'cupertino':
      return (
        <svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
          <defs>
            <linearGradient id="cupGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#ef4444" />
              <stop offset="100%" stopColor="#b91c1c" />
            </linearGradient>
          </defs>
          <rect x="2" y="2" width="36" height="36" rx="8" fill="url(#cupGrad)" />
          <circle cx="20" cy="20" r="12" fill="rgba(255,255,255,0.15)" />
          <text x="20" y="25" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold" fontFamily="system-ui">BP</text>
          {/* Flügel */}
          <path d="M6 22 L12 20 M28 20 L34 22" stroke="rgba(255,255,255,0.5)" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
      )

    case 'glass':
      return (
        <svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
          <defs>
            <linearGradient id="glassGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#f87171" />
              <stop offset="100%" stopColor="#dc2626" />
            </linearGradient>
          </defs>
          <rect x="2" y="2" width="36" height="36" rx="10" fill="url(#glassGrad)" />
          <rect x="4" y="4" width="32" height="32" rx="8" fill="rgba(255,255,255,0.1)" />
          <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>
      )

    case 'bento':
      return (
        <svg width={svgSize} height={svgSize} viewBox="0 0 40 40" className={className}>
          <defs>
            <linearGradient id="bentoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#ef4444" />
              <stop offset="100%" stopColor="#991b1b" />
            </linearGradient>
          </defs>
          <rect x="2" y="2" width="36" height="36" rx="8" fill="url(#bentoGrad)" />
          <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>
      )
  }
}

// ============================================
// LOGO SHOWCASE KOMPONENTE
// Zeigt alle drei Varianten zum Vergleich
// ============================================

export function LogoShowcase() {
  return (
    <div className="p-8 space-y-12">
      <h2 className="text-2xl font-bold text-center mb-8">Logo-Varianten</h2>

      {/* Variante A */}
      <div className="bg-white rounded-2xl p-8 shadow-lg">
        <h3 className="text-lg font-semibold mb-6 text-slate-700">A: Cupertino Clean</h3>
        <div className="flex items-center gap-12">
          <LogoCupertinoClean size="sm" />
          <LogoCupertinoClean size="md" />
          <LogoCupertinoClean size="lg" />
          <LogoCupertinoClean size="xl" />
          <div className="flex gap-4">
            <BPIcon variant="cupertino" size={32} />
            <BPIcon variant="cupertino" size={48} />
            <BPIcon variant="cupertino" size={64} />
          </div>
        </div>
      </div>

      {/* Variante B */}
      <div className="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 rounded-2xl p-8">
        <h3 className="text-lg font-semibold mb-6 text-white/80">B: Glassmorphism Pro</h3>
        <div className="flex items-center gap-12">
          <LogoGlassmorphism size="sm" />
          <LogoGlassmorphism size="md" />
          <LogoGlassmorphism size="lg" />
          <LogoGlassmorphism size="xl" />
          <div className="flex gap-4">
            <BPIcon variant="glass" size={32} />
            <BPIcon variant="glass" size={48} />
            <BPIcon variant="glass" size={64} />
          </div>
        </div>
      </div>

      {/* Variante C */}
      <div className="bg-black rounded-2xl p-8">
        <h3 className="text-lg font-semibold mb-6 text-white/80">C: Bento Style</h3>
        <div className="flex items-center gap-12">
          <LogoBento size="sm" />
          <LogoBento size="md" />
          <LogoBento size="lg" />
          <LogoBento size="xl" />
          <div className="flex gap-4">
            <BPIcon variant="bento" size={32} />
            <BPIcon variant="bento" size={48} />
            <BPIcon variant="bento" size={64} />
          </div>
        </div>
      </div>
    </div>
  )
}