"use client";

import Link from "next/link";
import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="mb-12 text-center">
          <Link
            href="/"
            className="inline-flex items-center text-[#FF7518] hover:text-[#ff4f00] mb-6 transition-colors"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="mr-2"
            >
              <path d="m12 19-7-7 7-7" />
              <path d="M19 12H5" />
            </svg>
            Back To Home
          </Link>
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            Contact Us
          </h1>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            We look forward to hearing from you and helping you find the perfect
            cloud solution for your needs. Our team of experts is ready to
            assist you with any questions or concerns you may have.
          </p>
        </div>

        {/* Contact Form Component */}
        <div className="mb-12">
          <ContactForm />
        </div>

        {/* Call to Action */}
        <div className="text-center bg-white rounded-xl border border-[#FF7518] shadow p-8">
          <p className="text-lg text-gray-700 mb-4">
            Looking to start a project with us?
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
            <Link
              href="/signup"
              className="px-6 py-3 bg-[#FF7518] text-white rounded-md font-semibold hover:bg-[#ff4f00] transition-colors"
            >
              Create an account
            </Link>
            <span className="text-gray-500">or</span>
            <Link
              href="/"
              className="px-6 py-3 border border-[#FF7518] text-[#FF7518] rounded-md font-semibold hover:bg-[#FF7518] hover:text-white transition-colors"
            >
              Schedule a consultation
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}