/* global React, useT */

const RATIO_HITS = [12, 41, 63, 88]; // positions of the 4 highlighted picks in the 100-dot line

function HeroRatio() {
  const { t, lang } = useT();
  const r = t.hero.ratio;
  const dots = [];
  for (let i = 0; i < 100; i++) {
    dots.push(<span key={i} className={"hero-ratio-dot " + (RATIO_HITS.includes(i) ? "is-on" : "")}></span>);
  }
  return (
    <div className="hero-ratio" aria-hidden="true" data-reveal data-reveal-delay="3">
      <div className="hero-ratio-head">
        <span>{r.label} · 100 : 4</span>
        <span className="accent">{lang === "fi" ? "kärkihakijat" : "top picks"}</span>
      </div>
      <div className="hero-ratio-dots">{dots}</div>
      <div className="hero-ratio-meta">
        <span>{r.applicants}</span>
        <span>{r.top} →</span>
      </div>
    </div>
  );
}

function ProfileMock() {
  const { t } = useT();
  const p = t.mock.profile;
  return (
    <article className="mock mock-profile" aria-hidden="true">
      <div className="mock-header">
        <span><span className="dot"></span>{p.header}</span>
        <span>01 / 03</span>
      </div>
      <h3 className="mock-profile-name">{p.name}</h3>
      <p className="mock-profile-role">{p.role}</p>
      <div className="mock-profile-rows">
        {p.rows.map((r, i) => (
          <div key={i} className="mock-row">
            <span className="mock-row-k">{r[0]}</span>
            <span className="mock-row-v">{r[1]}</span>
          </div>
        ))}
      </div>
      <div className="mock-progress">
        <span className="mock-progress-l">{p.progress}</span>
        <div className="mock-progress-bar"><div className="mock-progress-fill"></div></div>
      </div>
    </article>
  );
}

function ListMock() {
  const { t } = useT();
  const l = t.mock.list;
  return (
    <article className="mock mock-list" aria-hidden="true">
      <div className="mock-header">
        <span><span className="dot"></span>{l.eyebrow}</span>
        <span>02 / 03</span>
      </div>
      <h3 className="mock-list-role">{l.role}</h3>
      <span className="mock-list-meta">{l.meta}</span>
      <ul className="mock-list-items">
        {l.items.map((it, i) => (
          <li key={it.rank} className={"mock-list-item " + (i === l.active ? "is-active" : "")}>
            <span className="mock-list-rank">{it.rank}</span>
            <div>
              <h4 className="mock-list-name">{it.name}</h4>
              <span className="mock-list-tag">{it.tag}</span>
            </div>
            <span className="mock-list-score">{it.score}%</span>
          </li>
        ))}
      </ul>
    </article>
  );
}

function DetailMock() {
  const { t } = useT();
  const d = t.mock.detail;
  return (
    <article className="mock mock-detail" aria-hidden="true">
      <div className="mock-header">
        <span><span className="dot"></span>{d.eyebrow}</span>
        <span>03 / 03</span>
      </div>
      <div className="mock-detail-top">
        <h3 className="mock-detail-name">{d.name}</h3>
        <div className="mock-detail-score">
          <span className="mock-detail-score-n">{d.score}</span>
          <span className="mock-detail-score-u">{d.scoreLabel}</span>
        </div>
      </div>
      <div className="mock-detail-block">
        <span className="mock-detail-l">{d.whyL}</span>
        <ul className="mock-detail-list">
          {d.why.map((w, i) => (
            <li key={i}><span className="ok">✓</span><span>{w}</span></li>
          ))}
        </ul>
      </div>
      <div className="mock-detail-block warn">
        <span className="mock-detail-l">{d.missL}</span>
        <ul className="mock-detail-list">
          {d.miss.map((m, i) => (
            <li key={i}><span className="wn">!</span><span>{m}</span></li>
          ))}
        </ul>
      </div>
      <div className="mock-detail-block">
        <span className="mock-detail-l">{d.nextL}</span>
        <span className="mock-detail-cta">{d.cta}</span>
      </div>
    </article>
  );
}

function EmployerFlow() {
  const { lang } = useT();
  const flowLabel = lang === "fi" ? "Avaa suositus" : "Open recommendation";
  return (
    <div className="emp-flow" data-reveal data-reveal-delay="1">
      <div className="emp-flow-card emp-flow-card-list"><ListMock /></div>
      <div className="emp-flow-arrow" aria-hidden="true">
        <span className="emp-flow-arrow-line"></span>
        <span className="emp-flow-arrow-label">{flowLabel}</span>
        <span className="emp-flow-arrow-glyph">→</span>
      </div>
      <div className="emp-flow-card emp-flow-card-detail"><DetailMock /></div>
    </div>
  );
}

window.HeroRatio = HeroRatio;
window.ProfileMock = ProfileMock;
window.ListMock = ListMock;
window.DetailMock = DetailMock;
window.EmployerFlow = EmployerFlow;