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

const ActualPageHero: React.FC = () => (
  <Hero>
    <HeroPrimarySection
      header="Yritystapahtumia ja vastapainoa opiskelulle"
      text="Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin."
    >
      <HeroPrimaryButtons row>
        <Link to="#tapahtumat">
          <button type="button" onClick={noop}>
            <span>Tapahtumat&nbsp;›</span>
          </button>
        </Link>
        <Link to="#uutiset">
          <button type="button" onClick={noop}>
            <span>Uutiset&nbsp;›</span>
          </button>
        </Link>
      </HeroPrimaryButtons>
    </HeroPrimarySection>
    <HeroAside bgColor="lightTurquoise">
      <p>
        Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
      </p>
      <HeroAsideItem
        header="Keksimistä ja rakentelua"
        link="#elepaja"
        linkText="Elektroniikkapaja&nbsp;›"
      />
      <HeroAsideItem
        header="Tiimipelejä ja liikuntaa"
        link="#urheilu"
        linkText="Urheilu&nbsp;›"
      />
      <HeroAsideItem
        header="Kulttuuria ja juhlia teatterista sitseihin"
        link="#kulttuuri&juhla"
        linkText="Kulttuuria ja juhlia&nbsp;›"
      />
      <HeroAsideItem
        header="Verkostoitumista"
        link="#yritysyhteistyo"
        linkText="Yritysyhteistyö&nbsp;›"
      />
      <HeroAsideItem
        header="Uusia suhteita ulkopaikkakuntalaisten kanssa"
        link="#ulkosuhteet"
        linkText="Ulkoiset suhteet&nbsp;›"
      />
    </HeroAside>

    <HeroSecondarySection
      heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
    >
      <HeroSecondarySectionItem note="Ma">
        <span>
          Killan hallitus päivystää kiltahuoneella <strong>maanantaisin.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.
        </span>
      </HeroSecondarySectionItem>
      <HeroSecondarySectionItem note="To">
        <span>
          Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin kiltahuoneella.</strong>. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!
        </span>
      </HeroSecondarySectionItem>
    </HeroSecondarySection>

  </Hero>
);

export default ActualPageHero;
