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";
};

const services: ServiceItem[] = [
  {
    title: "Weby",
    subtitle: "Od prezentačních až po komplexní",
    description:
      "Tvorba webových stránek všech velikostí - od jednoduchých prezentačních po složité aplikace s databází, e-shopy a portály.",
    icon: FaLaptopCode,
    demoLink: "/demo/websites",
    portfolioLink: "/portfolio#websites",
    contactLink: "/contact?service=web",
    align: "left",
  },
  {
    title: "Filmařina",
    subtitle: "Natáčení, drony, střih",
    description:
      "Natáčení na místě, drony, reels/TikTok videa a samozřejmě střih. Kompletní video produkce od námětu po finální video.",
    icon: FaVideo,
    portfolioLink: "/portfolio#videos",
    contactLink: "/contact?service=video",
    align: "right",
  },
  {
    title: "Servis Dronů",
    subtitle: "Opravy a údržba",
    description:
      "Profesionální servis a údržba dronů. Diagnostika, opravy, kalibrace a poradenství pro bezpečný provoz.",
    icon: FaCog,
    contactLink: "/contact?service=drone",
    align: "left",
  },
];export default function Services() {
	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">
						Služby, které nabízím
					</h2>
					<p className="mt-3 text-neutral-300 max-w-2xl">
						Od návrhu až po produkční nasazení. Stavím udržitelné systémy s důrazem na
						výkon, bezpečnost a spolehlivost. Základem jsou jasné procesy, čistý kód a
						měřitelné výsledky.
					</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} />
                        Demo
                      </a>
                    )}
                    {service.portfolioLink && (
                      <a href={service.portfolioLink} className={styles.button}>
                        <MdFolder className={styles.buttonIcon} />
                        Portfolio
                      </a>
                    )}
                    {service.contactLink && (
                      <a href={service.contactLink} className={styles.buttonPrimary}>
                        <MdPhone className={styles.buttonIcon} />
                        Kontakt
                      </a>
                    )}
                  </div>
                </div>
              </article>
            );
          })}
        </div>				<footer className={styles.cta}>
					<a href="/contact" className="glass px-5 py-3 rounded-lg font-medium">
						Pojďme to probrat →
					</a>
				</footer>
			</div>
		</section>
	);
}

