import './style.css'
import { renderHeader } from './components/header.js'
import { renderHero } from './components/hero.js'
import { renderExpertise } from './components/expertise.js'
import { renderAbout } from './components/about.js'
import { renderExperience } from './components/experience.js'
import { renderProjects } from './components/projects.js'
import { renderTools } from './components/tools.js'
import { renderArticles, initArticles } from './components/articles.js'
import { renderContact } from './components/contact.js'
import { renderFooter } from './components/footer.js'

const app = document.getElementById('app')

app.innerHTML = `
  ${renderHeader()}
  <main>
    ${renderHero()}
    ${renderExpertise()}
    ${renderAbout()}
    ${renderExperience()}
    ${renderProjects()}
    ${renderTools()}
    ${renderArticles()}
  </main>
  ${renderContact()}
  ${renderFooter()}
`

// Intersection Observer for scroll reveals
const observer = new IntersectionObserver(
  (entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('visible')
        observer.unobserve(entry.target)
      }
    })
  },
  { threshold: 0.1 }
)

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el))

initArticles()

// If the URL already points to an anchor (e.g. an article deep link),
// jump to it now — the browser's native auto-scroll only works for
// elements present at initial page load, and ours are inserted after.
if (location.hash) {
  const target = document.querySelector(location.hash)
  if (target) target.scrollIntoView()
}