import { ArrowUpRight } from "lucide-react";
import React from "react";

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

interface Experience2Props {
  className?: string;
}

const Experience2 = ({ className }: Experience2Props) => {
  const experience = [
    {
      period: "۱۴۰۴ - تاکنون",
      title: "مهندس ارشد محصول",
      description:
        "رهبری توسعه پلتفرم سامانه مدیریت ارتباط با مشتری مقیاس‌پذیر؛ اتوماسیون فروش و داشبورد زنده برای تیم‌های سازمانی.",
      company: "گوگل",
    },
    {
      period: "۱۴۲ - ۱۴۰۴",
      title: "مهندس فول‌استک",
      description:
        "ساخت ماژول‌های قیف فروش و یکپارچه‌سازی برای مشتریان B2B با تمرکز روی تجربه کاربری.",
      company: "مایکروسافت",
    },
    {
      period: "۱۳۹۹ - ۱۴۱",
      title: "مهندس تجربه محصول",
      description:
        "توسعه داشبوردهای واکنش‌گرا با تمرکز روی عملکرد گزارش و دسترس‌پذیری تیم فروش.",
      company: "اپل",
    },
    {
      period: "۱۳۹۸ - ۱۳۹۹",
      title: "توسعه‌دهنده تازه‌کار",
      description:
        "همکاری در ساخت وب‌اپلیکیشن‌ها و یادگیری شیوه‌های مدرن توسعه. مشارکت در پروژه‌های تیمی و بازبینی کد.",
      company: "نتفلیکس",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
            <h1 className="text-2xll font-medium tracking-tight">
              مسیر حرفه‌ای
              <sup className="align-top text-sm tracking-tight text-foreground/40">
                ۴ سال تجربه
              </sup>
            </h1>
            <p className="text-base text-foreground/50">
              مسیر حرفه‌ای من در توسعه وب، از یادگیری اصول تا رهبری تیم‌های
              فنی و ساخت محصولات مقیاس‌پذیر با تکنولوژی‌های مدرن.
            </p>

            <Button
              variant="secondary"
              className="group h-12 rounded-full pe-2"
            >
              تماس بگیرید
              <span className="rounded-full bg-orange-500 p-2 text-white">
                <ArrowUpRight className="size-4 transition-transform duration-300 rtl:rotate-180 group-hover:rotate-45 rtl:group-hover:rotate-[-135deg]" />
              </span>
            </Button>
          </div>
          <ul className="relative col-span-4 w-full">
            {experience.map((exp, index) => (
              <li
                key={index}
                className="flex flex-col justify-between gap-10 border-b py-10 md:flex-row lg:items-center lg:py-15"
              >
                <div className="lg:w-2/3">
                  <h2 className="mb-4 font-medium tracking-tighter lg:text-xl">
                    {exp.company}
                  </h2>
                  <h3 className="mb-4 text-xl font-semibold tracking-tighter lg:text-3xl">
                    {exp.title}
                  </h3>
                  <p className="text-foreground/50">{exp.description}</p>
                </div>
                <div className="w-fit rounded-full bg-muted px-4 py-1 tracking-tighter">
                  {exp.period}
                </div>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Experience2 };