export type BlogPostHeroMedia = {
  src: string;
  alt: string;
  width: number;
  height: number;
};

export type BlogPostContentBlock =
  | { id: string; kind: "paragraph"; text: string }
  | {
      id: string;
      kind: "blockquote";
      text: string;
      cite: string;
      icon: { src: string; alt: string; width: number; height: number };
    };

export type BlogPostListColumn = {
  id: string;
  items: string[];
};

export type BlogPostTagItem = {
  id: string;
  label: string;
  href: string;
};

export type BlogPostAuthorSocial = {
  id: string;
  href: string;
  icon: { src: string; alt: string; width: number; height: number };
};

export type BlogPostAuthor = {
  name: string;
  bio: string;
  image: { src: string; alt: string; width: number; height: number };
  socials: BlogPostAuthorSocial[];
};

export type BlogPostNavItem = {
  id: "prev" | "next";
  href: string;
  title: string;
  thumb: { src: string; alt: string; width: number; height: number };
  arrow: { src: string; alt: string; width: number; height: number };
};

export type BlogPostComment = {
  id: string;
  boxClass: string;
  author: string;
  date: string;
  body: string;
  avatar: { src: string; alt: string; width: number; height: number };
  replyArrow: { src: string; alt: string; width: number; height: number };
};

export type BlogPostCommentFormField =
  | {
      id: string;
      kind: "textarea";
      name: string;
      rows: number;
      placeholder: string;
      columnClass: string;
    }
  | {
      id: string;
      kind: "text" | "email";
      name: string;
      placeholder: string;
      required?: boolean;
      columnClass: string;
    };

export type BlogPostCommentForm = {
  title: string;
  notes: string;
  fields: BlogPostCommentFormField[];
  rememberRow: {
    inputId: string;
    name: string;
    value: string;
    label: string;
    inputType: "radio" | "checkbox";
  };
  submit: {
    label: string;
    arrow: { src: string; alt: string; width: number; height: number };
  };
};

export type BlogPostImagePageDetail = {
  hero: BlogPostHeroMedia;
  contentBlocks: BlogPostContentBlock[];
  listColumns: BlogPostListColumn[];
  tagsLabel: string;
  tags: BlogPostTagItem[];
  author: BlogPostAuthor;
  navigation: BlogPostNavItem[];
  commentsTitle: string;
  comments: BlogPostComment[];
  commentForm: BlogPostCommentForm;
};

export type BlogPostGalleryItem = BlogPostHeroMedia & { id: string };

export type BlogPostGalleryPageDetail = Omit<
  BlogPostImagePageDetail,
  "hero"
> & {
  gallery: BlogPostGalleryItem[];
};

export type BlogPostVideoEmbed = {
  src: string;
  title: string;
  width: number;
  height: number;
  allow: string;
  allowFullScreen: boolean;
};

export type BlogPostVideoPageDetail = Omit<BlogPostImagePageDetail, "hero"> & {
  video: BlogPostVideoEmbed;
};

export type BlogPostAudioEmbed = {
  src: string;
  title: string;
  width: string;
  height: number;
  allow: string;
  loading?: "lazy" | "eager";
};

export type BlogPostAudioPageDetail = Omit<BlogPostImagePageDetail, "hero"> & {
  audio: BlogPostAudioEmbed;
};

