// Variant 2: Editorial — left-aligned, typographic, editorial rhythm.
// Large serif greeting at top-left. Search below. Shortcuts as a horizontal
// strip on the right with clear labels. Uses negative space, feels like a
// magazine cover.

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

  return (
    <div style={{
      position: 'relative', width: '100%', height: '100%',
      background: 'var(--sidebar-bg)',
      display: 'grid',
      gridTemplateColumns: '1.2fr 1fr',
      gridTemplateRows: 'auto 1fr auto',
      padding: '48px 56px 36px',
      gap: '0',
      overflow: 'auto',
    }}>
      {/* Meta bar (spans full width) */}
      <div style={{
        gridColumn: '1 / -1',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 11, fontFamily: 'JetBrains Mono, monospace',
        color: 'var(--fg-dim)', letterSpacing: '0.12em', textTransform: 'uppercase',
        paddingBottom: 28, borderBottom: '1px solid var(--border-soft)',
      }}>
        <span>Ajna Browser · New tab</span>
        <span>{now.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</span>
        <span>Issue № {String(Math.floor((now - new Date(now.getFullYear(), 0, 0))/86400000)).padStart(3, '0')}</span>
      </div>

      {/* Main column: greeting + search */}
      <div style={{
        gridColumn: '1', gridRow: '2',
        paddingTop: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center',
      }}>
        {greeting !== 'off' && (
          <>
            <div style={{
              fontSize: 12, fontFamily: 'JetBrains Mono, monospace',
              color: 'var(--fg-dim)', letterSpacing: '0.18em',
              textTransform: 'uppercase', marginBottom: 18,
            }}>
              {h}:{m} <span style={{ opacity: 0.6 }}>{ampm}</span> — {now.toLocaleDateString(undefined, { weekday: 'long' }).toLowerCase()}
            </div>
            <h1 style={{
              fontFamily: "'Instrument Serif', serif",
              fontSize: 'clamp(56px, 7.2vw, 112px)',
              lineHeight: 0.95, letterSpacing: '-0.02em',
              margin: '0 0 8px', color: 'var(--fg)', fontWeight: 400,
            }}>
              {greetingFor(now)}<span style={{
                background: 'var(--accent-grad)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                backgroundClip: 'text', fontStyle: 'italic',
              }}>{name ? ', ' + name : ''}</span><span style={{ color: 'var(--fg-dim)' }}>.</span>
            </h1>
            <div style={{
              maxWidth: 460, fontSize: 15, lineHeight: 1.5,
              color: 'var(--fg-muted)', marginTop: 14,
            }}>
              You closed <strong style={{ color: 'var(--fg)', fontWeight: 600 }}>23 tabs</strong> yesterday.
              That's a <em style={{ fontFamily: "'Instrument Serif', serif", fontWeight: 400 }}>quiet browser</em>.
              Keep it that way.
            </div>
          </>
        )}

        <div style={{ marginTop: 44 }}>
          <SearchBar width={520}/>
          <div style={{
            marginTop: 10, fontSize: 11,
            fontFamily: 'JetBrains Mono, monospace', color: 'var(--fg-dim)',
            letterSpacing: '0.08em',
          }}>
            ⌘K to search tabs · ⌘T new tab · ⌘\ toggle panel
          </div>
        </div>
      </div>

      {/* Right column: shortcuts list */}
      <div style={{
        gridColumn: '2', gridRow: '2',
        paddingTop: 48, paddingLeft: 48,
        borderLeft: '1px solid var(--border-soft)',
        marginLeft: 40,
        display: 'flex', flexDirection: 'column',
      }}>
        <div style={{
          fontSize: 10, fontFamily: 'JetBrains Mono, monospace',
          color: 'var(--fg-dim)', letterSpacing: '0.18em',
          textTransform: 'uppercase', marginBottom: 22,
        }}>
          Frequent · 01–08
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {SHORTCUTS.map((s, i) => (
            <a key={i} href="#" style={{
              display: 'flex', alignItems: 'center', gap: 16,
              padding: '12px 12px 12px 0',
              borderBottom: '1px solid var(--border-soft)',
              color: 'var(--fg)', textDecoration: 'none',
              fontSize: 15,
            }}
            onMouseEnter={e => {
              e.currentTarget.style.paddingLeft = '10px';
              e.currentTarget.style.background = 'var(--hover)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.paddingLeft = '0';
              e.currentTarget.style.background = 'transparent';
            }}
            >
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                color: 'var(--fg-dim)', width: 24,
              }}>{String(i+1).padStart(2, '0')}</span>
              <span style={{
                width: 32, height: 32, borderRadius: 16,
                display: 'grid', placeItems: 'center',
                overflow: 'hidden',
              }}>
                <ShortcutFavicon domain={s.domain} label={s.label} bg={s.bg} size={32}/>
              </span>
              <span style={{ flex: 1 }}>{s.title}</span>
              <span style={{ color: 'var(--fg-dim)' }}><Ic.arrowRight s={14}/></span>
            </a>
          ))}
        </div>
      </div>

      {/* Footer */}
      <div style={{
        gridColumn: '1 / -1', gridRow: '3',
        paddingTop: 24,
        display: 'flex', alignItems: 'center', gap: 20,
        fontSize: 11, fontFamily: 'JetBrains Mono, monospace',
        color: 'var(--fg-dim)', letterSpacing: '0.1em',
      }}>
        <WeatherChip compact/>
        <span style={{ opacity: 0.4 }}>·</span>
        <span>Default engine: Perplexity</span>
      </div>
    </div>
  );
}

Object.assign(window, { VariantEditorial });