import type { Metadata } from "next";
import {
  ServiceMenuList,
  ServicesHeading,
  ServicesLeftColumn,
  ServicesRightColumn,
  ServicesShell,
} from "@/components/services/ServicesShell";
import { servicesIndex } from "@/data/services";
import { serviceOffices } from "@/data/offices";

export const metadata: Metadata = {
  title: "Our Services | Sterling Protection Partners LTD",
  description:
    "Explore Sterling Protection Partners' comprehensive security services including executive protection, travel risk management, global risk management, luxury concierge services, and close protection training.",
  alternates: {
    canonical: "/services",
  },
  openGraph: {
    title: "Our Services | Sterling Protection Partners LTD",
    description:
      "Explore Sterling Protection Partners' comprehensive security services including executive protection, travel risk management, global risk management, luxury concierge services, and close protection training.",
    url: "/services",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Our Services | Sterling Protection Partners LTD",
    description:
      "Explore Sterling Protection Partners' comprehensive security services including executive protection, travel risk management, global risk management, luxury concierge services, and close protection training.",
  },
};

export default function ServicesPage() {
  return (
    <ServicesShell>
      <ServicesLeftColumn>
        <ServicesHeading />
        <ServiceMenuList items={servicesIndex} />
      </ServicesLeftColumn>   

      <ServicesRightColumn>
        {serviceOffices.map((office, i) => (
          <div
            key={office.title}
            className={`mb-[clamp(24px,3.5vh,40px)] ${i === 0 ? "pt-[62px]" : ""}`}
          >
            <h3 className="mb-[6px] text-[clamp(0.95rem,1.3vw,1.15rem)] font-semibold tracking-[0.3px] text-mist">
              {office.title}
            </h3>
            <p className="text-[clamp(0.8rem,1.1vw,0.95rem)] leading-[1.6] font-light text-white/65">
              Operational Contact
            </p>
            {office.whatsapp && (
              <p className="text-[clamp(0.8rem,1.1vw,0.95rem)] leading-[1.6] font-light text-white/65">
                WhatsApp:{" "}
                <a
                  href={office.whatsapp.href}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/65 transition-colors duration-300 hover:text-white"
                >
                  {office.whatsapp.label}
                </a>
              </p>
            )}
          </div>
        ))}
      </ServicesRightColumn>
    </ServicesShell>
  );
}