import { useState } from 'react';
import { Link } from 'react-router-dom';

export default function Kontakt() {
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: '', message: '', privacy: false });
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  function validate(): boolean {
    const e: Record<string, string> = {};
    if (!form.name.trim()) e.name = 'Name ist erforderlich';
    if (!form.email.trim()) e.email = 'E-Mail ist erforderlich';
    else if (!/^\S+@\S+\.\S+$/.test(form.email)) e.email = 'Ungültige E-Mail-Adresse';
    if (!form.message.trim()) e.message = 'Nachricht ist erforderlich';
    if (!form.privacy) e.privacy = 'Bitte stimmen Sie der Datenschutzerklärung zu';
    setErrors(e);
    return Object.keys(e).length === 0;
  }

  function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setSubmitted(true); }, 1500);
  }

  function resetForm() {
    setForm({ name: '', email: '', phone: '', subject: '', message: '', privacy: false });
    setSubmitted(false);
  }

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <h1 className="text-3xl sm:text-4xl font-bold mb-2" style={{ color: 'var(--text)' }}>Kontakt</h1>
      <p className="mb-8" style={{ color: 'var(--secondary)' }}>Wir beraten Sie persönlich – telefonisch, per E-Mail oder über das Kontaktformular.</p>
      <div className="grid lg:grid-cols-2 gap-8">
        <div className="space-y-6">
          <div className="hms-card p-6">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--text)' }}><span style={{ color: 'var(--color-accent)' }}>🏢</span> Büro Leipheim</h2>
            <div className="space-y-1 text-sm" style={{ color: 'var(--text-muted)' }}>
              <p>Grockelhofen 10<br />89340 Leipheim</p>
              <a href="https://maps.google.com/?q=Grockelhofen+10+89340+Leipheim" target="_blank" rel="noopener" className="inline-flex items-center gap-1 mt-2" style={{ color: 'var(--color-accent)' }}>Route planen <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg></a>
            </div>
          </div>
          <div className="hms-card p-6">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--text)' }}><span style={{ color: 'var(--color-accent)' }}>📦</span> Mietlager Ellzee</h2>
            <div className="space-y-1 text-sm" style={{ color: 'var(--text-muted)' }}>
              <p>Zur Schönhalde 8<br />89352 Ellzee</p>
              <a href="https://maps.google.com/?q=Zur+Schönhalde+8+89352+Ellzee" target="_blank" rel="noopener" className="inline-flex items-center gap-1 mt-2" style={{ color: 'var(--color-accent)' }}>Route planen <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg></a>
            </div>
          </div>
          <div className="hms-card p-6">
            <h2 className="text-lg font-semibold mb-4 flex items-center gap-2" style={{ color: 'var(--text)' }}><span style={{ color: 'var(--color-accent)' }}>🕐</span> Öffnungszeiten</h2>
            <div className="text-sm" style={{ color: 'var(--text-muted)' }}>
              <div className="flex justify-between py-2 border-b" style={{ borderColor: 'var(--border)' }}><span>Montag – Freitag</span><span className="font-medium" style={{ color: 'var(--text)' }}>10:00 – 18:00</span></div>
              <div className="flex justify-between py-2"><span>Samstag & Sonntag</span><span style={{ color: 'var(--secondary)' }}>Geschlossen</span></div>
            </div>
          </div>
          <div className="grid sm:grid-cols-2 gap-4">
            <div className="hms-card p-6 text-center">
              <div className="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-2xl" style={{ background: 'var(--surface)', color: 'var(--secondary)' }}>👤</div>
              <h3 className="font-semibold" style={{ color: 'var(--text)' }}>Leopold Hammerschmidt</h3>
              <div className="text-xs mb-3" style={{ color: 'var(--secondary)' }}>Geschäftsführung</div>
              <a href="tel:+491726264796" className="block text-sm mb-1" style={{ color: 'var(--text-muted)' }}>+49 (0) 172 6264796</a>
              <a href="mailto:leopold.hammerschmidt@hms-licht-ton.de" className="block text-sm break-all" style={{ color: 'var(--text-muted)' }}>leopold.hammerschmidt@hms-licht-ton.de</a>
            </div>
            <div className="hms-card p-6 text-center">
              <div className="w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center text-2xl" style={{ background: 'var(--surface)', color: 'var(--secondary)' }}>👤</div>
              <h3 className="font-semibold" style={{ color: 'var(--text)' }}>Andreas Mössle</h3>
              <div className="text-xs mb-3" style={{ color: 'var(--secondary)' }}>Geschäftsführung</div>
              <a href="tel:+491739014604" className="block text-sm mb-1" style={{ color: 'var(--text-muted)' }}>+49 (0) 173 / 9014604</a>
              <a href="mailto:andreas.moessle@hms-licht-ton.de" className="block text-sm break-all" style={{ color: 'var(--text-muted)' }}>andreas.moessle@hms-licht-ton.de</a>
            </div>
          </div>
        </div>
        <div>
          <div className="hms-card p-6 sm:p-8">
            <h2 className="text-xl font-semibold mb-6" style={{ color: 'var(--text)' }}>Nachricht senden</h2>
            {submitted ? (
              <div className="text-center py-8" role="status">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full mb-4" style={{ background: 'var(--color-success-bg)', color: 'var(--color-success)' }}>
                  <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"/></svg>
                </div>
                <h3 className="text-lg font-semibold mb-2" style={{ color: 'var(--text)' }}>Nachricht übermittelt</h3>
                <p className="text-sm mb-6" style={{ color: 'var(--secondary)' }}>Vielen Dank für Ihre Anfrage. Wir melden uns innerhalb von 24 Stunden bei Ihnen.</p>
                <button onClick={resetForm} className="hms-btn hms-btn-secondary">Neue Nachricht</button>
              </div>
            ) : (
              <form onSubmit={submit} noValidate>
                <div className="space-y-4">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Name <span style={{ color: 'var(--color-error)' }} aria-label="Pflichtfeld">*</span></label>
                    <input id="name" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} type="text" className={`hms-input ${errors.name ? 'hms-input-error' : ''}`} placeholder="Ihr Name" aria-invalid={!!errors.name} />
                    {errors.name && <p className="text-xs mt-1" style={{ color: 'var(--color-error)' }} role="alert">{errors.name}</p>}
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>E-Mail <span style={{ color: 'var(--color-error)' }} aria-label="Pflichtfeld">*</span></label>
                    <input id="email" value={form.email} onChange={e => setForm(f => ({ ...f, email: e.target.value }))} type="email" className={`hms-input ${errors.email ? 'hms-input-error' : ''}`} placeholder="ihre@email.de" aria-invalid={!!errors.email} />
                    {errors.email && <p className="text-xs mt-1" style={{ color: 'var(--color-error)' }} role="alert">{errors.email}</p>}
                  </div>
                  <div>
                    <label htmlFor="phone" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Telefon</label>
                    <input id="phone" value={form.phone} onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} type="tel" className="hms-input" placeholder="+49 ..." />
                  </div>
                  <div>
                    <label htmlFor="subject" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Anliegen</label>
                    <select id="subject" value={form.subject} onChange={e => setForm(f => ({ ...f, subject: e.target.value }))} className="hms-input">
                      <option value="">Bitte wählen</option>
                      <option value="vermietung">Vermietungsanfrage</option>
                      <option value="verkauf">Verkaufsberatung</option>
                      <option value="personal">Personalanfrage</option>
                      <option value="installation">Installationsanfrage</option>
                      <option value="sonstiges">Sonstiges</option>
                    </select>
                  </div>
                  <div>
                    <label htmlFor="message" className="block text-sm font-medium mb-1" style={{ color: 'var(--text-muted)' }}>Nachricht <span style={{ color: 'var(--color-error)' }} aria-label="Pflichtfeld">*</span></label>
                    <textarea id="message" value={form.message} onChange={e => setForm(f => ({ ...f, message: e.target.value }))} rows={5} className={`hms-input ${errors.message ? 'hms-input-error' : ''}`} placeholder="Beschreiben Sie Ihr Anliegen – Veranstaltungstyp, Ort, erwartete Besucherzahl, benötigtes Equipment..." aria-invalid={!!errors.message} />
                    {errors.message && <p className="text-xs mt-1" style={{ color: 'var(--color-error)' }} role="alert">{errors.message}</p>}
                  </div>
                  <div>
                    <label className="flex items-start gap-3 cursor-pointer">
                      <input type="checkbox" checked={form.privacy} onChange={e => setForm(f => ({ ...f, privacy: e.target.checked }))} className="mt-1 w-5 h-5 rounded" style={{ accentColor: 'var(--color-accent)' }} aria-invalid={!!errors.privacy} />
                      <span className="text-xs" style={{ color: 'var(--text-muted)' }}>Ich habe die <Link to="/datenschutz" style={{ color: 'var(--color-accent)' }}>Datenschutzerklärung</Link> gelesen und stimme zu, dass meine Angaben zur Bearbeitung meiner Anfrage gespeichert werden. <span style={{ color: 'var(--color-error)' }}>*</span></span>
                    </label>
                    {errors.privacy && <p className="text-xs mt-1" style={{ color: 'var(--color-error)' }} role="alert">{errors.privacy}</p>}
                  </div>
                  <button type="submit" disabled={submitting} className="hms-btn hms-btn-primary w-full text-base py-3">
                    {submitting ? <span className="hms-spinner" style={{ width: 18, height: 18, borderWidth: 2 }} /> : <span>Nachricht senden</span>}
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
