import { useLocale, useTranslations } from 'next-intl';

import Image from "next/image";
import { Link } from '@/i18n/navigation';
import { LocaleType } from '@/i18n/i18n';

const { BLACK_FRIDAY_PROMO } = process.env;
import LanguageSwitcher from '@/app/ui/components/LanguageSwitcher';
import { generateAuthUrl } from '@/app/helpers/generateAuthUrl';

export default function Home() {
  const t = useTranslations();
  const currentYear = new Date().getFullYear();
  const locale = useLocale();
  const loginUrl = generateAuthUrl(locale as LocaleType, 'login');
  const signUpUrl = generateAuthUrl(locale as LocaleType, 'signup');

  return (
    <>
      {BLACK_FRIDAY_PROMO && (
        <div className="promo">
            {t('promo.black_friday')}
        </div>
      )}
      <div className="page-container">
        <header className="header">
            <Link href="/" className="logo">
                <Image src="/img/ui/logo_home.svg" alt="mssg.me logo" width={34} height={35} />
            </Link>
            <ul className="auth-buttons">
                <li>
                    <a href={loginUrl} className="right">{t('website_home.common.auth.login')}</a>
                </li>
                <li>
                    <a href={signUpUrl}>{t('website_home.common.auth.signup')}</a>
                </li>
            </ul>
        </header>
        <section className="section intro-section">
            <div className="content">
                <h1 className="main-title">
                    <span className="gradiented">{t('website_home.home.intro.title.1')}</span>
                    <span>{t('website_home.home.intro.title.2')}</span>
                </h1>
                <p>{t('website_home.home.intro.description')}</p>
                <div className="button-container center">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
                <div className="bbg-label"><span>backed by</span> <Image src="/img/ui/google_for_startups_logo.svg" alt="Google for startups logotype" width={260} height={32} /></div>
                {/* <Link
                    href="https://apps.apple.com/us/app/mssg-me-website-builder/id6454930943?itsct=apps_box_badge&amp;itscg=30200"
                    style={{
                        display: "inline-block",
                        overflow: "hidden",
                        borderRadius: "13px",
                        width: "250px",
                        height: "83px",
                        marginTop: "20px"
                    }}
                >
                    <Image
                        src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83&amp;releaseDate=1705968000"
                        alt="Download on the App Store"
                        style={{
                            borderRadius: "13px",
                            width: "250px",
                            height: "83px"
                        }}
                    />
                </Link> */}
            </div>
        </section>
        <section className="section presentation-section">
            <div className="presentation-hero">
                <Image
                    className="presentation-hero-left"
                    src="/img/home/presentation/presentation_left_378w.webp"
                    sizes="(max-width: 420px) 126px,
                          (max-width: 1920px) 252px,
                          378px"
                    alt="Contact me landing example"
                    width={253}
                    height={471}
                />
                <Image
                    className="presentation-hero-right"
                    src="/img/home/presentation/presentation_right_378w.webp"
                    sizes="(max-width: 420px) 126px,
                          (max-width: 1920px) 252px,
                          378px"
                    alt="Shop landing example"
                    width={253}
                    height={471}
                />
                <Image
                    className="presentation-hero-center"
                    src="/img/home/presentation/presentation_center_441w.webp"
                    sizes="(max-width: 420px) 147px,
                          (max-width: 1920px) 294px,
                          441px"
                    alt="Multilink landing example"
                    width={253}
                    height={471}
                    priority
                />
            </div>
            <div className="content section-content">
                <h2 className="gradiented">{t('website_home.home.presentation.title')}</h2>
                <p>{t('website_home.home.presentation.description')}</p>
                <div className="button-container center">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <section className="section multi-link-section">
            <div className="multi-link-hero-container">
                <div className="multi-link-hero">
                    <Image
                        src="/img/home/multilink/multilink_441w.webp"
                        sizes="(max-width: 420px) 147px,
                              (max-width: 1920px) 294px,
                              441px"
                        alt="Multi-link page example"
                        width={295}
                        height={550}
                    />
                    <div className="multi-link-hero__icon instagram">
                        <div>
                            <div>
                                <Image src="/img/home/multilink/instagram.svg" alt="Instagram icon" width={57} height={57} />
                            </div>
                        </div>
                    </div>
                    <div className="multi-link-hero__icon youtube">
                        <div>
                            <div>
                                <Image src="/img/home/multilink/youtube.svg" alt="YouTube icon" width={43} height={30} />
                            </div>
                        </div>
                    </div>
                    <div className="multi-link-hero__icon tiktok">
                        <div>
                            <div>
                                <Image src="/img/home/multilink/tiktok.svg" alt="TikTok icon" width={42} height={42} />
                            </div>
                        </div>
                    </div>
                    <div className="multi-link-hero__icon twitter">
                        <div>
                            <div>
                                <Image src="/img/home/multilink/twitter.svg" alt="Twitter icon" width={27} height={27} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="content section-content">
                <h2 className="gradiented section-title">{t('website_home.home.multi_link.title')}</h2>
                <h3 className="section-subtitle">{t('website_home.home.multi_link.subtitle')}</h3>
                <p>{t('website_home.home.multi_link.description')}</p>
                <div className="button-container">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <section className="section messengers-section">
            <div className="messengers-hero-container">
                <div className="messengers-hero">
                    <Image
                        src="/img/home/messengers/messengers_441w.webp"
                        sizes="(max-width: 420px) 147px,
                              (max-width: 1920px) 294px,
                              441px"
                        alt="Page with messengers example"
                        width={294}
                        height={548}
                    />
                    <div className="icon-hey">
                        <Image
                            src="/img/home/messengers/hey_192w.webp"
                            sizes="(max-width: 420px) 64px,
                                  (max-width: 1920px) 128px,
                                  192px"
                            alt="Hey icon"
                            width={128}
                            height={128}
                        />
                    </div>
                    <div className="message">
                        <Image
                            src="/img/home/messengers/message_501w.webp"
                            sizes="(max-width: 420px) 167px,
                                  (max-width: 1920px) 334px,
                                  501px"
                            alt="User message image"
                            width={338}
                            height={77}
                        />
                    </div>
                </div>
            </div>
            <div className="content section-content">
                <h2 className="gradiented section-title">{t('website_home.home.messengers.title')}</h2>
                <h3 className="section-subtitle">{t('website_home.home.messengers.subtitle')}</h3>
                <p>{t('website_home.home.messengers.description')}</p>
                <div className="button-container">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <section className="section store-section">
            <div className="store-hero-container">
                <div className="store-hero">
                    <Image
                        src="/img/home/store/store_441w.webp"
                        sizes="(max-width: 420px) 147px,
                              (max-width: 1920px) 294px,
                              441px"
                        alt="Online store page example"
                        width={294}
                        height={549}
                    />
                    <div className="icon-cart">
                        <Image
                            src="/img/home/store/cart_192w.webp"
                            sizes="(max-width: 420px) 64px,
                                  (max-width: 1920px) 128px,
                                  192px"
                            alt="Shopping cart icon"
                            width={129}
                            height={129}
                        />
                    </div>
                    <div className="order">
                        <Image
                            src="/img/home/store/order_342w.webp"
                            sizes="(max-width: 420px) 114px,
                                  (max-width: 1920px) 228px,
                                  342px"
                            alt="Shopping cart icon"
                            width={228}
                            height={200}
                        />
                    </div>
                </div>
            </div>
            <div className="content section-content">
                <h2 className="gradiented section-title">{t('website_home.home.store.title')}</h2>
                <h3 className="section-subtitle">{t('website_home.home.store.subtitle')}</h3>
                <p>{t('website_home.home.store.description')}</p>
                <div className="button-container">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <section className="section builder-section">
            <div className="builder-hero-container">
                <div className="builder-hero">
                    <Image
                        src="/img/home/builder/builder_441w.webp"
                        sizes="(max-width: 420px) 147px,
                              (max-width: 1920px) 294px,
                              441px"
                        alt="Website builder example"
                        width={264}
                        height={568}
                    />
                    <div className="blocks">
                        <Image
                            src="/img/home/builder/blocks_333w.webp"
                            sizes="(max-width: 420px) 111px,
                                  (max-width: 1920px) 222px,
                                  333px"
                            alt="Website builder blocks"
                            width={198}
                            height={287}
                        />
                    </div>
                    <div className="customize">
                        <Image
                            src="/img/home/builder/customize_486w.webp"
                            sizes="(max-width: 420px) 162px,
                                  (max-width: 1920px) 324px,
                                  486px"
                            alt="Website builder blocks customization"
                            width={291}
                            height={196}
                        />
                    </div>
                </div>
            </div>
            <div className="content section-content">
                <h2 className="gradiented section-title">{t('website_home.home.builder.title')}</h2>
                <h3 className="section-subtitle">{t('website_home.home.builder.subtitle')}</h3>
                <p>{t('website_home.home.builder.description')}</p>
                <div className="button-container">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <section className="features-section">
            <div className="content">
                <h2 className="section-subtitle">{t('website_home.home.features.title')}</h2>
                <ul className="features-list">
                    <li>
                        <h3 className="section-subtitle">{t('website_home.home.features.list.domain.title')}</h3>
                        <p>{t('website_home.home.features.list.domain.description')}</p>
                    </li>
                    <li>
                        <h3 className="section-subtitle">{t('website_home.home.features.list.qr.title')}</h3>
                        <p>{t('website_home.home.features.list.qr.description')}</p>
                    </li>
                    <li>
                        <h3 className="section-subtitle">{t('website_home.home.features.list.analytics.title')}</h3>
                        <p>{t('website_home.home.features.list.analytics.description')}</p>
                    </li>
                </ul>
            </div>
        </section>
        <section className="footer-cta-section">
            <div className="content">
                <h2 className="gradiented">{t('website_home.home.footer.title')}</h2>
                <p>{t('website_home.home.footer.description')}</p>
                <div className="button-container center">
                    <a href={signUpUrl} className="button">{t('website_home.common.sign_up_cta')}</a>
                </div>
            </div>
        </section>
        <footer className="footer">
            <div className="content">
                <ul className="footer-list">
                    <li>
                        <Link href="/privacy-policy">{t('website_home.common.terms.politics')}</Link>
                    </li>
                    <li>
                        <Link href="/terms-of-use">{t('website_home.common.terms.terms')}</Link>
                    </li>
                </ul>
                <ul className="footer-lang-chooser">
                  <LanguageSwitcher />
                </ul>
                <span className="copyright">mssg.me © {currentYear}</span>
                <span className="made-in">Made in Ukraine <Image width="17" height="12" src="/img/ui/ua_flag.gif" alt="Ukrainian flag" unoptimized /></span>
                <div className="bbg-label-footer"><span>backed by</span> <Image src="/img/ui/google_for_startups_logo.svg" alt="Google for startups logotype" width={160} height={19} /></div>
            </div>
        </footer>
      </div>
      <div className="cookie-message" id="cookie-message">
          <span>{t('website_home.common.cookies.message')}</span>
          <Link href="/privacy-policy">{t('website_home.common.cookies.link')}</Link>
          <div className="close-cookie" id="close-cookie"></div>
      </div>
    </>
  );
}