// WorkTwins — Evidence story sections
// Distilled from the WorkTwins comparison/process infographics:
//   1. HiringCompared — Traditional Hiring vs AI Resume Tools vs WorkTwins
//      (feature table + "what each method actually measures" score grid)
//   2. EvidenceFlow  — Traditional hiring process vs the WorkTwins flow,
//      with For developers / For recruiters / For teams summary.

/* =========================
   COLUMN HEADER ICONS (inline SVG to match site style)
   ========================= */
const ColIcon = {
  Trad: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width="18" height="18" aria-hidden="true">
      <rect x="5" y="3" width="14" height="18" rx="2"/>
      <path d="M9 7h6M9 11h6M9 15h4"/>
    </svg>
  ),
  AI: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" width="18" height="18" aria-hidden="true">
      <rect x="4" y="6" width="16" height="12" rx="3"/>
      <circle cx="9" cy="12" r="1.2"/><circle cx="15" cy="12" r="1.2"/>
      <path d="M12 3v3M8 18l-1 2M16 18l1 2"/>
    </svg>
  ),
  WT: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" width="18" height="18" aria-hidden="true">
      <circle cx="9" cy="12" r="5"/>
      <circle cx="15" cy="12" r="5"/>
    </svg>
  ),
};

/* =========================
   HIRING COMPARED
   ========================= */
