import Image from "next/image";

const services = [
  {
    number: "1",
    title: "Brand Discovery",
    description:
      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
    image: "/service-1.jpg",
  },
  {
    number: "2",
    title: "Web design & Dev",
    description:
      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
    image: "/service-2.jpg",
  },
  {
    number: "3",
    title: "Marketing",
    description:
      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
    image: "/service-3.jpg",
  },
  {
    number: "4",
    title: "Photography",
    description:
      "Placeholder description of this service. Explain the value you provide and the outcomes clients can expect. Keep it to two or three sentences.",
    image: "/service-4.jpg",
  },
];

export function Services() {
  return (
    <section className="bg-black px-4 md:px-8 py-20 flex flex-col gap-12">
      {/* Label */}
      <span className="font-mono text-sm text-white uppercase leading-[1.1]">
        [ services ]
      </span>

      {/* "[4] DELIVERABLES" heading */}
      <div className="flex items-center justify-between font-light text-white uppercase tracking-[-0.08em] text-[clamp(48px,6.67vw,96px)] leading-normal">
        <span>[4]</span>
        <span>Deliverables</span>
      </div>

      {/* Service list */}
      <div className="flex flex-col gap-12">
        {services.map((service) => (
          <div key={service.number} className="flex flex-col gap-[9px]">
            {/* Number + divider */}
            <span className="font-mono text-sm text-white uppercase leading-[1.1]">
              [ {service.number} ]
            </span>
            <hr className="border-t border-white/30" />

            {/* Title + description + image */}
            <div className="flex flex-wrap items-start justify-between gap-6 pt-1">
              <p className="font-bold italic text-white uppercase text-[36px] tracking-[-0.04em] leading-[1.1] shrink-0">
                {service.title}
              </p>
              <div className="flex flex-wrap gap-6 items-start">
                <p className="text-white text-sm tracking-[-0.035em] leading-[1.3] max-w-[393px]">
                  {service.description}
                </p>
                <div className="relative size-[151px] shrink-0 overflow-hidden">
                  <Image
                    src={service.image}
                    alt={service.title}
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}