Webklar/src/pages/Contact.tsx

import { useState } from "react";
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { ArrowLeft, Send } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { createContactDocument } from "@/lib/appwrite";
import { trackFormSubmitted } from "@/lib/analytics";
import { usePageMeta } from "@/hooks/use-page-meta";

const Contact = () => {
  usePageMeta(
    "Kontakt & Potenzialanalyse",
    "Beschreiben Sie Ihr Projekt – WEBklar meldet sich innerhalb von 24 Stunden mit den nächsten Schritten. Unverbindlich und kostenlos."
  );

  const { toast } = useToast();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    company: "",
    message: "",
  });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setFormData((prev) => ({
      ...prev,
      [e.target.name]: e.target.value,
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      await createContactDocument(formData);
      trackFormSubmitted("contact");
      toast({
        title: "Nachricht gesendet!",
        description: "Wir melden uns innerhalb von 24 Stunden bei Ihnen.",
      });
      setFormData({ name: "", email: "", company: "", message: "" });
    } catch (err) {
      const message = err instanceof Error ? err.message : "Speichern fehlgeschlagen.";
      toast({
        variant: "destructive",
        title: "Fehler beim Senden",
        description: message,
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="min-h-screen bg-background">
      {/* Header */}
      <header className="fixed top-0 left-0 right-0 z-50 glass-nav py-4">
        <div className="container mx-auto px-6">
          <div className="flex items-center justify-between">
            <Link to="/" className="flex items-center gap-2 group">
              <span className="text-xl font-display font-medium text-foreground tracking-tight">
                Webklar
              </span>
            </Link>
            <Link to="/">
              <Button
                variant="ghost"
                className="text-muted-foreground hover:text-foreground"
              >
                <ArrowLeft className="w-4 h-4 mr-2" />
                Zurück
              </Button>
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="pt-32 pb-24">
        <div className="container mx-auto px-6">
          <div className="max-w-2xl mx-auto">
            {/* Header */}
            <div className="mb-12">
              <div className="label-tag mb-4">Kontakt</div>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-display font-medium text-foreground tracking-tight uppercase mb-6">
                Kostenlose
                <br />
                <span className="text-muted-foreground">Potenzialanalyse</span>
              </h1>
              <p className="text-muted-foreground text-lg">
                Kurz Ihr Ziel beschreiben – wir prüfen, wo Website, Automatisierung
                oder Vernetzung den größten Hebel haben. Antwort innerhalb von 24 Stunden,
                unverbindlich.
              </p>
            </div>

            {/* Contact Form */}
            <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 uppercase tracking-wider text-muted-foreground">
                    Name *
                  </Label>
                  <Input
                    id="name"
                    name="name"
                    type="text"
                    required
                    value={formData.name}
                    onChange={handleChange}
                    className="bg-card border-border focus:border-foreground transition-colors h-12"
                    placeholder="Ihr Name"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="email" className="text-sm uppercase tracking-wider text-muted-foreground">
                    E-Mail *
                  </Label>
                  <Input
                    id="email"
                    name="email"
                    type="email"
                    required
                    value={formData.email}
                    onChange={handleChange}
                    className="bg-card border-border focus:border-foreground transition-colors h-12"
                    placeholder="ihre@email.de"
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label htmlFor="company" className="text-sm uppercase tracking-wider text-muted-foreground">
                  Unternehmen
                </Label>
                <Input
                  id="company"
                  name="company"
                  type="text"
                  value={formData.company}
                  onChange={handleChange}
                  className="bg-card border-border focus:border-foreground transition-colors h-12"
                  placeholder="Ihr Unternehmen (optional)"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="message" className="text-sm uppercase tracking-wider text-muted-foreground">
                  Nachricht *
                </Label>
                <Textarea
                  id="message"
                  name="message"
                  required
                  value={formData.message}
                  onChange={handleChange}
                  className="bg-card border-border focus:border-foreground transition-colors min-h-[180px] resize-none"
                    placeholder="z. B. neue Website, CRM-Anbindung, weniger manuelle Abläufe …"
                />
              </div>

              <Button
                type="submit"
                disabled={isSubmitting}
                className="btn-minimal rounded-full px-8 py-6 text-base font-medium group w-full md:w-auto"
              >
                {isSubmitting ? (
                  "Wird gesendet..."
                ) : (
                  <>
                    Nachricht senden
                    <Send className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
                  </>
                )}
              </Button>
            </form>

            {/* Contact Info */}
            <div className="mt-16 pt-12 border-t border-border">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div>
                  <div className="label-tag mb-2">E-Mail</div>
                  <a
                    href="mailto:support@webklar.com"
                    className="text-foreground hover:text-muted-foreground transition-colors"
                  >
                    support@webklar.com
                  </a>
                </div>
                <div>
                  <div className="label-tag mb-2">Telefon</div>
                  <a
                    href="tel:+491704969375"
                    className="text-foreground hover:text-muted-foreground transition-colors"
                  >
                    0170 4969375
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default Contact;