import { fetchLocationData } from "@/services/contact-us.service";
import React from "react";

interface LocationData {
  title: string;
  description: string;
}

export default async function Page() {
  let locationData: LocationData | null = null;

  try {
    const response = await fetchLocationData(
      "95ab87a8-ac42-4e31-8366-d12a011c19f3"
    );
    locationData = response?.pagedata ?? null;
  } catch (error) {
    console.error("Error fetching location data:", error);
  }

  if (!locationData) return null;

  return (
    <section className="mx-auto max-w-6xl px-4 md:px-6">
      <div className="grid gap-8 lg:gap-12 items-start">
        {/* Left Side: Title & Description */}
        <div className="space-y-6">
          <h2 className="text-2xl sm:text-[48px] font-light tracking-tight text-gray-800">
            {locationData.title}
          </h2>
          <address
            className="not-italic text-[15px] md:text-lg text-gray-700 leading-relaxed"
            dangerouslySetInnerHTML={{ __html: locationData.description }}
          />
        </div>
      </div>
    </section>
  );
}