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

/** Accueil : sidebar à gauche. Profil (`variant="profil"`) : contenu sans bandeau ni autobiographie. */
export function HomePageView({ variant = 'home' }) {
  const isProfil = variant === 'profil'

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