// WorkTwins — Happy Human, Final CTA, FAQ, Footer

/* =========================
   HAPPY HUMAN / TESTIMONIALS
   ========================= */
function HappyHuman() {
  return (
    <section className="section section-tight" id="happy">
      <div className="wrap">
        <div className="happy reveal">
          <div className="header">
            <div>
              <span className="eyebrow" style={{marginBottom: 14, display: 'inline-flex'}}>The feeling</span>
              <h2 className="h2">Work should feel <em>less lonely.</em></h2>
            </div>
            <p>
              Somewhere, someone is solving the same problem, learning the same tool, or building in the same rhythm.
              WorkTwins helps you find them.
            </p>
          </div>

          <div className="quotes">
            <Quote
              text="I found someone debugging the same issue in minutes."
              who="Maya R."
              role="Indie developer · Lisbon"
            />
            <Quote
              text="My profile finally reflects what I actually do."
              who="Daniel A."
              role="Staff engineer · Berlin"
            />
            <Quote
              text="It feels like professional networking became alive."
              who="Priya S."
              role="Design technologist · Bangalore"
            />
          </div>
        </div>
      </div>
    </section>
  );
}

function Quote({ text, who, role }) {
  return (
    <figure className="quote">
      <span className="open" aria-hidden="true">“</span>
      <blockquote><p>{text}</p></blockquote>
      <figcaption className="who">
        <span className="av" aria-hidden="true"></span>
        <div>
          <b>{who}</b>
          <span>{role}</span>
        </div>
      </figcaption>
    </figure>
  );
}

/* =========================
   FINAL CTA
   ========================= */
