e-tib.com/components/forms/ContactForm.tsx

'use client';

import * as React from 'react';
import { motion } from 'framer-motion';

export function ContactForm() {
  const [status, setStatus] = React.useState<'idle' | 'loading' | 'success' | 'error'>('idle');

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setStatus('loading');
    
    // Simulate server action using @mintel/mail or API route
    setTimeout(() => {
      setStatus('success');
    }, 1500);
  };

  return (
    <div className="bg-white rounded-2xl p-8 md:p-12 shadow-xl border border-neutral-100 max-w-2xl mx-auto relative overflow-hidden">
      {/* Decorative accent */}
      <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-primary to-primary-light" />
      
      <div className="mb-8">
        <h3 className="font-heading text-3xl font-extrabold text-neutral-dark mb-2">Projektanfrage stellen</h3>
        <p className="text-text-secondary">Hinterlassen Sie uns Ihre Kontaktdaten und Details zu Ihrem Vorhaben. Wir melden uns umgehend bei Ihnen.</p>
      </div>

      {status === 'success' ? (
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          className="bg-primary/10 border border-primary text-primary p-6 rounded-xl flex items-start gap-4"
        >
          <div className="bg-primary text-white rounded-full p-1 mt-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
          </div>
          <div>
            <h4 className="font-bold text-lg mb-1">Anfrage erfolgreich gesendet</h4>
            <p>Vielen Dank für Ihr Interesse an der E-TIB Gruppe. Ein Ansprechpartner wird sich zeitnah mit Ihnen in Verbindung setzen.</p>
          </div>
        </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="firstName" className="block text-sm font-semibold text-neutral-dark">Vorname</label>
              <input 
                id="firstName" 
                required 
                disabled={status === 'loading'}
                className="w-full bg-neutral-50 px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                placeholder="Max"
              />
            </div>
            <div className="space-y-2">
              <label htmlFor="lastName" className="block text-sm font-semibold text-neutral-dark">Nachname</label>
              <input 
                id="lastName" 
                required 
                disabled={status === 'loading'}
                className="w-full bg-neutral-50 px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
                placeholder="Mustermann"
              />
            </div>
          </div>

          <div className="space-y-2">
            <label htmlFor="email" className="block text-sm font-semibold text-neutral-dark">E-Mail Adresse</label>
            <input 
              id="email" 
              type="email" 
              required 
              disabled={status === 'loading'}
              className="w-full bg-neutral-50 px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
              placeholder="max@beispiel.de"
            />
          </div>

          <div className="space-y-2">
            <label htmlFor="company" className="block text-sm font-semibold text-neutral-dark">Unternehmen (Optional)</label>
            <input 
              id="company" 
              disabled={status === 'loading'}
              className="w-full bg-neutral-50 px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
              placeholder="Firma GmbH"
            />
          </div>

          <div className="space-y-2">
            <label htmlFor="message" className="block text-sm font-semibold text-neutral-dark">Ihre Nachricht</label>
            <textarea 
              id="message" 
              required 
              disabled={status === 'loading'}
              rows={5}
              className="w-full bg-neutral-50 px-4 py-3 rounded-lg border border-neutral-200 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all resize-y"
              placeholder="Beschreiben Sie kurz Ihr Anliegen..."
            />
          </div>

          <button 
            type="submit" 
            disabled={status === 'loading'}
            className="w-full bg-primary hover:bg-primary-dark text-white font-bold text-lg py-4 rounded-xl transition-all shadow-md hover:shadow-lg disabled:opacity-70 disabled:cursor-not-allowed flex items-center justify-center gap-2"
          >
            {status === 'loading' ? (
              <>
                <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle><path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                Wird gesendet...
              </>
            ) : (
              'Nachricht absenden'
            )}
          </button>
          
          <p className="text-xs text-text-light text-center">
            Mit dem Absenden erkläre ich mich mit der Datenschutzerklärung einverstanden.
          </p>
        </form>
      )}
    </div>
  );
}