import { offices } from "../data/content";
import ContactForm from "../components/ContactForm";
import SectionHeader from "../components/SectionHeader";
import { Mail, Phone, MapPin, Clock } from "lucide-react";
export default function Contact() {
  return <div className="bg-slate-50 min-h-screen text-slate-900">
      
      {
    /* Page Header Banner */
  }
      <section
    className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
    style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80')" }}
  >
        <div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
        <div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
          <span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
            Contact Us
          </span>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
            Discuss Your Project Scope
          </h1>
          <p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
            Ready to deploy VT, UT, or advanced tube-testing crews? Contact our estimating office today.
          </p>
        </div>
      </section>

      {
    /* Main Grid: Form & Corporate Office Details */
  }
      <section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
        <div className="grid lg:grid-cols-12 gap-12 items-start">
          
          {
    /* Left: Contact Info details */
  }
          <div className="lg:col-span-5 space-y-8">
            <SectionHeader
    tag="Office Directory"
    title="Global Regional Contact Offices"
    description="Reach out directly to our operations and technical sales representatives in Saudi Arabia and India."
  />

            <div className="space-y-6">
              {offices.map((office) => <div key={office.label} className="bg-white border border-slate-100 p-6 md:p-8 rounded-2xl shadow-sm space-y-4">
                  <h3 className="font-heading text-lg font-bold text-slate-900 flex items-center gap-2">
                    <span className="w-2 h-2 bg-orange-500 rounded-full" />
                    {office.label}
                  </h3>
                  <div className="space-y-3.5 text-xs text-slate-500 font-light leading-relaxed">
                    <div className="flex items-start gap-2.5">
                      <MapPin className="w-4 h-4 text-orange-500 shrink-0 mt-0.5" />
                      <span>{office.lines.join(", ")}</span>
                    </div>
                    {office.mobile && <a href={`tel:${office.mobile.replace(/\s+/g, "")}`} className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium text-slate-700">
                        <Phone className="w-4 h-4 text-orange-500 shrink-0" />
                        <span>{office.mobile}</span>
                      </a>}
                    <a href={`mailto:${office.email}`} className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium text-slate-700">
                      <Mail className="w-4 h-4 text-orange-500 shrink-0" />
                      <span>{office.email}</span>
                    </a>
                  </div>
                </div>)}
            </div>

            <div className="bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-2xl space-y-2">
              <h4 className="font-heading text-xs font-bold text-amber-900 uppercase tracking-wider flex items-center gap-2">
                <Clock className="w-4 h-4 text-amber-600" />
                Working Hours
              </h4>
              <p className="text-xs text-amber-800 leading-relaxed font-light">
                Our main Estimating and Planning department in Jubail is available Sunday through Thursday, 8:00 AM to 5:00 PM (GMT+3). Emergency crews are available 24/7 on special turnaround contracts.
              </p>
            </div>
          </div>

          {
    /* Right: Contact Form */
  }
          <div className="lg:col-span-7 space-y-8">
            <div className="bg-slate-100/50 border border-slate-200/50 p-1 rounded-2xl">
              <ContactForm />
            </div>
          </div>

        </div>
      </section>

    </div>;
}
