// Landing composes the whole page. heroVariant = 1 | 2 | 3
// bgScheme = 'mixed' (default) | 'bone' | 'concrete' | 'dark'

const Landing = ({ heroVariant = 1, bgScheme = 'mixed' }) => {
  const HeroComp = heroVariant === 2 ? HeroEditorial : heroVariant === 3 ? HeroConfigurator : HeroLogistics;

  // Background rotation per hero. Editorial hero already has dark hero, so
  // we open following sections lighter to avoid two dark stacked.
  const schemes = {
    mixed: heroVariant === 2
      ? { logistics: 'bone', configurator: 'paper', warehouse: 'bone', process: 'concrete', team: 'paper', testimonials: 'bone', faq: 'paper' }
      : { logistics: 'bone', configurator: 'paper', warehouse: 'bone', process: 'concrete', team: 'paper', testimonials: 'bone', faq: 'paper' },
    bone:     { logistics: 'bone', configurator: 'paper', warehouse: 'paper', process: 'bone',     team: 'paper', testimonials: 'bone',     faq: 'paper' },
    concrete: { logistics: 'concrete', configurator: 'concrete', warehouse: 'paper', process: 'concrete', team: 'paper', testimonials: 'concrete', faq: 'paper' },
    dark:     { logistics: 'bone', configurator: 'paper', warehouse: 'dark', process: 'bone',     team: 'dark',  testimonials: 'bone',     faq: 'paper' },
  };
  const s = schemes[bgScheme] || schemes.mixed;

  return (
    <div className="kmk">
      <Nav scheme="light" />
      <HeroComp />
      <SectionLogistics    bg={s.logistics} />
      <SectionConfigurator bg={s.configurator} />
      <SectionWarehouse    bg={s.warehouse} />
      <SectionProcess      bg={s.process} />
      <SectionTeam         bg={s.team} />
      <SectionTestimonials bg={s.testimonials} />
      <SectionFaq          bg={s.faq} />
      <SectionContact />
      <Footer />
    </div>
  );
};

window.Landing = Landing;