// React, NextJS
import React from "react";
import Head from "next/head";
import Link from "next/link";
import Image from "next/image";

// Bootstrap components
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

//GSAP
import { gsap } from "gsap/dist/gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";

//Images
import landinglogoImg from "../components/images/logo/landinglogo.svg";
import laserteileImg from '../components/images/fertigungsverfahren/laserteile.svg';
import stanzteileImg from '../components/images/fertigungsverfahren/stanzteile.svg';
import biegeteileImg from '../components/images/fertigungsverfahren/biegeteile.svg';
import elektronikgehaeuseImg from '../components/images/products/elektronikgehaeuse.webp';
import elektronikaufnahmeImg from '../components/images/products/elektronikaufnahme.webp';
import federnImg from '../components/images/products/federn.webp';
import metallabschirmungImg from '../components/images/products/metallabschirmung.webp';
import teleskopdurchfuehrungenImg from '../components/images/products/teleskopdurchfuehrungen.webp';
import chassismesstechnikImg from '../components/images/products/chassismesstechnik.webp';


//Register only on client side
if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger);
}

export default class Home extends React.Component {
  constructor(props) {
    super(props);

    this.productsWrapper = React.createRef();
  }

  render() {
    return (
      <>
        <Head>
          <meta
            name="description"
            content="Die Hans Prothmann GmbH ist Ihr Experte für Blechverarbeitung in München. Professionelles Laserschneiden, Stanzen, Biegen und Gravieren in München."
          />
          <meta
            name="keywords"
            content="Blechverarbeitung München, Blechverarbeitung Gröbenzell, Laserteile, Biegeteile, Stanzteile, Blechteile, Lasergravieren, Lserschweißen"
          />
          <meta name="robots" content="index, follow" />
          <title> Prothmann - Blechverarbeitung in München mit höchster Präzision</title>
        </Head>
        <Container fluid
          className="background-image landing-img d-flex align-items-center minh-100vh navbar-spacing"
          style={{
            backgroundImage:
              "url(/background/fertigungsverfahren/laserteile.webp)",
          }}
        >
          <Col className="text-center">
            <Image
              src={landinglogoImg}
              className="landing-logo p-5 m-auto"
              alt="Logo der Hans Prothmann GmbH"
              priority
              fill
            />
          </Col>
        </Container>

        <Container>
          <Row>
            <Col className="mt-5 text-center">
              <h1> Ihr Experte für Blechverarbeitung in München </h1>
              <p>
                Seit 1971 ist die Hans Prothmann GmbH ihr verlässlicher Partner
                für Blechverarbeitung in München. Unsere Produktion setzt auf
                einen modernen Maschinenpark mit {" "}
                <Link href="/fertigungsverfahren/laserteile" title="Informationen zu unseren Laserteilen">
                  CNC Laser-
                </Link>
                ,{" "}
                <Link href="/fertigungsverfahren/stanzteile" title="Informationen zu unseren Stanzteilen">
                  CNC Stanz-
                </Link>
                ,{" "}
                <Link href="/fertigungsverfahren/biegeteile" title="Informationen zu unseren Biegeteilen">
                  CNC Biege-
                </Link>{" "}
                und{" "}
                <Link href="/fertigungsverfahren/lasergravur" title="Informationen zum Lasergravieren">
                  Gravurtechnik
                </Link>
                , mit welchem wir anspruchsvolle, qualitativ hochwertige
                Bauteile für Sie fertigen - egal ob 0 Serie oder
                Massenproduktion.
              </p>
              <p>
                Unsere Stärke liegt vor allem in der Präzision unserer
                Fertigungsteile. Branchenübliche Toleranzen von 0, 1 mm können
                wir deutlich unterschreiten und Teile mit Toleranzen von 0, 01
                mm in Serie fertigen. Um diesen Anforderungen gerecht zu werden,
                kalibrieren wir unsere Maschinen regelmäßig auf den Mikrometer
                genau - das ist Hightech in Blech.
              </p>
            </Col>
          </Row>
        </Container>
        <Container fluid className=" mb-5">
          <Row className="text-center">
            <Col lg={4} xs={12} className="p-0">
              <Link href="/fertigungsverfahren/laserteile" title="Informationen zu unseren Laserteilen">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/laserteile.webp')",
                  }}
                >
                  <Image
                    src={laserteileImg}
                    alt="Laserteile Icon"
                    className="p-3"
                    width={250}
                    height={250}
                  />
                  <h2 className="text-white"> Laserteile </h2>
                </div>

