import { Wordmark } from "./Wordmark";
import { scrollToSection } from "../scroll";

export function Hero() {
  return (
    <section className="hero" id="hero" tabIndex={-1} aria-labelledby="hero-title">
      <div className="hero__media">
        <img
          src="/assets/hero-fjord.webp"
          alt="A still fjord at low winter sun, snow on the surrounding peaks."
          fetchPriority="high"
        />
        <div className="hero__scrim" aria-hidden="true" />
      </div>

      <div className="hero__body">
        <Wordmark size={34} className="wordmark--hero" />

        <p className="eyebrow">Seasonal winter line</p>
        <h1 id="hero-title">Taste the North</h1>
        <p className="hero__lede">
          Glacial meltwater, cold-steeped with northern botanicals. Three
          flavors, bottled once per season.
        </p>

        <div className="hero__actions">
          <a
            className="button button--primary"
            href="#flavors"
            onClick={(event) => {
              event.preventDefault();
              scrollToSection("flavors");
            }}
          >
            Choose a flavor
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              aria-hidden="true"
              focusable="false"
            >
              <path
                d="M8 2.5v11m0 0L3.5 9M8 13.5 12.5 9"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </a>
          <p className="hero__note">Unsweetened. Caffeine-free. Glass bottle.</p>
        </div>
      </div>
    </section>
  );
}