manoon-headless/src/app/[locale]/contact/page.tsx

"use client";

import { useState } from "react";
import { useTranslations, useLocale } from "next-intl";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Mail, MapPin, Truck, Check } from "lucide-react";

export default function ContactPage() {
  const t = useTranslations("Contact");
  const locale = useLocale();
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    message: "",
  });
  const [submitted, setSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setSubmitted(true);
  };

  return (
    <>
      <Header locale={locale} />
      <main className="min-h-screen bg-white">
        <div className="pt-[104px]">
          <div className="container py-12 md:py-16">
            <div className="max-w-2xl mx-auto text-center">
              <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">
                {t("subtitle")}
              </span>
              <h1 className="text-4xl md:text-5xl font-medium tracking-tight mb-4">
                {t("title")}
              </h1>
              <p className="text-[#666666]">
                {t("getInTouchDesc")}
              </p>
            </div>
          </div>
        </div>

        <section className="py-12 md:py-16">
          <div className="container">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20">
              <div>
                <h2 className="text-2xl font-medium mb-6">
                  {t("getInTouch")}
                </h2>
                <p className="text-[#666666] mb-8 leading-relaxed">
                  {t("getInTouchDesc")}
                </p>

                <div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
                      <Mail className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className="font-medium mb-1">{t("email")}</h3>
                      <p className="text-[#666666] text-sm">hello@manoonoils.com</p>
                      <p className="text-[#999999] text-xs mt-1">{t("emailReply")}</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
                      <Truck className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className="font-medium mb-1">{t("shippingTitle")}</h3>
                      <p className="text-[#666666] text-sm">{t("freeShipping")}</p>
                      <p className="text-[#999999] text-xs mt-1">{t("deliveryTime")}</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-12 h-12 rounded-full bg-[#f8f9fa] flex items-center justify-center flex-shrink-0">
                      <MapPin className="w-5 h-5 text-[#666666]" strokeWidth={1.5} />
                    </div>
                    <div>
                      <h3 className="font-medium mb-1">{t("location")}</h3>
                      <p className="text-[#666666] text-sm">{t("locationDesc")}</p>
                      <p className="text-[#999999] text-xs mt-1">{t("worldwideShipping")}</p>
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-[#f8f9fa] p-8 md:p-10">
                {submitted ? (
                  <div className="text-center py-12">
                    <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-4">
                      <Check className="w-8 h-8 text-green-600" strokeWidth={1.5} />
                    </div>
                    <h3 className="text-xl font-medium mb-2">{t("thankYou")}</h3>
                    <p className="text-[#666666]">
                      {t("thankYouDesc")}
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    <div>
                      <label htmlFor="name" className="block text-sm font-medium mb-2">
                        {t("name")}
                      </label>
                      <input
                        type="text"
                        id="name"
                        required
                        value={formData.name}
                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                        className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
                        placeholder={t("namePlaceholder")}
                      />
                    </div>

                    <div>
                      <label htmlFor="email" className="block text-sm font-medium mb-2">
                        {t("emailField")}
                      </label>
                      <input
                        type="email"
                        id="email"
                        required
                        value={formData.email}
                        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                        className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors"
                        placeholder={t("emailPlaceholder")}
                      />
                    </div>

                    <div>
                      <label htmlFor="message" className="block text-sm font-medium mb-2">
                        {t("message")}
                      </label>
                      <textarea
                        id="message"
                        required
                        rows={5}
                        value={formData.message}
                        onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                        className="w-full px-4 py-3 bg-white border border-[#e5e5e5] focus:outline-none focus:border-black transition-colors resize-none"
                        placeholder={t("messagePlaceholder")}
                      />
                    </div>

                    <button
                      type="submit"
                      className="w-full py-4 bg-black text-white text-sm uppercase tracking-[0.1em] font-medium hover:bg-[#333333] transition-colors"
                    >
                      {t("sendMessage")}
                    </button>
                  </form>
                )}
              </div>
            </div>
          </div>
        </section>

        <section className="py-16 md:py-24 border-t border-[#e5e5e5]">
          <div className="container">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-medium text-center mb-12">
                {t("faqTitle")}
              </h2>

              <div className="space-y-6">
                {[
                  { q: t("faq1q"), a: t("faq1a") },
                  { q: t("faq2q"), a: t("faq2a") },
                  { q: t("faq3q"), a: t("faq3a") },
                  { q: t("faq4q"), a: t("faq4a") },
                ].map((faq, index) => (
                  <div key={index} className="border-b border-[#e5e5e5] pb-6">
                    <h3 className="font-medium mb-2">{faq.q}</h3>
                    <p className="text-[#666666] text-sm leading-relaxed">{faq.a}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </main>

      <div className="pt-16">
        <Footer locale={locale} />
      </div>
    </>
  );
}