import { Logo } from "./Logo";

function scrollToFlavors() {
  const el = document.getElementById("flavors");
  if (el) {
    el.scrollIntoView({ behavior: "smooth", block: "start" });
  }
}

export function Hero() {
  return (
    <section className="hero" id="top">
      <img
        className="hero__image"
        src="/assets/hero-fjord.webp"
        alt="A still fjord at dawn, framed by snow-capped cliffs and rising mist."
      />
      <div className="hero__scrim" aria-hidden="true" />
      <div className="hero__content">
        <Logo variant="light" className="hero__logo" />
        <h1 className="hero__title">Taste the North</h1>
        <p className="hero__subtitle">
          Botanical sparkling water, cold-steeped from glacial meltwater.
          Three flavors, bottled once a season.
        </p>
        <button
          type="button"
          className="button button--primary"
          onClick={scrollToFlavors}
        >
          Explore the flavors
        </button>
      </div>
    </section>
  );
}