import { StatsSection } from '@/components/partner/StatsSection'

const stats = [
  { value: '100–250 €', label: 'Einmalige Installationsvergütung pro Objekt' },
  { value: '10–15 %', label: 'Laufende monatliche Provision am Kundenumsatz' },
]

function InfoIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 20 20" aria-hidden="true" className={className}>
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-11.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.25 9a.75.75 0 0 0 0 1.5h.25v2.25a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5h-.25V9.75A.75.75 0 0 0 10 9H9.25Z"
      />
    </svg>
  )
}

export function Earnings() {
  return (
    <section
      id="einnahmemodell"
      aria-labelledby="earnings-title"
      className="py-20 sm:py-32"
    >
      <StatsSection
        eyebrow="Einnahmemodell"
        title="So verdienen Sie als Partner mit"
        titleId="earnings-title"
        stats={stats}
      >
        <p className="text-xl/8 text-slate-700">
          Sie installieren beim Kunden – GebOS rechnet monatlich mit dem
          Vermieter ab und beteiligt Sie am laufenden Umsatz.
        </p>
        <p className="mt-8 max-w-xl text-base/7 text-slate-600">
          Beispiel: Ein Vermieter mit{' '}
          <span className="font-semibold text-slate-900">20 Wohneinheiten</span>{' '}
          nutzt das GebOS UVI-Servicepaket. GebOS rechnet monatlich mit dem
          Vermieter ab. Der Installateur erhält für die Installation eine
          einmalige Vergütung und zusätzlich eine laufende Beteiligung am
          Kundenumsatz.
        </p>
        <div className="mt-8 flex items-start gap-x-3">
          <InfoIcon className="mt-0.5 h-5 w-5 flex-none fill-slate-400" />
          <p className="text-sm tracking-tight text-slate-500">
            Beispielhafte Werte. Die genaue Vergütung hängt von Objektgröße,
            Leistungsumfang und Partnerstufe ab.
          </p>
        </div>
      </StatsSection>
    </section>
  )
}
