import type { Metadata } from "next";
import { company } from "@/lib/content";

export const metadata: Metadata = {
  title: "Contact — Fabricant Boulanger",
  description: "Contactez JLS, fabricant boulanger à Weyersheim, en Alsace.",
};

export default function ContactPage({
  searchParams,
}: {
  searchParams: { success?: string };
}) {
  const showSuccess = searchParams.success === 'true';
  
  return (
    <div className="mx-auto max-w-6xl px-6 py-20">
      <p className="font-display text-sm uppercase tracking-[0.35em] text-gold">Contact</p>
      <h1 className="mt-4 max-w-2xl font-display text-4xl font-semibold text-cream text-balance sm:text-5xl">
        Rapprochons-nous
      </h1>
      <p className="mt-4 max-w-xl text-cream-dim">
        Une question, un appel d&rsquo;offres, une demande de catalogue ? Écrivez-nous, notre
        équipe vous répond rapidement.
      </p>

      {showSuccess && (
        <div className="mt-6 rounded-lg border border-green-500 bg-green-500/10 p-4 text-green-500">
          Votre message a bien été envoyé. Nous vous répondrons rapidement.
        </div>
      )}

      <div className="mt-14 grid gap-10 lg:grid-cols-2">
        <form action="/api/contact" method="POST" className="space-y-5 rounded-2xl border border-surface-2 bg-surface p-8">
          <div>
            <label htmlFor="name" className="text-sm text-cream-dim">Nom</label>
            <input id="name" name="name" type="text" required
              className="mt-1 w-full rounded-lg border border-surface-2 bg-bg px-4 py-2.5 text-cream outline-none focus:border-gold" />
          </div>
          <div>
            <label htmlFor="email" className="text-sm text-cream-dim">E-mail</label>
            <input id="email" name="email" type="email" required
              className="mt-1 w-full rounded-lg border border-surface-2 bg-bg px-4 py-2.5 text-cream outline-none focus:border-gold" />
          </div>
          <div>
            <label htmlFor="subject" className="text-sm text-cream-dim">Sujet</label>
            <input id="subject" name="subject" type="text"
              className="mt-1 w-full rounded-lg border border-surface-2 bg-bg px-4 py-2.5 text-cream outline-none focus:border-gold" />
          </div>
          <div>
            <label htmlFor="message" className="text-sm text-cream-dim">Message</label>
            <textarea id="message" name="message" rows={5} required
              className="mt-1 w-full rounded-lg border border-surface-2 bg-bg px-4 py-2.5 text-cream outline-none focus:border-gold" />
          </div>
          <button type="submit"
            className="rounded-full bg-gold px-7 py-3 font-medium text-bg transition-transform hover:scale-[1.03]">
            Envoyer le message
          </button>
          <p className="text-xs text-cream-dim/60">
            Les messages sont envoyés directement à notre équipe.
          </p>
        </form>

        <div className="rounded-2xl border border-surface-2 bg-surface p-8">
          <h2 className="font-display text-xl text-cream">Nos coordonnées</h2>
          <ul className="mt-5 space-y-4 text-cream-dim">
            <li>
              <p className="text-xs uppercase tracking-[0.2em] text-gold">Fournil</p>
              <p className="mt-1">{company.fournil}</p>
            </li>
            <li>
              <p className="text-xs uppercase tracking-[0.2em] text-gold">Siège social</p>
              <p className="mt-1">{company.address}</p>
            </li>
            <li>
              <p className="text-xs uppercase tracking-[0.2em] text-gold">E-mail</p>
              <a href={`mailto:${company.email}`} className="mt-1 block hover:text-gold-light">{company.email}</a>
            </li>
            <li className="mt-4">
              <p className="text-xs uppercase tracking-[0.2em] text-gold">Localisation</p>
              <div className="mt-2">
                <iframe
                  src="https://www.google.com/maps?q=7+rue+de+la+For%C3%AAt+Noire,+67850+Weyersheim&output=embed"
                  width="100%"
                  height="200"
                  className="rounded-xl border border-surface-2"
                  style={{ border: 0 }}
                  allowFullScreen
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade"
                />
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}