import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader

import React from "react";

import { Carousel } from "react-responsive-carousel";

import Head from "@docusaurus/Head";
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";

import { SocialCard, SocialCardProps } from "../components/homepage/SocialCard";

const features = [
	{
		title: "Основа мережі — Спілкування",
		imageUrl: "img/homepage/messages.svg",
		description: (
			<>
				Мережу в першу чергу, створюють люди, а не технології. Спілкування
				дозволяє нам зберігати зв'язок з друзями та родиною, а також будувати
				новий, цікавий і вільний світ.
			</>
		),
	},
	{
		title: "Захист",
		imageUrl: "img/homepage/encryption.svg",
		description: (
			<>
				Ми намагаємося захистити вашу приватність, використовуючи шифрування де
				це можливо та необхідно. Ви можете використовувати власні ключі
				шифрування, щоб забезпечити максимальний рівень захисту. Ми також
				відкриті для аудиту та вдосконалення наших методів шифрування та
				захисту.
			</>
		),
	},
	{
		title: "Незалежність",
		imageUrl: "img/homepage/platforms.svg",
		description: (
			<>
				Свобода спілкування не повинна бути обмежена. Ми намагаємося
				підтримувати якомога більше платформ, щоб ви могли спілкуватися з
				друзями та родиною, незалежно від того, який пристрій ви використовуєте.
			</>
		),
	},
	{
		title: "Open Source",
		imageUrl: "img/homepage/opensource.svg",
		description: (
			<>
				Мережа побудована на основі відкритих проектів, що дозволяє вам приймати
				участь в розвитку та вдосконаленні мережі.
			</>
		),
	},
];

const SocialCards: SocialCardProps[] = [
	{
		color: "bg-[#3875EA]",
		link: "https://irc.dead.guru",
		children: (
			<img alt="irc" className="m-auto h-10" src="/img/services/irc.svg" />
		),
	},
	{
		color: "bg-[#FFFFFF]",
		link: "https://matrix.to/#/#adhd_lab:hypogea.org",
		children: (
			<img
				alt="matrix"
				className="m-auto h-14"
				src="/img/services/Matrix_logo.svg"
			/>
		),
	},
	{
		color: "bg-[#95c0d9]",
		link: "https://xmpp.dead.guru:5281/",
		children: (
			<img
				alt="xmpp"
				className="m-auto h-14"
				src="/img/services/XMPP_logo.svg"
			/>
		),
	},
	{
		color: "bg-[#f05539]",
		link: "https://git.dead.guru/",
		children: (
			<img alt="git" className="m-auto h-14" src="/img/services/git_logo.svg" />
		),
	},
	{
		color: "bg-[#9e9b9a]",
		link: "https://mine.dead.guru",
		children: (
			<img
				alt="minecraft"
				className="m-auto h-16"
				src="/img/services/minecraft_logo.svg"
			/>
		),
	},
	{
		color: "bg-[#39322b]",
		link: "https://bookhouse.hypogea.org/",
		children: (
			<img
				alt="Calibre"
				className="m-auto h-12"
				src="/img/services/Calibre_logo.png"
			/>
		),
	},
	{
		color: "bg-[#6366f1]",
		link: "https://pi.dead.guru",
		children: (
			<img
				alt="reddit"
				className="m-auto h-20"
				src="/img/services/Pixelfed_logo.svg"
			/>
		),
	},
];

