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

const gebosTasks = [
  'Softwareplattform',
  'Datenverarbeitung',
  'UVI-Service',
  'Monatliche Rechnung an Vermieter',
  'Technischer Support',
]

const installerTasks = [
  'Beratung beim Kunden',
  'Installation vor Ort',
  'Inbetriebnahme',
  'Optional First-Level-Support',
  'Lokale Kundenbeziehung',
]

function CheckIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className={className}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.56a1 1 0 0 1-1.42 0l-3.5-3.53a1 1 0 1 1 1.42-1.408l2.79 2.812 6.79-6.844a1 1 0 0 1 1.414-.005Z"
      />
    </svg>
  )
}

export function Responsibilities() {
  return (
    <section
      id="aufgabenteilung"
      aria-labelledby="responsibilities-title"
      className="bg-slate-50 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">
            Klare Aufgabenteilung
          </p>
          <h2
            id="responsibilities-title"
            className="mt-3 font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
          >
            Was übernimmt GebOS?
          </h2>
          <p className="mt-4 text-lg tracking-tight text-slate-700">
            Eine transparente Aufteilung: Sie behalten die Kundenbeziehung,
            GebOS übernimmt Technik und Abrechnung im Hintergrund.
          </p>
        </div>

        <div className="relative mx-auto mt-16 grid max-w-4xl grid-cols-1 gap-8 lg:grid-cols-2">
          {/* GebOS card — brand blue */}
          <div className="rounded-3xl bg-blue-600 p-8 shadow-xl shadow-blue-600/20">
            <div className="flex items-center gap-x-3">
              <Logo white className="h-7 w-auto" />
              <span className="text-sm font-medium text-blue-100">
                übernimmt
              </span>
            </div>
            <ul role="list" className="mt-8 space-y-4">
              {gebosTasks.map((task) => (
                <li key={task} className="flex items-center gap-x-3">
                  <span className="flex h-7 w-7 flex-none items-center justify-center rounded-full bg-white/15">
                    <CheckIcon className="h-5 w-5 fill-white" />
                  </span>
                  <span className="text-base font-medium text-white">
                    {task}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* Installer card — white */}
          <div className="rounded-3xl bg-white p-8 shadow-xl shadow-slate-900/5 ring-1 ring-slate-900/5">
            <p className="font-display text-xl font-medium text-slate-900">
              Sie als Installateur{' '}
              <span className="font-normal text-slate-500">übernehmen</span>
            </p>
            <ul role="list" className="mt-8 space-y-4">
              {installerTasks.map((task) => (
                <li key={task} className="flex items-center gap-x-3">
                  <span className="flex h-7 w-7 flex-none items-center justify-center rounded-full bg-blue-50">
                    <CheckIcon className="h-5 w-5 fill-blue-600" />
                  </span>
                  <span className="text-base font-medium text-slate-700">
                    {task}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* The two halves combine into one solution. */}
          <span className="absolute left-1/2 top-1/2 z-10 flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white font-display text-2xl font-semibold text-blue-600 shadow-lg ring-1 ring-slate-900/5">
            +
          </span>
        </div>
      </Container>
    </section>
  )
}