export const blogPostImageDetail: BlogPostImagePageDetail = {
  hero: {
    src: "/assets/images/blog/blog2-1.webp",
    alt: "Blog Post 1 Image",
    width: 1200,
    height: 675,
  },
  contentBlocks: [
    {
      id: "intro-saas",
      kind: "paragraph",
      text: "Software as a Service (SaaS) is transforming how businesses operate, offering flexibility, scalability, and cost-efficiency all in one platform. In today’s competitive digital landscape, adopting the right SaaS solution can streamline operations, improve collaboration, and unlock new levels of productivity. Whether you’re a small startup or a growing enterprise, understanding the full potential of SaaS technology.",
    },
    {
      id: "visual-aids",
      kind: "paragraph",
      text: "Visual aids play a crucial role in helping users understand how our SaaS platform works in real time. From intuitive dashboard screenshots and user flow diagrams to feature highlight videos and interactive demos, we provide clear, engaging visuals that break down complex processes into simple.",
    },
    {
      id: "testimonial",
      kind: "blockquote",
      text: "“This platform has completely transformed the way our team works. The UI is clean, the features are powerful, and the automation tools have saved us countless hours.”",
      cite: "Kenton E. Semple",
      icon: {
        src: "/assets/images/event/comas.png",
        alt: "Quotation icon",
        width: 48,
        height: 48,
      },
    },
    {
      id: "design-belief",
      kind: "paragraph",
      text: "We believe great design is not just about how it looks, but how it works. Through thoughtful visualizations, we translate complex SaaS features into intuitive interfaces that users can understand and engage with effortlessly. These visual assets help communicate the product’s core value, simplify onboarding, and build trust from the first interaction.",
    },
  ],
  listColumns: [
    {
      id: "col-a",
      items: [
        "User-Centered Design",
        "Wireframing & Prototyping",
        "Responsive & Scalable Layouts",
        "Visual Consistency & UI Systems",
        "Data-Driven Visualizations",
        "Collaborative Feedback Loops",
      ],
    },
    {
      id: "col-b",
      items: [
        "Usability Testing & Iteration",
        "Component-Based Design",
        "Information Architecture",
        "Brand-Adaptive UI Design",
        "Accessibility-First Design",
        "Agile & Cross-functional Collaboration",
      ],
    },
  ],
  tagsLabel: "Popular Tags:",
  tags: [
    { id: "tag-design", label: "design", href: "#" },
    { id: "tag-mobile", label: "mobile", href: "#" },
    { id: "tag-saas", label: "SaaS", href: "#" },
  ],
  author: {
    name: "Admin",
    bio: "SaaS product enthusiast and digital strategist with a passion building and optimizing user-focused experiences. With years of experience in product design, UX, and cloud-based.",
    image: {
      src: "/assets/images/author/auther.png",
      alt: "Author profile image",
      width: 120,
      height: 120,
    },
    socials: [
      {
        id: "tw",
        href: "#",
        icon: {
          src: "/assets/images/icon/twitter.svg",
          alt: "Twitter icon",
          width: 20,
          height: 20,
        },
      },
      {
        id: "fb",
        href: "#",
        icon: {
          src: "/assets/images/icon/facbook.svg",
          alt: "Facebook icon",
          width: 20,
          height: 20,
        },
      },
      {
        id: "li",
        href: "#",
        icon: {
          src: "/assets/images/icon/linkedin.svg",
          alt: "LinkedIn icon",
          width: 20,
          height: 20,
        },
      },
      {
        id: "yt",
        href: "#",
        icon: {
          src: "/assets/images/icon/youtube.svg",
          alt: "YouTube icon",
          width: 20,
          height: 20,
        },
      },
    ],
  },
  navigation: [
    {
      id: "prev",
      href: "#",
      title: "Why Your Business Needs a Strong Digital Presence in 2026",
      thumb: {
        src: "/assets/images/author/thumb.webp",
        alt: "Previous post thumbnail image",
        width: 120,
        height: 120,
      },
      arrow: {
        src: "/assets/images/icon/arrow.svg",
        alt: "Arrow icon for previous post navigation",
        width: 14,
        height: 14,
      },
    },
    {
      id: "next",
      href: "#",
      title: "Streamline Workflow in Minutes with Our SaaS vs. Traditional",
      thumb: {
        src: "/assets/images/author/thumb2.webp",
        alt: "Next post thumbnail image",
        width: 120,
        height: 120,
      },
      arrow: {
        src: "/assets/images/icon/arrow.svg",
        alt: "Arrow icon for next post navigation",
        width: 14,
        height: 14,
      },
    },
  ],
  commentsTitle: "Comments (3)",
  comments: [
    {
      id: "c1",
      boxClass: "comments-box",
      author: "Arjun Runners",
      date: "July 16, 2026",
      body: "We saw a dramatic improvement in productivity internal communication. Plus, the customer support team has been fantastic",
      avatar: {
        src: "/assets/images/event/avator.jpg",
        alt: "Avatar image",
        width: 72,
        height: 72,
      },
      replyArrow: {
        src: "/assets/images/icon/arrow4.svg",
        alt: "arrow icon",
        width: 12,
        height: 12,
      },
    },
    {
      id: "c2",
      boxClass: "comments-box v2",
      author: "Jessica Tonnato",
      date: "July 16, 2026",
      body: "Before switching to this SaaS platform, our team was juggling multiple tools just to keep projects on track everything we need task management",
      avatar: {
        src: "/assets/images/event/avator.jpg",
        alt: "Avatar image",
        width: 72,
        height: 72,
      },
      replyArrow: {
        src: "/assets/images/icon/arrow4.svg",
        alt: "arrow icon",
        width: 12,
        height: 12,
      },
    },
    {
      id: "c3",
      boxClass: "comments-box",
      author: "Kenton Semple",
      date: "July 17, 2026",
      body: "We saw a dramatic improvement in productivity internal communication. Plus, the customer support team has been fantastic",
      avatar: {
        src: "/assets/images/event/avator.jpg",
        alt: "Avatar image",
        width: 72,
        height: 72,
      },
      replyArrow: {
        src: "/assets/images/icon/arrow4.svg",
        alt: "arrow icon",
        width: 12,
        height: 12,
      },
    },
  ],
  commentForm: {
    title: "Leave a comment",
    notes:
      "Your email address will not be published.Required fields are marked*",
    fields: [
      {
        id: "message",
        kind: "textarea",
        name: "message",
        rows: 4,
        placeholder: "Write Comment*",
        columnClass: "col-lg-12",
      },
      {
        id: "name",
        kind: "text",
        name: "name",
        placeholder: "Your Name*",
        required: true,
        columnClass: "col-lg-6",
      },
      {
        id: "email",
        kind: "email",
        name: "email",
        placeholder: "Your Email*",
        required: true,
        columnClass: "col-lg-6",
      },
    ],
    rememberRow: {
      inputId: "save-comment-details",
      name: "save_comment_details",
      value: "yes",
      label:
        "Save my name, email, and website in this browser for the next time I comment.",
      inputType: "radio",
    },
    submit: {
      label: "Post Comment",
      arrow: {
        src: "/assets/images/icon/arrow.svg",
        alt: "Arrow icon for post comment button",
        width: 14,
        height: 14,
      },
    },
  },
};

