---
import BaseLayout from "~/layouts/BaseLayout.astro";
import Eyebrow from "~/components/atoms/Eyebrow.astro";
import Mark from "~/components/atoms/Mark.astro";
import InkArrow from "~/components/atoms/InkArrow.astro";
import { blog, home } from "~/lib/urls";
---

<BaseLayout
  title="Code — Josh Bairstow"
  description="Experiments and small tools. Coming online piece by piece."
  current="code"
>
  <Fragment slot="marks">
    <Mark kind="pipes"      width={30} top="22%" left="6%" rotate={-4} />
    <Mark kind="dots"       width={48} top="68%" right="6%" />
    <Mark kind="concentric" width={40} bottom="12%" left="44%" />
  </Fragment>

  <header class="masthead">
    <div>
      <Eyebrow>Workshop · in progress</Eyebrow>
      <h1 class="title">Code<span class="accent">.</span></h1>
      <p class="count">Coming online · piece by piece</p>
    </div>
    <p class="blurb">
      Small utilities, experiments, and the occasional tool worth writing down.
      Nothing here yet — the workshop is still being arranged.
    </p>
  </header>

  <section class="placeholder">
    <p>
      In the meantime, the writing index is the closest thing to a working log:
    </p>
    <a class="cta" href={blog("/")}>
      <span class="u">Read the writing</span>
      <InkArrow />
    </a>
    <a class="cta secondary" href={home("/")}>
      <span class="u">Back to the index</span>
    </a>
  </section>
</BaseLayout>

<style>
  .masthead {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(30px, 6vw, 80px);
    align-items: end;
    padding: clamp(40px, 8vh, 96px) 0 clamp(30px, 5vh, 52px);
  }
  .masthead .title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(56px, 9vw, 132px);
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 12px 0 0;
    color: var(--fg-on-dark-1);
  }
  .masthead .title .accent { color: var(--accent-deep); }
  :global(body:not(.dark)) .masthead .title { color: var(--fg-1); }
  .masthead .count {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-on-dark-3);
    margin-top: 16px;
    font-feature-settings: "onum" 1;
  }
  .masthead .blurb {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: clamp(15px, 1.4vw, 18px);
    line-height: 1.62;
    color: var(--fg-on-dark-2);
    max-width: 38ch;
    margin: 0 0 6px;
  }
  :global(body:not(.dark)) .masthead .blurb { color: var(--fg-2); }

  .placeholder {
    padding: clamp(34px, 6vh, 72px) 0 0;
    border-top: 1px solid var(--hairline-on-dark);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  :global(body:not(.dark)) .placeholder { border-top-color: var(--hairline); }
  .placeholder p {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.62;
    color: var(--fg-on-dark-2);
    max-width: 50ch;
    margin: 0;
  }
  :global(body:not(.dark)) .placeholder p { color: var(--fg-2); }

  .cta {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--fg-on-dark-1);
    white-space: nowrap;
  }
  :global(body:not(.dark)) .cta { color: var(--fg-1); }
  .cta .u {
    position: relative;
    padding-bottom: 3px;
  }
  .cta .u::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--accent);
  }
  .cta.secondary {
    color: var(--fg-on-dark-2);
    font-weight: 400;
  }
  .cta.secondary .u::after {
    background: var(--hairline-on-dark);
  }

  @media (max-width: 800px) {
    .masthead { grid-template-columns: 1fr; }
  }
</style>