// Variant 1: Calm Center — refined evolution of the current NTP.
// Vertical composition: greeting + clock, brand mark, search, then shortcuts.
// Subtle vignette gradient. The quietest, most familiar option.

function VariantCalm({ greeting, name }) {
  const now = useClock();
  const { h, m, ampm } = timeParts(now);

  return (
    <div style={{
      position: 'relative', width: '100%', height: '100%',
      background: `radial-gradient(ellipse at 50% 20%, oklch(from var(--bg-elev) calc(l + 0.02) c h) 0%, var(--sidebar-bg) 60%)`,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      padding: '40px 40px 32px',
      overflow: 'auto',
    }}>
      {/* Top-right meta strip */}
      <div style={{
        position: 'absolute', top: 20, right: 24,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <WeatherChip compact/>
      </div>

      {/* Spacer pushes content to roughly 38% from top */}
      <div style={{ flex: '0 0 8%' }}/>

      {greeting !== 'off' && (
        <div style={{ textAlign: 'center', marginBottom: 28 }}>
          <div style={{
            fontFamily: "'Instrument Serif', serif",
            fontSize: 56, lineHeight: 1, letterSpacing: '-0.01em',
            color: 'var(--fg)',
            fontStyle: 'italic',
          }}>
            {greetingFor(now)}{name ? <>, <span style={{
              background: 'var(--accent-grad)', WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent', backgroundClip: 'text',
            }}>{name}</span></> : '.'}
          </div>
          <div style={{
            marginTop: 14,
            fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
            color: 'var(--fg-dim)', letterSpacing: '0.14em',
          }}>
            {h}:{m} {ampm} · {now.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric' })}
          </div>
        </div>
      )}

      <div style={{ margin: '8px 0 28px' }}>
        <SearchBar width={620}/>
      </div>

      {/* Shortcuts — 2 rows of 4 */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 96px)',
        gap: '8px 16px',
        marginTop: 8,
      }}>
        {SHORTCUTS.map((s, i) => <Shortcut key={i} item={s}/>)}
      </div>

      <div style={{ flex: 1 }}/>

      {/* Footer meta */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 14, fontSize: 11,
        color: 'var(--fg-dim)', fontFamily: 'JetBrains Mono, monospace',
        letterSpacing: '0.08em', textTransform: 'uppercase',
      }}>
        <span>ajna · v0.4.2</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span>127 tabs saved today</span>
        <span style={{ opacity: 0.4 }}>·</span>
        <span>customize</span>
      </div>
    </div>
  );
}

Object.assign(window, { VariantCalm });