'use client';

import React, { useState } from 'react';
import Image from 'next/image';
import { Mail, MapPin, CheckCircle } from 'lucide-react';
import { Button } from './Button';
import { Counter } from './Counter';
import { Reveal } from './Reveal';
import { TechBackground } from './TechBackground';

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="overflow-hidden relative">
      {/* Hero Section */}
      <section className="relative min-h-[40vh] flex items-center pt-32 pb-20 overflow-hidden">
        <div className="absolute inset-0 z-0">
          <Image
            src="/media/laying/contact-hero.jpg"
            alt="Contact MB Grid Solutions"
            fill
            className="object-cover"
            priority
          />
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
          <TechBackground />
        </div>

        <div className="container-custom relative z-10">
          <div className="text-left relative">
            <div className="section-number">01</div>
            <Reveal delay={0.1}>
              <span className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</span>
            </Reveal>
            <Reveal delay={0.2}>
              <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold text-primary mb-6 md:mb-8 leading-tight">
                Lassen Sie uns <span className="text-accent">sprechen</span>
              </h1>
            </Reveal>
            <Reveal delay={0.3}>
              <p className="text-slate-600 text-lg md:text-2xl leading-relaxed">
                Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
              </p>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="bg-slate-950 text-accent relative overflow-hidden">
        <TechBackground />
        <div className="container-custom relative z-10">
          <Counter value={2} className="section-number !text-white/5" />
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
            <div className="space-y-8">
              <Reveal delay={0.1}>
                <div className="bg-white/5 p-6 md:p-8 rounded-2xl border border-white/10 flex flex-col sm:flex-row gap-4 sm:gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
                  <div className="w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
                    <Mail size={24} />
                  </div>
                  <div className="relative z-10">
                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">E-Mail</h4>
                    <a href="mailto:info@mb-grid-solutions.com" className="text-white text-lg md:text-xl font-bold hover:text-accent transition-colors break-all">
                      info@mb-grid-solutions.com
                    </a>
                  </div>
                </div>
              </Reveal>

              <Reveal delay={0.2}>
                <div className="bg-white/5 p-6 md:p-8 rounded-2xl border border-white/10 flex flex-col sm:flex-row gap-4 sm:gap-6 items-start hover:translate-x-1 transition-transform duration-300 relative overflow-hidden">
                  <div className="w-12 h-12 md:w-14 md:h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0 relative z-10">
                    <MapPin size={24} />
                  </div>
                  <div className="relative z-10">
                    <h4 className="text-slate-400 font-bold text-xs uppercase tracking-widest mb-1 md:mb-2">Anschrift</h4>
                    <p className="text-white text-lg md:text-xl font-bold leading-relaxed">
                      MB Grid Solutions & Services GmbH<br />
                      Raiffeisenstraße 22<br />
                      73630 Remshalden
                    </p>
                  </div>
                </div>
              </Reveal>

              <Reveal delay={0.3}>
                <div className="w-full h-[300px] rounded-[2.5rem] overflow-hidden border border-white/10 shadow-sm grayscale hover:grayscale-0 transition-all duration-700 relative group">
                  <div className="absolute inset-0 border-2 border-accent/0 group-hover:border-accent/20 transition-all duration-500 z-10 pointer-events-none rounded-[2.5rem]" />
                  <iframe 
                    width="100%" 
                    height="100%" 
                    frameBorder="0" 
                    scrolling="no" 
                    marginHeight={0} 
                    marginWidth={0} 
                    src="https://www.openstreetmap.org/export/embed.html?bbox=9.445,48.815,9.465,48.825&layer=mapnik&marker=48.8198,9.4552"
                  ></iframe>
                </div>
              </Reveal>
            </div>

            <Reveal delay={0.4}>
              <div className="bg-white p-6 md:p-12 rounded-3xl md:rounded-[2.5rem] border border-slate-100 shadow-xl relative overflow-hidden group">
                <div className="tech-corner top-6 left-6 border-t-2 border-l-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                <div className="tech-corner bottom-6 right-6 border-b-2 border-r-2 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                
                {submitted ? (
                  <div className="text-center py-12">
                    <div className="w-20 h-20 rounded-full bg-accent/10 text-accent flex items-center justify-center mx-auto mb-8">
                      <CheckCircle size={40} />
                    </div>
                    <h3 className="text-3xl font-bold text-primary mb-4">Nachricht gesendet</h3>
                    <p className="text-slate-600 text-lg mb-10">
                      Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
                    </p>
                    <Button onClick={() => setSubmitted(false)}>
                      Weitere Nachricht
                    </Button>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6 relative z-10">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div className="space-y-2">
                        <label htmlFor="name" className="text-sm font-bold text-slate-700 ml-1">Name *</label>
                        <input
                          type="text"
                          id="name"
                          name="name"
                          required
                          placeholder="Ihr Name"
                          className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all text-slate-900"
                        />
                      </div>
                      <div className="space-y-2">
                        <label htmlFor="company" className="text-sm font-bold text-slate-700 ml-1">Firma</label>
                        <input
                          type="text"
                          id="company"
                          name="company"
                          placeholder="Ihr Unternehmen"
                          className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all text-slate-900"
                        />
                      </div>
                    </div>
                    
                    <div className="space-y-2">
                      <label htmlFor="email" className="text-sm font-bold text-slate-700 ml-1">E-Mail *</label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        placeholder="ihre@email.de"
                        className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all text-slate-900"
                      />
                    </div>
                    
                    <div className="space-y-2">
                      <label htmlFor="message" className="text-sm font-bold text-slate-700 ml-1">Nachricht *</label>
                      <textarea
                        id="message"
                        name="message"
                        required
                        rows={5}
                        placeholder="Wie können wir Ihnen helfen?"
                        className="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:outline-none focus:border-accent focus:ring-4 focus:ring-accent/5 transition-all resize-none text-slate-900"
                      ></textarea>
                    </div>
                    
                    <Button type="submit" variant="accent" disabled={loading} className="w-full py-5 text-lg" showArrow>
                      {loading ? 'Wird gesendet...' : 'Nachricht senden'}
                    </Button>
                    
                    <p className="text-xs text-slate-400 text-center">
                      * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
                      <a href="/datenschutz" className="text-accent hover:underline font-semibold">
                        Datenschutzerklärung
                      </a>{' '}
                      einverstanden.
                    </p>
                  </form>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}