'use client';

import React from 'react';
import { HeroSection } from './HeroSection';
import { RiverJourney } from './RiverJourney';
import {
  HeroIllustrationLeft,
  HeroIllustrationRight,
  HeroIllustrationSun,
  HeroIllustrationMoon,
} from './HeroIllustrations';
import styles from './ScenicHeroJourney.module.css';

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: React.FC = () => {
  return (
    <div className={styles.scenicContainer}>
      <section className={styles.heroStage} aria-label="Introduction">
        <HeroBackdrop />
        <HeroSection />
      </section>

      <RiverJourney />
    </div>
  );
};