"use client";

import { motion } from "framer-motion";
import { CornerDownLeft, Milestone } from "lucide-react";
import React from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const services = [
  {
    id: 1,
    title: "برندسازی",
    options: ["طراحی لوگو", "هویت برند", "راهنمای استایل", "پالت رنگ"],
  },
  {
    id: 2,
    title: "توسعه",
    options: [
      "وب‌اپلیکیشن",
      "اپلیکیشن موبایل",
      "اتصال هوشمندها",
      "طراحی پایگاه داده",
      "DevOps",
    ],
  },
  {
    id: 3,
    title: "بازاریابی",
    options: ["سئو", "شبکه‌های اجتماعی", "استراتژی محتوا", "تحلیل"],
  },
  {
    id: 4,
    title: "راه‌اندازی",
    options: ["آزمایش", "استقرار", "پشتیبانی راه‌اندازی", "رفع اشکال"],
  },
  {
    id: 5,
    title: "پشتیبانی",
    options: ["پشتیبانی ۲۴/۷", "نگهداری", "به‌روزرسانی", "آموزش"],
  },
];

interface Services20Props {
  className?: string;
}

const Services20 = ({ className }: Services20Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col justify-between gap-[10vw] lg:flex-row">
          <h2 className="pt-4 tracking-tight text-foreground/30 md:block">
            خدماتی که ارائه می‌دهیم
          </h2>
          <div className="w-full max-w-3xl px-2">
            <h1 className="text-3xl font-semibold tracking-tighter md:text-2xll">
              رویکرد جامع ما برای تحویل نتایج استثنایی از طریق متدولوژی
              ساختاریافته
            </h1>
            <Button variant="ghost" className="mt-6 gap-2 lg:text-base">
              <CornerDownLeft className="size-5 text-orange-500 rtl:-scale-x-100" />
              تماس بگیرید
            </Button>
          </div>
        </div>
        <ul className="mt-20 space-y-2">
          {services.map((service, index) => (
            <motion.li
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{
                type: "spring",
                stiffness: 100,
                damping: 20,
                delay: index * 0.1,
              }}
              key={service.id}
              className="relative flex h-54 w-full flex-col justify-center gap-5 md:h-27 lg:flex-row lg:items-center lg:justify-between"
            >
              <div
                style={{
                  backgroundImage:
                    "repeating-linear-gradient(45deg, transparent, transparent 2px, var(--muted) 2px, var(--muted) 4px)",
                }}
                className={cn(
                  "absolute left-1/2 h-54 w-screen -translate-x-1/2 md:h-27",
                )}
              ></div>

              <h3 className="relative z-1 text-3xl font-medium tracking-tight md:text-8xl">
                {service.title}
              </h3>
              <div className="relative z-10 flex w-full max-w-xs flex-wrap gap-2">
                {service.options.map((option, optionIndex) => (
                  <div
                    key={optionIndex}
                    className="flex items-center justify-center gap-3"
                  >
                    <Milestone className="size-5 text-muted-foreground" />{" "}
                    {option}
                  </div>
                ))}
              </div>
            </motion.li>
          ))}
        </ul>
      </div>
    </section>
  );
};

export { Services20 };