export type Layout1ClientMetaItem = {
  id: string;
  subTitle: string;
  title: string;
  heading: "h3" | "h4";
  blockVariant?: "v2";
};

export type Layout1DigitalImage = {
  id: string;
  columnClass: string;
  aos: "fade-up" | "fade-right" | "fade-left";
  aosDelay: number;
  src: string;
  alt: string;
  width: number;
  height: number;
  sizes: string;
  fluid?: boolean;
};

export type Layout1FeatureListItem = {
  id: string;
  text: string;
};

export type Layout1ProjectNavSide = {
  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 PortfolioLayout1Content = {
  banner: {
    pageTitle: string;
    imageSrc: string;
    imageAlt: string;
    imageWidth: number;
    imageHeight: number;
    imageSizes: string;
    imagePriority?: boolean;
    aosDelay: number;
  };
  agencyTitle: string;
  clientMeta: Layout1ClientMetaItem[];
  intro: {
    leftTitle: string;
    paragraphs: string[];
  };
  digitalImages: Layout1DigitalImage[];
  features: {
    leftTitle: string;
    paragraph: string;
    checkIconSrc: string;
    checkIconAlt: string;
    checkIconWidth: number;
    checkIconHeight: number;
    list: Layout1FeatureListItem[];
  };
  projectNav: {
    prev: Layout1ProjectNavSide;
    next: Layout1ProjectNavSide;
  };
  relatedSectionTitle: string;
};

export const portfolioLayout1: PortfolioLayout1Content = {
  banner: {
    pageTitle: "page-banner",
    imageSrc: "/assets/images/hero/page4-3.png",
    imageAlt: "Hero banner image showing digital agency concept",
    imageWidth: 1920,
    imageHeight: 900,
    imageSizes: "100vw",
    imagePriority: true,
    aosDelay: 300,
  },
  agencyTitle: "Deliver dev-ready files with scalable design systems",
  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",
      blockVariant: "v2",
    },
  ],
  intro: {
    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.",
    ],
  },
  digitalImages: [
    {
      id: "full",
      columnClass: "col-lg-12",
      aos: "fade-up",
      aosDelay: 300,
      src: "/assets/images/event/digital1-1.png",
      alt: "Agency homepage UI/UX design mockup",
      width: 1400,
      height: 900,
      sizes: "(max-width: 991px) 100vw, 100vw",
      fluid: true,
    },
    {
      id: "half-a",
      columnClass: "col-lg-6",
      aos: "fade-right",
      aosDelay: 400,
      src: "/assets/images/event/digital1-2.png",
      alt: "Agency dashboard UI/UX design example",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
    },
    {
      id: "half-b",
      columnClass: "col-lg-6",
      aos: "fade-left",
      aosDelay: 400,
      src: "/assets/images/event/digital1-3.png",
      alt: "Agency mobile app UI/UX design example",
      width: 900,
      height: 700,
      sizes: "(max-width: 991px) 100vw, 50vw",
      fluid: true,
    },
  ],
  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" },
    ],
  },
  projectNav: {
    prev: {
      id: "prev",
      href: "#",
      linkTitle: "Previous Project: Book Cover Print Design",
      projectTitle: "Book Cover Print Design",
      thumbSrc: "/assets/images/author/thumb3-1.webp",
      thumbAlt: "Thumbnail of previous project: Book Cover Print Design",
      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: "#",
      linkTitle: "Next Project: Smart Watch UI/UX Design",
      projectTitle: "Smart Watch UI/UX Design",
      thumbSrc: "/assets/images/author/thumb3-2.webp",
      thumbAlt: "Thumbnail of next project: Smart Watch UI/UX 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",
};
