import { ButtonLink } from './Button'
import { Icon } from './Icon'

export function Hero() {
  return (
    <section className="hero-section">
      <div className="hero-copy">
        <span className="eyebrow accent">Component library</span>
        <h1>Build with clarity.</h1>
        <p>A considered set of accessible, composable components for building calm, capable interfaces.</p>
        <div className="hero-actions">
          <ButtonLink variant="primary" href="/components/buttons">
            Explore components <Icon name="arrow" size={16} />
          </ButtonLink>
          <ButtonLink variant="ghost" href="/docs/markdown">
            Read the principles
          </ButtonLink>
        </div>
      </div>

      <div className="hero-orbit" aria-hidden="true">
        <div className="orbit orbit-one" />
        <div className="orbit orbit-two" />
        <div className="orbit-core">
          <div className="brand-mark large">
            <span />
          </div>
          <span>
            system
            <br />
            <b>ready</b>
          </span>
        </div>
        <span className="orbit-label label-one">TOKENS <b>48</b></span>
        <span className="orbit-label label-two">A11Y <b>AAA</b></span>
        <span className="orbit-label label-three">RUNTIME <b>FAST</b></span>
      </div>
    </section>
  )
}