import { storyParagraphs } from "../content";

export function Story() {
  return (
    <section
      className="section story"
      id="story"
      tabIndex={-1}
      aria-labelledby="story-title"
    >
      <figure className="story__media">
        <img
          src="/assets/story-botanicals.webp"
          alt="Frosted spruce, cloudberries, juniper berries and lime peel on wet coastal rock."
          loading="lazy"
        />
      </figure>

      <div className="story__body">
        <p className="eyebrow">Our story</p>
        <h2 id="story-title">Cold water, patient botanicals</h2>
        {storyParagraphs.map((paragraph) => (
          <p key={paragraph.slice(0, 24)}>{paragraph}</p>
        ))}
        <p className="story__signature">Fjora — Tromsø, 69° north</p>
      </div>
    </section>
  );
}