const blogPostDetailWithoutHero = Object.fromEntries(
  Object.entries(blogPostImageDetail).filter(([key]) => key !== "hero"),
) as Omit<BlogPostImagePageDetail, "hero">;

export const blogPostGalleryDetail: BlogPostGalleryPageDetail = {
  ...blogPostDetailWithoutHero,
  gallery: [
    {
      id: "gallery-1",
      src: "/assets/images/blog/blog2-2.webp",
      alt: "Blog gallery image one",
      width: 800,
      height: 450,
    },
    {
      id: "gallery-2",
      src: "/assets/images/blog/blog2-3.webp",
      alt: "Blog gallery image two",
      width: 800,
      height: 450,
    },
  ],
};

export const blogPostVideoDetail: BlogPostVideoPageDetail = {
  ...blogPostDetailWithoutHero,
  video: {
    /** Blender Foundation "Sintel" trailer (demo embed; replace for production). */
    src: "https://www.youtube.com/embed/eRsGyueVLvQ",
    title: "YouTube video",
    width: 560,
    height: 315,
    allow:
      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
    allowFullScreen: true,
  },
};

export const blogPostAudioDetail: BlogPostAudioPageDetail = {
  ...blogPostDetailWithoutHero,
  audio: {
    /** Classic SoundCloud embed demo track (replace with your own licensed audio URL). */
    src: "https://soundcloud.com/forss/flickermood",
    title: "SoundCloud audio player",
    width: "100%",
    height: 300,
    allow: "autoplay",
    loading: "lazy",
  },
};