'use client'

import Link from 'next/link'
import { useLanguage } from '@/lib/LanguageContext'
import { useTheme } from '@/lib/ThemeContext'
import { Footer } from '@/components/Footer'

export default function KontaktPage() {
  const { t } = useLanguage()
  const { isDark } = useTheme()

  return (
    <div className={`min-h-screen flex flex-col ${
      isDark
        ? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
        : 'bg-gradient-to-br from-slate-100 via-blue-50 to-indigo-100'
    }`}>
      <div className="flex-1 p-8">
        <div className="max-w-4xl mx-auto">
          {/* Back Link */}
          <Link
            href="/"
            className={`inline-flex items-center gap-2 mb-8 transition-colors ${
              isDark ? 'text-white/60 hover:text-white' : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            {t('back_to_selection')}
          </Link>

          {/* Content Card */}
          <div className={`backdrop-blur-xl border rounded-3xl p-8 ${
            isDark
              ? 'bg-white/10 border-white/20'
              : 'bg-white/70 border-black/10 shadow-lg'
          }`}>
            <h1 className={`text-3xl font-bold mb-8 ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {t('contact')}
            </h1>

            <div className={`space-y-8 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
              {/* Contact Info */}
              <div className="grid md:grid-cols-2 gap-8">
                <section>
                  <h2 className={`text-xl font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Kontaktdaten
                  </h2>
                  <div className="space-y-3">
                    <div className="flex items-center gap-3">
                      <svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                      </svg>
                      <span>info@breakpilot.de</span>
                    </div>
                    <div className="flex items-center gap-3">
                      <svg className={`w-5 h-5 ${isDark ? 'text-white/60' : 'text-slate-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                      </svg>
                      <span>+49 (0) 123 456789</span>
                    </div>
                    <div className="flex items-start gap-3">
                      <svg className={`w-5 h-5 mt-0.5 ${isDark ? 'text-white/60' : 'text-slate-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                      </svg>
                      <span>
                        BreakPilot GmbH<br />
                        Musterstraße 123<br />
                        12345 Musterstadt
                      </span>
                    </div>
                  </div>
                </section>

                <section>
                  <h2 className={`text-xl font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                    Support
                  </h2>
                  <p className="mb-4">
                    Unser Support-Team ist für Sie da:
                  </p>
                  <div className="space-y-2">
                    <p>Mo - Fr: 9:00 - 17:00 Uhr</p>
                    <p>E-Mail: support@breakpilot.de</p>
                  </div>
                </section>
              </div>

              {/* Contact Form Placeholder */}
              <section>
                <h2 className={`text-xl font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
                  Nachricht senden
                </h2>
                <div className={`p-6 rounded-2xl border ${
                  isDark ? 'bg-white/5 border-white/10' : 'bg-slate-50 border-slate-200'
                }`}>
                  <div className="space-y-4">
                    <div>
                      <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
                        Name
                      </label>
                      <input
                        type="text"
                        className={`w-full px-4 py-3 rounded-xl border transition-colors ${
                          isDark
                            ? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-white/40'
                            : 'bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:border-indigo-500'
                        } focus:outline-none`}
                        placeholder="Ihr Name"
                      />
                    </div>
                    <div>
                      <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
                        E-Mail
                      </label>
                      <input
                        type="email"
                        className={`w-full px-4 py-3 rounded-xl border transition-colors ${
                          isDark
                            ? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-white/40'
                            : 'bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:border-indigo-500'
                        } focus:outline-none`}
                        placeholder="ihre@email.de"
                      />
                    </div>
                    <div>
                      <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/80' : 'text-slate-700'}`}>
                        Nachricht
                      </label>
                      <textarea
                        rows={4}
                        className={`w-full px-4 py-3 rounded-xl border transition-colors resize-none ${
                          isDark
                            ? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-white/40'
                            : 'bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:border-indigo-500'
                        } focus:outline-none`}
                        placeholder="Ihre Nachricht..."
                      />
                    </div>
                    <button className="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white font-medium rounded-xl hover:shadow-lg hover:shadow-purple-500/30 transition-all">
                      Nachricht senden
                    </button>
                  </div>
                </div>
              </section>

              <div className={`mt-8 p-4 rounded-2xl ${
                isDark ? 'bg-yellow-500/20 border border-yellow-500/30' : 'bg-yellow-50 border border-yellow-200'
              }`}>
                <p className={`text-sm ${isDark ? 'text-yellow-200' : 'text-yellow-800'}`}>
                  Hinweis: Das Kontaktformular ist noch nicht funktionsfähig. Bitte nutzen Sie vorerst
                  die angegebene E-Mail-Adresse für Anfragen.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  )
}