// WorkTwins — Matching, Privacy, Developers, Companies

/* =========================
   MATCHING
   ========================= */
function Matching() {
  return (
    <section className="section" id="matching">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Matching</span>
          <h2 className="h2">Not followers. Not connections. <em>Work twins.</em></h2>
          <p className="lede">
            WorkTwins doesn't match people because they know the same keywords. It matches people because their real work signals show meaningful compatibility.
          </p>
        </div>

        <div className="match-grid reveal">
          <MatchCard
            klass=""
            name="Frontend WorkTwin"
            role="design-systems · component reuse"
            score={94}
            tags={["React", "Storybook", "UI debugging", "tokens"]}
            reason={<>Strong overlap on <b>React patterns</b>, UI debugging behavior, component reuse, and design-system contributions.</>}
          />
          <MatchCard
            klass="b"
            name="Backend WorkTwin"
            role="API design · data infra"
            score={89}
            tags={["Postgres", "FastAPI", "Git rebase", "error handling"]}
            reason={<>Compatible on <b>API design</b>, database migrations, error-handling patterns, and a similar Git rhythm.</>}
          />
          <MatchCard
            klass="c"
            name="Learning WorkTwin"
            role="research · complementary"
            score={82}
            tags={["LLM eval", "RAG", "notebook flow", "research"]}
            reason={<>Solving <b>similar current challenges</b> via a similar research path, with complementary problem-solving strengths.</>}
          />
        </div>

        <p className="muted center" style={{marginTop: 28, fontSize: 13}}>
          Every recommendation comes with a <strong style={{color:'var(--fg-2)'}}>plain-English reason</strong>. You always see why before you connect.
        </p>
      </div>
    </section>
  );
}

function MatchCard({ klass, name, role, score, tags, reason }) {
  return (
    <article className={"match " + klass}>
      <div className="match-head">
        <div className="avatar" aria-hidden="true"></div>
        <div>
          <h3>{name}</h3>
          <span className="role">{role}</span>
        </div>
        <div className="ring" style={{ "--p": score }}>
          <span>{score}</span>
        </div>
      </div>

      <div className="match-score">
        <span className="big"><em>{score}</em></span>
        <span className="unit">%</span>
        <span className="lab">Work<br/>compatibility</span>
      </div>

      <div className="match-tags">
        {tags.map(t => <span className="tag" key={t}>{t}</span>)}
      </div>

      <p className="match-reason">{reason}</p>

      <div className="match-foot">
        <button className="small-btn">Connect</button>
        <button className="small-btn ghost">See evidence</button>
      </div>
    </article>
  );
}

/* =========================
   PRIVACY
   ========================= */
