// Shared shortcut data and helpers

const SHORTCUTS = [
  { title: 'Google', domain: 'google.com' },
  { title: 'YouTube', domain: 'youtube.com' },
  { title: 'GitHub', domain: 'github.com' },
  { title: 'Linear', domain: 'linear.app' },
  { title: 'Figma', domain: 'figma.com' },
  { title: 'Notion', domain: 'notion.so' },
  { title: 'Gmail', domain: 'gmail.com' },
  { title: 'Ajna', domain: null, bg: 'linear-gradient(135deg,#6EE7B7,#60A5FA)', label: 'A' },
];

function timeParts(now) {
  let h = now.getHours();
  const m = now.getMinutes();
  const ampm = h >= 12 ? 'PM' : 'AM';
  h = h % 12 || 12;
  return { h: String(h), m: String(m).padStart(2,'0'), ampm };
}

function greetingFor(now) {
  const h = now.getHours();
  if (h < 5) return 'Late night';
  if (h < 12) return 'Good morning';
  if (h < 17) return 'Good afternoon';
  if (h < 21) return 'Good evening';
  return 'Good evening';
}

function useClock() {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000 * 20);
    return () => clearInterval(id);
  }, []);
  return now;
}

// Reusable shortcut tile (circular favicon + label underneath)
function Shortcut({ item, size = 48 }) {
  return (
    <a href="#" style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      textDecoration: 'none', color: 'var(--fg-muted)',
      width: 72, padding: '10px 0', borderRadius: 12,
      transition: 'background 160ms',
    }}
    onMouseEnter={e => e.currentTarget.style.background = 'var(--hover)'}
    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <ShortcutFavicon
        domain={item.domain}
        label={item.label}
        bg={item.bg}
        size={size}
      />
      <span style={{ fontSize: 12, fontWeight: 500 }}>{item.title}</span>
    </a>
  );
}

// Search bar — same as used across variants
function SearchBar({ placeholder = 'Search the web or type a URL', width = 640 }) {
  const [value, setValue] = React.useState('');
  return (
    <div style={{
      width, maxWidth: '90vw', height: 52,
      background: 'var(--bg-elev)',
      border: '1px solid var(--border)',
      borderRadius: 26,
      display: 'flex', alignItems: 'center', gap: 12,
      padding: '0 8px 0 20px',
      boxShadow: '0 10px 30px rgba(0,0,0,0.12)',
    }}>
      <span style={{ color: 'var(--fg-dim)' }}><Ic.search s={18}/></span>
      <input
        value={value}
        onChange={e => setValue(e.target.value)}
        placeholder={placeholder}
        style={{
          flex: 1, background: 'transparent', border: 0, outline: 'none',
          color: 'var(--fg)', fontSize: 15, fontFamily: 'inherit',
        }}
      />
      <span style={{
        fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-dim)',
        padding: '4px 7px', background: 'var(--bg-elev-2)', borderRadius: 4,
      }}>⌘L</span>
      <button style={{
        width: 40, height: 40, borderRadius: 20,
        background: 'var(--accent-grad)', border: 0, cursor: 'pointer',
        display: 'grid', placeItems: 'center', color: '#0F1114',
      }}><Ic.arrowRight/></button>
    </div>
  );
}

function WeatherChip({ compact }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: compact ? 8 : 12,
      padding: compact ? '8px 12px' : '10px 16px',
      background: 'var(--bg-elev)',
      border: '1px solid var(--border-soft)',
      borderRadius: 999,
      fontSize: compact ? 12 : 13, color: 'var(--fg-muted)',
    }}>
      <Ic.cloud s={compact ? 16 : 18}/>
      <span><strong style={{ color: 'var(--fg)', fontWeight: 600 }}>64°</strong> · Partly cloudy</span>
      {!compact && <span style={{ color: 'var(--fg-dim)' }}>· Ahmedabad</span>}
    </div>
  );
}

Object.assign(window, { SHORTCUTS, timeParts, greetingFor, useClock, Shortcut, SearchBar, WeatherChip });