---
import Layout from '../layouts/Layout.astro';
import iosDarkAppIcon from '@fressh/assets/ios-dark-2.png';

const title = 'Fressh — Mobile SSH Client';
const description =
	'A clean, powerful mobile SSH client. Built with React Native, powered by Russh (Rust-based SSH), and planned to be open source.';
const image = iosDarkAppIcon.src;
---

<Layout>
	<Fragment slot="head">
		<meta name="description" content={description} />
		<meta property="og:type" content="website" />
		<meta property="og:title" content={title} />
		<meta property="og:description" content={description} />
		<meta property="og:image" content={image} />
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:title" content={title} />
		<meta name="twitter:description" content={description} />
		<meta name="twitter:image" content={image} />
	</Fragment>
	<section
		class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-gray-50 to-white px-6 dark:from-gray-900 dark:to-black"
	>
		<img
			src={iosDarkAppIcon.src}
			alt="Fressh app icon"
			class="mb-6 h-20 w-20 rounded-2xl shadow-md"
		/>
		<h1
			class="text-5xl font-extrabold tracking-tight text-gray-900 sm:text-6xl dark:text-white"
		>
			Fressh
		</h1>
		<p class="mt-3 text-lg text-gray-600 dark:text-gray-300">
			A clean, powerful mobile SSH client.
		</p>
		<span
			class="mt-4 inline-flex items-center gap-2 rounded-full border border-dashed border-gray-300 px-3 py-1 text-sm text-gray-600 dark:border-gray-700 dark:text-gray-300"
			>Coming soon</span
		>
		<div
			class="mt-10 grid w-full max-w-3xl gap-6 text-left sm:grid-cols-2 lg:grid-cols-3"
		>
			<div class="rounded-xl border border-gray-200 p-6 dark:border-gray-800">
				<h2
					class="text-base font-semibold tracking-wide text-gray-900 dark:text-gray-100"
				>
					Features
				</h2>
				<ul class="mt-3 space-y-2 text-gray-700 dark:text-gray-300">
					<li class="flex items-start gap-3">
						<span class="text-emerald-500">✓</span><span
							>Securely storing previous connections</span
						>
					</li>
					<li class="flex items-start gap-3">
						<span class="text-emerald-500">✓</span><span
							>Configurable preset command buttons</span
						>
					</li>
					<li class="flex items-start gap-3">
						<span class="text-emerald-500">✓</span><span
							>Configurable theme</span
						>
					</li>
					<ul></ul>
				</ul>
			</div>
			<div class="rounded-xl border border-gray-200 p-6 dark:border-gray-800">
				<h2
					class="text-base font-semibold tracking-wide text-gray-900 dark:text-gray-100"
				>
					Coming soon
				</h2>
				<ul class="mt-3 space-y-2 text-gray-700 dark:text-gray-300">
					<li class="flex items-start gap-3">
						<span class="text-amber-500">•</span><span
							>Fully accurate xterm emulation</span
						>
					</li>
					<li class="flex items-start gap-3">
						<span class="text-amber-500">•</span><span
							>On-device LLM for command completion and output summarization</span
						>
					</li>
					<ul></ul>
				</ul>
			</div>
			<div class="rounded-xl border border-gray-200 p-6 dark:border-gray-800">
				<h2
					class="text-base font-semibold tracking-wide text-gray-900 dark:text-gray-100"
				>
					Technical specs
				</h2>
				<ul class="mt-3 space-y-2 text-gray-700 dark:text-gray-300">
					<li class="flex items-start gap-3">
						<span class="text-blue-500">•</span>
						<span>UI built with React Native</span>
					</li>
					<li class="flex items-start gap-3">
						<span class="text-blue-500">•</span>
						<span>
							SSH core powered by
							<a
								href="https://github.com/Eugeny/russh"
								target="_blank"
								rel="noopener noreferrer"
								class="text-blue-600 underline decoration-dotted hover:decoration-solid dark:text-blue-400"
							>
								Russh
							</a>
							(Rust-based SSH library)
						</span>
					</li>
					<li class="flex items-start gap-3">
						<span class="text-blue-500">•</span>
						<span>Planned to be open source</span>
					</li>
				</ul>
			</div>
		</div>
	</section>
</Layout>
