'use client'

import { VOICE_TONE } from './types'

export default function VoiceTab() {
  return (
    <div className="space-y-6">
      {/* Brand Attributes */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Markenpersönlichkeit</h3>
        <div className="flex flex-wrap gap-3">
          {VOICE_TONE.attributes.map((attr) => (
            <span
              key={attr}
              className="px-4 py-2 bg-primary-100 text-primary-700 rounded-full font-medium"
            >
              {attr}
            </span>
          ))}
        </div>
      </div>

      {/* Do & Don't */}
      <div className="grid grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="text-lg font-semibold text-green-600 mb-4 flex items-center gap-2">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            So schreiben wir
          </h3>
          <ul className="space-y-2">
            {VOICE_TONE.doList.map((item) => (
              <li key={item} className="flex items-center gap-2 text-slate-600">
                <span className="w-1.5 h-1.5 bg-green-500 rounded-full"></span>
                {item}
              </li>
            ))}
          </ul>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6">
          <h3 className="text-lg font-semibold text-red-600 mb-4 flex items-center gap-2">
            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
            Das vermeiden wir
          </h3>
          <ul className="space-y-2">
            {VOICE_TONE.dontList.map((item) => (
              <li key={item} className="flex items-center gap-2 text-slate-600">
                <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Example Texts */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Beispieltexte</h3>
        <div className="space-y-4">
          <div className="p-4 bg-green-50 border border-green-200 rounded-lg">
            <span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
            <p className="text-slate-700">
              "Sparen Sie Zeit bei der Korrektur - unsere KI unterstützt Sie mit intelligenten Vorschlägen."
            </p>
          </div>
          <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
            <span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
            <p className="text-slate-700">
              "Unsere revolutionäre KI-Lösung optimiert Ihre Korrekturworkflows durch state-of-the-art NLP."
            </p>
          </div>
        </div>
      </div>

      {/* Target Audience */}
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Zielgruppe</h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="p-4 bg-slate-50 rounded-lg">
            <div className="text-2xl mb-2">👩‍🏫</div>
            <h4 className="font-semibold text-slate-900">Lehrkräfte</h4>
            <p className="text-sm text-slate-600">Wünschen Zeitersparnis und einfache Bedienung</p>
          </div>
          <div className="p-4 bg-slate-50 rounded-lg">
            <div className="text-2xl mb-2">🏫</div>
            <h4 className="font-semibold text-slate-900">Schulleitung</h4>
            <p className="text-sm text-slate-600">Fokus auf DSGVO, Kosten und Integration</p>
          </div>
          <div className="p-4 bg-slate-50 rounded-lg">
            <div className="text-2xl mb-2">👨‍👩‍👧</div>
            <h4 className="font-semibold text-slate-900">Eltern</h4>
            <p className="text-sm text-slate-600">Wollen Transparenz und schnelles Feedback</p>
          </div>
        </div>
      </div>
    </div>
  )
}
