---
import BaseLayout from "../layouts/BaseLayout.astro";
---

<BaseLayout
    title="AI - Hidden Den Cafe"
    description="A calm note about how AI is used at Hidden Den: where it helps, where judgment stays human, and why the boundaries matter."
>
    <div class="matrix-bg" aria-hidden="true"></div>

    <main class="main">
        <div class="container">
            <header class="header fade-in">
                <p class="eyebrow">How this place is built</p>
                <h1 class="title">AI</h1>
                <div class="divider">==============================</div>
                <p class="lead">
                    This page exists as a simple note about how I use AI around
                    Hidden Den. Not as a grand policy statement, just as a clear
                    explanation of where it helps and where the site is still
                    very obviously built by a person.
                </p>
            </header>

            <section class="section fade-in">
                <h2>AI As A Tool</h2>
                <p class="desc">
                    I use AI in the same spirit that I use a terminal, an
                    editor, or a good piece of reference documentation: as a
                    tool that can help me think faster, test ideas, or get
                    through implementation work with less friction.
                </p>
                <p class="desc">
                    In practice that can mean refining copy, brainstorming page
                    structure, shaping prompts for coding agents, working
                    through technical edge cases, or getting help with a first
                    draft of a solution before I reshape it into something that
                    actually fits this site.
                </p>
                <p class="desc">
                    I still write and shape the code myself. AI sometimes helps
                    explain things, suggest an approach, or help me get unstuck,
                    but the actual building still happens in my editor and
                    terminal.
                </p>
                <div class="note">
                    <p>
                        The useful part is assistance, not delegation. AI helps
                        with scaffolding, iteration, and technical momentum.
                    </p>
                </div>
            </section>

            <section class="section fade-in">
                <h2>What Stays Human</h2>
                <p class="desc">
                    The final direction still comes from me. I decide what gets
                    published, what tone feels right, what belongs here, and
                    what does not. The site is meant to reflect a real person,
                    not an auto-generated personality layer pretending to be
                    one.
                </p>
                <p class="desc">
                    That applies to writing, structure, visual choices, and the
                    general shape of the project. AI can help me move, but it
                    does not get to replace judgment, taste, or authorship.
                </p>
                <div class="value-grid">
                    <article class="value-card">
                        <h3>Assistance</h3>
                        <p>
                            Drafts, implementation help, idea pressure-testing,
                            and faster iteration.
                        </p>
                    </article>
                    <article class="value-card">
                        <h3>Not Replacement</h3>
                        <p>
                            Final voice, publishing choices, priorities, and the
                            actual perspective behind the site stay mine.
                        </p>
                    </article>
                </div>
            </section>

            <section class="section fade-in">
                <h2>Privacy And Boundaries</h2>
                <p class="desc">
                    Privacy matters here, so AI use is deliberate rather than
                    casual. I do not think every problem should be handed to an
                    external system by default, and I do not want tooling habits
                    that quietly erode ownership just because convenience is
                    available.
                </p>
                <p class="desc">
                    That means using AI where it is practically helpful, keeping
                    boundaries in mind, and staying aware that these systems are
                    tools with tradeoffs. They should serve the builder, not
                    become the environment the builder disappears into.
                </p>
                <ul class="values compact">
                    <li>
                        <span class="value-key">intentional use:</span> I use it where
                        it helps, not everywhere by reflex.
                    </li>
                    <li>
                        <span class="value-key">privacy matters:</span> Not everything
                        belongs in a prompt window.
                    </li>
                    <li>
                        <span class="value-key">bounded scope:</span> AI supports
                        the workflow instead of becoming the workflow.
                    </li>
                </ul>
            </section>

            <section class="section fade-in">
                <h2>Why This Fits Hidden Den</h2>
                <p class="desc">
                    Hidden Den is built around understandable systems, practical
                    ownership, and tools that earn their place. AI fits that
                    philosophy when it is used calmly and with limits. It can be
                    useful without becoming an identity, and productive without
                    being treated like magic.
                </p>
                <p class="desc">
                    That balance matters to me. I like tools that help me build
                    better and think more clearly, but I still want the site to
                    feel inhabited, specific, and human-scaled. AI can help with
                    the scaffolding, but the den is still built by a person.
                </p>
            </section>

            <footer class="footer fade-in">
                <p>Made with love by Latte</p>
            </footer>
        </div>
    </main>
