// Act 4 — THE HANDOFF. Contact as the conversion point. Channels are direct I/O lines,
// not icon buttons. The network spine terminates here — the detached node arrives.

function Handoff() {
  const { ContactLine, Button } = window.WollenbergUIKit;
  return (
    <section className="wb-act wb-act--end" id="contact" data-section="contact" data-screen-label="Handoff">
      <div className="wb-shell">
        <div className="wb-reveal">
          <div className="wb-eyebrow"><span className="wb-eyebrow__num" data-node="handoff">04</span><span>Handoff</span></div>
          <h2 className="wb-display wb-display--l wb-handoff__head" style={{ marginTop: 22 }}>
            Open a line.
          </h2>
          <p className="wb-body" style={{ marginTop: 24, fontSize: 18, maxWidth: '40ch' }}>
            No forms. Pick a channel and tell me what you need. I answer fast and I ask one
            scoping question before I build anything.
          </p>
          <p className="wb-handoff__invite">{WB.meta.askAnyway}</p>
        </div>

        {/* the spine lands here */}
        <div className="wb-reveal wb-handoff__io" data-node="contact">
          {WB.contact.map((c) => (
            <ContactLine key={c.label} label={c.label} value={c.value} href={c.href} external={c.external} />
          ))}
        </div>

        {/* the node arrives at the junction and splits into two I/O lines: write or hire */}
        <div className="wb-reveal wb-handoff__cta">
          <div className="wb-handoff__buttons">
            <span className="wb-handoff__split" data-node="split" aria-hidden="true" />
            <span className="wb-handoff__btnwrap">
              <span className="wb-handoff__plug" data-node="mail" aria-hidden="true" />
              <Button variant="primary" href={'mailto:' + WB.meta.email}>Email me ↗</Button>
            </span>
            <span className="wb-handoff__btnwrap">
              <span className="wb-handoff__plug" data-node="hire" aria-hidden="true" />
              <Button variant="primary" href={WB.meta.upwork} external={true}>Hire on Upwork ↗</Button>
            </span>
          </div>
        </div>

        <div className="wb-footer">
          <span className="wb-footer__sig">wollenberg.dev / one node always leaves the box</span>
          <span className="wb-footer__sig">© {new Date().getFullYear()} Max Wollenberg</span>
        </div>
      </div>
    </section>
  );
}

window.Handoff = Handoff;