// LatestLine — the most recent post as ONE typographic line. Bait to move into
// the site. No panel, no thumbnail. Hairline rule + arrow that drifts on hover.
function LatestLine({ onDark = false }) {
  const [hover, setHover] = React.useState(false);
  const c = onDark
    ? { fg: 'var(--fg-on-dark-1)', meta: 'var(--fg-on-dark-3)', rule: 'var(--hairline-on-dark)' }
    : { fg: 'var(--fg-1)', meta: 'var(--fg-3)', rule: 'var(--hairline)' };

  const ll = {
    eyebrow: {
      fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: '11px',
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color: onDark ? 'var(--fg-on-dark-2)' : 'var(--fg-3)', margin: '0 0 14px',
    },
    line: {
      display: 'flex', alignItems: 'baseline', gap: '16px',
      textDecoration: 'none', color: c.fg,
    },
    title: {
      fontFamily: 'var(--font-display)', fontWeight: 500,
      fontSize: 'clamp(20px, 2.2vw, 27px)', letterSpacing: '-0.01em',
    },
    meta: {
      fontFamily: 'var(--font-body)', fontSize: '12.5px', color: c.meta,
      fontFeatureSettings: '"onum" 1', marginLeft: 'auto', whiteSpace: 'nowrap',
    },
    arrow: {
      color: 'var(--accent-deep)',
      transform: hover ? 'translateX(5px)' : 'translateX(0)',
      transition: 'transform var(--dur-base) var(--ease-out)',
    },
    rule: { height: '1px', background: c.rule, marginTop: '14px' },
  };

  return (
    <div>
      <p style={ll.eyebrow}>Selected writing</p>
      <a
        href="#"
        style={ll.line}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        onClick={(e) => e.preventDefault()}
      >
        <span style={ll.title}>Notes on warm light and cold water</span>
        <span style={ll.meta}>Mar&nbsp;2026</span>
        <span style={ll.arrow}>→</span>
      </a>
      <div style={ll.rule} />
    </div>
  );
}
Object.assign(window, { LatestLine });