              </Link>
            </Col>
            <Col lg={4} xs={12} className="p-0">
              <Link href="/fertigungsverfahren/stanzteile" title="Informationen zu unseren Stanzteilen">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/stanzteile.webp')",
                  }}
                >
                  <Image
                    src={stanzteileImg}
                    alt="Stanzteile Icon"
                    className="p-3"
                    width={250}
                    height={250}
                  />

                  <h2 className="text-white"> Stanzteile </h2>
                </div>

              </Link>
            </Col>
            <Col lg={4} xs={12} className="p-0">
              <Link href="/fertigungsverfahren/biegeteile" title="Informationen zu unseren Biegeteilen">

                <div
                  className="background-image d-flex align-items-center flex-column filter-grey"
                  style={{
                    backgroundImage:
                      "url('/background/fertigungsverfahren/biegeteile.webp')",
                  }}
                >
                  <Image
                    src={biegeteileImg}
                    alt="Biegeteile Icon"
                    className="p-3"
                    width={250}
                    height={250}
                  />
                  <h2 className="text-white"> Biegeteile </h2>
                </div>

              </Link>
            </Col>
          </Row>
        </Container>
        <Container>
          <Row>
            <Col lg={8} className="col-12 offset-lg-2 mt-5">
              <h3 className="text-center"> Produkte </h3>
              <p className="text-center">
                Wir verarbeiten alle auf dem Weltmarkt erhältlichen Materialien.
                Durch unsere Spezialisierung auf Feinbleche haben wir oft auch
                schwierig zu beschaffende Materialien wie z.B. säurebeständige
                Edelstähle, Federstahl, Bronze und Messing, sowie Mu-Metall auf
                Lager.
              </p>
            </Col>
          </Row>
          <Row className="mb-5">

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={elektronikgehaeuseImg}
                    alt="Elektronikgehäuse aus Blech, Stanzteil, Laserteil"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div>
                  <h4 className="text-center">Elektronikgehäuse</h4>
                  <p>
                    Unsere Elektronikgehäuse werden mit{" "}
                    <Link href="/fertigungsverfahren/stanzteile" title="Informationen zu unseren Stanzteilen">
                      Stanz-
                    </Link>{" "}
                    oder{" "}
                    <Link href="/fertigungsverfahren/laserteile" title="Informationen zu unseren Laserteilen">
                      Lasertechnik
                    </Link>{" "}
                    aus einer Blechplatine gefertigt. Die endgültige Form bekommen
                    die Teile nach der Umformung auf unseren{" "}
                    <Link href="/fertigungsverfahren/biegeteile" title="Informationen zu unseren Biegeteilen">
                      CNC Biegemaschinen
                    </Link>
                    .
                  </p>
                </div>
              </div>
            </Col>

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={elektronikaufnahmeImg}
                    alt="Edelstahlkörper mit Gewindedüsen, Gewindebolzen, Senkungen und Erdungsfahne"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div >
                  <h4 className="text-center">Elektronikaufnahme</h4>
                  <p>
                    An dem Edelstahlgrundkörper sieht man unser Leistungsspektrum
                    rund ums Blech. Es sind Gewindedüsen geformt, Gewindebolzen
                    eingepresst, Senkungen geschnitten und Erdungsfahnen
                    angeschweißt.
                  </p>
                </div>
              </div>
            </Col>

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={chassismesstechnikImg}
                    alt="Dreieckiges Laserteil mit höchster Präzision"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div>
                  <h4 className="text-center">Chassis für Messtechnik</h4>
                  <p>
                    Spezielle Messtechnik benötigt häufig auch spezielle Lösungen in
                    der Mechanik. Dieses dreieckige Gehäuse stellt höchste
                    Anforderungen an die Umform- und Abkanttechnik.
                  </p>
                </div>
              </div>
            </Col>

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={teleskopdurchfuehrungenImg}
                    alt="Teleskopdurchführungen aus Blech mit perfekter Ebenheit"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div>
                  <h4 className="text-center">Teleskopdurchführungen</h4>
                  <p>
                    Bei diesen Biegeteilen liegt die Schwierigkeit in der Ebenheit
                    der Werkstücke. Die Ebenheit muss selbst nach der
                    Wärmeeinwirkung beim{" "}
                    <Link href="/fertigungsverfahren/stanzteile" title="Informationen zu unseren Stanzteilen">
                      Lasern
                    </Link>{" "}
                    und nach der Umformung beim{" "}
                    <Link href="/fertigungsverfahren/biegeteile" title="Informationen zu unseren Biegeteilen">
                      Abkanten
                    </Link>{" "}
                    gewährleistet sein.
                  </p>
                </div>
              </div>
            </Col>

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={federnImg}
                    alt="Mit Spezialwerkzeug gefertigte Federn aus exotischen Materialien mit Lasergravur"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div>
                  <h4 className="text-center">Federn aus exotischen Materialien</h4>
                  <p>
                    Wir haben eine große Auswahl an Federstählen auf Lager und
                    fertigen die Federn mit Spezialwerkzeugen aus eigener
                    Produktion. Diese Federn aus Kupfer mit{" "}
                    <Link href="/fertigungsverfahren/lasergravur" title="Informationen zum Lasergravieren">
                      Lasergravur
                    </Link>{" "}
                    zeigen die Präzision bei der Fertigung.
                  </p>
                </div>
              </div>
            </Col>

            <Col lg={4} className="col-12 text-center h-100">
              <div className="content">
                <div className="bg-white">
                  <Image
                    src={metallabschirmungImg}
                    alt="Runde Metallabschirmung aus Blech"
                    className="p-3"
                    width={300}
                    height={300}
                  />
                </div>
                <div>
                  <h4 className="text-center">MU-Metall Abschirmungen</h4>
                  <p>
                    Aufgrund unserer langjährigen Erfahrung im audiovisuellen
                    Anlagenbau sind wir auch Ihr kompetenter Partner in der
                    Produktion von elektromagnetischen Abschirmungen.
                  </p>
                </div>
              </div>
            </Col>

          </Row>
        </Container>
      </>
    );
  }
}
