import Link from 'next/link';
import Image from 'next/image';

const oldLink = (
  <Link href="/ews" className="group-hover:">
    <Image src="/EWS.jpg" width={575} height={663} alt="Erdwärmesonden" className="mx-auto"></Image>
    <p className="max-w-screen-md mt-4">
      Nutzen Sie die Wärme des Untergrunds mit Erdwärmesonden. Dieses System nutzt vertikale Bohrungen, in denen eine
      Wärmeträgerflüssigkeit zirkuliert und über die der Wärmeaustausch stattfindet.
    </p>
  </Link>
);

export default function Home() {
  return (
    <div className="absolute bottom-0 top-16 left-0 right-0 overflow-y-auto text-sm xl:text-base mb-4">
      <div className="max-w-screen-2xl mx-auto mt-8 mb-4 px-8 xl:px-24">
        <h1 className="text-red-700 text-base md:text-xl xl:text-2xl mb-2 font-semibold">
          Willkommen beim Geothermie-Atlas!
        </h1>
        <p className="whitespace-normal wordbreak-normal">
          Hier erhalten Sie maßgeschneiderte Informationen, um fundierte Entscheidungen über oberflächennahe
          Geothermie-Systeme an gewählten Standorten treffen zu können. Ob Sie HausbesitzerIn, ProjektentwicklerIn,
          InvestorIn sind, oder sich allgemein für erneuerbare Energiequellen interessieren, unsere Karten und die
          Grundstücksabfrage bieten Ihnen wertvolle Einblicke in das Energiepotential Ihres Grundstücks. Momentan ist
          der Geothermie-Atlas für Wien verfügbar, an einer österreichweiten Ergänzung wird gearbeitet. Nutzen Sie die
          Kraft der Geothermie! Klicken Sie unten, um zu den Karten und der Grundstücksabfrage zu gelangen.
        </p>
      </div>
      <div className="absolute px-8 flex justify-center flex-col md:flex-row w-full gap-x-2 gap-y-2">
        <div className="px-2 md:px-5 py-4 max-w-lg xl:max-w-2xl border border-gray-300">
          <div className="flex justify-between">
            <Link
              href="/ews/grundlagenkarte"
              className="shrink group border border-transparent px-2 xl:px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100"
            >
              <h2 className={`mb-3 text-sm md:text-base`}>Zur Grundlagenkarte</h2>
              <p className={`m-0 max-w-[30ch] text-xs xl:text-sm opacity-50`}>
                Grundlegende Abfragen zum Thema Erdwärmesonden
              </p>
            </Link>
            <Link
              href="/ews/potenzialberechnung"
              className="shrink group border border-transparent px-2 xl:px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100"
            >
              <h2 className={`mb-3 text-sm md:text-base`}>Zur Potenzialberechnung</h2>
              <p className={`m-0 max-w-[30ch] text-xs xl:text-sm opacity-50`}>
                Grundstücksbezogene Potenzialberechnung
              </p>
            </Link>
          </div>
          <Image src="/EWS.jpg" width={575} height={663} alt="Erdwärmesonden" className="mx-auto"></Image>
          <p className="max-w-screen-md mt-4 mb-4 xl:px-8 text-xs xl:text-sm">
            Nutzen Sie die Wärme des Untergrunds mit Erdwärmesonden. Dieses System nutzt vertikale Bohrungen, in denen
            eine Wärmeträgerflüssigkeit zirkuliert und über die der Wärmeaustausch stattfindet.
          </p>
        </div>
        <div className="px-2 md:px-5 py-4 max-w-lg xl:max-w-2xl border border-gray-300">
          <div className="flex justify-start">
            <Link
              href="/gwwp"
              className="group border border-transparent px-2 xl:px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100"
            >
              <h2 className={`mb-3 text-sm md:text-base`}>Zur Grundlagenkarte</h2>
              <p className={`m-0 max-w-[30ch] text-xs xl:text-sm opacity-50`}>
                Grundlegende Abfragen zum Thema Grundwasserwärmepumpen
              </p>
            </Link>
          </div>
          <Image src="/GWWP.jpg" width={575} height={663} alt="Grundwasserwärmepumpen" className="mx-auto"></Image>
          <p className="max-w-screen-md mt-4 mb-4 xl:px-8 text-xs xl:text-sm">
            Ein weiteres effizientes System ist die thermische Grundwassernutzung. Hier wird nach der Entnahme von einem
            Brunnen die Wärme des Grundwassers an das Gebäude übertragen und anschließend das Wasser über einen
            Schluckbrunnen dem Grundwasserkörper zurückgegeben.
          </p>
        </div>
      </div>
    </div>
  );
}