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

export default function HeroSection() {
  return (
    <section className={styles.hero} aria-labelledby="hero-heading">
      <div className={styles.inner}>
        <Image
          src="/logo/logo-mininmal-basiclean-grey.svg"
          alt=""
          aria-hidden="true"
          className={styles.heroDecoration}
          width={620}
          height={620}
          unoptimized
        />
        <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">
              Leistungen ansehen
            </Link>
          </div>
          <div className={styles.actions}>
            <a
              href={`tel:${companyData.contact.phone.value}`}
              className="btn btn--tertiary"
            >
              <span className="btn-icon" aria-hidden="true">
                <PhoneIcon size={18} weight="bold" />
              </span>
              {companyData.contact.phone.display}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}