import { Mail, MapPin, Send } from "lucide-react";
import { siteMetadata } from "@/lib/seo";

export const metadata = siteMetadata({ title: "Contact", path: "/contact" });

export default function ContactPage() {
  return (
    <section className="px-4 py-16 sm:px-6 lg:px-8">
      <div className="mx-auto grid max-w-6xl gap-8 lg:grid-cols-[.9fr_1.1fr]">
        <div>
          <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Contact</p>
          <h1 className="mt-4 font-display text-5xl font-black text-white">Pitch stories, partnerships, and travel intelligence</h1>
          <div className="mt-8 space-y-4 text-white/64">
            <p className="flex items-center gap-3"><Mail className="text-cyanx" /> hello@theinfomix.com</p>
            <p className="flex items-center gap-3"><MapPin className="text-cyanx" /> Global digital newsroom</p>
          </div>
        </div>
        <form className="glass rounded-lg p-6">
          <div className="grid gap-4 sm:grid-cols-2">
            <input className="rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-cyanx" placeholder="Name" />
            <input className="rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-cyanx" placeholder="Email" />
          </div>
          <input className="mt-4 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-cyanx" placeholder="Subject" />
          <textarea className="mt-4 min-h-40 w-full rounded-lg border border-white/10 bg-white/5 px-4 py-3 text-white outline-none focus:border-cyanx" placeholder="Message" />
          <button className="mt-4 inline-flex items-center gap-2 rounded-full bg-cyanx px-5 py-3 text-sm font-black text-ink">
            <Send size={17} /> Send message
          </button>
        </form>
      </div>
    </section>
  );
}