// WorkTwins — Additional sections: "After install" timeline + "For workers/companies" split

/* =========================
   AFTER INSTALL — 6-step timeline
   ========================= */
function AfterInstall() {
  const steps = [
    {
      title: "WorkTwins starts locally",
      desc: "The Subjective Client runs in the background — fully local. Nothing leaves your machine yet.",
      tag: "local",
    },
    {
      title: "You choose what to include",
      desc: "Pick which apps, projects, and contexts WorkTwins observes. Exclude anything sensitive.",
      tag: "your call",
    },
    {
      title: "Subjective Client detects patterns",
      desc: "KnowledgeHooks identify real work signals — tools, workflows, debug rhythm, collaboration cues.",
      tag: "0-input",
    },
    {
      title: "Your WorkFootPrint forms",
      desc: "A privacy-first signature of how you actually work — pattern, not content. Always yours.",
      tag: "yours",
    },
    {
      title: "First compatibility matches",
      desc: "Within hours, see ranked WorkTwins with plain-English reasons behind each match.",
      tag: "explainable",
    },
    {
      title: "You decide what to share",
      desc: "Approve, narrow, or revoke any matching signal at any time. Sharing is always opt-in.",
      tag: "consent",
    },
  ];
  return (
    <section className="section" id="after-install">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">After installation</span>
          <h2 className="h2">What happens once <em>WorkTwins is on.</em></h2>
          <p className="lede">
            Six clear steps from install to your first match — all under your control, all explained in plain language.
          </p>
        </div>

        <ol className="timeline reveal">
          {steps.map((s, i) => (
            <li className="tline" key={s.title}>
              <div className="tline-rail" aria-hidden="true">
                <div className="tline-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="tline-stem"></div>
              </div>
              <div className="tline-card">
                <div className="tline-head">
                  <h3>{s.title}</h3>
                  <span className="tline-tag">{s.tag}</span>
                </div>
                <p>{s.desc}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

/* =========================
   EARLY SPLIT — For workers / For companies
   ========================= */
function EarlySplit() {
  return (
    <section className="section section-tight" id="early-split">
      <div className="wrap">
        <div className="split-grid reveal">
          <article className="split-card workers">
            <span className="split-eyebrow">For workers</span>
            <h3>Build a living proof of your <em>real experience</em> — and find people who work like you.</h3>
            <p>Skip the resume rewriting. Your WorkFootPrint grows while you work, and surfaces collaborators with compatible rhythms and overlapping problems.</p>
            <div className="split-tags">
              <span>0-input profile</span>
              <span>real evidence</span>
              <span>peer discovery</span>
            </div>
            <a href={SITE_LINKS.worktwins} className="split-link">
              Explore for workers
              <span className="arr"><Icon.ArrowRight style={{width: 14, height: 14}} /></span>
            </a>
          </article>

          <article className="split-card companies">
            <span className="split-eyebrow">For companies</span>
            <h3>Discover compatible people and teams from <em>evidence</em>, not interviews.</h3>
            <p>Rank candidates by empirical work compatibility. Reduce interview load. Find people who genuinely fit the way your team already works.</p>
            <div className="split-tags">
              <span>evidence-based</span>
              <span>team-fit</span>
              <span>privacy-first</span>
            </div>
            <a href={SITE_LINKS.worktwins} className="split-link">
              Explore for companies
              <span className="arr"><Icon.ArrowRight style={{width: 14, height: 14}} /></span>
            </a>
          </article>
        </div>
      </div>
    </section>
  );
}

window.AfterInstall = AfterInstall;
window.EarlySplit = EarlySplit;