// React, NextJS
import React from "react";
import Head from "next/head";

// Bootstrap components
import Table from 'react-bootstrap/Table';

import Productpage from "../components/productpage.jsx";

const content = {
  stahl: {
    title: "Materialien",
    text: `Wir fertigen Blechteile aus verschiedensten auf dem Weltmarkt erhältlichen Materialien. Rostende Stähle und nichtrostende Edelstähle gehörn dabei zu unserem Standardrepertoir, welche wir in den verschiedensten Stärken jederzeit vorrätig haben.`,
    iconurl: "/icons/mat_stahl.svg",
    iconalt: "Icon eines Stapels an Blech mit verschiedenen Stählen und Edelstählen",
    bgurl: "/background/materialien/stahl.webp",
    bgtitle: "Bild mehrerer Stapel mit gebürstetem Edelstahl"
  },
  aluminium: {
    title: "Aluminium",
    text: `Aluminium ist aufgrund seiner spezifischen Festigkeit bei gleichzeitig geringem Volumen, sehr beliebt. So wird es vor allem dort verwendet, wo eine geringe Masse wichtig ist.`,
    iconurl: "/icons/mat_aluminium.svg",
    iconalt: "Icon eines Stapels an Blech mit verschiedenen Aluminiumlegierungen",
    bgurl: "/background/materialien/aluminium.webp",
    bgtitle: "Bild mehrerer Stapel von Aluminiumblechen"
  },
  sonstiges: {
    title: "Sonstiges",
    text: `
    Falls Sie besondere Anforderungen haben, fertigen wir Ihre Teile gerne aus exotischen Materialien, wie z.B. Kuper, Mesing oder auch Gold - Für uns ist kein Material zu schwierig, wir freuen uns über Ihre Herausforderung!`,
    iconurl: "/icons/mat_sonstiges.svg",
    iconalt: "Icon eines Stapels an Blech mit selteneren Materialien wie z.B. Kupfer, Titan, Gold und Mu Metall",
    bgurl: "/background/materialien/sonstiges.webp",
    bgtitle: "Bild mehrerer verschieden dicken Kupferblechen"
  },
};

function ContentSteel() {
  return (
    <>
      <Table className="mt-5">
        <thead className="table-secondary">
          <tr>
            <th>Stähle</th>
            <th>Stärke min. (mm)</th>
            <th>Stärke max. (mm)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1.4301 V2A Feinstblech</th>
            <td>0,1</td>
            <td>0,4</td>
          </tr>
          <tr>
            <th scope="row">1.4301 V2A Dünnblech</th>
            <td>0,5</td>
            <td>1,5</td>
          </tr>

          <tr>
            <th scope="row">1.4301 V2A Blech</th>
            <td>1,5</td>
            <td>5,0</td>
          </tr>

          <tr>
            <th scope="row">1.4310 Federstahl</th>
            <td>0,1</td>
            <td>2,0</td>
          </tr>

          <tr>
            <th scope="row">1.4404 V4A</th>
            <td></td>
            <td></td>
          </tr>

          <tr>
            <th scope="row">1.4751 V4A</th>
            <td></td>
            <td></td>
          </tr>

          <tr>
            <th scope="row">1.4016 Blech</th>
            <td>0,5</td>
            <td>3,0</td>
          </tr>

          <tr>
            <th scope="row">DC01 Stahl</th>
            <td></td>
            <td></td>
          </tr>

          <tr>
            <th scope="row">St37 Stahl</th>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

function ContentAluminum() {
  return (
    <>
      <Table className="mt-5">
        <thead className="table-secondary">
          <tr>
            <th>Aluminium</th>
            <th>Stärke min. (mm)</th>
            <th>Stärke max. (mm)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">AlMg3</th>
            <td>0,5</td>
            <td>6,0</td>
          </tr>
          <tr>
            <th scope="row">AlSi</th>
            <td>0,5</td>
            <td>6,0</td>
          </tr>
          <tr>
            <th scope="row">Al99</th>
            <td>0,5</td>
            <td>6,0</td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

function ContentOther() {
  return (
    <>
      <Table className="mt-5">
        <thead className="table-secondary">
          <tr>
            <th>Sonstiges</th>
            <th>Stärke min. (mm)</th>
            <th>Stärke max. (mm)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Kupfer</th>
            <td>0,3</td>
            <td>5,0</td>
          </tr>
          <tr>
            <th scope="row">Titan</th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">Messing</th>
            <td></td>
            <td></td>
          </tr>
          <tr>
            <th scope="row">CuBe Bronze</th>
            <td>0,1</td>
            <td>1,0</td>
          </tr>
          <tr>
            <th scope="row">Mu-Metall</th>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </Table>
    </>
  );
}

export default function Materialien(props) {
  return (
    <>
      <Head>
        <meta
          name="description"
          content="Wir fertigen Blechteile aus verschiedensten auf dem Weltmarkt erhältlichen Materialien. Fordern Sie uns heraus!"
        />
        <meta name="keywords" content="Blech, Edelstahl, Aluminium, Kupfer" />
        <title>Materialien - Prothmann GmbH</title>
      </Head>
      <Productpage
        bgurl={content.stahl.bgurl}
        title={content.stahl.title}
        text={content.stahl.text}
        iconurl={content.stahl.iconurl}
        iconalt={content.stahl.iconalt}
        bgtitle={content.stahl.bgtitle}
        addtext={<ContentSteel />}
      />
      <Productpage
        bgurl={content.aluminium.bgurl}
        title={content.aluminium.title}
        text={content.aluminium.text}
       iconurl={content.aluminium.iconurl}
       iconalt={content.aluminium.iconalt}
       bgtitle={content.aluminium.bgtitle}
        addtext={<ContentAluminum />}
        reversed
      />
      <Productpage
        bgurl={content.sonstiges.bgurl}
        title={content.sonstiges.title}
        text={content.sonstiges.text}
        iconurl={content.sonstiges.iconurl}
        iconalt={content.sonstiges.iconalt}
        bgtitle={content.sonstiges.bgtitle}
        addtext={<ContentOther />}
      />
    </>
  );
}