// WorkTwins — Problem, Solution, WorkFootPrint sections

/* =========================
   PROBLEM
   ========================= */
function Problem() {
  return (
    <section className="section" id="problem">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">The Problem</span>
          <h2 className="h2">Resumes are claims. Interviews are performances. Profiles are static. <em>But real work leaves evidence.</em></h2>
          <p className="lede">
            Today's professional tools can't see how you actually work — the way you debug, the tools you reach for, the rhythm you keep, the problems you've already solved. WorkTwins makes that evidence count.
          </p>
        </div>

        <div className="grid-3">
          <ProblemCard
            num="01"
            title="Static profiles"
            text="A profile says “senior developer,” but it can't show how someone debugs, learns, reasons, or actually collaborates."
            strike={["resume", "headline", "skills list"]}
          />
          <ProblemCard
            num="02"
            title="Artificial interviews"
            text="Whiteboards and take-homes measure interview skill, not real working compatibility. The best teammate often interviews worst."
            strike={["whiteboard", "take-home", "panel round"]}
          />
          <ProblemCard
            num="03"
            title="Hidden compatibility"
            text="The best coworker for you may already be solving the same problem — but today's tools can't see the match."
            strike={["followers", "connections", "endorsements"]}
          />
        </div>
      </div>
    </section>
  );
}

function ProblemCard({ num, title, text, strike }) {
  return (
    <article className="card problem-card reveal">
      <span className="num">{num}</span>
      <h3>{title}</h3>
      <p>{text}</p>
      <div className="strike">
        {strike.map((s, i) => (
          <React.Fragment key={s}>
            <s>{s}</s>
            {i < strike.length - 1 && <span>·</span>}
          </React.Fragment>
        ))}
      </div>
    </article>
  );
}

/* =========================
   SOLUTION
   ========================= */
function Solution() {
  return (
    <section className="section" id="how-it-works">
      <div className="wrap">
        <div className="quickstart-head reveal">
          <div>
            <span className="eyebrow" style={{marginBottom: 16, display: 'inline-flex'}}>How it works</span>
            <h2 className="h2">Start in <em>3 minutes.</em> Match for life.</h2>
          </div>
          <span className="time-pill">
            <span className="clock"></span>
            ~3 min setup · 0 forms to fill
          </span>
        </div>

        <div className="qs-grid reveal">
          <QSCard
            num="1"
            title="Download Subjective Client"
            desc="One-click installer for macOS, Windows, and Linux. Signed, ~40 MB. No account required to start."
            meta="signed installer"
          />
          <QSCard
            num="2"
            title="Enable WorkTwins"
            desc="Open the Subjective Client and toggle on WorkTwins. Pick which apps and contexts you want included."
            meta="opt-in, granular"
          />
          <QSCard
            num="3"
            title="Just work, normally"
            desc="KnowledgeHooks detect real work signals locally — while you code, design, research, debug, or collaborate."
            meta="0-input · local-first"
          />
          <QSCard
            num="4"
            title="Receive your first matches"
            desc="Within hours, see your first ranked WorkTwins — each with a clear, plain-English reason behind the match."
            meta="usually < 24 hours"
          />
        </div>
      </div>
    </section>
  );
}

function QSCard({ num, title, desc, meta }) {
  return (
    <article className="qs-card">
      <span className="qs-num">{num}</span>
      <h3>{title}</h3>
      <p>{desc}</p>
      <span className="qs-meta"><span className="dot"></span>{meta}</span>
    </article>
  );
}

/* =========================
   WORKFOOTPRINT
   ========================= */