function HiringCompared() {
  const rows = [
    { label: "What is evaluated",        trad: "Resume + interviews",                          ai: "Resumes ranked by AI",                       wt: "Real work behavior" },
    { label: "Primary signal",           trad: "Self-claims and interview performance",        ai: "Keywords, profile text, historical patterns", wt: "Private WorkFootPrint and computational affinity" },
    { label: "Time to identify fit",     trad: "Weeks to months",                              ai: "Hours to days",                              wt: "Minutes" },
    { label: "Proof quality",            trad: "Indirect",                                     ai: "Faster, but still claim-based",              wt: "Evidence-based" },
    { label: "Team compatibility",       trad: "Mostly invisible",                             ai: "Still mostly inferred",                      wt: "Directly surfaced through similarity" },
    { label: "Candidate experience",     trad: "Repetitive and exhausting",                    ai: "Less manual screening, same proof burden",   wt: "Less proving, more discovery" },
    { label: "Collaboration readiness",  trad: "Unknown until after hiring",                   ai: "Not directly measured",                      wt: "Real-time match and collaboration potential" },
  ];

  const meta = [
    { label: "Typical timeline",  trad: "2–6 months",     ai: "2–6 weeks",        wt: "Minutes to real time" },
    { label: "Candidate burden",  trad: "High",           ai: "Medium–High",      wt: "Low" },
    { label: "Evidence quality",  trad: "Low",            ai: "Medium–Low",       wt: "High" },
  ];

  const scoreRows = [
    { label: "Self-claimed experience",       trad: 5, ai: 5, wt: 1 },
    { label: "Real work evidence",            trad: 1, ai: 2, wt: 5 },
    { label: "Real-context problem solving",  trad: 1, ai: 2, wt: 5 },
    { label: "Team compatibility",            trad: 2, ai: 2, wt: 5 },
    { label: "Privacy control",               trad: 3, ai: 2, wt: 4 },
    { label: "Real-time matching",            trad: 1, ai: 1, wt: 5 },
    { label: "Collaboration readiness",       trad: 1, ai: 1, wt: 5 },
    { label: "Explainable match reasoning",   trad: 3, ai: 2, wt: 4 },
  ];

  const totals = scoreRows.reduce(
    (acc, r) => ({ trad: acc.trad + r.trad, ai: acc.ai + r.ai, wt: acc.wt + r.wt }),
    { trad: 0, ai: 0, wt: 0 },
  );

  return (
    <section className="section" id="compare">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">How WorkTwins compares</span>
          <h2 className="h2">Traditional Hiring · AI Resume Tools · <em>WorkTwins.</em></h2>
          <p className="lede">
            Three ways to evaluate a person for a role — and what each one actually measures. From claims, to AI-filtered claims, to <strong style={{color:'var(--fg-2)'}}>real work signals</strong>.
          </p>
        </div>

        {/* Feature-by-feature table */}
        <div className="cmp-table reveal" role="table" aria-label="Comparison of hiring approaches">
          <div className="cmp-row cmp-head" role="row">
            <div className="cmp-cell cmp-label" role="columnheader">What we measure</div>
            <div className="cmp-cell cmp-col cmp-col--trad" role="columnheader">
              <span className="cmp-ic"><ColIcon.Trad/></span>
              <span>Traditional Hiring</span>
            </div>
            <div className="cmp-cell cmp-col cmp-col--ai" role="columnheader">
              <span className="cmp-ic"><ColIcon.AI/></span>
              <span>AI Resume Tools</span>
            </div>
            <div className="cmp-cell cmp-col cmp-col--wt" role="columnheader">
              <span className="cmp-ic"><ColIcon.WT/></span>
              <span>WorkTwins</span>
            </div>
          </div>

          {rows.map((r) => (
            <div className="cmp-row" role="row" key={r.label}>
              <div className="cmp-cell cmp-label" role="rowheader">{r.label}</div>
              <div className="cmp-cell" role="cell">{r.trad}</div>
              <div className="cmp-cell" role="cell">{r.ai}</div>
              <div className="cmp-cell cmp-cell--wt" role="cell">{r.wt}</div>
            </div>
          ))}

          {meta.map((r) => (
            <div className="cmp-row cmp-row--meta" role="row" key={r.label}>
              <div className="cmp-cell cmp-label" role="rowheader">{r.label}</div>
              <div className="cmp-cell" role="cell">{r.trad}</div>
              <div className="cmp-cell" role="cell">{r.ai}</div>
              <div className="cmp-cell cmp-cell--wt" role="cell">{r.wt}</div>
            </div>
          ))}
        </div>

        <div className="cmp-badge-row reveal">
          <span className="cmp-badge"><span className="cmp-badge-dot trad"></span>Claim-based</span>
          <span className="cmp-badge"><span className="cmp-badge-dot ai"></span>AI-filtered claims</span>
          <span className="cmp-badge cmp-badge--wt"><span className="cmp-badge-dot wt"></span>Real work signals</span>
        </div>

        {/* Score grid */}
        <div className="score-block reveal">
          <div className="score-head">
            <span className="eyebrow">What each method actually measures</span>
            <h3 className="h3">Signals, evidence quality, and collaboration readiness.</h3>
            <p className="muted small">
              Illustrative product comparison — not benchmark study data. <span className="mono">5 = strong · 1 = weak</span>
            </p>
          </div>

          <div className="score-grid">
            <div className="score-row score-head-row">
              <span className="score-lbl">Criterion</span>
              <span className="score-col score-col--trad">Traditional</span>
              <span className="score-col score-col--ai">AI Resume</span>
              <span className="score-col score-col--wt">WorkTwins</span>
            </div>

            {scoreRows.map((r) => (
              <div className="score-row" key={r.label}>
                <span className="score-lbl">{r.label}</span>
                <span className="score-col"><ScoreDots tone="trad" value={r.trad}/></span>
                <span className="score-col"><ScoreDots tone="ai"   value={r.ai}/></span>
                <span className="score-col"><ScoreDots tone="wt"   value={r.wt}/></span>
              </div>
            ))}

            <div className="score-row score-totals">
              <span className="score-lbl">Total</span>
              <span className="score-col"><b>{totals.trad}</b> / 40</span>
              <span className="score-col"><b>{totals.ai}</b> / 40</span>
              <span className="score-col score-col--wt"><b>{totals.wt}</b> / 40</span>
            </div>
          </div>

          <p className="cmp-kicker">
            WorkTwins shifts evaluation from <em>what people say</em> to <em>how they actually work.</em>
          </p>
        </div>
      </div>
    </section>
  );
}

function ScoreDots({ value, tone }) {
  const dots = [];
  for (let i = 0; i < 5; i++) {
    dots.push(<span key={i} className={"score-dot " + (i < value ? "on " + tone : "off")} aria-hidden="true"></span>);
  }
  return (
    <span className="score-dots" role="img" aria-label={`${value} out of 5`}>
      {dots}
    </span>
  );
}

