import Collapsible from './collapsible';
import Link from 'next/link';

const tableDataCSS = 'w-full break-words border-b border-solid border-gray-300';
export default function Footer() {
  return (
    <>
      <Collapsible title="Haftungsausschluss" open={true}>
        <table id="disclaimer" className="table-fixed w-full mb-4">
          <thead>
            <tr>
              <td></td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className={tableDataCSS}>
                Die thematischen Inhalte dieser Webapplikation dienen dazu, einen Überblick über Potentiale und
                Konflikte in Zusammenhang mit geothermischen Anlagen zu geben. Sie ersetzen keine detaillierten
                Planungen. Aus unseren Karten ergibt sich keinerlei Genehmigungsanspruch einer geplanten Nutzung
                gegenüber den zuständigen Behörden. Der Anbieter dieser Webapplikation und der damit verbundenen
                Dienstleistungen übernimmt keine Haftung für Schäden, die durch den ungeeigneten Gebrauch des Webportals
                entstehen.
              </td>
            </tr>
          </tbody>
        </table>
      </Collapsible>
      <Collapsible title="Kontakt" open={true}>
        <table id="contact" className="table-fixed w-full">
          <thead>
            <tr>
              <td></td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <Link
                  href="mailto:geothermie@geosphere.at"
                  className="underline underline-offset-4 decoration-transparent transition duration-300 ease-in-out hover:decoration-red-700"
                >
                  geothermie@geosphere.at
                </Link>
              </td>
            </tr>
            <tr>
              <td>Department für Rohstoffgeologie und Geoenergie</td>
            </tr>
            <tr>
              <td>Hohe Warte 38</td>
            </tr>
            <tr>
              <td className={tableDataCSS}>1190 Wien</td>
            </tr>
          </tbody>
        </table>
      </Collapsible>
    </>
  );
}