import { useTranslation } from "react-i18next";
import { FaLaptopCode, FaVideo, FaCog } from "react-icons/fa";
import { MdLaunch, MdFolder, MdPhone } from "react-icons/md";
import styles from "./services.module.css";

type ServiceItem = {
  title: string;
  subtitle: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  demoLink?: string;
  portfolioLink?: string;
  contactLink?: string;
  align: "left" | "right";
};

export default function Services() {
  const { t } = useTranslation("services");

  const services: ServiceItem[] = [
    {
      title: t("servicesPage.websTitle"),
      subtitle: t("servicesPage.websSubtitle"),
      description: t("servicesPage.websDesc"),
      icon: FaLaptopCode,
      demoLink: "/demo/websites",
      portfolioLink: "/portfolio#websites",
      contactLink: "/contact?service=web",
      align: "left",
    },
    {
      title: t("servicesPage.filmTitle"),
      subtitle: t("servicesPage.filmSubtitle"),
      description: t("servicesPage.filmDesc"),
      icon: FaVideo,
      portfolioLink: "/portfolio#videos",
      contactLink: "/contact?service=video",
      align: "right",
    },
    {
      title: t("servicesPage.droneTitle"),
      subtitle: t("servicesPage.droneSubtitle"),
      description: t("servicesPage.droneDesc"),
      icon: FaCog,
      contactLink: "/contact?service=drone",
      align: "left",
    },
  ];

  return (
    <section className={`section ${styles.wrapper}`} aria-labelledby="sluzby-heading">
      <div className="container">
        <header className={styles.header}>
          <h2 id="sluzby-heading" className="text-3xl md:text-4xl font-bold tracking-tight">
            {t("servicesPage.heading")}
          </h2>
          <p className="mt-3 text-neutral-300 max-w-2xl">
            {t("servicesPage.subheading")}
          </p>
        </header>

        <div className={styles.servicesStack}>
          {services.map((service, idx) => {
            const IconComponent = service.icon;

            return (
              <article
                key={service.title}
                className={`${styles.card} ${styles[service.align]} ${styles[`card${(idx % 3) + 1}`]}`}
              >
                <div className={styles.cardBg} />
                <div className={styles.cardInner}>
                  <div className={styles.cardHeader}>
                    <div className={styles.iconWrapper}>
                      <IconComponent className={styles.icon} />
                    </div>
                    <h3 className="text-xl md:text-2xl font-semibold">{service.title}</h3>
                    <span className="text-sm md:text-base opacity-80">{service.subtitle}</span>
                  </div>
                  <p className="mt-3 text-sm md:text-base text-neutral-300">{service.description}</p>

                  <div className={styles.actionButtons}>
                    {service.demoLink && (
                      <a href={service.demoLink} className={styles.button}>
                        <MdLaunch className={styles.buttonIcon} />
                        {t("servicesPage.demo")}
                      </a>
                    )}
                    {service.portfolioLink && (
                      <a href={service.portfolioLink} className={styles.button}>
                        <MdFolder className={styles.buttonIcon} />
                        {t("servicesPage.portfolio")}
                      </a>
                    )}
                    {service.contactLink && (
                      <a href={service.contactLink} className={styles.buttonPrimary}>
                        <MdPhone className={styles.buttonIcon} />
                        {t("servicesPage.contact")}
                      </a>
                    )}
                  </div>
                </div>
              </article>
            );
          })}
        </div>

        <footer className={styles.cta}>
          <a href="/contact" className="glass px-5 py-3 rounded-lg font-medium">
            {t("servicesPage.cta")}
          </a>
        </footer>
      </div>
    </section>
  );
}
