mb-grid-solutions.com/components/ContactContent.tsx

"use client";

import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { Mail, MapPin, CheckCircle } from "lucide-react";
import { Button } from "./Button";
import { Counter } from "./Counter";
import { Reveal } from "./Reveal";
import { TechBackground } from "./TechBackground";
import { StatusModal } from "./StatusModal";
import { useTranslations } from "next-intl";

export default function Contact() {
  const t = useTranslations("Contact");
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const [statusModal, setStatusModal] = useState({
    isOpen: false,
    type: "success" as "success" | "error",
    title: "",
    message: "",
    buttonText: "",
  });

  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);
        setStatusModal({
          isOpen: true,
          type: "success",
          title: t("form.successTitle"),
          message: t("form.successMessage"),
          buttonText: t("form.close") || "Schließen",
        });
      } else {
        const err = await response.json();
        const errorMsg = t.has(`form.${err.error}`)
          ? t(`form.${err.error}`)
          : err.error || t("form.errorMessage");

        setStatusModal({
          isOpen: true,
          type: "error",
          title: t("form.errorTitle"),
          message: errorMsg,
          buttonText: t("form.tryAgain") || "Erneut versuchen",
        });
      }
    } catch {
      setStatusModal({
        isOpen: true,
        type: "error",
        title: t("form.errorTitle"),
        message: t("form.errorMessage"),
        buttonText: t("form.tryAgain") || "Erneut versuchen",
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="overflow-hidden relative">
      {/* Hero Section */}
      <section className="relative min-h-[40vh] flex items-center pt-44 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">
                {t("hero.tagline")}
              </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">
                {t.rich("hero.title", {
                  accent: (chunks) => (
                    <span className="text-accent">{chunks}</span>
                  ),
                })}
              </h1>
            </Reveal>
            <Reveal delay={0.3}>
              <p className="text-slate-600 text-lg md:text-2xl leading-relaxed">
                {t("hero.subtitle")}
              </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">
                      {t("info.email")}
                    </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">
                      {t("info.address")}
                    </h4>
                    <p className="text-white text-lg md:text-xl font-bold leading-relaxed">
                      {t("info.company")}
                      <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">
                      {t("form.successTitle")}
                    </h3>
                    <p className="text-slate-600 text-lg mb-10">
                      {t("form.successMessage")}
                    </p>
                    <Button onClick={() => setSubmitted(false)}>
                      {t("form.moreMessages")}
                    </Button>
                  </div>
                ) : (
                  <form
                    onSubmit={handleSubmit}
                    aria-label={t("form.submit")}
                    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"
                        >
                          {t("form.name")}
                        </label>
                        <input
                          type="text"
                          id="name"
                          name="name"
                          required
                          placeholder={t("form.namePlaceholder")}
                          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"
                        >
                          {t("form.company")}
                        </label>
                        <input
                          type="text"
                          id="company"
                          name="company"
                          placeholder={t("form.companyPlaceholder")}
                          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"
                      >
                        {t("form.email")}
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        required
                        placeholder={t("form.emailPlaceholder")}
                        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"
                      >
                        {t("form.message")}
                      </label>
                      <textarea
                        id="message"
                        name="message"
                        required
                        rows={5}
                        placeholder={t("form.messagePlaceholder")}
                        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 ? t("form.submitting") : t("form.submit")}
                    </Button>

                    <p className="text-xs text-slate-400 text-center">
                      {t.rich("form.privacyNote", {
                        link: (chunks) => (
                          <Link
                            href="/datenschutz"
                            className="text-accent hover:underline font-semibold"
                          >
                            {chunks}
                          </Link>
                        ),
                      })}
                    </p>
                  </form>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      <StatusModal
        isOpen={statusModal.isOpen}
        onClose={() => setStatusModal({ ...statusModal, isOpen: false })}
        type={statusModal.type}
        title={statusModal.title}
        message={statusModal.message}
        buttonText={statusModal.buttonText}
      />
    </div>
  );
}