function FinalCTA() {
  return (
    <section className="final-cta" id="download">
      <div className="wrap">
        <div className="reveal">
          <span className="eyebrow" style={{marginBottom: 18}}>Ready</span>
          <h2 className="h2">Just <em>sit and work.</em><br/>Your best matches will find you.</h2>
          <p className="lede" style={{margin: '0 auto 32px'}}>
            Download the Subjective Client, enable WorkTwins, and let your real work experience become your living professional network.
          </p>

          <div className="final-cta-buttons">
            <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">
              Join WorkTwins Beta
              <span className="arr"><Icon.ArrowRight style={{width: 15, height: 15}} /></span>
            </a>
          </div>

          <div className="platforms" role="list" aria-label="Available platforms">
            <a href="#" className="platform windows" role="listitem">
              <span className="platform-ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22">
                  <path d="M3 5.5L10.5 4.4v7.1H3V5.5zM11.5 4.25L21 3v8.4H11.5V4.25zM3 12.5h7.5v7.1L3 18.5v-6zM11.5 12.6H21V21l-9.5-1.3v-7.1z"/>
                </svg>
              </span>
              <div className="platform-text">
                <b>Windows</b>
                <small>10 / 11 · 42 MB</small>
              </div>
            </a>
            <a href="#" className="platform mac" role="listitem">
              <span className="platform-ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22">
                  <path d="M16.5 1.9c0 1.2-.5 2.3-1.2 3.1-.8.9-2.1 1.6-3.2 1.5-.2-1.1.4-2.3 1.1-3 .8-.9 2.1-1.5 3.3-1.6zM20.4 17.2c-.6 1.4-.9 2-1.7 3.2-1.1 1.7-2.7 3.8-4.6 3.8-1.7 0-2.2-1.1-4.6-1.1-2.4 0-2.9 1.1-4.6 1.1-1.9 0-3.4-1.9-4.5-3.6-3-4.8-3.3-10.4-1.5-13.4 1.3-2.1 3.3-3.4 5.2-3.4 1.9 0 3.1 1.1 4.7 1.1 1.5 0 2.4-1.1 4.7-1.1 1.7 0 3.5.9 4.7 2.6-4.2 2.3-3.5 8.3.2 10.8z"/>
                </svg>
              </span>
              <div className="platform-text">
                <b>macOS</b>
                <small>13 + · Intel &amp; Apple Silicon</small>
              </div>
            </a>
            <a href="#" className="platform linux" role="listitem">
              <span className="platform-ic" aria-hidden="true">
                <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22">
                  <path d="M12 2c-2 0-3.5 1.5-3.5 4 0 1.3.5 2.1 1 2.8.4.5.8 1 .8 1.7 0 1.1-1.3 1.8-2.4 2.6C6.6 14.1 5 15.2 5 17.5c0 .5.1.9.3 1.3l-1 1.5c-.3.5-.2 1.1.2 1.4.4.3 1 .2 1.3-.2l.8-1.2c.7.3 1.6.5 2.7.5h3.4c1.1 0 2-.2 2.7-.5l.8 1.2c.3.4.9.5 1.3.2.4-.3.5-.9.2-1.4l-1-1.5c.2-.4.3-.8.3-1.3 0-2.3-1.6-3.4-2.9-4.4-1.1-.8-2.4-1.5-2.4-2.6 0-.7.4-1.2.8-1.7.5-.7 1-1.5 1-2.8 0-2.5-1.5-4-3.5-4zm-1 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 0c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm-1 3c.6 0 1.2.4 1.5 1H10.5c.3-.6.9-1 1.5-1z"/>
                </svg>
              </span>
              <div className="platform-text">
                <b>Linux</b>
                <small>.deb · .rpm · AppImage</small>
              </div>
            </a>
          </div>

          <div className="final-cta-decoration">
            <span className="pill"><span className="dot"></span>Open beta · free to use</span>
            <span className="pill turq"><span className="dot"></span>Local-only by default</span>
            <span className="pill gold"><span className="dot"></span>No card required</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================
   FAQ
   ========================= */
const FAQ_ITEMS = [
  {
    q: "What is WorkTwins?",
    a: "WorkTwins is a Subjective AI work-matching application. It finds people whose real work patterns are compatible with yours — based on how you actually work, not what you write about yourself."
  },
  {
    q: "What is a WorkFootPrint?",
    a: "A WorkFootPrint is a privacy-first signature of your real work: the tools you use, the problems you face, the actions you repeat, and the KnowledgeHooks you trigger. It is built from patterns and frequencies — never from the content of your files."
  },
  {
    q: "Does WorkTwins read my private files?",
    a: "No. The Subjective Client does not transmit source code, documents, screenshots, keystrokes, passwords, or any sensitive content. Only lightweight signals — pattern references, frequencies, and timestamps — are ever considered for matching, and only with your explicit consent."
  },
  {
    q: "Is this only for developers?",
    a: "We start with developers because their work has rich, observable signals. But WorkTwins is built to expand to every kind of knowledge work — designers, researchers, writers, analysts, and beyond."
  },
  {
    q: "How are matches ranked?",
    a: "Matches are ranked by empirical compatibility: tooling overlap, problem-domain similarity, workflow rhythm, and collaboration style. Every recommendation comes with a plain-English explanation of why."
  },
  {
    q: "Can companies use WorkTwins?",
    a: "Yes. For companies and staff-augmentation teams, WorkTwins surfaces candidates whose real work patterns predict good team fit — reducing interview load and guesswork. Candidate privacy controls remain user-first."
  },
  {
    q: "What does 0-Input mean?",
    a: "0-Input Technology is Subjective's approach to building your profile without you typing anything in. You don't fill out a form — you simply work. The Subjective Client observes your real work locally and derives your WorkFootPrint passively."
  },
  {
    q: "Can I delete or pause my WorkFootPrint?",
    a: "Yes. You can pause monitoring at any time, prune specific signals, revoke sharing, or delete your WorkFootPrint entirely. Your work belongs to you."
  },
];

function FAQ() {
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <div className="faq-grid">
          <div className="faq-side reveal">
            <span className="eyebrow">FAQ</span>
            <h2 className="h2">Questions, <em>answered honestly.</em></h2>
            <p>Privacy, scope, and how matching actually works. Nothing hidden — open the answer you need.</p>
            <a className="btn btn--ghost" href="#waitlist">
              Talk to the team
              <span className="arr"><Icon.ArrowRight style={{width: 15, height: 15}} /></span>
            </a>
          </div>

          <div className="faq-list reveal">
            {FAQ_ITEMS.map((item, i) => (
              <details className="faq-item" key={i} open={i === 0}>
                <summary>{item.q}</summary>
                <div className="ans">{item.a}</div>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =========================
   FOOTER
   ========================= */
function Footer() {
  return (
    <footer>
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <a href="#top" className="logo" style={{marginBottom: 14}}>
              <span className="mark" aria-hidden="true"></span>
              <span>WorkTwins</span>
              <small>by Subjective</small>
            </a>
            <p style={{maxWidth: '34ch', fontSize: 13.5, color: 'var(--fg-3)', marginTop: 14}}>
              Real work evidence beats resumes. Your WorkFootPrint belongs to you. Find people who actually work like you.
            </p>
          </div>

          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#how-it-works">How it works</a></li>
              <li><a href="#workfootprint">WorkFootPrint</a></li>
              <li><a href="#matching">Matching</a></li>
              <li><a href="#download">Download Client</a></li>
            </ul>
          </div>

          <div>
            <h5>Audiences</h5>
            <ul>
              <li><a href="#developers">For Developers</a></li>
              <li><a href="#companies">For Companies</a></li>
              <li><a href="#waitlist">Join Waitlist</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>

          <div>
            <h5>Subjective</h5>
            <ul>
              <li><a href="#privacy">Privacy Promise</a></li>
              <li><a href="#privacy">0-Input Technology</a></li>
              <li><a href="#privacy">KnowledgeHooks</a></li>
              <li><a href="#">VirtualGlass</a></li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <span>© 2026 Subjective Technologies. WorkTwins is a Subjective AI product.</span>
          <span>Built for trust. Made for makers.</span>
        </div>
      </div>
    </footer>
  );
}

window.HappyHuman = HappyHuman;
window.FinalCTA = FinalCTA;
window.FAQ = FAQ;
window.Footer = Footer;
