import { ArrowRightIcon, PhoneIcon } from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import styles from "./HeroSection.module.css";

export default function HeroSection() {
  return (
    <section className={styles.hero} aria-labelledby="hero-heading">
      <img
        src="/logo/logo-mininmal-basiclean-grey.svg"
        alt=""
        aria-hidden="true"
        className={styles.heroDecoration}
      />
      <div className={styles.inner}>
        <div className={styles.content}>
          <h1 id="hero-heading" className={styles.heading}>
            Gebäudereinigung für ein makelloses Arbeitsumfeld
          </h1>
          <p className={`lead ${styles.lead}`}>
            Mit festen Abläufen und hohen Qualitätsstandards – für ein sauberes,
            professionelles Arbeitsumfeld.
          </p>
          <div className={styles.actions}>
            <Link href="/kontakt" className="btn btn--filled">
              <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={18} weight="bold" />
              </span>
              Jetzt Angebot anfragen
            </Link>
            <Link href="/Leistungen" className="btn btn--outline">
              {/* <span className="btn-icon animate" aria-hidden="true">
                <ArrowRightIcon size={18} weight="bold" />
              </span> */}
              Leistungen ansehen
            </Link>
          </div>
          <div className={styles.actions}>
            <a href="tel:+491726210606" className="btn btn--tertiary">
              <span className="btn-icon" aria-hidden="true">
                <PhoneIcon size={18} weight="bold" />
              </span>
              0172 6210606
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}