/* global React */
function CCButton({ children, variant = 'outline', size = 'md', as = 'button', ...rest }) {
  const cls = ['cc-btn', `cc-btn-${variant}`, `cc-btn-${size}`].join(' ');
  if (as === 'a') return <a className={cls} {...rest}>{children}</a>;
  return <button className={cls} {...rest}>{children}</button>;
}

function Hero() {
  return (
    <section className="cc-hero">
      <h1 className="cc-hero-headline">Real people. Real fits</h1>
      <p className="cc-hero-sub">
        Social. Searchable. Shoppable.
      </p>
      <div className="cc-hero-cta">
        <div className="cc-hero-cta-group">
          <CCButton variant="solid" as="a" href="https://apps.apple.com/us/app/the-cloud-closet/id6748420685" target="_blank" rel="noopener noreferrer">Download the App</CCButton>
          <CCButton variant="outline" as="a" href="#cc-app">See how it works</CCButton>
        </div>
      </div>
    </section>
  );
}

window.CCButton = CCButton;
window.Hero = Hero;