'use client';

import { HeroSection } from './HeroSection';
import { RiverJourney } from './RiverJourney';
import {
  HeroIllustrationLeft,
  HeroIllustrationRight,
  HeroIllustrationSun,
  HeroIllustrationMoon,
} from './HeroIllustrations';
import styles from './ScenicHeroJourney.module.css';
import { messagesByLocale, type Locale } from '@/i18n/content';

function HeroBackdrop() {
  return (
    <div className={styles.heroBackdrop} aria-hidden="true">
      <HeroIllustrationLeft className={styles.backdropLeft} />
      <HeroIllustrationRight className={styles.backdropRight} />
      <HeroIllustrationSun className={styles.backdropSun} />
      <HeroIllustrationMoon className={styles.backdropMoon} />
    </div>
  );
}

export const ScenicHeroJourney = ({ locale }: { locale: Locale }) => {
  const copy = messagesByLocale[locale];

  return (
    <div className={styles.scenicContainer}>
      <section className={styles.heroStage} aria-label={copy.hero.sectionLabel}>
        <HeroBackdrop />
        <HeroSection locale={locale} />
      </section>

      <RiverJourney locale={locale} />
    </div>
  );
};