/* =========================
   EVIDENCE FLOW (Traditional process vs WorkTwins process)
   ========================= */
function EvidenceFlow() {
  const trad = [
    "Resume / profile claims",
    "Recruiter filter",
    "Repeated interviews",
    "Exams and take-home tests",
    "More interviews",
    "Hire decision",
    "Fit still uncertain",
  ];
  const wt = [
    "Local work signals",
    "Private WorkFootPrint",
    "User review and granularity control",
    "Similarity comparison",
    "Ranked WorkTwin matches",
    "Recruiter / company best-fit discovery",
    "Real-time collaboration",
  ];

  return (
    <section className="section" id="flow">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">The shift</span>
          <h2 className="h2">From months of guesswork to <em>real-time collaboration.</em></h2>
          <p className="lede">
            The traditional hiring flow waits weeks to deliver a guess. The WorkTwins flow surfaces compatible people from real work evidence — in minutes.
          </p>
        </div>

        <div className="flow-grid reveal">
          <article className="flow-card flow-card--trad">
            <div className="flow-card-head">
              <span className="flow-eyebrow">Traditional process</span>
              <span className="flow-pill flow-pill--bad">2–6 months</span>
            </div>
            <ol className="flow-steps">
              {trad.map((s, i) => (
                <li className="flow-step" key={s}>
                  <span className="flow-num">{i + 1}</span>
                  <span className="flow-text">{s}</span>
                  <span className="flow-warn" aria-hidden="true">!</span>
                </li>
              ))}
            </ol>
            <div className="flow-foot">
              <span className="flow-tag bad">delay</span>
              <span className="flow-tag bad">guesswork</span>
              <span className="flow-tag bad">repeated proof</span>
            </div>
          </article>

          <div className="flow-vs" aria-hidden="true">
            <span>vs</span>
          </div>

          <article className="flow-card flow-card--wt">
            <div className="flow-card-head">
              <span className="flow-eyebrow">WorkTwins process</span>
              <span className="flow-pill flow-pill--good">Minutes</span>
            </div>
            <ol className="flow-steps">
              {wt.map((s, i) => (
                <li className="flow-step" key={s}>
                  <span className="flow-num flow-num--good">{i + 1}</span>
                  <span className="flow-text">{s}</span>
                  <span className="flow-check" aria-hidden="true">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" width="14" height="14">
                      <path d="M5 12l5 5 9-11"/>
                    </svg>
                  </span>
                </li>
              ))}
            </ol>
            <div className="flow-foot">
              <span className="flow-tag good">evidence</span>
              <span className="flow-tag good">speed</span>
              <span className="flow-tag good">computational affinity</span>
            </div>
          </article>
        </div>

        <div className="flow-audience reveal">
          <article className="fa-card">
            <span className="fa-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="20" height="20">
                <path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/>
              </svg>
            </span>
            <h4>For developers</h4>
            <p>Get discovered for real work, not interview theater. Your WorkFootPrint speaks before another panel does.</p>
          </article>
          <article className="fa-card">
            <span className="fa-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="20" height="20">
                <circle cx="12" cy="8" r="3.5"/>
                <path d="M4.5 20a7.5 7.5 0 0 1 15 0"/>
              </svg>
            </span>
            <h4>For recruiters</h4>
            <p>Find proven best-fit candidates faster. Rank by WorkFootPrint similarity and computational affinity — not keywords.</p>
          </article>
          <article className="fa-card">
            <span className="fa-ic" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="20" height="20">
                <circle cx="8" cy="9" r="3"/>
                <circle cx="16" cy="9" r="3"/>
                <path d="M2 20c0-3.3 2.7-6 6-6s6 2.7 6 6M10 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/>
              </svg>
            </span>
            <h4>For teams</h4>
            <p>Collaborate in real time with people closest to your current work context — not yesterday's resume.</p>
          </article>
        </div>

        <p className="flow-kicker reveal">
          The right developer, collaborator, or team member can be surfaced <em>within minutes</em> based on <em>actual work similarity.</em>
        </p>
      </div>
    </section>
  );
}

window.HiringCompared = HiringCompared;
window.EvidenceFlow = EvidenceFlow;