import Image from "next/image";
import Link from "next/link";

type SocialItem = {
  id: number;
  icon: string;
  alt: string;
  path: string;
};

type PostNavItem = {
  id: number;
  title: string;
  path: string;
  thumb?: string;
  thumbAlt?: string;
  arrowIcon?: string;
  arrowAlt?: string;
};

type CommentField = {
  id: number;
  type: "text" | "email";
  idName: string;
  name: string;
  placeholder: string;
  colClassName: string;
};

const articleParagraphs = [
  "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.",
  "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 insights.",
  "We believe great design is not just about how 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.",
];

const popularTags = ["dashboard", "Saas"];

const authorSocialLinks: SocialItem[] = [
  {
    id: 1,
    icon: "/assets/images/icon/twitter.svg",
    alt: "Twitter social media icon",
    path: "https://twitter.com",
  },
  {
    id: 2,
    icon: "/assets/images/icon/facbook.svg",
    alt: "Facebook social media icon",
    path: "https://facebook.com",
  },
  {
    id: 3,
    icon: "/assets/images/icon/linkedin.svg",
    alt: "LinkedIn social media icon",
    path: "https://linkedin.com",
  },
  {
    id: 4,
    icon: "/assets/images/icon/youtube.svg",
    alt: "YouTube social media icon",
    path: "https://youtube.com",
  },
];

const postNavigationItems: PostNavItem[] = [
  {
    id: 1,
    title: "Enhancing Help Desk Efficiency Through Collaboration",
    path: "/blog-details",
    thumb: "/assets/images/author/thumb.webp",
    thumbAlt: "Previous post author thumbnail image",
    arrowIcon: "/assets/images/icon/arrow1-5.svg",
    arrowAlt: "Arrow icon for previous post navigation",
  },
  {
    id: 2,
    title: "Enhancing Help Desk Efficiency Through Collaboration",
    path: "/blog-details",
  },
];

const commentFields: CommentField[] = [
  {
    id: 1,
    type: "text",
    idName: "name",
    name: "name",
    placeholder: "Your Name*",
    colClassName: "col-lg-6",
  },
  {
    id: 2,
    type: "email",
    idName: "email",
    name: "email",
    placeholder: "Your Email*",
    colClassName: "col-lg-6",
  },
];

export default function BlogArticleContent() {
  return (
    <div
      className="blog-detail-content"
      data-aos="fade-up"
      data-aos-duration="900"
      data-aos-delay="200"
    >
      <div className="video-wrap">
        <iframe
          id="videoFrame"
          width="100%"
          height="450"
          src="https://www.youtube.com/embed/y25tTCPRcHs?rel=0&modestbranding=1"
          title="YouTube video player"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        ></iframe>
      </div>

      {articleParagraphs.map((paragraph) => (
        <p className="paragraph" key={paragraph}>
          {paragraph}
        </p>
      ))}

      <blockquote className="testimonial">
        <Image
          src="/assets/images/icon/comas.png"
          alt="Quotation mark icon for testimonial"
          width={48}
          height={48}
        />
        <p>
          “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.”
        </p>
      </blockquote>

      <ul className="tag-list">
        <li>
          <span>Popular Tags:</span>
        </li>
        {popularTags.map((tag) => (
          <li key={tag}>
            <Link href={`/blog-standard?tag=${encodeURIComponent(tag)}`}>{tag}</Link>
          </li>
        ))}
      </ul>

      <div className="auther-bio">
        <div className="author-image">
          <Image
            src="/assets/images/author/auther1-1.png"
            alt="Author profile photo of admin user"
            width={110}
            height={110}
          />
        </div>
        <div className="author-info">
          <h1 className="name">Admin</h1>
          <p>
            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.
          </p>
          <ul className="social-link2">
            {authorSocialLinks.map((social) => (
              <li key={social.id}>
                <Link href={social.path} target="_blank" rel="noopener noreferrer">
                  <Image
                    src={social.icon}
                    alt={social.alt}
                    width={20}
                    height={20}
                  />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </div>

      <div className="post-nav">
        {postNavigationItems.map((item) => (
          <div className="btn-nav post-prev" key={item.id}>
            <Link href={item.path}>
              {item.thumb && (
                <div className="nav-thumb">
                  <Image
                    src={item.thumb}
                    alt={item.thumbAlt ?? "Post thumbnail"}
                    width={85}
                    height={85}
                  />
                  {item.arrowIcon && (
                    <Image
                      src={item.arrowIcon}
                      alt={item.arrowAlt ?? "Post navigation arrow"}
                      width={24}
                      height={24}
                      className="post-btn"
                    />
                  )}
                </div>
              )}
              <div className="nav-text">
                <h1 className="title">{item.title}</h1>
                <span>Read more</span>
              </div>
            </Link>
          </div>
        ))}
      </div>

      <div className="comment-respond" id="comments">
        <h2 className="comment-reply-title">Leave a comment</h2>
        <p className="comment-notes">
          Your email address will not be published.Required fields are marked*
        </p>
        <form className="comment-form">
          <div className="row">
            <div className="col-lg-12">
              <div className="form-group">
                <textarea
                  id="message"
                  name="message"
                  rows={4}
                  placeholder="Write Comment*"
                ></textarea>
              </div>
            </div>

            {commentFields.map((field) => (
              <div className={field.colClassName} key={field.id}>
                <div className="form-group">
                  <input
                    type={field.type}
                    id={field.idName}
                    name={field.name}
                    placeholder={field.placeholder}
                    required
                  />
                </div>
              </div>
            ))}

            <div className="col-lg-12">
              <div className="radio-btn">
                <input
                  type="radio"
                  id="saveInfo"
                  name="commentPreferences"
                  value="save"
                />
                <label htmlFor="saveInfo">
                  Save my name, email, and website in this browser for the next
                  time I comment.
                </label>
              </div>
            </div>

            <div className="col-lg-12">
              <button type="submit" className="btn-style1">
                Post Comment
                <span>
                  <Image
                    src="/assets/images/icon/arrow.svg"
                    alt="Arrow icon for post comment button"
                    width={16}
                    height={16}
                  />
                </span>
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  );
}