import React from "react";
import Image from "next/image";
import styled from "styled-components";
import {
  CTASection, TextSection, InfoBox, PageLink, Link,
} from "@components/index";
import FreshmenPageHero from "./FreshmenPageHero";

const FOPAS_LINK = "https://static.sahkoinsinoorikilta.fi/FTMK/fopas_compressed.pdf";
const FUKSI_POINTS_LINK = "https://static.sahkoinsinoorikilta.fi/FTMK/Fuksipisteohje.pdf";
const TG_GROUP_CHAT_LINK = "https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg";
const TG_NOTIFICATIONS_LINK = "https://t.me/joinchat/GsmJjk5ZNHjgYsHN_ny2Iw";
const EMAIL_LINK = "ftmk@sahkoinsinoorikilta.fi";
const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;

const ImageContainer = styled.div`
  width: 100%;
`;

const FreshmenPageView: React.FC = () => (
  <>
    <FreshmenPageHero />
    <TextSection>
      <h3 id="abeille">Onnittelut hyvästä opiskeluvalinnasta</h3>
      <div>
        <p>
          Olet tehnyt upean valinnan ottamalla askeleen matkalla, jossa sinusta ensin kehkeytyy teekkari ja myöhemmin diplomi-insinööri.
          Sinusta on juuri tullut tekniikan ylioppilas ja fuksi.
          Hieno saavutus, jota tietysti on syytä juhlia, ja tähän juhlaan paras sijainti on ehdottomasti Otaniemi.
          Tervetuloa!
        </p>
        <p>
          Ensi askeleina suosittelen, että liityt teille fukseille tehdyille Telegram-kanaville.
          {" "}
          <Link to={TG_NOTIFICATIONS_LINK}>Tästä</Link> pääset tiedotuskanavalle ja <Link to={TG_GROUP_CHAT_LINK}>tästä</Link> tutustumaan fuksikavereihin ja ISOihisi.
        </p>

        <h6>Matka nimeltä Teekkarius</h6>
        <p>
          Teekkarin matka on jokaiselle oman näköisensä.
          Kilta, ylioppilaskunta ja Otaniemen muut järjestöt tarjoavat varmasti jokaiselle omanlaista tekemistä ja harrastusta.
          Olet nyt osa Aalto-yliopiston Sähköinsinöörikiltaa ja me tulemme tukemaan sinua teekkariuden matkalla, jotta löydät juuri sinulle sopivat paikat, joissa vaikuttaa ja harrastaa.
          Jotta tämä onnistuisi, olemme esimerkiksi sijoittaneet sinut fuksiryhmään, johon tulet Orientaatioviikolla tutustumaan ja josta saat oman tukiryhmän uusiin seikkailuihin.
          Fuksiryhmääsi kuuluu myös muutama ISO.
          Heistä löydät lisää tietoa <Link to="#isot">alempaa</Link>.
        </p>

        <h6>Fuksikapteenit</h6>
        <p>
          Me olemme fuksikapteenisi <strong>Emmaleena</strong> ja <strong>Jonna</strong> ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä.
          Jos sinulla on mitään kysymyksiä, ota ihmeessä meihin yhteyttä esimerkiksi <Link to={TG_GROUP_CHAT_LINK}>Telegramissa</Link> tai <a href={EMAIL_LINK_MAILTO}>sähköpostitse</a>.
        </p>

        <h6>Hymyillään, kun tavataan!</h6>
        <p>
          Vaikka ensimmäiset päivät Otaniemessä saattavatkin tuoda tullessaan hupsuja ja kummallisia kokemuksia, älä säikähdä niitä!
          Ajan myötä palapelin palat muodostavat sinun näköisesi kuvan ja pääset itse vaikuttamaan siihen, miltä lopputulos näyttää.
        </p>
        <p>
          Orientaatioviikko järjestetään 31.8-4.9, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin Varaslähtöön.
          Varaslähtö fuksivuoteen järjestetään 22.8. Siitä lisää Telegram-ryhmissä ja <Link to={FOPAS_LINK}>fuksioppaassa</Link>!
        </p>

        <h6>Emmaleena</h6>
        <p>0504392855 <br />emmaleena.ahonen (ät) aalto.fi</p>

        <h6>Jonna</h6>
        <p>0504327695 <br />jonna.tammikivi (ät) aalto.fi</p>
      </div>
      <aside>
        <div>
          <PageLink to={EMAIL_LINK_MAILTO} desc={EMAIL_LINK}>
            Fuksikipparit tavoitat
          </PageLink>
          <PageLink to="https://api.sahkoinsinoorikilta.fi/members/application" desc="ja tule mukaan toimintaamme&nbsp;›">
            Liity jäseneksi
          </PageLink>
          <PageLink to={FUKSI_POINTS_LINK} desc="Katso fuksipisteitä&nbsp;›">
            Fuksipisteohje
          </PageLink>
        </div>

        <ImageContainer>
          <Image
            src="https://static.sahkoinsinoorikilta.fi/uus_webi/fuksikipparit.jpg"
            alt="Kipparit"
            layout="responsive"
            width={0}
            height={0}
            objectFit="contain"
          />
        </ImageContainer>

        <div>
          <InfoBox>
            <h6>Telegram?</h6>
            <p>
              Telegram on pikaviestinpalvelu, jota käytetään otaniemessä paljon.
              Hieman samanlainen kuin Whatsapp, mutta ominaisuuksiltaan paremmaksi todettu.
              Lisätietoja: <Link to="https://telegram.org/faq">https://telegram.org/faq</Link>.
            </p>
            <p>
              SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään <Link to={TG_GROUP_CHAT_LINK}>tästä</Link>.
            </p>
          </InfoBox>
        </div>
      </aside>
    </TextSection>
    <CTASection
      bgColor="lightBlue"
      link="/kilta/toiminta"
      linkText="Seuraa killan tapahtumia"
    >
      Killassa tapahtuu kaikenlaista!
    </CTASection>

    <TextSection>
      <h3 id="isot">Isoryhmät</h3>
      <div>
        <p>
          SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta somissa ja omissa fuksiryhmissään.
        </p>
        <p>
          ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan.
          Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna.
          ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen.
          Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
        </p>
        <p>
          Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin.
          He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.
        </p>
        <p>
          ISOT ovat myös kutsuttuna fuksivuotesi ensimmäiseen tapahtumaan, eli Varaslähtöön. Tule tutustumaan heihin sinne!
        </p>
      </div>
    </TextSection>
  </>
);

export default FreshmenPageView;
