'use client';
import React from 'react';
import Link from 'next/link';

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gray-50 flex flex-col font-sans">
      <nav className="bg-gray-900 border-b border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <Link href="/" className="flex items-center gap-3">
              <div className="w-10 h-10 bg-indigo-600 rounded-xl flex items-center justify-center">
                <span className="text-white font-black text-xl tracking-tighter">CQ</span>
              </div>
              <span className="font-extrabold text-2xl tracking-tight text-white">CK-QR</span>
            </Link>
          </div>
        </div>
      </nav>
      <main className="flex-1 max-w-4xl mx-auto w-full px-6 py-16">
        <h1 className="text-5xl font-black text-gray-900 mb-6">Contact Sales</h1>
        <p className="text-xl text-gray-600 mb-10 leading-relaxed">
          Looking for a custom enterprise plan or have technical questions? We're here to help.
        </p>
        <div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
          <form className="space-y-6">
            <div className="grid grid-cols-2 gap-6">
               <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">First Name</label>
                  <input type="text" className="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3" placeholder="Jane" />
               </div>
               <div>
                  <label className="block text-sm font-bold text-gray-700 mb-2">Last Name</label>
                  <input type="text" className="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3" placeholder="Doe" />
               </div>
            </div>
            <div>
               <label className="block text-sm font-bold text-gray-700 mb-2">Work Email</label>
               <input type="email" className="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3" placeholder="jane@company.com" />
            </div>
            <div>
               <label className="block text-sm font-bold text-gray-700 mb-2">Message</label>
               <textarea rows={4} className="w-full bg-gray-50 border border-gray-300 rounded-xl px-4 py-3" placeholder="How can we help?"></textarea>
            </div>
            <button type="button" onClick={(e) => { e.preventDefault(); alert('Form submitted!'); }} className="bg-indigo-600 text-white font-bold py-4 px-8 rounded-xl hover:bg-indigo-700 transition-colors w-full sm:w-auto">
               Send Message
            </button>
          </form>
        </div>
      </main>
    </div>
  );
}
