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

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

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

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

export type Layout3ProjectNavSide = {
  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 PortfolioLayout3Content = {
  pageBanner: {
    breadcrumbs: Layout3BreadcrumbItem[];
    title: string;
    intro: string;
    aos: {
      breadcrumbsDelay: number;
      titleDelay: number;
      introDuration: number;
      introDelay: number;
    };
  };
  clientStrip: {
    aosDelay: number;
    items: Layout3ClientDetailItem[];
  };
  topGallery: Layout3GalleryImage[];
  agencyIntro: {
    leftTitle: string;
    paragraphs: string[];
    aosDelay: number;
  };
  midGallery: Layout3GalleryImage[];
  features: {
    leftTitle: string;
    paragraph: string;
    checkIconSrc: string;
    checkIconAlt: string;
    checkIconWidth: number;
    checkIconHeight: number;
    list: Layout3FeatureListItem[];
    aosDelay: number;
  };
  projectNav: {
    prev: Layout3ProjectNavSide;
    next: Layout3ProjectNavSide;
  };
  relatedSectionTitle: string;
};

export const portfolioLayout3: PortfolioLayout3Content = {
  pageBanner: {
    breadcrumbs: [
      { id: "bc-home", label: "Home", href: "#" },
      { id: "bc-portfolio", label: "portfolio", href: "#" },
      { id: "bc-current", label: "Cosmetic Bottle with Label" },
    ],
    title: "Deliver dev-ready files with scalable design systems",
    intro:
      "From sleek SaaS platforms and intuitive dashboards to responsive websites and branding systems — our portfolio reflects our passion for design and development.",
    aos: {
      breadcrumbsDelay: 300,
      titleDelay: 400,
      introDuration: 700,
      introDelay: 400,
    },
  },
  clientStrip: {
    aosDelay: 300,
    items: [
      { id: "service", subTitle: "Service", title: "UX/UI, Visual Identity", heading: "h2" },
      { id: "clients", subTitle: "Clients", title: "Xmas Digital Agency", heading: "h3" },
      { id: "date", subTitle: "Date", title: "June 13, 2025", heading: "h4" },
      { id: "software", subTitle: "Software", title: "Figma, WordPress", heading: "h4" },
      { id: "location", subTitle: "Location", title: "New York City", heading: "h4" },
    ],
  },
  topGallery: [
    {
      id: "top-1",
      columnClass: "col-lg-6 col-md-6",
      wrapperClass: "product-img",
      src: "/assets/images/event/product1-1.png",
      alt: "Project screenshot 1 showcasing UX/UI design",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
      aosDelay: 300,
    },
    {
      id: "top-2",
      columnClass: "col-lg-6 col-md-6",
      wrapperClass: "product-img",
      src: "/assets/images/event/product1-2.png",
      alt: "Project screenshot 2 showcasing visual identity",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
      aosDelay: 300,
    },
  ],
  agencyIntro: {
    leftTitle:
      "Transforming Ideas into Interactive Reality. Elevating Brands Design & Code",
    paragraphs: [
      "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, seamless user experience, and brand consistency. The result? A modern, high-performing website that connects with your audience and helps achieve your business goals.",
      "We craft modern, responsive websites that combine aesthetic appeal with user-friendly functionality. Our design process is rooted in understanding your goals and audience, ensuring every layout, interaction, and detail works together",
    ],
    aosDelay: 300,
  },
  midGallery: [
    {
      id: "mid-1",
      columnClass: "col-lg-6 col-md-6",
      wrapperClass: "digital-img",
      src: "/assets/images/event/product1-3.png",
      alt: "UX/UI project example 1",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
      aosDelay: 300,
    },
    {
      id: "mid-2",
      columnClass: "col-lg-6 col-md-6",
      wrapperClass: "digital-img",
      src: "/assets/images/event/product1-4.png",
      alt: "UX/UI project example 2",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
      aosDelay: 300,
    },
  ],
  features: {
    leftTitle: "Innovative Design Solutions Tailored to Your Brand",
    paragraph:
      "We deliver design solutions that blend creativity, strategy, and functionality to elevate your digital presence. From wireframes to polished UI/UX designs, every element is crafted with purpose — ensuring your product not only looks great but also engages users and drives results.",
    checkIconSrc: "/assets/images/icon/check1-2.svg",
    checkIconAlt: "Check icon",
    checkIconWidth: 18,
    checkIconHeight: 18,
    list: [
      { 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" },
    ],
    aosDelay: 300,
  },
  projectNav: {
    prev: {
      id: "prev",
      href: "/digital-agency-design",
      linkTitle: "Previous project: Hoodie Design and Branding",
      projectTitle: "Hoodie Design and Branding",
      thumbSrc: "/assets/images/author/thumb3-3.webp",
      thumbAlt: "Thumbnail for previous project: Hoodie Design and Branding",
      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: "/book-cover-print-design",
      linkTitle: "Next project: Book Cover Print Design",
      projectTitle: "Book Cover Print Design",
      thumbSrc: "/assets/images/author/thumb3-1.webp",
      thumbAlt: "Thumbnail for next project: Book Cover Print Design",
      thumbWidth: 160,
      thumbHeight: 160,
      arrowSrc: "/assets/images/icon/arrow.svg",
      arrowAlt: "Arrow icon for next post navigation",
      arrowWidth: 14,
      arrowHeight: 14,
    },
  },
  relatedSectionTitle: "Related Projects",
};