</BaseLayout>

<style>
    .matrix-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.03;
        background:
            linear-gradient(var(--color-accent) 1px, transparent 1px),
            linear-gradient(90deg, var(--color-accent) 1px, transparent 1px);
        background-size: 50px 50px;
        animation: grid-move 20s linear infinite;
    }

    @keyframes grid-move {
        0% {
            transform: translate(0, 0);
        }
        100% {
            transform: translate(50px, 50px);
        }
    }

    .main {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-lg) var(--space-md);
        padding-top: calc(var(--space-lg) + 3rem);
    }

    .container {
        max-width: 700px;
        width: 100%;
        background: var(--color-glass);
        backdrop-filter: blur(10px);
        border: 1px solid var(--color-surface);
        border-radius: 8px;
        padding: var(--space-xl);
    }

    .header {
        text-align: center;
        margin-bottom: var(--space-lg);
    }

    .eyebrow {
        color: var(--color-text-dim);
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: 0.75rem;
        margin-bottom: var(--space-sm);
    }

    .title {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 2px;
    }

    .divider {
        color: var(--color-surface);
        text-align: center;
        font-size: 0.75rem;
        margin: var(--space-md) 0;
        user-select: none;
    }

    .lead {
        color: var(--color-text);
        line-height: 1.8;
        max-width: 38rem;
        margin: 0 auto;
    }

    .section {
        margin: var(--space-lg) 0;
    }

    .section h2 {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: var(--space-sm);
        color: var(--color-accent);
    }

    .desc {
        color: var(--color-text-dim);
        line-height: 1.7;
        margin-bottom: var(--space-sm);
    }

    .desc:last-child {
        margin-bottom: 0;
    }

    .note {
        margin-top: var(--space-md);
        padding: var(--space-md);
        border: 1px solid
            color-mix(in srgb, var(--color-accent) 30%, transparent);
        background:
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--color-accent) 10%, transparent),
                transparent 70%
            ),
            color-mix(in srgb, var(--color-bg-light) 84%, transparent);
        border-radius: 8px;
    }

    .note p {
        color: var(--color-text);
        line-height: 1.7;
    }

    .value-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md);
        margin-top: var(--space-md);
    }

    .value-card {
        padding: var(--space-md);
        border-radius: 8px;
        background: color-mix(in srgb, var(--color-bg-light) 88%, transparent);
        border: 1px solid
            color-mix(in srgb, var(--color-surface) 70%, transparent);
    }

    .value-card h3 {
        color: var(--color-accent-bright);
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        margin-bottom: var(--space-xs);
    }

    .value-card p {
        color: var(--color-text-dim);
        line-height: 1.7;
    }

    .values {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .values li {
        color: var(--color-text-dim);
        line-height: 1.6;
    }

    .value-key {
        color: var(--color-accent);
        font-weight: 600;
    }

    .compact {
        margin-top: var(--space-md);
    }

    .footer {
        margin-top: var(--space-xl);
        text-align: center;
    }

    .footer p {
        color: var(--color-text-dim);
        font-size: 0.85rem;
    }

    .fade-in {
        animation: fadeIn 0.6s ease-out forwards;
        opacity: 0;
    }

    .fade-in:nth-child(1) {
        animation-delay: 0.1s;
    }

    .fade-in:nth-child(2) {
        animation-delay: 0.2s;
    }

    .fade-in:nth-child(3) {
        animation-delay: 0.3s;
    }

    .fade-in:nth-child(4) {
        animation-delay: 0.4s;
    }

    .fade-in:nth-child(5) {
        animation-delay: 0.5s;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width: 600px) {
        .container {
            padding: var(--space-md);
        }

        .title {
            font-size: 1.5rem;
        }

        .divider {
            font-size: 0.6rem;
        }

        .lead {
            font-size: 0.95rem;
        }

        .value-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .matrix-bg {
            animation: none;
        }

        .fade-in {
            animation: none;
            opacity: 1;
        }
    }
</style>