const { SuitPip, Button, Doodle } = window.NicolaiSafaiDesignSystem_dfb31c;

function Contact() {
  return (
    <section className="hello" id="hello">
      <div className="hello-inner">
        <span className="ds-label" style={{ color: 'var(--diamond-300)' }}>The last card</span>
        <h2 className="ds-display hello-h2">Say hello.</h2>
        <p className="hello-copy">
          I like meeting thoughtful people, swapping recommendations, and hearing about interesting things.
          You can find me on LinkedIn, GitHub, or email.
        </p>
        <div className="hello-actions">
          <Button tone="paper" size="lg" href="mailto:hello@nicolaisafai.com">hello@nicolaisafai.com</Button>
          <Button variant="ghost" href="#top" style={{ color: 'var(--paper-000)' }}>Back to the top</Button>
        </div>
      </div>
      <div className="hello-stack" aria-hidden="true">
        <div className="hello-objects">
          <Doodle name="controller" size={104} color="var(--joker-500)" rotate={-8}
            style={{ position: 'absolute', left: 2, top: 0 }} />
          <Doodle name="unicorn" size={100} color="var(--paper-000)" rotate={7}
            hornColors={['#F016C7', '#4AB9FF', '#8B43E7', '#2639D8']}
            style={{ position: 'absolute', right: 0, top: -8 }} />
          <Doodle name="headphones" size={100} color="var(--club-300)" rotate={-7}
            style={{ position: 'absolute', left: 28, bottom: 0 }} />
          <Doodle name="cup" size={82} color="var(--diamond-300)" rotate={8}
            style={{ position: 'absolute', right: 24, bottom: 2 }} />
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <span className="ds-label">nicolaisafai.com</span>
      <div className="footpips" aria-hidden="true">
        {['spade', 'heart', 'diamond', 'club'].map((s) => <SuitPip key={s} suit={s} size="1.1em" />)}
      </div>
      <span className="ds-label">Make It Happen</span>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });