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

const InEnglishPageHero: React.FC = () => (
  <Hero>
    <HeroPrimarySection
      header="Guild of Electrical Engineering"
      // eslint-disable-next-line max-len
      text="is a student organization that brings together a wide range of electrical engineering experts from electronics to nanotechnology and acoustics. Guild members graduate as experts in their field, who play a key role in the development of our rapidly electrifying world."
    >
      <HeroPrimaryButtons>
        <Link to="/in_english#guild">
          <button type="button" onClick={noop}>
            <span>About guild&nbsp;›</span>
          </button>
        </Link>
        <Link to="/in_english#activities">
          <button type="button" onClick={noop}>
            <span>Counterbalance to your studies&nbsp;›</span>
          </button>
        </Link>
      </HeroPrimaryButtons>
    </HeroPrimarySection>

    <HeroAside bgColor="darkBlue">
      <HeroAsideItem
        header="Upcoming events"
        text="The guild organizes various events for its members."
        link="#events"
        linkText="Calendar&nbsp; ›"
      />
      <HeroAsideItem
        header="About Finland"
        text="What is Finland like and what does it offer?"
        link="#finland"
        linkText="Quick tour&nbsp; ›"
      />
      <HeroAsideItem
        header="For exchange student"
        text="Starting your studies at Aalto University? Learn about our freshmen activities!"
        link="#freshmen"
        linkText="For freshmen&nbsp; ›"
      />
    </HeroAside>
  </Hero>
);

export default InEnglishPageHero;
