import { RichText } from "@/components/general/RichText";
import styles from "./studioHeader.module.scss";

export const StudioHeader = ({
  title,
  lead,
}: {
  title: string;
  lead?: string | null;
}) => {
  return (
    <div className={styles.studioHeader}>
      <h1 className="sr-only">{title}</h1>
      <div className={styles.banner}>
        <div className={styles.deco}>
          <img
              className={styles.decoLeft}
              src="/assets/graphics/studio-2026/studio-banner-left-deco.svg"
            />
            <img
              className={styles.decoRight}
              src="/assets/graphics/studio-2026/studio-banner-right-deco.svg"
            />
        </div>
        <div className={styles.logo}>
          <img
            className={styles.mainLogo}
            src="/assets/graphics/studio-2026/studio-logo-2026.svg"
            alt="STUDiO"
          />
          <div className={styles.logoText}>
            <img
              className={styles.studentfestivalen}
              src="/assets/graphics/studio-2026/studio-studentfestivalen-i-oslo.svg"
              alt="Studentfestivalen i Oslo"
            />
            <img
              className={styles.fadderuke}
              src="/assets/graphics/studio-2026/studio-hele-oslos-fadderuke.svg"
              alt="Hele Oslos fadderuke"
            />
            <img
              className={styles.datos}
              src="/assets/graphics/studio-2026/studio-datos.svg"
              alt="10–14. august"
            />
          </div>
          <a href="https://www.instagram.com/studentfestivalenioslo/" className={styles.instagram} target="_blank">
            <img
              className={styles.icon}
              src="/assets/graphics/studio-2026/studio-instagram.svg"
              alt="Instagram"
            />
          </a>
        </div>
      </div>
      {lead && (
        <div className={`lead ${styles.lead}`}>
          <RichText content={lead} />
        </div>
      )}
    </div>
  );
};