function WorkFootPrint() {
  const signals = [
    { ic: <Icon.Code style={{width: 12, height: 12}} />, label: "React component architecture detected", meta: "+12 events" },
    { ic: <Icon.Bolt style={{width: 12, height: 12}} />, label: "Python debugging pattern", meta: "ongoing" },
    { ic: <Icon.Git style={{width: 12, height: 12}} />, label: "Git workflow similarity", meta: "rebase-style" },
    { ic: <Icon.Plug style={{width: 12, height: 12}} />, label: "API integration task", meta: "stripe, openai" },
    { ic: <Icon.Database style={{width: 12, height: 12}} />, label: "Database migration behavior", meta: "postgres" },
    { ic: <Icon.Compass style={{width: 12, height: 12}} />, label: "Repeated problem-solving pattern", meta: "weekly" },
  ];

  return (
    <section className="section" id="workfootprint">
      <div className="wrap">
        <div className="wfp-layout">
          <div className="wfp-text reveal">
            <span className="eyebrow">The WorkFootPrint</span>
            <h2 className="h2">Your <em>living</em> work signature.</h2>
            <p className="lede">
              A WorkFootPrint is not a resume. It's a privacy-first pattern of your real work experience: the tools you use, the problems you face, the actions you repeat, the KnowledgeHooks you trigger, and how your work evolves over time.
            </p>

            <ul className="wfp-feat-list">
              <li><span className="ic"><Icon.Sparkle style={{width:14,height:14}} /></span><span><b style={{color:'var(--fg)'}}>Empirical, not declarative.</b> Built from what you do, not what you write about yourself.</span></li>
              <li><span className="ic"><Icon.Footprint style={{width:14,height:14}} /></span><span><b style={{color:'var(--fg)'}}>Pattern, not content.</b> Frequencies, rhythms, KnowledgeHooks — never your private files.</span></li>
              <li><span className="ic"><Icon.Lock style={{width:14,height:14}} /></span><span><b style={{color:'var(--fg)'}}>Local first, you-controlled.</b> Lives on your device. Shared only with explicit consent.</span></li>
              <li><span className="ic"><Icon.Wave style={{width:14,height:14}} /></span><span><b style={{color:'var(--fg)'}}>Evolves with you.</b> A real signature of how you work — today, this week, this season.</span></li>
            </ul>
          </div>

          <Dashboard signals={signals} />
        </div>

        <div className="wfp-includes reveal">
          <div className="wfp-list includes">
            <div className="wfp-list-head">
              <h3>Your WorkFootPrint may include</h3>
              <span className="wfp-tag yes"><Icon.Check style={{width: 11, height: 11}} /> shared with consent</span>
            </div>
            <ul className="wfp-items">
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>Tools you use (IDE, framework, libraries)</li>
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>Task types (debug, refactor, design, research)</li>
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>Repeated workflows &amp; rhythms</li>
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>KnowledgeHooks triggered</li>
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>Collaboration patterns</li>
              <li><span className="ic"><Icon.Check style={{width: 12, height: 12}} /></span>Problem-solving signals &amp; frequencies</li>
            </ul>
          </div>

          <div className="wfp-list excludes">
            <div className="wfp-list-head">
              <h3>Your WorkFootPrint does not include</h3>
              <span className="wfp-tag no"><Icon.X style={{width: 11, height: 11}} /> never uploaded</span>
            </div>
            <ul className="wfp-items">
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Private source code</li>
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Full screenshots or window contents</li>
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Passwords, tokens, credentials</li>
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Personal documents</li>
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Private messages &amp; chats</li>
              <li><span className="ic"><Icon.X style={{width: 12, height: 12}} /></span>Sensitive file contents</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Dashboard({ signals }) {
  // animated bar widths
  const bars = [
    { label: "Tooling overlap",     value: 92 },
    { label: "Problem-domain match", value: 88 },
    { label: "Workflow rhythm",     value: 81 },
    { label: "Collaboration style", value: 76 },
  ];

  return (
    <div className="dash reveal" role="img" aria-label="WorkFootPrint dashboard showing 94% compatibility with detected work signals">
      <div className="dash-head">
        <div className="traffic" aria-hidden="true">
          <span></span><span></span><span></span>
        </div>
        <span className="title">subjective-client · workfootprint.app</span>
        <span className="status"><span className="dot"></span>Live · syncing locally</span>
      </div>

      <div className="dash-body">
        <div className="dash-left">
          <div className="compat-hero">
            <span className="score"><em>94</em><span className="unit">%</span></span>
            <span className="lbl">Compatibility<br/>Score</span>
          </div>

          <div className="bars">
            {bars.map((b, i) => (
              <React.Fragment key={b.label}>
                <div className="bar-row">
                  <span className="lab">{b.label}</span>
                  <span className="val">{b.value}%</span>
                </div>
                <div className="bar">
                  <i style={{ width: `${b.value}%`, animationDelay: `${0.1 + i * 0.12}s` }}></i>
                </div>
              </React.Fragment>
            ))}
          </div>

          <div className="matched-because">
            <span className="ic"><Icon.Sparkle style={{width:14,height:14}}/></span>
            <span>
              <b style={{color:'var(--fg)'}}>Matched because</b> you both build with React, debug similar API integrations, and use a rebase-first Git rhythm.
            </span>
          </div>
        </div>

        <div className="dash-right">
          <div className="signals-title">
            <h4>Recent signals</h4>
            <span className="legend">last 7 days</span>
          </div>
          {signals.map((s, i) => (
            <div className="signal" key={i}>
              <span className="ic">{s.ic}</span>
              <span className="lab"><span className="pulse"></span>{s.label}</span>
              <span className="meta">{s.meta}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="dash-foot">
        <span className="lock"><Icon.Lock style={{width:11,height:11}} /></span>
        <span><b style={{color:'var(--fg-2)'}}>Local first</b> — your WorkFootPrint stays on your device. Shared only with explicit consent.</span>
      </div>
    </div>
  );
}

window.Problem = Problem;
window.Solution = Solution;
window.WorkFootPrint = WorkFootPrint;