import { Link } from "react-router";
import IntroOverlay from "./IntroOverlay";

function HeroSection({
  heroImageWrapRef,
  heroImageRef,
  setHeadlinePrimaryRef,
  setHeadlineSecondaryRef,
  setDescriptionRef,
  setActionsRef,
  overlayRef,
  overlayTextRef,
}) {
  return (
    <header className="hero" id="home">
      <div className="hero-media" ref={heroImageWrapRef}>
        <img
          src="/atmos-hero-image.png"
          alt="Atmos perfume bottle in a material-led campaign scene"
          className="hero-media__image"
          ref={heroImageRef}
          loading="eager"
          decoding="async"
          fetchPriority="high"
        />
      </div>

      <div className="hero-content">
        <h1 className="hero-title">
          <span className="hero-title-line">
            <span className="reveal-line" ref={setHeadlinePrimaryRef}>
              {"D\u00DCFTE ALS"}
            </span>
          </span>
          <span className="hero-title-line">
            <span className="reveal-line" ref={setHeadlineSecondaryRef}>
              AUSDRUCK
            </span>
          </span>
        </h1>

        <p className="hero-text" ref={setDescriptionRef}>
          {
            "Konzeptionelle D\u00FCfte zwischen Materialit\u00E4t, Raum und Charakter."
          }
        </p>

        <div className="hero-actions" ref={setActionsRef}>
          <a href="#dufte" className="btn btn-primary">
            {"Aktuelle D\u00FCfte"}
          </a>
          <Link to="/discovery-set" className="btn btn-secondary">
            Discovery Set
          </Link>
        </div>
      </div>

      <IntroOverlay
        overlayRef={overlayRef}
        overlayTextRef={overlayTextRef}
        logoSrc="/atmos-logo-dark.svg"
      />
    </header>
  );
}

export default HeroSection;