'use client';

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

const fadeInUp = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] }
};

const stagger = {
  animate: {
    transition: {
      staggerChildren: 0.1
    }
  }
};

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">
      {/* Hero Section */}
      <section className="relative min-h-[40vh] flex items-center pt-32 pb-20">
        <div className="absolute inset-0 z-0">
          <div 
            className="absolute inset-0 bg-cover bg-center"
            style={{ backgroundImage: 'url("/media/laying/iStock-1282259999.jpg")' }}
          />
          <div className="absolute inset-0 bg-gradient-to-r from-white via-white/95 to-white/40" />
        </div>

        <div className="container-custom relative z-10">
          <motion.div 
            initial="initial"
            animate="animate"
            variants={stagger}
            className="max-w-3xl"
          >
            <motion.span variants={fadeInUp} className="text-accent font-bold uppercase tracking-widest text-sm mb-4 block">Kontakt</motion.span>
            <motion.h1 
              variants={fadeInUp}
              className="text-5xl md:text-6xl font-extrabold text-primary mb-8 leading-tight"
            >
              Lassen Sie uns <span className="text-accent">sprechen</span>
            </motion.h1>
            <motion.p 
              variants={fadeInUp}
              className="text-slate-600 text-xl md:text-2xl leading-relaxed"
            >
              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
            </motion.p>
          </motion.div>
        </div>
      </section>

      <section className="bg-slate-50">
        <div className="container-custom">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 md:gap-24">
            <motion.div 
              variants={stagger}
              initial="initial"
              whileInView="animate"
              viewport={{ once: true }}
              className="space-y-8"
            >
              <motion.div 
                variants={fadeInUp}
                whileHover={{ x: 5 }}
                className="card-modern !p-8 flex gap-6 items-start"
              >
                <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
                  <Mail size={24} />
                </div>
                <div>
                  <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">E-Mail</h4>
                  <a href="mailto:info@mb-grid-solutions.com" className="text-primary text-xl font-bold hover:text-accent transition-colors">
                    info@mb-grid-solutions.com
                  </a>
                </div>
              </motion.div>

              <motion.div 
                variants={fadeInUp}
                whileHover={{ x: 5 }}
                className="card-modern !p-8 flex gap-6 items-start"
              >
                <div className="w-14 h-14 rounded-2xl bg-accent/10 text-accent flex items-center justify-center shrink-0">
                  <MapPin size={24} />
                </div>
                <div>
                  <h4 className="text-slate-500 font-bold text-xs uppercase tracking-widest mb-2">Anschrift</h4>
                  <p className="text-primary text-xl font-bold leading-relaxed">
                    MB Grid Solutions GmbH<br />
                    Raiffeisenstraße 22<br />
                    73630 Remshalden
                  </p>
                </div>
              </motion.div>
            </motion.div>

            <motion.div 
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              className="bg-white p-8 md:p-12 rounded-[2.5rem] border border-slate-100 shadow-xl"
            >
              {submitted ? (
                <motion.div 
                  initial={{ opacity: 0, scale: 0.9 }}
                  animate={{ opacity: 1, scale: 1 }}
                  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)}
                    className="btn-primary"
                  >
                    Weitere Nachricht
                  </button>
                </motion.div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <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"
                      />
                    </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"
                      />
                    </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"
                    />
                  </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"
                    ></textarea>
                  </div>
                  
                  <button
                    type="submit"
                    disabled={loading}
                    className="btn-accent w-full py-5 text-lg group"
                  >
                    {loading ? 'Wird gesendet...' : 'Nachricht senden'}
                    <Send className="ml-3 transition-transform group-hover:translate-x-1 group-hover:-translate-y-1" size={20} />
                  </button>
                  
                  <p className="text-xs text-slate-400 text-center">
                    * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
                    <Link href="/datenschutz" className="text-accent hover:underline font-semibold">
                      Datenschutzerklärung
                    </Link>{' '}
                    einverstanden.
                  </p>
                </form>
              )}
            </motion.div>
          </div>
        </div>
      </section>
    </div>
  );
}
