function SecHead({ cmd }) {
  return (<div className="sec-header"><span className="prompt">$</span><span className="cmd">{cmd}</span><span className="rule"></span></div>);
}

function Featured() {
  const F = window.DATA.featured;
  return (
    <div className="sec">
      <SecHead cmd="./rxvarta --featured" />
      <div className="feat">
        <div className="feat-top">
          <div>
            <div className="feat-kicker">FOUNDER · FORMERLY {F.formerly.toUpperCase()}</div>
            <div className="feat-name glitch">{F.name}</div>
            <div className="feat-line">{F.line}</div>
          </div>
          <a className="feat-cta" href={F.url} target="_blank" rel="noopener">rxvarta.com ↗</a>
        </div>
        <div className="feat-flow">
          {F.flow.map((s, i) => (
            <div className="feat-step" key={i}><span className="n">0{i+1}</span><span>{s}</span></div>
          ))}
        </div>
        <div className="feat-bottom">
          <div>
            <div className="feat-lbl"># stack</div>
            <div className="card-tags">{F.stack.map(s => <span key={s} className="tag">{s}</span>)}</div>
          </div>
          <div>
            <div className="feat-lbl"># status</div>
            <ul className="feat-facts">{F.facts.map(f => <li key={f}>{f}</li>)}</ul>
          </div>
        </div>
      </div>
    </div>
  );
}

function Experience() {
  const D = window.DATA;
  return (
    <div className="sec">
      <SecHead cmd="git log --experience" />
      <div className="timeline">
        {D.timeline.map((t, i) => (
          <div className={`tl-item ${t.now ? 'now' : ''}`} key={i}>
            <div className="tl-date">{t.date}</div>
            <div className="tl-title">{t.title}</div>
            <div className="tl-desc">{t.desc}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function OpenSource() {
  const D = window.DATA;
  return (
    <div className="sec">
      <SecHead cmd="gh pr list --author Varadraj75 --state merged" />
      <div className="oss-head"><span className="oss-big">76+</span><span className="oss-sub">merged PRs · started in first year</span></div>
      <div className="oss-grid">
        {D.oss.map(o => (
          <a className={"oss " + (o.main ? 'main' : '')} key={o.org} href={o.url} target="_blank" rel="noopener">
            <div className="oss-org">{o.org}{o.main && <span className="oss-badge">main focus</span>}</div>
            <div className="oss-desc">{o.desc}</div>
          </a>
        ))}
      </div>
      <div className="oss-also">also: {D.ossAlso.join(' · ')}</div>
    </div>
  );
}

function Recognition() {
  const D = window.DATA;
  return (
    <div className="sec">
      <SecHead cmd="cat ~/recognition.log" />
      <div className="awards">
        {D.awards.map(a => (
          <div className="award" key={a.what}>
            <span className="a-ok">[ ok ]</span>
            <span className="a-what">{a.what}</span>
            <span className="a-note">{a.note}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Smaller() {
  const D = window.DATA;
  return (
    <div className="smaller">
      <span className="feat-lbl"># smaller builds</span>
      <div className="smaller-list">
        {D.smaller.map(s => s.url
          ? <a key={s.name} href={s.url} target="_blank" rel="noopener">{s.name} ↗</a>
          : <span key={s.name}>{s.name}</span>)}
      </div>
    </div>
  );
}

function Faq() {
  const D = window.DATA;
  return (
    <div className="sec">
      <SecHead cmd="man varad" />
      <div className="faq">
        {D.faq.map(f => (
          <details className="faq-item" key={f.q}>
            <summary><h3>{f.q}</h3></summary>
            <p>{f.a}</p>
          </details>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Featured, Experience, OpenSource, Recognition, Smaller, Faq });