import Image from 'next/image'

import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import { SelectField, TextField } from '@/components/Fields'
import backgroundImage from '@/images/background-call-to-action.jpg'

export function FinalCta() {
  return (
    <section
      id="partner-werden"
      className="relative overflow-hidden bg-blue-600 py-20 sm:py-28"
    >
      <Image
        className="absolute left-1/2 top-1/2 max-w-none -translate-x-1/2 -translate-y-1/2"
        src={backgroundImage}
        alt=""
        width={2347}
        height={1244}
        unoptimized
      />
      <Container className="relative">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
            Werden Sie GebOS Partner und bieten Sie Ihren Kunden eine fertige
            UVI-Lösung an.
          </h2>
          <div className="mt-10 flex flex-col items-center justify-center gap-y-4 sm:flex-row sm:gap-x-6 sm:gap-y-0">
            <Button href="#beratung" color="white">
              Partnergespräch buchen
            </Button>
            <Button href="#beratung" variant="outline" color="white">
              Infopaket anfordern
            </Button>
          </div>
        </div>

        <div
          id="beratung"
          className="mx-auto mt-16 max-w-2xl scroll-mt-24 rounded-3xl bg-white p-8 shadow-xl shadow-blue-900/20 sm:p-10"
        >
          <h3 className="font-display text-xl font-medium text-slate-900">
            Senden Sie uns Ihre Eckdaten
          </h3>
          <p className="mt-2 text-sm text-slate-600">
            Wir melden uns für ein unverbindliches Partnergespräch bei Ihnen.
          </p>
          <form
            action="#"
            className="mt-8 grid grid-cols-1 items-end gap-x-6 gap-y-6 sm:grid-cols-2"
          >
            <TextField
              label="Name"
              name="name"
              type="text"
              autoComplete="name"
              required
            />
            <TextField
              label="Betrieb"
              name="company"
              type="text"
              autoComplete="organization"
            />
            <TextField
              label="Ort / Region"
              name="region"
              type="text"
              autoComplete="address-level2"
            />
            <TextField
              label="Anzahl Vermieter-/Hausverwaltungskunden"
              name="customer_count"
              type="text"
            />
            <SelectField label="Gewerk" name="trade" defaultValue="">
              <option value="" disabled>
                Bitte wählen
              </option>
              <option>Elektro</option>
              <option>Sanitär</option>
              <option>SHK</option>
              <option>Sonstiges</option>
            </SelectField>
            <SelectField label="Interesse an" name="interest" defaultValue="">
              <option value="" disabled>
                Bitte wählen
              </option>
              <option>Installation</option>
              <option>Vertrieb</option>
              <option>Beidem</option>
            </SelectField>
            <div className="col-span-full">
              <Button
                type="submit"
                variant="solid"
                color="blue"
                className="w-full"
              >
                <span>
                  Anfrage senden <span aria-hidden="true">&rarr;</span>
                </span>
              </Button>
            </div>
          </form>
        </div>
      </Container>
    </section>
  )
}