// Variant 3: Minimal Dawn — ultra-minimal, time-of-day adaptive wash.
// Search is the star. One row of shortcuts. Massive clock as a watermark.
// Gradient shifts with time of day (cool at night, warm at dawn, bright midday, amber evening).

function VariantMinimal({ greeting, name }) {
  const now = useClock();
  const { h, m, ampm } = timeParts(now);
  const hourF = now.getHours() + now.getMinutes() / 60;

  // Pick a time-of-day gradient (subtle, low chroma)
  const wash = timeOfDayWash(hourF);

  return (
    <div style={{
      position: 'relative', width: '100%', height: '100%',
      background: `var(--sidebar-bg)`,
      overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Time-of-day wash layer (very subtle) */}
      <div style={{
        position: 'absolute', inset: 0,
        background: wash,
        opacity: 0.85,
        pointerEvents: 'none',
      }}/>

      {/* Giant ghost clock watermark */}
      {greeting !== 'off' && (
        <div style={{
          position: 'absolute',
          top: '50%', left: '50%',
          transform: 'translate(-50%, -68%)',
          fontFamily: "'Instrument Serif', serif",
          fontSize: 'clamp(220px, 32vw, 480px)',
          lineHeight: 0.8,
          color: 'var(--fg)', opacity: 0.05,
          letterSpacing: '-0.04em', userSelect: 'none',
          fontFeatureSettings: '"lnum"',
        }}>
          {h}:{m}
        </div>
      )}

      {/* Content */}
      <div style={{
        position: 'relative', zIndex: 1,
        flex: 1, display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center',
        padding: 40,
        gap: 48,
      }}>
        {greeting !== 'off' && (
          <div style={{ textAlign: 'center' }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 11, letterSpacing: '0.2em',
              textTransform: 'uppercase', color: 'var(--fg-dim)',
              marginBottom: 12,
            }}>
              {timeOfDayLabel(hourF)}
            </div>
            <div style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 44, fontStyle: 'italic',
              letterSpacing: '-0.01em', color: 'var(--fg)',
              lineHeight: 1,
            }}>
              {greetingFor(now)}{name ? ', ' + name : ''}.
            </div>
          </div>
        )}

        <SearchBar width={680}/>

        {/* Single horizontal strip of shortcuts */}
        <div style={{
          display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center',
          maxWidth: 720,
        }}>
          {SHORTCUTS.slice(0, 8).map((s, i) => <Shortcut key={i} item={s} size={40}/>)}
        </div>
      </div>

      {/* Bottom meta */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: '0 32px 24px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, fontFamily: 'JetBrains Mono, monospace',
        color: 'var(--fg-dim)', letterSpacing: '0.08em',
      }}>
        <span>{h}:{m} {ampm}</span>
        <span>{now.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' }).toUpperCase()}</span>
        <WeatherChip compact/>
      </div>
    </div>
  );
}

function timeOfDayWash(h) {
  // 4 stops: dawn (5-8), day (8-17), dusk (17-20), night (20-5)
  if (h >= 5 && h < 8) {
    // dawn — soft peach top, cool bottom
    return 'linear-gradient(180deg, oklch(0.92 0.04 60 / 0.5) 0%, oklch(0.88 0.03 230 / 0.2) 100%)';
  } else if (h >= 8 && h < 17) {
    // day — bright cool
    return 'linear-gradient(180deg, oklch(0.95 0.02 220 / 0.3) 0%, oklch(0.92 0.02 180 / 0.1) 100%)';
  } else if (h >= 17 && h < 20) {
    // dusk — amber top, dusty bottom
    return 'linear-gradient(180deg, oklch(0.75 0.08 50 / 0.35) 0%, oklch(0.55 0.04 310 / 0.25) 100%)';
  } else {
    // night — deep indigo
    return 'linear-gradient(180deg, oklch(0.35 0.05 260 / 0.4) 0%, oklch(0.2 0.04 280 / 0.5) 100%)';
  }
}

function timeOfDayLabel(h) {
  if (h >= 5 && h < 8) return 'Dawn';
  if (h >= 8 && h < 12) return 'Morning';
  if (h >= 12 && h < 17) return 'Afternoon';
  if (h >= 17 && h < 20) return 'Dusk';
  return 'Night';
}

Object.assign(window, { VariantMinimal });