---
import ProjectPage from "../../components/ProjectPage.astro";
import Demo from "../../components/Demo.astro";

export const metadata = {
    title: "Watercooler",
    description:
        "Virtual office space for remote teams allowing quick questions and spontaneous chats.",
    date: "March 2025",
    slug: "watercooler",
    image: "/watercooler-icon.svg",
    // github: "https://github.com/hex248/watercooler",
    hidden: true,
    tags: [
        "web",
        "react",
        "typescript",
        "webrtc",
        "livekit",
        "postgresql",
        "oauth",
    ],
};
---

<style>
    .green {
        color: var(--ayu-green-500);
    }

    a {
        text-decoration: none;
        border-bottom: 1px solid var(--ayu-blue-500);
        color: var(--ayu-blue-500);
        transition:
            color 0.1s,
            border-color 0.1s;
        margin-bottom: 16px;
    }
    a:hover {
        color: var(--ayu-blue-600);
        border-color: var(--ayu-blue-600);
    }
</style>

<ProjectPage metadata={metadata}>
    <p>watercooler description here</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Key features</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>feature1</li>
                <li><span class="green">Status:</span> active prototype</li>
            </ul>
        </div>

        <div class="bg-ayu-highlight p-4 rounded mt-4">
            <h2 class="text-lg text-ayu-green-500 mb-2">Technologies</h2>
            <ul class="list-disc list-inside space-y-1">
                <li>LiveKit (WebRTC)</li>
                <li>Next.js + TypeScript</li>
                <li>Prisma ORM + PostgreSQL</li>
                <li>Tailwind CSS</li>
                <li>Google OAuth with NextAuth.js</li>
                <li>Next.js Server-side rendering & API routes</li>
            </ul>
        </div>
    </div>

    <div class="mt-4">
        <h2 class="text-2xl text-ayu-accent mb-3">Screenshots</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <Demo image="/images/watercooler/office.png" title="Office space" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
            <Demo image="/images/watercooler/idk.png" title="idk" />
        </div>
    </div>
</ProjectPage>