export function EmptyState() {
  return (
    <div style={{
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      padding: "80px 24px",
      gap: 12,
      color: "var(--color-text-muted)",
    }}>
      <div style={{ fontSize: "2rem" }}>📅</div>
      <div style={{ fontSize: "1rem", fontWeight: 600, color: "var(--color-text)" }}>No data scraped yet</div>
      <div style={{ fontSize: "0.85rem", textAlign: "center", lineHeight: 1.6 }}>
        Run the following to populate the calendar:
      </div>
      <pre style={{
        background: "var(--color-surface)",
        border: "1px solid var(--color-border)",
        borderRadius: 8,
        padding: "12px 20px",
        fontSize: "0.8rem",
        color: "var(--color-text)",
        lineHeight: 1.8,
      }}>
        npm run discover{"\n"}npm run scrape
      </pre>
    </div>
  );
}