// StudyScreen.jsx — "What are you working on?" composer

function StudyScreen({ onSubmit }) {
  const [val, setVal] = React.useState("");
  return (
    <section className="study">
      <h1 className="study-head">What are you working on?</h1>
      <div className="composer">
        <textarea
          className="composer-input"
          placeholder="Paste a syllabus, drop in a PDF, share a link, or describe what you want to learn…"
          value={val}
          onChange={e => setVal(e.target.value)}
        />
        <div className="composer-bar">
          <div className="composer-actions">
            <button className="icon-btn" title="attach">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.5">
                <path d="M16 6l-8 8a3 3 0 004 4l9-9a5 5 0 00-7-7L4 12a7 7 0 0010 10"/>
              </svg>
            </button>
            <button className="source-btn">
              <span className="src-dot" style={{background:"rgb(232,88,88)"}} />Canvas
            </button>
            <button className="source-btn">
              <svg viewBox="0 0 24 24" width="14" height="14"><path d="M7 18l5-9 5 9H7z" fill="rgb(66,153,234)"/><path d="M9 18l3-5 3 5H9z" fill="rgb(255,193,7)"/></svg>
              Drive
            </button>
          </div>
          <button className="send-btn" onClick={() => onSubmit(val)} aria-label="send">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 19V5 M5 12l7-7 7 7"/>
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StudyScreen });