import React from "react";
import type { Metadata } from "next";
import ContactForm from "@/components/ContactForm";
import { FiMapPin, FiPhone, FiMail, FiClock } from "react-icons/fi"; // Import icons

// SEO Metadata for the Contact page
export const metadata: Metadata = {
  title: "Contact Us | Owethu Managed Services (OMS)",
  description:
    "Get in touch with Owethu Managed Services. Contact us for IT solutions, resource augmentation, project management, and custom software development inquiries.",
  alternates: {
    canonical: "/contact",
  },
  openGraph: {
    title: "Contact OMS",
    description: "Reach out to OMS for expert IT services and solutions.",
    url: "https://oms.africa/contact", // Replace with your actual domain
    images: [
      {
        url: "/og-image-contact.jpg", // Create a specific OG image for contact
        width: 1200,
        height: 630,
        alt: "Contact Owethu Managed Services",
      },
    ],
  },
  twitter: {
    card: "summary_large_image",
    title: "Contact OMS",
    description: "Get in touch with Owethu Managed Services.",
    images: ["/og-image-contact.jpg"],
  },
};

// Contact Page Component
export default function ContactPage() {
  return (
    <div className="bg-gradient-to-b from-background to-secondary/50 text-foreground">
      {/* Hero Section */}
      <section className="py-20 md:py-28 text-center bg-primary/10 dark:bg-primary/5 border-b border-border">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl md:text-5xl font-bold mb-4 text-primary">
            Get In Touch
          </h1>
          <p className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
            We&apos;re here to help! Whether you have a question about our
            services, need assistance, or want to discuss a project, reach out
            and let us know.
          </p>
        </div>
      </section>

      {/* Main Content Area (Form + Info) */}
      <section className="py-16 md:py-24">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 md:gap-16 lg:gap-20 items-start">
            {/* Contact Information Section */}
            <div className="space-y-8 bg-card p-8 rounded-lg border border-border shadow-sm">
              <h2 className="text-3xl font-semibold mb-6 text-foreground">
                Contact Information
              </h2>

              <div className="flex items-start space-x-4">
                <FiMapPin className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
                <div>
                  <h3 className="text-lg font-medium text-foreground">
                    Our Office
                  </h3>
                  <address className="text-muted-foreground not-italic text-sm leading-relaxed">
                    Unit 10 B Centuria Park
                    <br />
                    265 Von Willich Avenue
                    <br />
                    Die Hoewes, Centurion, 0159
                    <br />
                    South Africa
                  </address>
                  {/* Optional: Link to Google Maps */}
                  <a
                    href="https://www.google.com/maps/place/Owethu+Managed+Services/@-25.863168,28.186075,17z/data=!3m1!4b1!4m6!3m5!1s0x1e9565b7018f5f9b:0x4d8a4ae3a2c0d9a1!8m2!3d-25.8631728!4d28.1886499!16s%2Fg%2F11h1_q_1_f?entry=ttu" // Replace with your actual Google Maps link
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm text-primary hover:underline mt-2 inline-block"
                  >
                    View on Google Maps
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FiPhone className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
                <div>
                  <h3 className="text-lg font-medium text-foreground">Phone</h3>
                  <a
                    href="tel:+27120513282"
                    className="text-muted-foreground hover:text-primary transition text-sm"
                  >
                    (012) 051 3282
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FiMail className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
                <div>
                  <h3 className="text-lg font-medium text-foreground">Email</h3>
                  <a
                    href="mailto:hello@oms.africa"
                    className="text-muted-foreground hover:text-primary transition text-sm"
                  >
                    hello@oms.africa
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FiClock className="w-6 h-6 text-primary mt-1 flex-shrink-0" />
                <div>
                  <h3 className="text-lg font-medium text-foreground">
                    Business Hours
                  </h3>
                  <p className="text-muted-foreground text-sm">
                    Monday - Friday: 8:00 AM - 5:00 PM (SAST)
                  </p>
                  <p className="text-muted-foreground text-sm">
                    Weekends & Public Holidays: Closed
                  </p>
                </div>
              </div>
            </div>

            {/* Contact Form Section */}
            <div className="bg-card p-8 rounded-lg border border-border shadow-sm">
              <h2 className="text-3xl font-semibold mb-6 text-foreground">
                Send Us a Message
              </h2>
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* Optional: Map Section Placeholder */}
      {/* <section className="h-96 bg-muted border-t border-border">
         <div className="container mx-auto h-full flex items-center justify-center">
            <p className="text-muted-foreground">[Embedded Map Placeholder - e.g., Google Maps iframe]</p>
         </div>
       </section> */}
    </div>
  );
}