import React from "react";

const services = [
  {
    title: "Web Development",
    imageUrl:
      "https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=600&q=80",
    description:
      "Custom responsive websites optimized for performance, SEO, and user experience.",
    features: [
      "Responsive Design",
      "SEO Optimization",
      "Performance Optimization",
      "CMS Integration",
    ],
    link: "#contact",
  },
  {
    title: "Graphic Design",
    imageUrl:
      "https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&w=600&q=80",
    description:
      "Eye-catching logos, brochures, and digital assets that reflect your brand identity.",
    features: [
      "Logo & Branding",
      "Print Materials",
      "Digital Illustrations",
      "UI Elements",
    ],
    link: "#contact",
  },
  {
    title: "SEO Services",
    imageUrl:
      "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=600&q=80",
    description:
      "Comprehensive SEO strategies to boost search rankings and organic traffic.",
    features: [
      "Keyword Research",
      "On-page SEO",
      "Link Building",
      "Analytics & Reporting",
    ],
    link: "#contact",
  },
  {
    title: "Social Media",
    imageUrl:
      "https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=600&q=80",
    description:
      "Engage your audience across platforms with targeted content and campaigns.",
    features: [
      "Content Creation",
      "Ad Campaigns",
      "Engagement Tracking",
      "Influencer Outreach",
    ],
    link: "#contact",
  },


  {
    title: "Mobile Application",
    imageUrl:
      "https://images.unsplash.com/photo-1529610542-3d3fa2e6535c?auto=format&fit=crop&w=600&q=80",
    description: "Native and cross-platform mobile apps for iOS and Android.",
    features: [
      "UI/UX Design",
      "iOS & Android",
      "Push Notifications",
      "App Store Deployment",
    ],
    link: "#contact",
  },
  {
    title: "Branding",
    imageUrl:
      "https://images.unsplash.com/photo-1548094990-c16ca90f1f0d?auto=format&fit=crop&w=600&q=80",
    description:
      "Craft cohesive brand identities with logos, color palettes, typography guidelines, and brand strategy.",
    features: [
      "Logo Design",
      "Brand Guidelines",
      "Visual Identity",
      "Brand Strategy",
    ],
    link: "#contact",
  },
];

function ServiceCard({ imageUrl, title, description, features, link }) {
  return (
    <div className="group max-w-7xl h-full bg-white rounded-2xl shadow-xl overflow-hidden transition-transform transform hover:scale-105 hover:shadow-xl flex flex-col">
      <img
        src={imageUrl}
        alt={title}
        className="w-full h-40 object-cover"
      />
      <div className="p-6 flex flex-col flex-grow">
        <h3 className="text-2xl font-bold text-blue-900 mb-2">{title}</h3>
        <p className="text-gray-600 text-sm flex-grow">{description}</p>
        <ul className="space-y-1 mb-4">
          {features.map((item, idx) => (
            <li key={idx} className="flex items-center text-gray-700 text-sm">
              <span className="mr-2">✔</span>
              {item}
            </li>
          ))}
        </ul>
        <a
          href={link}
          className="mt-auto w-full text-center font-semibold text-white bg-blue-900 hover:bg-blue-700 px-5 py-2 rounded-lg transition-colors"
        >
          Contact Us
        </a>
      </div>
    </div>
  );
}

export default function Services() {
  return (
    <section id="services" className="py-16 bg-gray-50">
      <div className="max-w-7xl mx-auto px-8 text-center mb-12">
        <h2 className="text-4xl font-bold text-blue-900 mb-4">Our Services</h2>
        <p className="text-gray-600 text-lg">
          Explore the wide range of digital solutions we offer to help your business grow.
        </p>
      </div>
      <div className="max-w-7xl mx-auto px-8 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {services.map((service) => (
          <ServiceCard key={service.title} {...service} />
        ))}
      </div>
    </section>
  );
}