import HeroSection from "./_components/HeroSection"; // Import the HeroSection component
import ClientLogosSection, {
  defaultClients,
} from "./_components/ClientLogosSection"; // Import component and data
import CallToActionSection from "./_components/CallToActionSection";
import CoreServicesSection, {
  defaultCoreServices,
} from "./_components/CoreServicesSection";
import WhyChooseUsSection, {
  defaultWhyChooseUsFeatures,
} from "./_components/WhyChooseUsSection";
import FeaturedProductSection, {
  defaultObseFeatures,
} from "./_components/FeaturedProductSection";
import { getHome } from "@/lib/query/home";

export default async function HomePage() {
  // Explicitly type the data variable, assuming getHome returns HeroSectionType or null/undefined
  const data = await getHome();

  // Handle case where data might be null or undefined
  if (!data) {
    // Optionally return a loading state or default content
    return <div>Loading hero section...</div>;
    // Or render the HeroSection with default props if preferred
  }

  return (
    <>
      <HeroSection
        title={
          <>
            {data?.hero_title} <br className="hidden md:block" />
          </>
        }
        subtitle={
          data.hero_subtitle || "Your trusted partner in technology solutions."
        } // Use optional chaining and provide a default
        buttonText={data.hero_buttons?.[0]?.label || "Learn More"} // Use optional chaining and provide a default
        buttonHref={data.hero_buttons?.[0]?.link || "/about"} // Use optional chaining and provide a default
        imageUrl={
          // data.hero_cover
           // ? `${process.env.DIRECTUS_API_ENDPOINT}/assets/${data.hero_cover}`
           // : "/hero-bg-2.jpg"
            "/banner-1.jpeg"
        } // Use optional chaining and provide a default
      />
      <CoreServicesSection
        title="Core Services"
        subtitle="Tailored solutions designed to drive growth, optimize productivity, and solve your most complex business challenges."
        services={defaultCoreServices} // Pass the data
      />
      <WhyChooseUsSection
        title="Why Partner with OMS?"
        subtitle="Combining expertise with a commitment to excellence for your success."
        features={defaultWhyChooseUsFeatures}
      />
      <FeaturedProductSection
        eyebrow="Featured Product"
        title="Streamline Financial Analysis with"
        productName="OBSE"
        description="Our advanced Optimized Bank Statement Extractor automates data aggregation, reduces errors, and provides deep financial insights."
        features={defaultObseFeatures}
        buttonText="Learn More & Demo"
        buttonHref="/obse" // Link to the OBSE product page
        imageUrl="/images/obse.svg" // **IMPORTANT: Create or find a relevant image**
        imageAlt="OBSE Product Interface Mockup"
      />
      <ClientLogosSection
        title="Trusted By Industry Leaders"
        clients={defaultClients} // Pass placeholder data
        description="Showcasing key clients across financial services, automotive, and tech industries." // Optional description
      />
      {/* TODO: Implement actual client logo fetching and display */}
      {/* TODO: Add auto-sliding carousel for clients */}
      <CallToActionSection
        title="Ready to Innovate?"
        subtitle="Let's discuss how OMS can help transform your business with cutting-edge technology solutions."
        buttonText="Get In Touch"
        buttonHref="/contact"
      />
    </>
  );
}