function Home() {
	const context = useDocusaurusContext();
	const { siteConfig } = context;
	return (
		<Layout>
			<Head>
				<meta property="og:title" content="Dead Network" />
				<meta
					property="og:image"
					content="https://meshtastic.org/design/web/social-preview-1200x630.png"
				/>
				<meta
					property="og:description"
					content="Надаємо різноманітні сервіси-платформи, які дають змогу окремим особам і спільнотам спілкуватися, ділитися та розвиватися разом."
				/>
				<meta property="og:url" content="https://network.dead.guru/" />
				<meta name="twitter:card" content="summary_large_image" />
			</Head>
			<header style={{ textAlign: "center" }} className="hero hero--primary">
				<div className="container">
					<h1 className="hero__title">
						<img
							style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
							alt="Dead Logo"
							className="header__logo"
							src={useBaseUrl("img/dead-banner.png")}
						/>
					</h1>
					<p className="hero__subtitle">{siteConfig.tagline}</p>
					<div className="indexCtas">
						<Link className="button button--lg" to="/docs/introduction">
							Дізнатися більше
						</Link>
						<Link className="button button--lg" to="/docs/getting-started">
							Розпочати
						</Link>
					</div>
				</div>
			</header>
			<main className="flex flex-col gap-4">
				<Carousel autoPlay infiniteLoop showStatus={false} showThumbs={false}>
					{features.map((feature) => (
						<div key={feature.title} className="flex p-12">
							<div className="w-1/2">
								<img
									className="my-auto h-40"
									src={feature.imageUrl}
									alt={feature.title}
								/>
							</div>
							<div className="my-auto w-1/2">
								<h3 className="text-xl font-medium">{feature.title}</h3>
								<p>{feature.description}</p>
							</div>
						</div>
					))}
				</Carousel>

				<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
					<h3 className="text-xl font-bold">Приєднуйтесь до нас.</h3>
					<div className="flex w-full overflow-x-auto">
						{SocialCards.map((card) => (
							<SocialCard key={card.link} color={card.color} link={card.link}>
								{card.children}
							</SocialCard>
						))}
					</div>
				</div>

				<div className="container mx-auto flex w-auto flex-col">
					<h2 className="mb-2 text-xl font-medium">
						Доєднайтеся до "Мертвої" мережі в 3 кроки.
					</h2>
					<ul
						className="mx-auto"
						style={{
							position: "relative",
							display: "grid",
							gap: "1.5rem",
							gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
							paddingLeft: "0",
						}}
					>
						<div className="card">
							<div
								className="card__header"
								style={{ display: "flex", justifyContent: "space-between" }}
							>
								<h3>1. Оберіть платформу</h3>
							</div>
							<div
								className="card__body"
								style={{ display: "flex", justifyContent: "center" }}
							>
								<p>
									Для старту почніть з вибору платформи:
									<ul>
										<li>IRC</li>
										<li>XMPP</li>
										<li>Matrix</li>
										<li>
											Або взагалі проігноруйте сервіси повідомлень і почніть з{" "}
											<a href="">
												<strong>ігрових серверів</strong>
											</a>
											!
										</li>
									</ul>
								</p>
							</div>
						</div>
						<div className="card">
							<div
								className="card__header"
								style={{ display: "flex", justifyContent: "space-between" }}
							>
								<h3>2. Завантажте і зареєструйтесь!</h3>
							</div>
							<div
								className="card__body"
								style={{ display: "flex", justifyContent: "center" }}
							>
								<p>
									<a href="/downloads">
										<strong>Завантажте</strong>
									</a>{" "}
									додаток для обраної платформи, перегляньте наш{" "}
									<a href="">
										<strong>мануал по налаштуванню</strong>
									</a>{" "}
									і зареєструйтесь в сервісі мережі.
								</p>
							</div>
						</div>
						<div className="card">
							<div
								className="card__header"
								style={{ display: "flex", justifyContent: "space-between" }}
							>
								<h3>3. Приєднайтесь до чату</h3>
							</div>
							<div
								className="card__body"
								style={{ display: "flex", justifyContent: "center" }}
							>
								<p>
									В залежності від ваших інтересів і обраної платформи, ви
									можете приєднатися до:
									<ul>
										<li>Загальний чат</li>
										<li>ADHD Lab</li>
										<li>Ігрові чати</li>
										<li>HAM загальний чат</li>
									</ul>
								</p>
							</div>
						</div>
					</ul>
				</div>
				<br />
			</main>
		</Layout>
	);
}

export default Home;
