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

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>
  )
}

/** A step the installer already covers through their local presence. */
function CoveredStep({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex items-center gap-x-4 rounded-2xl bg-slate-50 px-5 py-4 ring-1 ring-slate-900/5">
      <span className="flex h-8 w-8 flex-none items-center justify-center rounded-full bg-blue-50">
        <CheckIcon className="h-5 w-5 fill-blue-600" />
      </span>
      <span className="text-sm font-medium text-slate-700">{children}</span>
    </div>
  )
}

/** The visual: the installer's service chain with a gap that GebOS fills. */
function GapVisual() {
  return (
    <div className="relative mx-auto w-full max-w-md">
      <div className="rounded-3xl bg-white p-6 shadow-xl shadow-slate-900/5 ring-1 ring-slate-900/5 sm:p-8">
        <div className="mt-6 space-y-3">
          <CoveredStep>Beratung vor Ort</CoveredStep>
          <CoveredStep>Installation der Messtechnik</CoveredStep>

          {/* The Lücke — a dashed slot the GebOS piece slots into. */}
          <div className="relative py-4">
            <div className="absolute -inset-x-1 inset-y-2 rounded-2xl border-2 border-dashed border-blue-300" />
            <span className="absolute -top-1 left-1/2 -translate-x-1/2 rounded-full bg-white px-2 text-xs font-semibold uppercase tracking-wide text-blue-500">
              Die Lücke
            </span>
            <div className="relative rounded-2xl bg-blue-600 p-5 shadow-lg shadow-blue-600/25">
              {/* Connector tabs that key the piece into the chain above & below. */}
              <span className="absolute -top-2 left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-blue-600" />
              <span className="absolute -bottom-2 left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-blue-600" />
              <Logo white className="h-6 w-auto" />
              <ul
                role="list"
                className="mt-3 space-y-1.5 text-sm font-medium text-blue-50"
              >
                {['Software-Plattform', 'Datenverarbeitung', 'Abrechnung'].map(
                  (item) => (
                    <li key={item} className="flex items-center gap-x-2">
                      <span className="h-1.5 w-1.5 flex-none rounded-full bg-blue-200" />
                      {item}
                    </li>
                  ),
                )}
              </ul>
            </div>
          </div>

          <CoveredStep>Monatliche UVI für die Mieter</CoveredStep>
        </div>
      </div>
    </div>
  )
}

export function Problem() {
  return (
    <section
      id="ausgangslage"
      aria-labelledby="problem-title"
      className="bg-slate-50 py-20 sm:py-32"
    >
      <Container>
        <div className="grid grid-cols-1 items-center gap-x-16 gap-y-12 lg:grid-cols-2">
          <div>
            <h2
              id="problem-title"
              className="font-display text-3xl tracking-tight text-slate-900 sm:text-4xl"
            >
              Ihnen fehlt die passende Software?
            </h2>
            <p className="mt-6 text-lg tracking-tight text-slate-700">
              Sie erhalten Anfragen zur Umsetzung der neuen UVI-Pflicht, haben aber keine eigene Softwarelösung für Verbrauchsdaten, monatliche Informationen und digitale Abwicklung?
            </p>

            <div className="mt-8 rounded-2xl border-l-4 border-blue-600 bg-blue-50/60 p-6">
              <p className="text-base text-slate-800">
                <span className="font-semibold text-slate-900">
                  Mit uns:
                </span>{' '}
                Bleiben Sie Ansprechpartner vor Ort, während GebOS die digitale
                Infrastruktur bereitstellt.
              </p>
            </div>
          </div>

          <GapVisual />
        </div>
      </Container>
    </section>
  )
}
