'use client';

import { CheckCircle, Mail, MapPin, Send } from 'lucide-react';
import React, { useState } from 'react';
import Link from 'next/link';

export default function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    const formData = new FormData(e.currentTarget);
    const data = Object.fromEntries(formData.entries());
    
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });
      if (response.ok) {
        setSubmitted(true);
      } else {
        const err = await response.json();
        alert(`Fehler: ${err.error || 'Es gab einen Fehler beim Senden Ihrer Nachricht.'}`);
      }
    } catch (error) {
      alert('Es gab einen Fehler beim Senden Ihrer Nachricht.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="bg-white">
      <section
        className="relative min-h-[40vh] md:min-h-[50vh] flex items-center overflow-hidden py-6 md:py-12"
        style={{
          background: 'linear-gradient(to right, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 100%), url("/media/laying/iStock-1282259999.jpg")',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }}
      >
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-[700px]">
            <span className="inline-block text-accent-green text-xs font-bold uppercase tracking-[0.15em] mb-3">Kontakt</span>
            <h1 className="text-primary text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
              Kontakt
            </h1>
            <p className="text-text-secondary text-lg md:text-xl leading-relaxed max-w-[600px]">
              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
            </p>
          </div>
        </div>
      </section>

      <section className="py-12 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-16">
            <div className="flex flex-col gap-8">
              <a
                href="mailto:info@mb-grid-solutions.com"
                className="flex gap-6 items-start p-6 bg-white border border-secondary-bg rounded-2xl hover:border-primary transition-all duration-200"
              >
                <div className="text-accent-green p-4 border border-secondary-bg rounded-xl shrink-0">
                  <Mail size={24} strokeWidth={2} />
                </div>
                <div>
                  <h4 className="text-sm md:text-base font-semibold mb-1">E-Mail</h4>
                  <span className="text-primary text-lg md:text-xl font-medium">
                    info@mb-grid-solutions.com
                  </span>
                </div>
              </a>
              <div className="flex gap-6 items-start p-6 bg-white border border-secondary-bg rounded-2xl">
                <div className="text-accent-green p-4 border border-secondary-bg rounded-xl shrink-0">
                  <MapPin size={24} strokeWidth={2} />
                </div>
                <div>
                  <h4 className="text-sm md:text-base font-semibold mb-1">Anschrift</h4>
                  <p className="text-primary text-lg md:text-xl font-medium leading-relaxed">
                    MB Grid Solutions GmbH<br />
                    Raiffeisenstraße 22<br />
                    73630 Remshalden
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-white p-8 md:p-12 border border-secondary-bg rounded-2xl shadow-sm">
              {submitted ? (
                <div className="text-center py-8 md:py-12">
                  <div className="text-accent-green mb-6 flex justify-center">
                    <CheckCircle size={64} strokeWidth={2} />
                  </div>
                  <h3 className="text-2xl md:text-3xl font-bold mb-4">Nachricht gesendet</h3>
                  <p className="text-text-secondary text-base md:text-lg leading-relaxed mb-8">
                    Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
                  </p>
                  <button
                    onClick={() => setSubmitted(false)}
                    className="bg-primary text-white px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-text-primary transition-all"
                  >
                    Weitere Nachricht
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="flex flex-col gap-6">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="flex flex-col gap-2">
                      <label htmlFor="name" className="text-sm font-semibold">Name *</label>
                      <input
                        type="text"
                        id="name"
                        name="name"
                        required
                        minLength={2}
                        maxLength={100}
                        placeholder="Ihr Name"
                        className="w-full p-4 border border-secondary-bg rounded-xl focus:outline-none focus:border-primary focus:ring-3 focus:ring-accent-green/10 transition-all"
                      />
                    </div>
                    <div className="flex flex-col gap-2">
                      <label htmlFor="company" className="text-sm font-semibold">Firma</label>
                      <input
                        type="text"
                        id="company"
                        name="company"
                        placeholder="Ihr Unternehmen"
                        className="w-full p-4 border border-secondary-bg rounded-xl focus:outline-none focus:border-primary focus:ring-3 focus:ring-accent-green/10 transition-all"
                      />
                    </div>
                  </div>
                  
                  <div className="flex flex-col gap-2">
                    <label htmlFor="email" className="text-sm font-semibold">E-Mail *</label>
                    <input
                      type="email"
                      id="email"
                      name="email"
                      required
                      placeholder="ihre@email.de"
                      className="w-full p-4 border border-secondary-bg rounded-xl focus:outline-none focus:border-primary focus:ring-3 focus:ring-accent-green/10 transition-all"
                    />
                  </div>
                  
                  <div className="flex flex-col gap-2">
                    <label htmlFor="message" className="text-sm font-semibold">Nachricht *</label>
                    <textarea
                      id="message"
                      name="message"
                      required
                      minLength={20}
                      maxLength={4000}
                      rows={6}
                      placeholder="Wie können wir Ihnen helfen?"
                      className="w-full p-4 border border-secondary-bg rounded-xl focus:outline-none focus:border-primary focus:ring-3 focus:ring-accent-green/10 transition-all resize-y min-h-[120px]"
                    ></textarea>
                  </div>
                  
                  <div className="hidden">
                    <label htmlFor="website">Website (bitte leer lassen)</label>
                    <input
                      type="text"
                      id="website"
                      name="website"
                      tabIndex={-1}
                      autoComplete="off"
                    />
                  </div>
                  
                  <button
                    type="submit"
                    disabled={loading}
                    className="self-start bg-primary text-white px-8 py-4 rounded-lg font-bold uppercase tracking-widest text-xs hover:bg-text-primary transition-all flex items-center gap-3 disabled:opacity-50"
                  >
                    {loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
                  </button>
                  <p className="text-[11px] md:text-xs text-text-secondary leading-relaxed mt-2">
                    * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
                    <Link href="/datenschutz" className="underline font-medium">
                      Datenschutzerklärung
                    </Link>{' '}
                    einverstanden.
                  </p>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
