import StoryHeroWrapper from "@/sections/ourStory/StoryHeroWrapper";
import ExcellenceStoryGrid from "@/sections/ourStory/excellenceStory";
import Leadership from "@/sections/ourStory/leadership";
import AwardGrid from "@/sections/ourAwards/ourAwards";
import LogoTransformation from "@/sections/ourStory/logoTransformation";
import NavanaStoryNarrative from "@/sections/ourStory/StoryNarrativeSection";
import GuidingPrinciplesSection from "@/sections/ourStory/GuidingPrinciplesSection";
import { fetchStoryPage } from "@/utils/strapi";
import type { Metadata } from "next";
import { getStrapiImageUrl } from "@/utils/getStrapiUrl";

const BASE_URL =
  process.env.NEXT_PUBLIC_BASE_URL ||
  process.env.NEXT_PUBLIC_SITE_URL ||
  (process.env.NODE_ENV === "production"
    ? "https://navana-realestate.com"
    : "http://localhost:3000");

const STORY_META_DESCRIPTION =
  "Discover the story of Navana Real Estate - 28 years of excellence in Bangladesh's real estate industry. Learn about our vision, mission, values, and leadership.";

export async function generateMetadata(): Promise<Metadata> {
  const storyData = await fetchStoryPage();
  const seo = storyData?.seo;
  const title = seo?.title ?? "The Brand | Navana Real Estate";
  const description =
    seo?.description ?? storyData?.heroDescription ?? STORY_META_DESCRIPTION;
  const imageUrl =
    seo?.imageUrl ??
    (storyData?.heroBackgroundImageDesktop as any)?.url ??
    (storyData?.heroBackgroundImageDesktop as any)?.data?.attributes?.url ??
    (storyData?.heroBackgroundImageMobile as any)?.url ??
    (storyData?.heroBackgroundImageMobile as any)?.data?.attributes?.url;
  const resolvedImageUrl = imageUrl ? getStrapiImageUrl(imageUrl) : undefined;

  return {
    title,
    description,
    ...(seo?.keywords && { keywords: seo.keywords }),
    openGraph: {
      title,
      description,
      url: `${BASE_URL}/the-brand`,
      type: "website",
      ...(resolvedImageUrl && {
        images: [
          { url: resolvedImageUrl, width: 1200, height: 630, alt: title },
        ],
      }),
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      ...(resolvedImageUrl && { images: [resolvedImageUrl] }),
    },
    alternates: { canonical: `${BASE_URL}/the-brand` },
  };
}

const TheBrandPage = async () => {
  const storyData = await fetchStoryPage();

  return (
    <>
      <StoryHeroWrapper storyData={storyData} />
      <NavanaStoryNarrative storyData={storyData} />
      <ExcellenceStoryGrid storyData={storyData} />
      <GuidingPrinciplesSection storyData={storyData} />
      <Leadership storyData={storyData} />
      <AwardGrid storyData={storyData} />
      <LogoTransformation storyData={storyData} />
    </>
  );
};

export default TheBrandPage;