import React from "react";
import Image from "next/image";

type Service = {
  slug: string;
  title: string;
  subtitle: string;
  blurb: string;
  whatWeDo: string[];
  outcomes: string[];
  iconName?: string;
  image?: string;
};

type Props = {
  service: Service;
  index: number;
};

export default function ServiceSection({ service, index }: Props) {
  const isReversed = index % 2 === 1;
  
  return (
    <section id={service.slug} className="py-16 sm:py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          className={`grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 ${
            isReversed ? "lg:[&>*:first-child]:order-2" : ""
          }`}
        >
          {/* Text column */}
          <div>
            <div className="flex items-center gap-3 mb-4">
                             {service.image && (
                 <div className="flex h-16 w-16 items-center justify-center rounded-lg bg-navy mr-4">
                   <Image
                     src={service.image}
                     alt={service.title}
                     width={64}
                     height={64}
                     className="h-12 w-12 object-cover rounded"
                   />
                 </div>
               )}
              <div className="text-sm">{service.subtitle}</div>
            </div>
            <h2 className="text-2xl font-semibold">{service.title}</h2>
            <p className="mt-3">{service.blurb}</p>

            <div className="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-8">
              <div>
                <h3 className="font-medium mb-2">What We Do</h3>
                <ul className="list-disc pl-5 space-y-1">
                  {service.whatWeDo.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="font-medium mb-2">Outcomes</h3>
                <ul className="list-disc pl-5 space-y-1">
                  {service.outcomes.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </div>
            </div>

            <div className="mt-8">
              <a href={`/services/${service.slug}`} className="inline-block px-4 py-2 border rounded-md">
                Learn More About {service.title}
              </a>
            </div>
          </div>

                     {/* Visual card */}
           <div className="border rounded-xl p-8 flex flex-col items-center justify-center text-center">
             {service.image && (
               <div className="mb-6 h-80 w-80 border rounded-lg overflow-hidden">
                 <Image
                   src={service.image}
                   alt={service.title}
                   width={320}
                   height={320}
                   className="h-full w-full object-cover"
                 />
               </div>
             )}
             <div className="text-lg font-medium">{service.title}</div>
             <div className="text-sm text-gray-600">{service.subtitle}</div>
           </div>
        </div>
      </div>
    </section>
  );
}