"use client";

import { CtaSection } from "@/sections/shared/CtaSection";
import { PageHero } from "@/sections/shared/PageHero";
import { GalleryTabs } from "./GalleryTabs";
import type { GalleryCategoryGroup } from "@/lib/wp";

interface GalleryPageClientProps {
  groups: ReadonlyArray<GalleryCategoryGroup>;
}

export function GalleryPageClient({ groups }: GalleryPageClientProps) {
  return (
    <main data-page="gallery">
      <PageHero
        breadcrumb="معرض الصور"
        eyebrow="معرض الصور"
        titleTop="لحظات من"
        titleBottom={
          <>
            تجارب <em>Backyard.</em>
          </>
        }
        lede="صور من رحلاتنا، فعالياتنا، برامج العمرة، الرحلات الدينية، والتجارب السياحية التي صممناها لتبقى في الذاكرة."
        stats={[
          { value: "+٢٤٠٠", label: "صورة موثّقة" },
          { value: "+١٢٦", label: "رحلة منظّمة" },
          { value: "+٤٢", label: "فعالية جماعية" },
        ]}
        actions={[
          { href: "#gallery", label: "استعرض المعرض", variant: "primary", iconAfter: "arrow-left" },
          { href: "/contact", label: "تواصل معنا", variant: "outline", iconBefore: "message-circle" },
        ]}
        stageImage="/assets/camel-branded.png"
        stageAriaLabel="معرض صور Backyard"
        stamp="المعرض ٢٠٢٦"
        floorEyebrow="GALLERY · BACKYARD KSA"
        floorTitle={
          <>
            كل صورة تحمل
            <br />
            قصّة رحلة.
          </>
        }
        ringText={{ top: "BACKYARD", middle: "GALLERY", bottom: "MOMENTS · 2026" }}
        polaroids={[{ cap: "DUSK" }, { cap: "ROUTE 01" }]}
      />

      <GalleryTabs groups={groups} />

      <CtaSection
        screenLabel="04 CTA"
        variant="tight"
        band="dusk"
        eyebrow="تجربتك القادمة"
        title={
          <>
            هل تريد أن تكون
            <br />
            تجربتك القادمة في معرضنا؟
          </>
        }
        body="سواء كنت تخطّط لفعالية، رحلة عمرة، رحلة دينية، أو برنامج سياحي — فريق Backyard جاهز لتنظيم تجربة تستحق أن تُوثّق."
        actions={[
          { href: "/contact", label: "تواصل معنا", variant: "dark", iconAfter: "arrow-left" },
          { href: "https://wa.me/", label: "واتساب", variant: "glass", iconBefore: "message-circle", external: true },
        ]}
      />
    </main>
  );
}