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}>
            Mehr Sauberkeit, weniger Aufwand für ein sauberes Arbeitsumfeld
          </h1>
          <p className={`lead ${styles.lead}`}>
            Professionelle Gebäudereinigung für Büros, Praxen und Gewerbeflächen
            nach festen Abläufen und höchsten Qualitätsstandards.
          </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>
            <a href="tel:+495112345678" className="btn btn--outline">
              <span className="btn-icon" aria-hidden="true">
                <PhoneIcon size={18} weight="bold" />
              </span>
              0172 621 0606
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}