import { ContentStack } from '../components/ContentStack.jsx'
import { HomeAutobiographiePanel } from '../components/HomeAutobiographiePanel.jsx'
import { HomeEducationTimeline } from '../components/HomeEducationTimeline.jsx'
import { HomeIntroPanel } from '../components/HomeIntroPanel.jsx'
import { HomeProfilCompetencesPanel } from '../components/HomeProfilCompetencesPanel.jsx'
import { HomeProfilQualitesPanel } from '../components/HomeProfilQualitesPanel.jsx'
import { HomeSkillsBlock } from '../components/HomeSkillsBlock.jsx'
import { HomeSidebar } from '../components/HomeSidebar.jsx'

/** Accueil : sidebar à gauche. Profil (`variant="profil"`) : bandeau profil horizontal au-dessus du contenu. */
export function HomePageView({ variant = 'home' }) {
  const isProfil = variant === 'profil'

  return (
    <div
      className={['page', 'page--home', isProfil ? 'page--home-profil' : null]
        .filter(Boolean)
        .join(' ')}
    >
      <aside
        className={['home-sidebar', isProfil ? 'home-sidebar--horizontal' : null]
          .filter(Boolean)
          .join(' ')}
        aria-label="Profil"
      >
        <HomeSidebar layout={isProfil ? 'horizontal' : 'vertical'} />
      </aside>
      <div className="home-main">
        <ContentStack
          panel1={
            isProfil ? <HomeAutobiographiePanel /> : <HomeIntroPanel />
          }
          panel1b={
            isProfil ? <HomeProfilCompetencesPanel /> : <HomeSkillsBlock />
          }
          panel2={
            isProfil ? <HomeProfilQualitesPanel /> : <HomeEducationTimeline />
          }
        />
      </div>
    </div>
  )
}