// WorkTwins — Hero Section

function Hero() {
  return (
    <section className="hero section" id="top">
      <div className="hero-stage">
        <img
          className="hero-bg"
          src="assets/hero-twins.png"
          alt="Two matched professionals collaborating in a bright pastel workspace with WorkFootPrint signal overlays showing a 94% compatibility match."
          loading="eager"
          decoding="async"
        />
        <div className="hero-overlay" aria-hidden="true"></div>
        <div className="hero-overlay-bottom" aria-hidden="true"></div>

        <div className="wrap hero-content">
          <div className="hero-copy-block">
            <span className="hero-eyebrow">
              <span className="badge">New</span>
              <span>Subjective AI · WorkTwins Beta · v0.9</span>
            </span>

            <h1 className="display hero-h1">
              Find your best coworker match — from <em>how you actually work.</em>
            </h1>

            <p className="hero-lede">
              WorkTwins is the professional network powered by <strong>real work evidence</strong> — not resumes, not interviews. The Subjective Client builds a privacy-first <strong>WorkFootPrint</strong> from your real work, then matches you with people who think, build, debug, and collaborate like you.
            </p>

            <div className="hero-ctas">
              <a href="#download" className="btn btn--gold">
                <Icon.Download style={{width: 16, height: 16}} />
                Download Subjective Client
              </a>
              <a href="#waitlist" className="btn btn--ghost-on-image">
                Join WorkTwins Beta
                <span className="arr"><Icon.ArrowRight style={{width: 15, height: 15}} /></span>
              </a>
            </div>

            <div className="trust-pills" role="list">
              <span className="pill" role="listitem"><span className="dot"></span>Privacy-first</span>
              <span className="pill sky" role="listitem"><span className="dot"></span>No resumes</span>
              <span className="pill lav" role="listitem"><span className="dot"></span>No interviews</span>
              <span className="pill blush" role="listitem"><span className="dot"></span>Evidence-based</span>
              <span className="pill turq" role="listitem"><span className="dot"></span>Continuous as you work</span>
            </div>
          </div>

          <HeroMatchCard />
        </div>
      </div>

      <PrivacyTrustStrip />

      <div className="wrap">
        <ProofStrip />
      </div>
    </section>
  );
}

function HeroMatchCard() {
  return (
    <aside className="hero-match" aria-label="Example WorkTwin match card">
      <div className="hm-head">
        <span className="hm-eyebrow">
          <span className="hm-eye-dot"></span>
          WorkTwin Match
        </span>
        <span className="hm-live">
          <span className="pulse"></span>
          live
        </span>
      </div>

      <div className="hm-pair">
        <div className="hm-av" aria-hidden="true">
          <span style={{background: 'linear-gradient(135deg, #CFE2F3, #DCD3F0)'}}></span>
          <span style={{background: 'linear-gradient(135deg, #F4D4D8, #D9B679)'}}></span>
        </div>
        <div>
          <div className="hm-pair-name">You ↔ <b>Maya R.</b></div>
          <div className="hm-pair-role">Frontend · design systems · Lisbon</div>
        </div>
      </div>

      <div className="hm-score">
        <div className="hm-score-num"><em>94</em><span>%</span></div>
        <div className="hm-score-label">WorkTwin<br/>Match</div>
      </div>

      <div className="hm-reason">
        <div className="hm-reason-title">Matched because</div>
        <div className="hm-tags">
          <span>React debugging patterns</span>
          <span>API workflows</span>
          <span>Git rhythm</span>
          <span>design-system work</span>
        </div>
      </div>

      <div className="hm-foot">
        <div className="hm-lock">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" width="11" height="11">
            <rect x="4" y="11" width="16" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
          </svg>
          Privacy: Local-first WorkFootPrint
        </div>
        <div className="hm-actions">
          <button className="hm-btn">Connect</button>
          <button className="hm-btn ghost">Why?</button>
        </div>
      </div>
    </aside>
  );
}

function PrivacyTrustStrip() {
  return (
    <div className="privacy-strip-wrap">
      <div className="wrap">
        <div className="privacy-strip">
          <div className="privacy-strip-ic">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" width="22" height="22">
              <path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z"/>
              <path d="M9 12l2 2 4-4"/>
            </svg>
          </div>
          <p>
            <strong>Private by design.</strong> WorkTwins does not upload your files, screenshots, source code, passwords, or private documents.
            Your Subjective Client builds a local WorkFootPrint and only shares <strong>lightweight matching signals</strong> with your consent.
          </p>
          <a href="#privacy" className="privacy-strip-link">
            How privacy works
            <span className="arr"><Icon.ArrowRight style={{width: 13, height: 13}} /></span>
          </a>
        </div>
      </div>
    </div>
  );
}

function ProofStrip() {
  return (
    <div className="proof-strip" aria-label="Trusted by makers from">
      <span className="label">Trusted early by makers from</span>
      <div className="proof-logos">
        <span><i></i>Notion-style teams</span>
        <span><i></i>Open-source maintainers</span>
        <span><i></i>YC alumni</span>
        <span><i></i>Independent studios</span>
        <span><i></i>Distributed orgs</span>
      </div>
    </div>
  );
}

window.Hero = Hero;