import './services-feature.css';

export type Service = {
  title: string;
  description: string;
};

const services: Service[] = [
  {
    title: 'Custom Web Design',
    description:
      'Tailored layouts and branding that reflect your business and engage your audience from the first visit.',
  },
  {
    title: 'Web Development',
    description:
      'Fast, reliable sites built with modern frameworks—scalable architecture that grows with your company.',
  },
  {
    title: 'E-commerce',
    description:
      'Online stores with smooth checkout, inventory management, and payment integrations that convert.',
  },
  {
    title: 'Performance & SEO',
    description:
      'Optimised load times, accessibility, and search visibility so customers can find and use your site.',
  },
  {
    title: 'Hosting & Maintenance',
    description:
      'Secure hosting, updates, backups, and monitoring so your site stays online and up to date.',
  },
  {
    title: 'APIs & Integrations',
    description:
      'Connect CRMs, booking systems, analytics, and third-party tools into one cohesive workflow.',
  },
];

function ServiceFeatureCard({ title, description }: Service) {
  return (
    <article className="service-feature">
      <div className="service-feature-body">
        <div className="service-feature-icon" aria-hidden="true">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              stroke="currentColor"
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth="2"
              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
            />
          </svg>
        </div>
        <h3 className="service-feature-title">{title}</h3>
        <p className="service-feature-description">{description}</p>
      </div>
    </article>
  );
}

type ServicesFeatureProps = {
  heading?: string;
  subheading?: string;
  items?: Service[];
};

export default function ServicesFeature({
  heading = 'What we offer',
  subheading = 'End-to-end web solutions for businesses of every size.',
  items = services,
}: ServicesFeatureProps) {
  return (
    <section className="services-feature w-full">
      <header className="mb-10 max-w-2xl">
        <h2 className="mb-3 text-4xl font-bold tracking-tight text-heading md:text-5xl">
          {heading}
        </h2>
        <p className="text-lg text-body lg:text-xl">{subheading}</p>
      </header>
      <ul className="services-feature-grid">
        {items.map((service) => (
          <li key={service.title} className="list-none">
            <ServiceFeatureCard {...service} />
          </li>
        ))}
      </ul>
    </section>
  );
}