studio/src/components/EmptyState.jsx

import Logo from './Logo'

const STARTERS = [
  { title: 'Todo list with local storage', prompt: 'Build a todo list with add, complete, and delete actions, persisted to localStorage.' },
  { title: 'Pomodoro timer with sound',     prompt: 'Build a Pomodoro timer (25 min work / 5 min break) with start, pause, reset, and a soft chime when the interval ends.' },
  { title: 'Markdown editor with preview',  prompt: 'Build a side-by-side markdown editor: textarea on the left, live rendered preview on the right.' },
  { title: 'Landing page for a coffee shop', prompt: 'Build a single-page landing page for a coffee shop: hero with tagline, three featured drinks as cards, and a footer.' },
]

export default function EmptyState({ onPick }) {
  return (
    <div className="flex flex-col items-center justify-center h-full px-6 text-center fade-in">
      <div className="mb-4" style={{ filter: 'drop-shadow(0 0 20px var(--accent-glow))' }}>
        <Logo size={56} />
      </div>

      <h1
        className="text-[26px] font-semibold tracking-tight"
        style={{
          background: 'linear-gradient(135deg, var(--accent-hi), var(--live))',
          WebkitBackgroundClip: 'text',
          WebkitTextFillColor: 'transparent',
        }}
      >
        Tesseract
      </h1>
      <p className="mt-1 text-[13px]" style={{ color: 'var(--text-dim)' }}>
        Describe what you want. See it render live.
      </p>

      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-7 w-full max-w-md">
        {STARTERS.map((s) => (
          <button
            key={s.title}
            onClick={() => onPick(s.prompt)}
            className="text-left p-3 rounded-lg border transition-all hover:scale-[1.02]"
            style={{
              background: 'var(--surface)',
              borderColor: 'var(--border-2)',
              color: 'var(--text)',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'var(--accent)'
              e.currentTarget.style.boxShadow = '0 0 0 1px var(--accent-bg)'
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = 'var(--border-2)'
              e.currentTarget.style.boxShadow = 'none'
            }}
          >
            <div className="text-[12.5px] font-medium">{s.title}</div>
            <div className="text-[11px] mt-0.5 line-clamp-2" style={{ color: 'var(--text-dim)' }}>
              {s.prompt}
            </div>
          </button>
        ))}
      </div>

      <div className="mt-7 flex items-center gap-3 text-[10.5px] mono" style={{ color: 'var(--text-faint)' }}>
        <span><kbd className="px-1.5 py-0.5 rounded border" style={{ borderColor: 'var(--border-2)' }}>⌘K</kbd> palette</span>
        <span><kbd className="px-1.5 py-0.5 rounded border" style={{ borderColor: 'var(--border-2)' }}>⌘B</kbd> sidebar</span>
        <span><kbd className="px-1.5 py-0.5 rounded border" style={{ borderColor: 'var(--border-2)' }}>⌘/</kbd> mode</span>
      </div>
    </div>
  )
}