import type { Metadata } from "next";
import StickyNav from "@/components/StickyNav";
import ProgressBar from "@/components/ProgressBar";
import Footer from "@/components/Footer";
import ArticleContent from "./ArticleContent";
import ArticleScripts from "./ArticleScripts";

export const metadata: Metadata = {
  title: "Исповедь фрилансера эмигранта",
  description:
    "Эссе про мой самый интересный период в жизни — время фриланса и эмиграции. Рассказываю чем занимался в исследованиях, в каких странах жил, как выживал.",
  openGraph: {
    type: "article",
    title: "Исповедь фрилансера эмигранта",
    description:
      "Эссе про мой самый интересный период в жизни — время фриланса и эмиграции.",
    images: [
      {
        url: "https://ik.imagekit.io/victorbuto/og-preview.png",
        width: 1917,
        height: 955,
      },
    ],
    locale: "ru_RU",
    url: "https://www.victorbuto.ru/confessions_from_exile",
  },
  twitter: { card: "summary_large_image" },
};

export default function ConfessionsPage() {
  return (
    <>
      <ProgressBar />
      <StickyNav />

      {/* Hero */}
      <header className="hero">
        <div className="hero-background">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src="/hero.jpg" alt="Панорамный вид" />
        </div>
        <div className="hero-overlay" />

        <div className="hero-sidebar">
          <span className="hero-tag">Эссе</span>
          <span className="hero-tag">Фриланс</span>
          <span className="hero-tag">Путешествия</span>
        </div>

        <div className="hero-bottom">
          <h1 className="hero-title">
            ИСПОВЕДЬ<br />ФРИЛАНСЕРА<br />ЭМИГРАНТА
          </h1>
          <div className="hero-tags-mobile">
            <span className="hero-tag">Эссе</span>
            <span className="hero-tag">Фриланс</span>
            <span className="hero-tag">Путешествия</span>
          </div>
        </div>
      </header>

      <ArticleContent />
      <Footer />
      <ArticleScripts />
    </>
  );
}