export type Layout2BreadcrumbItem = {
  id: string;
  label: string;
  href?: string;
};

export type Layout2ClientMetaItem = {
  id: string;
  subTitle: string;
  title: string;
  heading: "h3" | "h4";
};

export type Layout2GalleryImage = {
  id: string;
  columnClass: string;
  wrapperClass: string;
  src: string;
  alt: string;
  width: number;
  height: number;
  sizes: string;
  fluid?: boolean;
};

export type Layout2FeatureListItem = {
  id: string;
  text: string;
};

export type Layout2ProjectNavSide = {
  id: "prev" | "next";
  href: string;
  linkTitle: string;
  projectTitle: string;
  thumbSrc: string;
  thumbAlt: string;
  thumbWidth: number;
  thumbHeight: number;
  arrowSrc: string;
  arrowAlt: string;
  arrowWidth: number;
  arrowHeight: number;
};

export type PortfolioLayout2Content = {
  pageBanner: {
    title: string;
    breadcrumbs: Layout2BreadcrumbItem[];
    titleAosDelay: number;
    breadcrumbsAosDelay: number;
  };
  galleryImages: Layout2GalleryImage[];
  galleryRowAosDelay: number;
  portfolio: {
    title: string;
    paragraph: string;
    clientMeta: Layout2ClientMetaItem[];
    checkIconSrc: string;
    checkIconAlt: string;
    checkIconWidth: number;
    checkIconHeight: number;
    features: Layout2FeatureListItem[];
    contentAosDelay: number;
  };
  projectNav: {
    prev: Layout2ProjectNavSide;
    next: Layout2ProjectNavSide;
  };
  relatedSectionTitle: string;
};

export const portfolioLayout2: PortfolioLayout2Content = {
  pageBanner: {
    title: "Deliver dev-ready files with scalable design systems",
    breadcrumbs: [
      { id: "bc-home", label: "Home", href: "#" },
      { id: "bc-portfolio", label: "portfolio", href: "#" },
      { id: "bc-current", label: "Book Cover Print Design" },
    ],
    titleAosDelay: 300,
    breadcrumbsAosDelay: 400,
  },
  galleryImages: [
    {
      id: "g1",
      columnClass: "col-lg-12 col-md-6",
      wrapperClass: "product-img",
      src: "/assets/images/project/product2-1.png",
      alt: "Portfolio Project Image 1",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
    },
    {
      id: "g2",
      columnClass: "col-lg-12 col-md-6",
      wrapperClass: "product-img",
      src: "/assets/images/project/product2-2.png",
      alt: "Portfolio Project Image 2",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
    },
    {
      id: "g3",
      columnClass: "col-lg-12 col-md-6",
      wrapperClass: "product-img mb-0",
      src: "/assets/images/project/product2-3.png",
      alt: "Portfolio Project Image 3",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
    },
  ],
  galleryRowAosDelay: 300,
  portfolio: {
    title: "Innovative Design Solutions Tailored to Your Brand",
    paragraph:
      "Our approach to website design blends creativity with strategy — ensuring every page is visually appealing, easy to navigate, and built for performance. Whether you need a landing page, portfolio , or full scale business site, we focus on responsive design",
    clientMeta: [
      {
        id: "service",
        subTitle: "Service",
        title: "UX/UI, Visual Identity",
        heading: "h3",
      },
      {
        id: "clients",
        subTitle: "Clients",
        title: "Xmas Digital Agency",
        heading: "h4",
      },
      { id: "date", subTitle: "Date", title: "June 13, 2025", heading: "h4" },
      {
        id: "software",
        subTitle: "Software",
        title: "Figma, WordPress",
        heading: "h4",
      },
    ],
    checkIconSrc: "/assets/images/icon/check1-2.svg",
    checkIconAlt: "Check Icon",
    checkIconWidth: 14,
    checkIconHeight: 14,
    features: [
      { id: "f1", text: "Up to 5 team members Full-cycle development" },
      { id: "f2", text: "Customizable UI with ready-to-use templates" },
      { id: "f3", text: "Streamlined task project management" },
      { id: "f4", text: "Cloud deployment with essential scalability" },
      { id: "f5", text: "AI-driven intelligent search analytics dashboard" },
    ],
    contentAosDelay: 300,
  },
  projectNav: {
    prev: {
      id: "prev",
      href: "/cosmetic-bottle-with-label",
      linkTitle: "Previous project: Hoodie Design and Branding",
      projectTitle: "Hoodie Design and Branding",
      thumbSrc: "/assets/images/author/thumb3-4.webp",
      thumbAlt: "Thumbnail for Hoodie Design and Branding project",
      thumbWidth: 160,
      thumbHeight: 160,
      arrowSrc: "/assets/images/icon/arrow.svg",
      arrowAlt: "Arrow icon for previous post navigation",
      arrowWidth: 14,
      arrowHeight: 14,
    },
    next: {
      id: "next",
      href: "/digital-agency-design",
      linkTitle: "Next project: Book Cover Print Design",
      projectTitle: "Book Cover Print Design",
      thumbSrc: "/assets/images/author/thumb3-5.webp",
      thumbAlt: "Thumbnail for Book Cover Print Design project",
      thumbWidth: 160,
      thumbHeight: 160,
      arrowSrc: "/assets/images/icon/arrow.svg",
      arrowAlt: "Arrow icon for next post navigation",
      arrowWidth: 14,
      arrowHeight: 14,
    },
  },
  relatedSectionTitle: "Related Projects",
};