"use client";

import { motion } from "motion/react";
import { ArrowUpLeft } from "lucide-react";

import { Container } from "@/components/container";
import { MotionReveal, MotionRevealItem } from "@/components/motion-reveal";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { layout } from "@/lib/layout";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

type ServiceProps = {
  title: string;
  image: string;
  url: string;
};

const services: ServiceProps[] = [
  {
    title: "طراحی سایت",
    image: "/assets/main-pic/11.jpg",
    url: "#",
  },
  {
    title: "سئو سایت",
    image: "/assets/main-pic/22.jpg",
    url: "#",
  },
  {
    title: "پشتیبانی سایت",
    image: "/assets/main-pic/33.jpg",
    url: "#",
  },
  {
    title: "ارسال انبوه",
    image: "/assets/main-pic/44.jpg",
    url: "#",
  },
];

interface Services14Props {
  className?: string;
}

export function Services14({ className }: Services14Props) {
  return (
    <section
      id="services"
      className={cn(
        "section-shell bg-section-canvas",
        layout.scrollMargin,
        layout.sectionY,
        className
      )}
    >
      <Container className="section-content grid grid-cols-1 gap-10 md:gap-12 lg:grid-cols-2">
        <MotionReveal className="flex flex-col">
          <div>
            <h2 className={cn(type.h2, "mb-4 text-foreground")}>خدمات ما</h2>
            <p className={cn(type["section-intro"], "max-w-md lg:max-w-80")}>
              از طراحی و توسعه وب‌سایت تا سئو و پشتیبانی؛ راه‌حل‌های دیجیتال
              سرتاسری برای رشد کسب‌وکار شما.
            </p>
          </div>
          <Button size="lg" className="mt-6 w-full sm:w-fit" asChild>
            <a href="#contact">
              درخواست مشاوره
              <ArrowUpLeft />
            </a>
          </Button>
        </MotionReveal>

        <div className="relative">
          <div className="local-highlight local-highlight--soft" aria-hidden />
          <MotionReveal
            stagger
            className="relative z-[1] grid grid-cols-2 gap-3 sm:gap-4"
          >
            {services.map((service) => (
              <MotionRevealItem key={service.title}>
                <motion.a
                  href={service.url}
                  whileHover={{ opacity: 0.85 }}
                  className="media-frame group block overflow-hidden rounded-xl transition-opacity duration-200"
                >
                  <Card className="relative aspect-square overflow-hidden border-0 bg-transparent p-0 shadow-none hover:shadow-none">
                    {/* eslint-disable-next-line @next/next/no-img-element */}
                    <img
                      src={service.image}
                      alt={service.title}
                      className="absolute inset-0 size-full object-cover"
                    />
                    <div className="absolute inset-0 bg-linear-to-t from-brand-neutral/80 via-brand-neutral/25 to-transparent" />
                    <CardContent className="absolute inset-0 flex flex-col justify-end p-3 sm:p-4">
                      <div
                        className={cn(
                          type["card-title"],
                          "text-sm text-white sm:text-base"
                        )}
                      >
                        {service.title}
                      </div>
                    </CardContent>
                    <ArrowUpLeft className="absolute start-3 top-3 size-4 text-white transition-transform group-hover:scale-110 sm:start-4 sm:top-4 sm:size-5" />
                  </Card>
                </motion.a>
              </MotionRevealItem>
            ))}
          </MotionReveal>
        </div>
      </Container>
    </section>
  );
}