'use client'

import { VOICE_TONE } from '../constants'

export function VoiceTab() {
  return (
    <div className="space-y-6">
      {/* Brand Attributes */}
      <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">Markenpersoenlichkeit</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 & Dont */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <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 flex-shrink-0"></span>
                {item}
              </li>
            ))}
          </ul>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <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 flex-shrink-0"></span>
                {item}
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Example Texts */}
      <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">Beispieltexte</h3>
        <div className="space-y-4">
          <div className="p-4 bg-green-50 border border-green-200 rounded-xl">
            <span className="text-xs text-green-600 font-medium mb-2 block">GUT</span>
            <p className="text-slate-700">
              &quot;Verwalten Sie Ihre Datenschutz-Dokumente einfach und sicher. Alle Aenderungen werden protokolliert.&quot;
            </p>
          </div>
          <div className="p-4 bg-red-50 border border-red-200 rounded-xl">
            <span className="text-xs text-red-600 font-medium mb-2 block">SCHLECHT</span>
            <p className="text-slate-700">
              &quot;Unsere revolutionaere KI-Loesung optimiert Ihre Compliance-Workflows durch state-of-the-art NLP.&quot;
            </p>
          </div>
        </div>
      </div>

      {/* Target Audience */}
      <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">Zielgruppe</h3>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          {[
            {
              iconBg: 'bg-education-100', iconColor: 'text-education-600',
              iconPath: 'M12 14l9-5-9-5-9 5 9 5z',
              iconPath2: 'M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z',
              title: 'Lehrkraefte', desc: 'Zeitersparnis, einfache Bedienung',
            },
            {
              iconBg: 'bg-compliance-100', iconColor: 'text-compliance-600',
              iconPath: 'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
              title: 'DSB', desc: 'DSGVO-Compliance, Dokumentation',
            },
            {
              iconBg: 'bg-infrastructure-100', iconColor: 'text-infrastructure-600',
              iconPath: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
              title: 'Entwickler', desc: 'APIs, Integration, DevOps',
            },
            {
              iconBg: 'bg-communication-100', iconColor: 'text-communication-600',
              iconPath: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
              title: 'Schulleitung', desc: 'Ueberblick, Kosten, Compliance',
            },
          ].map((audience) => (
            <div key={audience.title} className="p-4 bg-slate-50 rounded-xl text-center">
              <div className={`w-12 h-12 ${audience.iconBg} rounded-xl flex items-center justify-center mx-auto mb-2`}>
                <svg className={`w-6 h-6 ${audience.iconColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={audience.iconPath} />
                  {audience.iconPath2 && (
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={audience.iconPath2} />
                  )}
                </svg>
              </div>
              <h4 className="font-semibold text-slate-900">{audience.title}</h4>
              <p className="text-sm text-slate-600 mt-1">{audience.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
