oms-website-nextjs/app/(website)/contact/page.tsx

"use client"; // Needed for FAQ state

import React, { useState } from "react";
import {
  FaMapMarkerAlt,
  FaPhone,
  FaEnvelope,
  FaClock,
  FaChevronDown,
  FaChevronUp,
} from "react-icons/fa"; // Using Fa icons for consistency
import { COLORS } from "@/constants"; // Using COLORS constant
import ContactForm from "@/components/ContactForm";


// Define the structure for FAQ items
interface FAQItem {
  id: number;
  question: string;
  answer: string;
}

const faqData: FAQItem[] = [
  {
    id: 1,
    question: "What services does Owethu Managed Services offer?",
    answer:
      "We offer a comprehensive range of IT services including custom software development, resource augmentation (IT staffing), project management, cloud solutions, system integration, and IT consulting tailored to various industries.",
  },
  {
    id: 2,
    question: "Which industries do you specialize in?",
    answer:
      "We have deep expertise in Financial Services & Fintech, Automotive, Technology, and Retail/E-commerce sectors, understanding the unique challenges and opportunities within each.",
  },
  {
    id: 3,
    question: "How can I request a quote for a project?",
    answer:
      "You can request a quote by filling out the contact form on this page with details about your project requirements, calling us directly, or sending an email to hello@oms.africa. We'll get back to you promptly to discuss your needs.",
  },
  {
    id: 4,
    question: "What are your business hours?",
    answer:
      "Our standard business hours are Monday to Friday, 8:00 AM to 5:00 PM South African Standard Time (SAST). We are closed on weekends and public holidays.",
  },
];

