// WorkTwins — Hero Section

function Hero() {
  return (
    <section className="hero section" id="top">
      <div className="hero-stage">
        <img
          className="hero-bg"
          src="https://cdn.worktwins.com/images/worktwins_main.png"
          alt="Two matched professional WorkTwins collaborating in a bright pastel workspace — both faces fully visible, with subtle work-pattern signals around them."
          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-sub">
              WorkTwins builds a privacy-first <strong>WorkFootPrint</strong> from your real work activity, then matches you with people who think, build, debug, and collaborate like you.
            </p>

            <div className="hero-ctas">
              <a href={SITE_LINKS.download} className="btn btn--gold">
                <Icon.Download style={{width: 16, height: 16}} />
                Download Subjective Client
              </a>
              <a href={SITE_LINKS.worktwins} 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>
            </div>
          </div>
        </div>

        <HeroMatchCard />
      </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-score-row">
        <div className="hm-score-num"><em>94</em><span>%</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</div>
          </div>
        </div>
      </div>

      <div className="hm-reason">
        <div className="hm-reason-title">Matched because</div>
        <p className="hm-reason-text">
          Similar debugging patterns, Git rhythm, API workflow overlap, and design-system work.
        </p>
        <div className="hm-tags">
          <span>debugging</span>
          <span>Git rhythm</span>
          <span>API workflow</span>
          <span>design systems</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="12" height="12">
            <rect x="4" y="11" width="16" height="10" rx="2"/>
            <path d="M8 11V7a4 4 0 0 1 8 0v4"/>
          </svg>
          <span>Privacy: <strong>Local-first</strong></span>
        </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>
          <div className="privacy-strip-body">
            <p className="privacy-strip-headline">
              <strong>WorkTwins is not employee surveillance, screen recording, or productivity tracking.</strong>
            </p>
            <p>
              It's a <strong>user-owned WorkFootPrint</strong> built locally to help you benefit from your own work experience. WorkTwins does not upload your files, screenshots, source code, passwords, or private documents — only lightweight matching signals you choose to share.
            </p>
          </div>
          <a href={SITE_LINKS.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;