function Privacy() {
  return (
    <section className="section privacy-section" id="privacy">
      <div className="privacy-bg" aria-hidden="true"></div>
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">Privacy</span>
          <h2 className="h2">Built for <em>trust</em> from the first signal.</h2>
          <p className="lede">
            WorkTwins is designed around Subjective Technology's user-first principle. Your real work belongs to you. WorkTwins helps you benefit from your own experience — without exposing your private data.
          </p>
        </div>

        <div className="grid-4 reveal">
          <PrivacyCard
            icon={<Icon.Cpu style={{width:18,height:18}} />}
            title="Local monitoring"
            text="KnowledgeHooks run on your device. The Subjective Client never streams raw activity to the cloud."
          />
          <PrivacyCard
            icon={<Icon.Lock style={{width:18,height:18}} />}
            title="No file contents"
            text="We never upload source code, private documents, screenshots, passwords, or sensitive content."
          />
          <PrivacyCard
            icon={<Icon.Check style={{width:18,height:18}} />}
            title="Consent-based sharing"
            text="You decide when — and what part of — your WorkFootPrint can be used for matching."
          />
          <PrivacyCard
            icon={<Icon.Eye style={{width:18,height:18}} />}
            title="Explainable matches"
            text="See exactly why a person was recommended, in plain language, before you connect."
          />
        </div>

        <div className="privacy-diagram reveal" aria-label="Diagram of what stays local versus what is shared">
          <div className="pd-side local">
            <h4>Stays on your device <span className="pill" style={{marginLeft:8, verticalAlign:'middle'}}><span className="dot"></span>local</span></h4>
            <ul>
              <li><span className="check"><Icon.X style={{width:10,height:10}} /></span>Source code &amp; private files</li>
              <li><span className="check"><Icon.X style={{width:10,height:10}} /></span>Screenshots &amp; window contents</li>
              <li><span className="check"><Icon.X style={{width:10,height:10}} /></span>Passwords, tokens, secrets</li>
              <li><span className="check"><Icon.X style={{width:10,height:10}} /></span>Customer or client data</li>
              <li><span className="check"><Icon.X style={{width:10,height:10}} /></span>Keystrokes or clipboard</li>
            </ul>
          </div>

          <div className="pd-arrow" aria-hidden="true">
            <svg viewBox="0 0 70 32">
              <path d="M2 16 L60 16" stroke="currentColor" strokeWidth="1.5" strokeDasharray="4 4" fill="none" />
              <path d="M54 8 L68 16 L54 24" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>

          <div className="pd-side shared">
            <h4>Shared only with consent <span className="pill gold" style={{marginLeft:8, verticalAlign:'middle'}}><span className="dot"></span>opt-in</span></h4>
            <ul>
              <li><span className="check"><Icon.Check style={{width:11,height:11}} /></span>KnowledgeHook references</li>
              <li><span className="check"><Icon.Check style={{width:11,height:11}} /></span>Tool &amp; pattern frequencies</li>
              <li><span className="check"><Icon.Check style={{width:11,height:11}} /></span>Anonymized timestamps</li>
              <li><span className="check"><Icon.Check style={{width:11,height:11}} /></span>Compatibility signals</li>
              <li><span className="check"><Icon.Check style={{width:11,height:11}} /></span>Coarse skill clusters</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function PrivacyCard({ icon, title, text }) {
  return (
    <article className="privacy-card">
      <span className="ic-wrap">{icon}</span>
      <h3>{title}</h3>
      <p>{text}</p>
    </article>
  );
}

/* =========================
   DEVELOPERS + COMPANIES
   ========================= */
function Audiences() {
  return (
    <section className="section" id="audiences">
      <div className="wrap">
        <div className="audience-grid reveal">
          <article className="audience" id="developers">
            <span className="eyebrow">For Developers</span>
            <h3>Be discovered by your <em style={{fontFamily:'var(--font-display)', fontStyle:'italic', color:'var(--gold-deep)'}}>work</em>, not by interview theater.</h3>
            <p>WorkTwins helps developers get discovered through real evidence: tools, workflows, problem-solving patterns, debugging behavior, and collaboration style.</p>
            <ul>
              <li><span className="b"></span>Replace CV claims with real work patterns</li>
              <li><span className="b"></span>Find people facing similar technical problems</li>
              <li><span className="b"></span>Get collaboration opportunities without applying manually</li>
              <li><span className="b"></span>Build a living proof of experience while you work</li>
              <li><span className="b"></span>Start with developers, expand to every kind of knowledge work</li>
            </ul>
            <div className="cta-row">
              <a href="#download" className="btn btn--primary">
                Start recording your WorkFootPrint
                <span className="arr"><Icon.ArrowRight style={{width: 15, height: 15}} /></span>
              </a>
            </div>
          </article>

          <article className="audience companies" id="companies">
            <span className="eyebrow">For Companies</span>
            <h3>Build teams from <em style={{fontFamily:'var(--font-display)', fontStyle:'italic', color:'var(--gold-deep)'}}>compatibility</em>, not guesswork.</h3>
            <p>For companies and staff-augmentation teams, WorkTwins helps identify developers who can actually work together. It reduces hiring friction by ranking candidates from empirical work compatibility.</p>
            <ul>
              <li><span className="b"></span>Faster technical matching</li>
              <li><span className="b"></span>Less dependence on interviews</li>
              <li><span className="b"></span>Better team-fit signals</li>
              <li><span className="b"></span>Evidence-based collaboration discovery</li>
              <li><span className="b"></span>Privacy-first candidate experience</li>
            </ul>
            <div className="cta-row">
              <a href="#waitlist" className="btn btn--gold">
                Request early company access
                <span className="arr"><Icon.ArrowRight style={{width: 15, height: 15}} /></span>
              </a>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

window.Matching = Matching;
window.Privacy = Privacy;
window.Audiences = Audiences;