import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { Mail, Phone, MapPin, Send, CheckCircle } from 'lucide-react';

const 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="container">
      <section>
        <div className="grid contact-grid" style={{
          gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
          gap: 'clamp(2rem, 6vw, 4rem)'
        }}>
          <div>
            <h1>Kontakt</h1>
            <p style={{
              fontSize: 'clamp(1.0625rem, 2.5vw, 1.1rem)',
              color: 'var(--text-secondary)',
              marginBottom: 'var(--spacing-2xl)',
              lineHeight: 1.65
            }}>
              Haben Sie Fragen zu einem Projekt oder benötigen Sie technische Beratung? Wir freuen uns auf Ihre Nachricht.
            </p>

            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 'var(--spacing-xl)'
            }}>
              <a
                href="mailto:info@mb-grid-solutions.com"
                className="contact-info-item"
                style={{
                  display: 'flex',
                  gap: 'var(--spacing-lg)',
                  alignItems: 'flex-start',
                  textDecoration: 'none'
                }}
                aria-label="E-Mail an info@mb-grid-solutions.com senden"
              >
                <div style={{
                  color: 'var(--accent-green)',
                  background: 'white',
                  padding: 'var(--spacing-md)',
                  border: '1px solid var(--secondary-bg)',
                  borderRadius: '12px',
                  flexShrink: 0
                }}>
                  <Mail size={24} strokeWidth={2} />
                </div>
                <div>
                  <h4 style={{
                    marginBottom: '0.25rem',
                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
                    fontWeight: 600
                  }}>
                    E-Mail
                  </h4>
                  <span style={{
                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                    fontWeight: 500,
                    color: 'var(--primary-color)'
                  }}>
                    info@mb-grid-solutions.com
                  </span>
                </div>
              </a>
              <a
                href="tel:+49123456789"
                className="contact-info-item"
                style={{
                  display: 'flex',
                  gap: 'var(--spacing-lg)',
                  alignItems: 'flex-start',
                  textDecoration: 'none'
                }}
                aria-label="Anrufen unter +49 (0) 123 456789"
              >
                <div style={{
                  color: 'var(--accent-green)',
                  background: 'white',
                  padding: 'var(--spacing-md)',
                  border: '1px solid var(--secondary-bg)',
                  borderRadius: '12px',
                  flexShrink: 0
                }}>
                  <Phone size={24} strokeWidth={2} />
                </div>
                <div>
                  <h4 style={{
                    marginBottom: '0.25rem',
                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
                    fontWeight: 600
                  }}>
                    Telefon
                  </h4>
                  <span style={{
                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                    fontWeight: 500,
                    color: 'var(--primary-color)'
                  }}>
                    +49 (0) 123 456789
                  </span>
                </div>
              </a>
              <div
                className="contact-info-item"
                style={{
                  display: 'flex',
                  gap: 'var(--spacing-lg)',
                  alignItems: 'flex-start'
                }}
              >
                <div style={{
                  color: 'var(--accent-green)',
                  background: 'white',
                  padding: 'var(--spacing-md)',
                  border: '1px solid var(--secondary-bg)',
                  borderRadius: '12px',
                  flexShrink: 0
                }}>
                  <MapPin size={24} strokeWidth={2} />
                </div>
                <div>
                  <h4 style={{
                    marginBottom: '0.25rem',
                    fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
                    fontWeight: 600
                  }}>
                    Anschrift
                  </h4>
                  <p style={{
                    fontSize: 'clamp(1rem, 2.5vw, 1.1rem)',
                    fontWeight: 500,
                    color: 'var(--primary-color)',
                    lineHeight: 1.6
                  }}>
                    MB Grid Solutions GmbH<br />
                    Raiffeisenstraße 22<br />
                    73630 Remshalden
                  </p>
                </div>
              </div>
            </div>
          </div>

          <div className="card">
            {submitted ? (
              <div style={{
                textAlign: 'center',
                padding: 'clamp(2rem, 6vw, 3rem) 0'
              }}>
                <div style={{
                  color: 'var(--accent-green)',
                  marginBottom: 'var(--spacing-lg)',
                  display: 'flex',
                  justifyContent: 'center'
                }}>
                  <CheckCircle size={64} strokeWidth={2} />
                </div>
                <h3 style={{
                  fontSize: 'clamp(1.25rem, 4vw, 1.5rem)',
                  marginBottom: 'var(--spacing-md)'
                }}>
                  Nachricht gesendet
                </h3>
                <p style={{
                  color: 'var(--text-secondary)',
                  fontSize: 'clamp(0.9375rem, 2vw, 1rem)',
                  lineHeight: 1.65,
                  marginBottom: 'var(--spacing-xl)'
                }}>
                  Vielen Dank für Ihre Anfrage. Wir werden uns in Kürze bei Ihnen melden.
                </p>
                <button
                  onClick={() => setSubmitted(false)}
                  className="cta-button"
                  aria-label="Weitere Nachricht senden"
                >
                  Weitere Nachricht
                </button>
              </div>
            ) : (
              <form onSubmit={handleSubmit} style={{
                display: 'flex',
                flexDirection: 'column'
              }}>
                <div className="grid contact-form-grid" style={{
                  gridTemplateColumns: '1fr 1fr',
                  gap: 'var(--spacing-md)'
                }}>
                  <div>
                    <label
                      htmlFor="name"
                      style={{
                        display: 'block',
                        marginBottom: 'var(--spacing-xs)',
                        fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                        fontWeight: 600
                      }}
                    >
                      Name *
                    </label>
                    <input
                      type="text"
                      id="name"
                      name="name"
                      required
                      minLength={2}
                      maxLength={100}
                      placeholder="Ihr Name"
                      aria-required="true"
                    />
                  </div>
                  <div>
                    <label
                      htmlFor="company"
                      style={{
                        display: 'block',
                        marginBottom: 'var(--spacing-xs)',
                        fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                        fontWeight: 600
                      }}
                    >
                      Firma
                    </label>
                    <input
                      type="text"
                      id="company"
                      name="company"
                      placeholder="Ihr Unternehmen"
                    />
                  </div>
                </div>
                
                <label
                  htmlFor="email"
                  style={{
                    display: 'block',
                    marginBottom: 'var(--spacing-xs)',
                    fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                    fontWeight: 600
                  }}
                >
                  E-Mail *
                </label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  required
                  placeholder="ihre@email.de"
                  aria-required="true"
                />
                
                <label
                  htmlFor="message"
                  style={{
                    display: 'block',
                    marginBottom: 'var(--spacing-xs)',
                    fontSize: 'clamp(0.875rem, 2vw, 0.9rem)',
                    fontWeight: 600
                  }}
                >
                  Nachricht *
                </label>
                <textarea
                  id="message"
                  name="message"
                  required
                  minLength={20}
                  maxLength={4000}
                  rows={6}
                  placeholder="Wie können wir Ihnen helfen?"
                  aria-required="true"
                ></textarea>
                
                <div className="visually-hidden" style={{ display: 'none' }}>
                  <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="cta-button"
                  style={{ alignSelf: 'flex-start' }}
                  aria-label={loading ? 'Nachricht wird gesendet' : 'Nachricht senden'}
                >
                  {loading ? 'Wird gesendet...' : 'Nachricht senden'} <Send size={18} strokeWidth={2.5} />
                </button>
                <p style={{
                  fontSize: 'clamp(0.6875rem, 2vw, 0.75rem)',
                  marginTop: 'var(--spacing-lg)',
                  color: 'var(--text-secondary)',
                  lineHeight: 1.5
                }}>
                  * Pflichtfelder. Mit dem Absenden erklären Sie sich mit unserer{' '}
                  <Link
                    to="/datenschutz"
                    style={{
                      textDecoration: 'underline',
                      fontWeight: 500
                    }}
                  >
                    Datenschutzerklärung
                  </Link>{' '}
                  einverstanden.
                </p>
              </form>
            )}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Contact;
