import React from "react";

import { FaAndroid, FaApple } from "react-icons/fa";

import useBaseUrl from "@docusaurus/useBaseUrl";

import {
	ArrowTopRightOnSquareIcon,
	ComputerDesktopIcon,
	GlobeAltIcon,
} from "@heroicons/react/24/solid";
import Layout from "@theme/Layout";

const Firmware = (): JSX.Element => {
	return (
		<Layout
			title="Завантаження"
			description="Клієнти для наших сервісів для різних платформ."
		>
			<div className="container mt-8 flex flex-col gap-3">
				<div className="flex w-full overflow-hidden rounded-xl">
					<div className="flex w-1/5 bg-gradient-to-r from-rose-500 to-primary">
						<span className="m-auto h-20 text-4xl font-black">#IRC</span>
					</div>
					<div className="flex w-full columns-3 flex-col bg-primary lg:flex-row">
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Apple</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaApple className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								Available on MacOS & iOS. Requires MacOS Ventura or iOS 16+.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									App Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Android</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaAndroid className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">Sideloading also available.</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									F-Droid
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="mt-4 flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									Play Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Web</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<GlobeAltIcon className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								<a href="https://sr.ht/~emersion/gamja/">gamja</a> веб клієнт
								для IRC.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="https://irc.dead.guru"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									irc.dead.guru
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
					</div>
				</div>
				{/*  */}
				<div className="flex w-full overflow-hidden rounded-xl">
					<div className="flex w-1/5 bg-gradient-to-r from-green-500 to-primary">
						<span className="m-auto h-20 text-4xl font-black">#MATRIX</span>
					</div>
					<div className="flex w-full columns-3 flex-col bg-primary lg:flex-row">
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Apple</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaApple className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								Available on MacOS & iOS. Requires MacOS Ventura or iOS 16+.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									App Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Android</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaAndroid className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">Sideloading also available.</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									F-Droid
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="mt-4 flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									Play Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Web</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<GlobeAltIcon className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								fluffychat веб клієнт для matrix.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="https://xmpp.dead.guru:5281/conversejs"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									https://fluffychat.im/
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
					</div>
				</div>
				{/*  */}
				<div className="flex w-full overflow-hidden rounded-xl">
					<div className="flex w-1/5 bg-gradient-to-r from-yellow-500 to-primary">
						<span className="m-auto h-20 text-4xl font-black">#XMPP</span>
					</div>
					<div className="flex w-full columns-3 flex-col bg-primary lg:flex-row">
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Apple</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaApple className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								Available on MacOS & iOS. Requires MacOS Ventura or iOS 16+.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									App Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Android</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<FaAndroid className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">Sideloading also available.</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									F-Droid
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="#"
									className="mt-4 flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									Play Store
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
						<div className="card m-4 border-2 border-secondary">
							<div className="card__header">
								<h3>Web</h3>
							</div>
							<div className="card__body flex items-center">
								<div className="m-auto">
									<GlobeAltIcon className="h-20 w-20" />
								</div>
							</div>
							<div className="card__body">
								<a href="https://conversejs.org/">Converse.js</a> веб клієнт для
								XMPP.
							</div>
							<div className="card__footer mt-auto">
								<a
									target="_blank"
									rel="noopener noreferrer"
									href="https://xmpp.dead.guru:5281/conversejs"
									className="m-auto flex rounded-lg border-4 border-transparent bg-accent p-1 font-semibold text-black shadow-md hover:text-black hover:brightness-110 active:border-green-200"
								>
									https://xmpp.dead.guru:5281/conversejs
									<ArrowTopRightOnSquareIcon className="m-auto ml-2 h-4" />
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</Layout>
	);
};

export default Firmware;
