import Image from 'next/image'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import screenshot from '@/images/screenshots/reporting.png'

export function Platform() {
  return (
    <section id="plattform" className="py-20 sm:py-32">
      <Container>
        <div className="relative overflow-hidden rounded-4xl bg-blue-600 px-6 py-16 sm:px-12 sm:py-20 lg:px-16">
          <div className="grid grid-cols-1 items-center gap-x-12 gap-y-12 lg:grid-cols-2">
            <div className="max-w-xl">
              <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
                Die GebOS Platform
              </h2>
              <p className="mt-4 text-lg leading-8 tracking-tight text-blue-100">
                Verbrauchsdaten erfassen, UVI bereitstellen und Abrechnungen
                verwalten – alles an einem Ort.
              </p>
              <Button href="#" color="white" className="mt-8">
                Erkunden
              </Button>
            </div>

            {/* Placeholder UI interface */}
            <div className="overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-slate-900/10">
              <div className="flex items-center gap-1.5 border-b border-slate-100 bg-slate-50 px-4 py-3">
                <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
                <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
                <span className="h-2.5 w-2.5 rounded-full bg-slate-300" />
              </div>
              <Image
                src={screenshot}
                alt="GebOS Platform – Benutzeroberfläche (Platzhalter)"
                className="w-full"
                sizes="(min-width: 1024px) 36rem, 100vw"
              />
            </div>
          </div>
        </div>
      </Container>
    </section>
  )
}
