import React from "react";
import { useTranslation } from "react-i18next";

import "./intro.styles.scss";

import Spaceship from "../../assets/images/main/intro/spaceship.svg";

const Intro = () => {
  const { t } = useTranslation();

  return (
    <section className="container intro">
      <div className="image"></div>
      <div className="title">
        <h1>
          {/* TODO: In latvian text is not fitting */}
          {t("intro.creating")} <span>{t("intro.websites")}</span>
        </h1>
        <div>
          <p>{t("intro.apps")}</p>
          <p>{t("intro.shops")}</p>
          <p>{t("intro.platforms")}</p>
        </div>
        {/* TODO: Finish this for mobile */}
        {/* <h1 className="mobile">websites . mobileapps . e-shops . platforms</h1> */}
      </div>

      <div className="rocket">
        <img src={Spaceship} alt="" />
        <p>{t("intro.explore")}</p>
      </div>
    </section>
  );
};

export default Intro;