import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Contact",
  openGraph: {
    title: "Home",
    description: "Home — Contact",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-white flex items-center justify-center px-4">
    <div className="min-w-0 w-full max-w-2xl py-20">
      <section className="w-full text-center mb-10">
        <h1 className="text-4xl font-bold text-3xl font-bold text-gray-900 mb-3">Get in Touch</h1>
        <p className="text-base text-gray-500 max-w-md mx-auto">Have a question or want to work together? Fill out the form below and we&apos;ll get back to you within 24 hours.</p>
      </section>
      <div className="bg-gray-50 rounded-2xl p-8">
        <div className="grid min-w-0 grid grid-cols-2 gap-4 mb-5">
          <div className="min-w-0 space-y-1.5">
            <p className="text-base text-sm font-medium text-gray-700">First name</p>
            <div className="space-y-1.5 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500">
              <input type="text" name="field-contac" placeholder="Jane" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
            </div>
          </div>
          <div className="min-w-0 space-y-1.5">
            <p className="text-base text-sm font-medium text-gray-700">Last name</p>
            <div className="space-y-1.5 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500">
              <input type="text" name="field-contac" placeholder="Doe" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
            </div>
          </div>
        </div>
        <div className="min-w-0 space-y-1.5 mb-5">
          <p className="text-base text-sm font-medium text-gray-700">Email address</p>
          <div className="space-y-1.5 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500">
            <input type="email" name="field-contac" placeholder="jane@example.com" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
          </div>
        </div>
        <div className="min-w-0 space-y-1.5 mb-5">
          <p className="text-base text-sm font-medium text-gray-700">Subject</p>
          <div className="space-y-1.5 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500">
            <select name="choice-contac" defaultValue="" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
              <option value="">Select a subject</option>
              <option value="General Inquiry">General Inquiry</option>
              <option value="Technical Support">Technical Support</option>
              <option value="Sales Question">Sales Question</option>
              <option value="Partnership Opportunity">Partnership Opportunity</option>
              <option value="Other">Other</option>
            </select>
          </div>
        </div>
        <div className="min-w-0 space-y-1.5 mb-6">
          <p className="text-base text-sm font-medium text-gray-700">Message</p>
          <div className="space-y-1.5 w-full border border-gray-300 rounded-lg px-4 py-2.5 text-sm bg-white focus:ring-2 focus:ring-blue-500 resize-none">
            <textarea name="message-contac" placeholder="Tell us more about your inquiry..." rows={5} className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
          </div>
        </div>
        <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition">Send Message</button>