import { Container } from '@/components/Container'

const steps = [
  {
    title: 'Kunde fragt an',
    description:
      'Ein Vermieter oder eine Hausverwaltung fragt nach einer UVI-Lösung.',
  },
  {
    title: 'Sie bieten GebOS an',
    description: 'Sie empfehlen das GebOS UVI-Servicepaket.',
  },
  {
    title: 'Sie installieren',
    description:
      'Sie übernehmen Installation und Inbetriebnahme beim Kunden.',
  },
  {
    title: 'Sie verdienen mit',
    description:
      'GebOS vergütet Sie über eine Installationspauschale, Provision oder laufende Beteiligung.',
  },
]

export function HowItWorks() {
  return (
    <section
      id="so-funktioniert-es"
      aria-labelledby="how-it-works-title"
      className="py-20 sm:py-32"
    >
      <Container>
        <div className="mx-auto max-w-2xl text-center">
          <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
            Das Partner-Modell
          </p>
          <h2
            id="how-it-works-title"
            className="mt-3 font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
          >
            So funktioniert das Partner-Modell
          </h2>
          <p className="mt-4 text-lg tracking-tight text-slate-700">
            Ein einfacher Ablauf in vier Schritten.
          </p>
        </div>

        <ol
          role="list"
          className="relative mx-auto mt-16 grid max-w-md grid-cols-1 gap-y-12 sm:max-w-3xl sm:grid-cols-2 sm:gap-x-12 lg:max-w-none lg:grid-cols-4 lg:gap-x-8"
        >
          {/* Connector line behind the step numbers on large screens. */}
          <div
            aria-hidden="true"
            className="absolute left-[12.5%] right-[12.5%] top-7 hidden h-px bg-slate-200 lg:block"
          />

          {steps.map((step, index) => (
            <li key={step.title} className="relative text-center lg:text-left">
              <span className="relative mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 font-display text-xl font-semibold text-white shadow-lg shadow-blue-600/25 lg:mx-0">
                {index + 1}
              </span>
              <h3 className="mt-6 font-display text-lg font-medium text-slate-900">
                {step.title}
              </h3>
              <p className="mt-2 text-base tracking-tight text-slate-600">
                {step.description}
              </p>
            </li>
          ))}
        </ol>
      </Container>
    </section>
  )
}