const services = [
  {
    number: "01",
    title: "Website",
    text: "Eine klare Startseite oder ein kompletter Auftritt, der sofort zeigt, warum man Ihnen vertrauen kann.",
  },
  {
    number: "02",
    title: "Struktur",
    text: "Angebot, Referenzen, Ablauf und Kontakt werden so sortiert, dass Besucher nicht suchen müssen.",
  },
  {
    number: "03",
    title: "Technik",
    text: "Schnell, mobil sauber, DSGVO-sauber und so gebaut, dass spätere Änderungen nicht zum Projekt werden.",
  },
];

const ServicesSection = () => {
  return (
    <section
      id="leistungen"
      className="grid border-b border-border lg:grid-cols-[0.36fr_0.64fr]"
    >
      <div className="border-b border-border px-5 py-12 sm:px-8 lg:border-b-0 lg:border-r lg:px-12 lg:py-20">
        <p className="text-sm uppercase tracking-[0.3em] text-primary">
          Leistungen (02)
        </p>
        <h2 className="mt-6 max-w-[9ch] text-5xl font-black uppercase leading-[0.86] sm:text-7xl">
          Drei Schritte. Eine Website.
        </h2>
      </div>
      <div className="divide-y divide-border">
        {services.map((service) => (
          <article
            key={service.number}
            className="grid gap-8 px-5 py-10 sm:px-8 md:grid-cols-[7rem_0.4fr_1fr] lg:px-12"
          >
            <span className="text-5xl font-black text-primary">
              {service.number}
            </span>
            <h3 className="text-3xl font-black uppercase leading-none">
              {service.title}
            </h3>
            <p className="max-w-2xl text-lg leading-8 text-muted-foreground">
              {service.text}
            </p>
          </article>
        ))}
      </div>
    </section>
  );
};

export { ServicesSection };