// === Generic widgets ===

function Field({ label, help, children }) {
  return (
    <div className="field">
      <label className="lbl">{label}</label>
      {children}
      {help && <div className="help">{help}</div>}
    </div>
  );
}

function TextInput({ value, onChange, placeholder, type="text" }) {
  return <input className="txt" type={type} value={value || ""} onChange={e => onChange(e.target.value)} placeholder={placeholder} />;
}

function TextArea({ value, onChange, placeholder, rows=3 }) {
  return <textarea className="txt" rows={rows} value={value || ""} onChange={e => onChange(e.target.value)} placeholder={placeholder} />;
}

function Lesson({ tag, children }) {
  return (
    <div className="lesson">
      <span className="lesson-tag">{tag}</span>
      <div className="lesson-body">{children}</div>
    </div>
  );
}

function Pill({ kind="default", children }) {
  return <span className={`pill ${kind === "default" ? "" : kind}`}>{children}</span>;
}

function SectionHead({ num, title, lede, maxPages }) {
  return (
    <div className="main-head">
      <div className="crumb">Secțiunea {num} · Propunere de proiect</div>
      <h1 className="section-title">{title}</h1>
      {lede && <p className="section-lede">{lede}</p>}
      <div className="section-meta">
        {maxPages && <span>📄 max. {maxPages} {maxPages === 1 ? "pagină" : "pagini"}</span>}
        <span className="dot"></span>
        <span>Times New Roman 12pt · 1.5 spațiere</span>
      </div>
    </div>
  );
}

function Card({ title, sub, action, children }) {
  return (
    <div className="card">
      {(title || sub || action) && (
        <div className="card-head">
          <div>
            {title && <h3 className="card-title">{title}</h3>}
          </div>
          <div style={{display:"flex", alignItems:"center", gap: 12}}>
            {sub && <span className="card-sub">{sub}</span>}
            {action}
          </div>
        </div>
      )}
      {children}
    </div>
  );
}

function FootNav({ prev, next, onPrev, onNext }) {
  return (
    <div className="foot-actions">
      <button className="btn ghost" onClick={onPrev} disabled={!prev}>← {prev || "Înapoi"}</button>
      <button className="btn" onClick={onNext} disabled={!next}>{next || "Înainte"} →</button>
    </div>
  );
}

function WordCounter({ text, min=8, max=50 }) {
  const wc = (text || "").trim().split(/\s+/).filter(Boolean).length;
  const over = wc > max;
  const under = wc < min && wc > 0;
  const ok = wc >= min && wc <= max;
  return (
    <div className="counter">
      <span>
        {ok ? <Pill kind="ok">✓ Lungime adecvată</Pill> : under ? <Pill kind="warn">Mai scurt decât recomandat</Pill> : over ? <Pill kind="bad">⚠ Peste maxim</Pill> : <Pill>Începe să scrii...</Pill>}
      </span>
      <span className={over ? "over" : ""}>{wc} / {max} cuvinte</span>
    </div>
  );
}

Object.assign(window, { Field, TextInput, TextArea, Lesson, Pill, SectionHead, Card, FootNav, WordCounter });