// Contact Page Component
export default function ContactPage() {
  const [openFaqId, setOpenFaqId] = useState<number | null>(null);

  const toggleFaq = (id: number) => {
    setOpenFaqId(openFaqId === id ? null : id);
  };

  return (
    // Added dark mode base styles
    <div className="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 overflow-x-hidden font-poppins">
      {/* Hero Section - Adjusted padding for mobile */}
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-16 md:py-28">
        <div className="absolute inset-0 bg-black opacity-40 dark:opacity-50"></div>
        <div className="container mx-auto px-4 md:px-6 text-center relative z-10">
          <h1
            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4 font-poppins drop-shadow-md dark:text-gold-400" // Use primary color directly or a dark-mode friendly version
            style={{ color: COLORS.primary }} // Keep gold color for heading, ensure contrast in dark mode
          >
            Get In Touch
          </h1>
          <p className="text-base sm:text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins">
            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) - Adjusted padding, added dark mode */}
      <section className="py-12 md:py-24 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4 md:px-6">
          {/* Grid stacks vertically by default, becomes 2 columns on large screens */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-16 items-start">
            {/* Contact Information Section - Added dark mode styles */}
            <div
              className="bg-gray-50 dark:bg-gray-700 p-6 md:p-8 rounded-xl shadow-md border-t-4 border-gold-500 dark:border-gold-400 space-y-6 md:space-y-8"
              style={{ borderColor: COLORS.primary }} // Keep primary border color
            >
              <h2 className="text-2xl md:text-3xl font-bold font-poppins text-gray-900 dark:text-white mb-6">
                Contact Information
              </h2>

              <div className="flex items-start space-x-4">
                <FaMapMarkerAlt
                  className="w-6 h-6 text-gold-500 mt-1 flex-shrink-0"
                  style={{ color: COLORS.primary }} // Keep primary icon color
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Our Office
                  </h3>
                  <address className="text-gray-600 dark:text-gray-300 font-poppins not-italic text-sm leading-relaxed">
                    {/* ... existing address lines ... */}
                    Unit 10 B Centuria Park
                    <br />
                    265 Von Willich Avenue
                    <br />
                    Die Hoewes, Centurion, 0159
                    <br />
                    South Africa
                  </address>
                  <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"
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-sm font-medium font-poppins hover:underline mt-2 inline-block dark:text-gold-400 dark:hover:text-gold-300"
                    style={{ color: COLORS.primary }} // Keep primary link color
                  >
                    View on Google Maps
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FaPhone
                  className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
                  style={{ color: COLORS.primary }} // Keep primary icon color
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Phone
                  </h3>
                  <a
                    href="tel:+27684855721"
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
                  >
                    +27 68 485 5721
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FaEnvelope
                  className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
                  style={{ color: COLORS.primary }} // Keep primary icon color
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Email
                  </h3>
                  <a
                    href="mailto:hello@oms.africa"
                    className="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 transition text-sm font-poppins"
                  >
                    hello@oms.africa
                  </a>
                </div>
              </div>

              <div className="flex items-start space-x-4">
                <FaClock
                  className="w-5 h-5 text-gold-500 mt-1 flex-shrink-0"
                  style={{ color: COLORS.primary }} // Keep primary icon color
                />
                <div>
                  <h3 className="text-lg font-semibold font-poppins text-gray-800 dark:text-gray-100">
                    Business Hours
                  </h3>
                  <p className="text-gray-600 dark:text-gray-300 text-sm font-poppins">
                    Monday - Friday: 8:00 AM - 5:00 PM (SAST)
                  </p>
                  <p className="text-gray-600 dark:text-gray-300 text-sm font-poppins">
                    Weekends & Public Holidays: Closed
                  </p>
                </div>
              </div>
            </div>

            {/* Contact Form Section - Added dark mode styles */}
            <div
              className="bg-gray-50 dark:bg-gray-700 p-6 md:p-8 rounded-xl shadow-md border-t-4 border-gold-500 dark:border-gold-400"
              style={{ borderColor: COLORS.primary }} // Keep primary border color
            >
              <h2 className="text-2xl md:text-3xl font-bold font-poppins text-gray-900 dark:text-white mb-6">
                Send Us a Message
              </h2>
              {/* Assuming ContactForm handles its own dark mode or inherits text colors */}
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

      {/* Map Section - Adjusted padding, added dark mode, responsive height */}
      <section className="py-12 md:py-24 bg-gray-100 dark:bg-gray-900">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-8 text-center">
            Find Us Here
          </h2>
          {/* Adjusted height for different screen sizes */}
          <div className="aspect-w-16 aspect-h-9 h-64 sm:h-80 md:h-96 mx-auto rounded-lg overflow-hidden shadow-lg border border-gray-200 dark:border-gray-700">
            <iframe
              // ... existing iframe attributes ...
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1313.49241475678!2d28.192648350415848!3d-25.85177958049519!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1e95643aa4e82f9f%3A0xe4052722532cd30f!2sCenturia%20Park!5e1!3m2!1sen!2sza!4v1745745054858!5m2!1sen!2sza"
              width="100%"
              height="100%"
              style={{ border: 0 }}
              allowFullScreen={true}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Owethu Managed Services Location"
            ></iframe>
          </div>
        </div>
      </section>

      {/* FAQ Section - Adjusted padding, added dark mode */}
      <section className="py-12 md:py-24 bg-white dark:bg-gray-800">
        <div className="container mx-auto px-4 md:px-6">
          <h2 className="text-2xl md:text-3xl lg:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-10 md:mb-12 text-center">
            Frequently Asked Questions
          </h2>
          <div className="max-w-5xl mx-auto space-y-4">
            {faqData.map((faq) => (
              <div
                key={faq.id}
                className="border border-gray-200 dark:border-gray-600 rounded-lg overflow-hidden shadow-sm bg-white dark:bg-gray-700"
              >
                <button
                  onClick={() => toggleFaq(faq.id)}
                  className="flex justify-between items-center w-full p-4 text-left font-semibold font-poppins text-gray-800 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gold-500 dark:focus:ring-gold-400 focus:ring-opacity-50"
                  aria-expanded={openFaqId === faq.id}
                  aria-controls={`faq-answer-${faq.id}`}
                >
                  <span className="text-sm md:text-base">{faq.question}</span>
                  {openFaqId === faq.id ? (
                    <FaChevronUp
                      className="w-5 h-5 text-gold-500 flex-shrink-0 ml-2" // Added flex-shrink-0 and margin
                      style={{ color: COLORS.primary }} // Keep primary icon color
                    />
                  ) : (
                    <FaChevronDown
                      className="w-5 h-5 text-gold-500 flex-shrink-0 ml-2" // Added flex-shrink-0 and margin
                      style={{ color: COLORS.primary }} // Keep primary icon color
                    />
                  )}
                </button>
                <div
                  id={`faq-answer-${faq.id}`}
                  // Adjusted padding and text size
                  className={`px-4 pb-4 pt-2 text-gray-600 dark:text-gray-300 font-poppins text-xs sm:text-sm leading-relaxed transition-all duration-300 ease-in-out ${
                    openFaqId === faq.id ? "block" : "hidden"
                  }`}
                  role="region"
                  aria-labelledby={`faq-question-${faq.id}`}
                >
                  {faq.answer}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}