import React from "react";
import { Link } from "@components/index";
import {
  Hero, HeroPrimarySection, HeroAside, HeroAsideItem, HeroPrimaryButtons,
} from "@components/Hero";
import noop from "@utils/noop";

const FrontPageHero: React.FC = () => (
  <Hero>
    <HeroPrimarySection
      header="Aalto-yliopiston Sähköinsinöörikilta"
      // eslint-disable-next-line max-len
      text="on opiskelijajärjestö, joka kokoaa yhteen laaja-alaisesti sähkötekniikan osaajia elektroniikasta nanoteknologiaan ja akustiikkaan. Kiltalaisista valmistuu alansa huippuja, jotka ovat avainasemassa vauhdilla sähköistyvän maailmamme kehityksessä."
    >
      <HeroPrimaryButtons>
        <Link to="/kilta">
          <button type="button" onClick={noop}>
            <span>Tietoa killasta&nbsp;›</span>
          </button>
        </Link>
        <Link to="/kilta/toiminta">
          <button type="button" onClick={noop}>
            <span>Vastapainoa opiskelulle&nbsp;›</span>
          </button>
        </Link>
      </HeroPrimaryButtons>
    </HeroPrimarySection>

    <HeroAside bgColor="darkBlue">
      <HeroAsideItem
        header="Vasta-aloittaneelle opiskelijalle"
        text="Fuksikasvatusta ja ISOtoimintaa"
        link="/kilta/fuksi"
        linkText="Fuksit&nbsp; ›"
      />
      <HeroAsideItem
        header="Harkitsetko uraa alalla?"
        text="Oletko abi, vaihtamassa uraa tai valmistumassa?"
        link="/opinnot_ja_ura"
        linkText="Opinnot ja ura&nbsp; ›"
      />
      <HeroAsideItem
        header="Yhteistyö yritysten kanssa"
        text="Avoimet työpaikat ja tietoa yrityksille yhteistyöstä"
        link="/yritysyhteistyo"
        linkText="Yritysyhteistyö&nbsp; ›"
      />
    </HeroAside>
  </Hero>
);

export default FrontPageHero;
