"use client";

import Image from "next/image";
import { useState } from "react";
import { services } from "@/data/home";

export function Services() {
  const [active, setActive] = useState(services[0].id);
  const current = services.find((s) => s.id === active) ?? services[0];

  return (
    <section id="services" className="section">
      <div className="container-page">
        <div className="section-head">
          <h2>خدمات رسام تجارت هواران</h2>
          <p>Havaran Services</p>
        </div>

        <div className="grid min-w-0 gap-6 lg:grid-cols-12">
          <div className="min-w-0 lg:col-span-3">
            <div className="flex max-w-full flex-row gap-2 overflow-x-auto lg:flex-col lg:overflow-visible">
              {services.map((item) => {
                const isActive = item.id === active;
                return (
                  <button
                    key={item.id}
                    type="button"
                    onClick={() => setActive(item.id)}
                    className={`whitespace-nowrap border px-4 py-3 text-right text-sm font-bold transition lg:w-full ${
                      isActive
                        ? "border-accent-green bg-accent-green text-white"
                        : "border-[#e5e5e5] bg-white text-[#333] hover:border-accent-green"
                    }`}
                  >
                    {item.title}
                  </button>
                );
              })}
            </div>
          </div>

          <div className="grid min-w-0 overflow-hidden border border-[#eee] bg-white lg:col-span-9 md:grid-cols-2">
            <div className="relative min-h-[280px] bg-[#f7f7f7]">
              <Image
                key={current.image}
                src={current.image}
                alt={current.title}
                fill
                className="object-cover"
                sizes="(max-width: 768px) 100vw, 40vw"
              />
            </div>
            <div className="flex flex-col justify-center p-6 sm:p-8">
              <p className="mb-2 text-sm font-bold text-accent-green">
                {current.titleEn}
              </p>
              <h3 className="mb-3 text-xl font-bold text-[#232323]">
                {current.title}
              </h3>
              <p className="mb-5 leading-8 text-[#666]">{current.description}</p>
              <a href="/products" className="btn-more self-start">
                مشاهده محصولات
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
