/* global React */
// MomOps Framework: Cover screen.
function Cover({ meta, onRead, onDownload, onCite, citeState }) {
  return (
    <section className="fw-cover" id="cover" data-screen-label="Cover">
      <a className="fw-cover-logo" href="#cover" style={{ display: 'inline-block', marginBottom: 34 }}>
        <img src="assets/momops-logo.png" alt="MomOps" style={{ height: 60, width: 'auto' }} />
      </a>
      <div className="fw-cover-kicker">A Feminist Research Atlas</div>
      <h1>Organizational Care Consciousness Framework</h1>
      <p className="fw-cover-sub">{meta.versionLabel}</p>
      <p className="fw-cover-tag">{meta.tagline}</p>

      <dl className="fw-cover-meta">
        <div><dt>Version</dt><dd>{meta.version}</dd></div>
        <div><dt>Last updated</dt><dd>{meta.date}</dd></div>
        <div><dt>Reading time</dt><dd>{meta.readingTime}</dd></div>
        <div><dt>Evidence base</dt><dd>{meta.sourceCount}</dd></div>
      </dl>

      <div className="fw-cover-actions">
        <button className="fw-btn fw-btn--solid" onClick={onRead}>
          <i className="ic" data-lucide="book-open"></i>Read the full framework
        </button>
        <a className="fw-btn" href={meta.pdf} download>
          <i className="ic" data-lucide="download"></i>Download PDF
        </a>
        <button className="fw-btn" onClick={onCite}>
          <i className="ic" data-lucide={citeState ? 'check' : 'quote'}></i>{citeState ? 'Citation copied' : 'Copy citation'}
        </button>
      </div>
    </section>
  );
}
window.Cover = Cover;