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

const FUKSI_POINTS_LINK = "https://static.sahkoinsinoorikilta.fi/FTMK/Fuksipisteohje.pdf";
const TG_GROUP_CHAT_LINK = "https://t.me/+ctpg4H0-Y3hlZTY0";
const TG_NOTIFICATIONS_LINK = "https://t.me/+v30Nts-MrIMyMjNk";
const EMAIL_LINK = "ftmk@sahkoinsinoorikilta.fi";
const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
const SIK_QR = "https://static.sahkoinsinoorikilta.fi/FTMK/SIK-Fuksit-2026-telegram.jpg";
const SIK_QR_TIEDOTUS = "https://static.sahkoinsinoorikilta.fi/FTMK/SIK-Fuksit-2026-telegram-tiedotus.jpg";

const ImageContainer = styled.div`
  width: 100%;
  display: block;
  margin: auto;
`;

const QRImages = styled.img`
  width: 10em;
  height: 10em;
`;

const FopasImage = styled.img`
  width: 15em;
  margin-bottom: 1em;
`;

const ForFreshmenPageView: React.FC = () => (
  <>
    <ForFreshmenPageHero />
    <TextSection>
      <h3 id="abeille">Congratulations on an awesome choice of studies!</h3>
      <div>
        <p>
          You have made an excellent choice by taking the first step on a journey where you will first become an engineering student, ...known better in finnish
          as &quot;teekkari&quot; and later a Master of Science in Engineering &quot;Diplomi-insinööri&quot;.
          You have just become a technical high school graduate and a freshman.
          A great achievement that certainly deserves celebration, and there is no better place for that celebration than Otaniemi.
          Welcome!
        </p>
        <p>
          As a first step, we recommend that you join the Telegram channels created for freshmen.
          {" "}
          <Link to={TG_GROUP_CHAT_LINK} target="_blank">Click here</Link> to get acquainted with your fellow freshmen and ISOs, and <Link to={TG_NOTIFICATIONS_LINK} target="_blank">click here</Link> to join the notification channel.
        </p>

        <h6>A story named Teekkarius</h6>
        <p>
          Every teekkari&apos;s journey is unique.
          The guild, the student union, and the other organizations in Otaniemi will undoubtedly offer something for everyone.
          You are now part of Aalto University&apos;s Electrical Engineering Guild, and we will support you throughout your teekkari journey so that you can find the places that are perfect for you to make an impact and pursue your hobbies.
          To make this possible, we have placed you in a freshman group, which you will get to know during orientation week and which will serve as your support group for new adventures.
          Your freshman group also includes a few tutors better known as ISOs.
          You can find more information about them <Link to="#isot">below</Link>.
        </p>

        <ImageContainer>
          <Image
            src="https://static.sahkoinsinoorikilta.fi/FTMK/kipparit-26.jpg"
            alt="Kipparit"
            layout="responsive"
            width={100}
            height={80}
            objectFit="contain"
          />
        </ImageContainer>

        <h6>Freshmen captains</h6>
        <p>
          We are your freshman captains <strong>Teemu</strong> and <strong>Henri</strong> and we&apos;ll be here to support you and monitor your
          progress throughout the freshman year adventures toward earning your engineer&apos;s hat (= teekkarilakki),
          which you might possibly earn during May Day next spring.
          If you have any questions, feel free to contact us via <Link to={TG_GROUP_CHAT_LINK} target="_blank">Telegram</Link> or <a href={EMAIL_LINK_MAILTO}>email</a>.
        </p>

        <h6>Smile When We Meet!</h6>
        <p>
          Although the first days in Otaniemi might bring along some funny and strange experiences, don&apos;t be alarmed by them!
          Over time, the pieces of the puzzle will come together to form an image that reflects you, and you&apos;ll have the opportunity to shape what the final result looks like.
        </p>
        <p>
          Orientation week is held from August 25th to 29th, 2026, but even before then, you&apos;ll have the chance to meet us, other freshmen, and the ISOs at a relaxed Pre-Start event.
          The Pre-Start for the freshman year is organized on Saturday, August 16th, 2026. Find more details in the Telegram groups!
        </p>

        <h6>Teemu Heikkinen</h6>
        <p>040 097 1835<br />teemu.heikkinen (ät) sahkoinsinoorikilta.fi <br />@heikkinenteemu</p>

        <h6>Henri Aito</h6>
        <p>045 328 2883<br />henri.aito (ät) sahkoinsinoorikilta.fi <br />@henriaito</p>
      </div>
      <aside>
        <div>
          <PageLink to={EMAIL_LINK_MAILTO} desc={EMAIL_LINK}>
            You can reach the freshman captains at
          </PageLink>
          <PageLink to="https://api.sahkoinsinoorikilta.fi/members/application" desc="And join our activities!&nbsp;›">
            Join the guild!
          </PageLink>
          <PageLink to={FUKSI_POINTS_LINK} desc="Take a look at the fuksipoints&nbsp;›">
            Fuksipoint guide - This will be translated later so don&apos;t worry if you don&apos;t understand Finnish!
          </PageLink>
        </div>
        <div>
          <InfoBox>
            <h6>Fuksiguide</h6>
            <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fopas_25_en_web.pdf" target="_blank">
              <FopasImage
                src="https://static.sahkoinsinoorikilta.fi/FTMK/Fopas_25_kansi.jpg"
              />
            </Link>

            <p>
              It&apos;s a good idea to take a look at the fuksiguide before starting your studies!
              The guide contains lots of useful information about the guild, the student union, and the student life in Otaniemi.
              You can find the guide <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fopas_25_en_web.pdf" target="_blank">here</Link>.
            </p>
            <br />
            <h6>Telegram?</h6>
            <p>
              Telegram is a messaging app used in Otaniemi.
              More info can be found here: <Link to="https://telegram.org/faq" target="_blank">https://telegram.org/faq</Link>.
            </p>
            <p>
              SIK fuksis have a group chat, which you can join by scanning the QR code below:
            </p>
            <QRImages
              src={SIK_QR}
            />
            <p>or <Link to={TG_GROUP_CHAT_LINK} target="_blank">press me!</Link></p>
            <p>Also join the notifications channel for SIK fuksis, to stay in the loop!:</p>
            <QRImages
              src="https://static.sahkoinsinoorikilta.fi/FTMK/SIK-Fuksit-tiedotus-2026.jpg"
            />
            <p>or <Link to={TG_NOTIFICATIONS_LINK} target="_blank">press me!</Link></p>
          </InfoBox>
        </div>
      </aside>
    </TextSection>
    <CTASection
      bgColor="lightBlue"
      link="/kilta/toiminta"
      linkText="Follow what the guild is up to"
    >
      The guild organises lots of things!
    </CTASection>

    <TextSection>
      <h3 id="isos">Freshman groups and ISOs</h3>
      <div>
        <p>SIK freshmen enjoy the guidance and care of their wonderful ISOs in their own freshman groups</p>
        <p>
          ISOs are older students and guild members, who are there to support you throughout your freshman year. You will be divided into groups.
          You can ask your ISOs anything regarding studying and student life. Even though they don&apos;t know all the answers, they can likely help you finding them.
        </p>
        <p>
          As stated above, your ISOs will support you through your whole freshman year, but you will see them most during the orientation week,
          during which they will wander through Otaniemi together with your group and guide you into the ways of the teekkari.
          They will also help you find whatever is needed to start your studies here, and will support you in creating your timetable and getting your library, HSL and student cards.
        </p>
        <p>ISOs are also invited to the first event of the freshman year, the head start. Come meet them there early!</p>
      </div>
    </TextSection>
  </>
);

export default ForFreshmenPageView;
