import type { Metadata } from "next";
import Link from "next/link";
import { CTASection } from "@/components/CTASection";
import { FounderGrid } from "@/components/FounderGrid";
import { GrowthSystem } from "@/components/GrowthSystem";
import { HeroVideo } from "@/components/HeroVideo";
import { KnowledgeLibrary } from "@/components/KnowledgeLibrary";
import { MetricsStrip } from "@/components/MetricsStrip";
import { ProcessTimeline } from "@/components/ProcessTimeline";
import { SolutionsGrid } from "@/components/SolutionsGrid";
import { WorkGrid } from "@/components/WorkGrid";
import { sectionLabels } from "@/content/pageContent";
import { libraryPath } from "@/content/libraryPaths";
import { brand, isLocale, locales, pillars, type Locale } from "@/content/site";
import { serviceKeys, servicePath, services } from "@/content/services";
import { translations } from "@/content/translations";

export function generateStaticParams() {
  return locales.map((locale) => ({ locale }));
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale: value } = await params;
  const locale: Locale = isLocale(value) ? value : "fr";
  const titles = {
    fr: "YASHAL Studios | Agence de communication à Fès et au Maroc",
    en: "YASHAL Studios | Marketing Agency in Morocco",
    ar: "YASHAL Studios | وكالة تسويق واتصال في المغرب",
  };
  const descriptions = {
    fr: "YASHAL Studios est une agence de communication à Fès spécialisée en production vidéo, création de sites web, SEO, branding et contenu digital.",
    en: "YASHAL Studios is a marketing agency in Morocco specialising in video production, web design, SEO, branding and strategic content.",
    ar: "YASHAL Studios وكالة تسويق واتصال في المغرب تجمع الاستراتيجية والفيديو وتصميم المواقع وSEO وبناء العلامات والمحتوى.",
  };
  return {
    title: { absolute: titles[locale] },
    description: descriptions[locale],
    alternates: {
      canonical: `/${locale}/`,
      languages: { fr: "/fr/", en: "/en/", ar: "/ar/", "x-default": "/fr/" },
    },
    openGraph: {
      title: titles[locale],
      description: descriptions[locale],
      url: `/${locale}/`,
      images: [{ url: "/social/yashal-og.png", width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      title: titles[locale],
      description: descriptions[locale],
      images: ["/social/yashal-og.png"],
    },
  };
}

export default async function HomePage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale: value } = await params;
  const locale: Locale = isLocale(value) ? value : "fr";
  const t = translations[locale];
  const whatsappMessage =
    locale === "fr"
      ? "Bonjour Yashal Studios, je souhaite commencer une conversation au sujet de mon activité."
      : locale === "ar"
        ? "مرحباً Yashal Studios، أود أن أبدأ محادثة حول نشاطي."
        : "Hello Yashal Studios, I would like to start a conversation about my business.";
  const whatsappHref = `https://wa.me/${brand.phoneHref.replace("+", "")}?text=${encodeURIComponent(whatsappMessage)}`;
  const servicesHeading = {
    fr: "Une agence de communication qui relie stratégie et exécution.",
    en: "A marketing agency connecting strategy and execution.",
    ar: "وكالة تسويق تربط الاستراتيجية بالتنفيذ.",
  }[locale];
  const servicesIntro = {
    fr: "Production audiovisuelle, création de sites web, référencement naturel, branding, photographie et contenu : chaque service renforce le même système de croissance.",
    en: "Video production, web design, SEO, branding, photography and content work together as one connected growth system.",
    ar: "يعمل إنتاج الفيديو وتصميم المواقع وSEO وبناء العلامة والتصوير والمحتوى ضمن نظام نمو واحد مترابط.",
  }[locale];

  return (
    <main id="main" className="home-page">
      <section className="hero hero-fullscreen" aria-labelledby="home-title">
        <HeroVideo locale={locale} nextSectionId="home-after-hero" />
      </section>

      <section
        className="hero presentation-section shell"
        id="home-after-hero"
        aria-labelledby="home-presentation-title"
      >
        <div className="hero-copy" data-reveal>
          <p className="kicker">{t.common.eyebrow}</p>
          <h2 id="home-presentation-title">{t.home.title}</h2>
          <p className="hero-intro">{t.home.intro}</p>
          <div className="hero-actions">
            <Link className="button" href={`/${locale}/contact/`}>{t.common.start}</Link>
            <a className="button button-secondary" href={whatsappHref}>{t.common.whatsapp}</a>
          </div>
          <Link className="hero-explore text-link" href={`/${locale}/growth-system/`}>
            {t.common.explore}
          </Link>
          <p className="hero-location">{sectionLabels[locale].morocco}</p>
        </div>
        <div className="hero-system" aria-label={t.home.systemTitle} data-reveal>
          <div className="hero-light" aria-hidden="true" />
          <div className="system-orbit orbit-outer" aria-hidden="true"><i /><i /><i /></div>
          <div className="system-orbit orbit-inner" aria-hidden="true"><i /><i /></div>
          <div className="system-axis" aria-hidden="true"><i /><i /><i /></div>
          <ol>
            {pillars.map((pillar, index) => (
              <li key={pillar}>
                <span>{String(index + 1).padStart(2, "0")}</span>
                <strong>{t.pillars[pillar].name}</strong>
              </li>
            ))}
          </ol>
          <div className="hero-system-caption">
            <span>{brand.name}</span>
            <strong>{t.nav.growthSystem}</strong>
          </div>
        </div>
      </section>

      <section className="work-preview">
        <div className="shell">
          <div className="section-heading" data-reveal>
            <div>
              <p className="kicker">{t.common.selectedWork}</p>
              <h2>{t.pages.work.title}</h2>
            </div>
            <div>
              <p>{t.pages.work.intro}</p>
              <Link className="text-link light" href={`/${locale}/work/`}>{t.common.seeAll}</Link>
            </div>
          </div>
          <WorkGrid locale={locale} />
        </div>
      </section>

      <section className="recognition-section">
        <div className="shell split-section" data-reveal>
          <p className="section-number">01</p>
          <div>
            <p className="kicker">{sectionLabels[locale].recognition}</p>
            <h2>{t.home.recognitionTitle}</h2>
            <p className="lead">{t.home.recognitionText}</p>
          </div>
        </div>
      </section>

      <section className="section shell system-section">
        <div className="section-heading" data-reveal>
          <div>
            <p className="kicker">{t.nav.growthSystem}</p>
            <h2>{t.home.systemTitle}</h2>
          </div>
          <p>{t.home.systemText}</p>
        </div>
        <GrowthSystem locale={locale} />
        <div className="section-link" data-reveal>
          <Link className="text-link" href={`/${locale}/growth-system/`}>{t.common.explore}</Link>
        </div>
      </section>

      <section className="section shell services-preview" aria-labelledby="services-title">
        <div className="section-heading" data-reveal>
          <div>
            <p className="kicker">{t.nav.services}</p>
            <h2 id="services-title">{servicesHeading}</h2>
          </div>
          <p>{servicesIntro}</p>
        </div>
        <div className="service-links-grid">
          {serviceKeys.map((key, index) => (
            <Link key={key} href={servicePath(locale, key)} data-reveal>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <strong>{services[key].content[locale].name}</strong>
              <small>{services[key].content[locale].menuDescription}</small>
            </Link>
          ))}
        </div>
      </section>

      <section className="principle-section">
        <div className="shell principle-grid" data-reveal>
          <div className="principle-mark" aria-hidden="true">Y</div>
          <div>
            <p className="kicker">{sectionLabels[locale].diagnosis}</p>
            <h2>{t.home.principleTitle}</h2>
            <p className="lead">{t.home.principleText}</p>
          </div>
        </div>
      </section>

      <section className="section shell solutions-section">
        <div className="section-heading" data-reveal>
          <div>
            <p className="kicker">{t.nav.solutions}</p>
            <h2>{t.home.solutionsTitle}</h2>
          </div>
          <Link className="text-link" href={`/${locale}/solutions/`}>{t.common.seeAll}</Link>
        </div>
        <SolutionsGrid locale={locale} compact />
      </section>

      <section className="section shell credibility-section">
        <div className="section-heading" data-reveal>
          <div>
            <p className="kicker">{sectionLabels[locale].evidence}</p>
            <h2>{t.home.metricsTitle}</h2>
          </div>
          <p>{t.home.metricsText}</p>
        </div>
        <MetricsStrip locale={locale} />
      </section>

      <ProcessTimeline locale={locale} title={t.home.methodTitle} />

      <section className="section shell founders-preview">
        <div className="section-heading" data-reveal>
          <div>
            <p className="kicker">{sectionLabels[locale].credibility}</p>
            <h2>{t.home.foundersTitle}</h2>
          </div>
          <Link className="text-link" href={`/${locale}/about/`}>{t.common.learnMore}</Link>
        </div>
        <FounderGrid locale={locale} compact />
      </section>

      <section className="knowledge-section">
        <div className="shell">
          <div className="section-heading" data-reveal>
            <div>
              <p className="kicker">{t.common.knowledge}</p>
              <h2>{t.home.knowledgeTitle}</h2>
            </div>
            <Link className="text-link" href={libraryPath(locale)}>{t.common.seeAll}</Link>
          </div>
          <KnowledgeLibrary locale={locale} compact />
        </div>
      </section>

      <div className="shell">
        <CTASection locale={locale} />
      </div>
    </main>
  );
}