// page-home.jsx — homepage: loader + hero + featured strip + wave band.
const { useState: useHomeState } = React;
const { useTweaks, loadTweaks, SITE_TWEAK_DEFAULTS, useSiteSetup, useReveal, useClock,
  Nav, SiteTweaks, Loader, WaveBand, SlimFooter, MagneticCursor, Hero } = window;
const Media = window.Media;

function HomeFeatured() {
  const more = window.PROJECTS.filter((p) => p.slot !== 'wurth').slice(0, 6); // exclude Würth from the home strip only
  return (
    <section className="home-featured">
      <div className="hf-head">
        <h2><span className="impact" style={{ fontSize: "28px" }}>SELECTED WORKS</span></h2>
        <a href="work.html" className="hf-link" data-cursor="view"><span>VIEW ALL WORKS</span><span>→</span></a>
      </div>
      <div className="hf-grid">
        {more.map((p) =>
        <a key={p.slot} href={`project.html?p=${p.slot}`} className="work-card" data-cursor="link" style={{ '--ac': window.acColor(p.accent) }}>
            <div className="work-card-frame" style={{ aspectRatio: '4 / 3' }}>
              <Media src={p.cover} id={`proj-${p.slot}`} ph={`${p.title} — drop image`} alt={p.title} />
              <span className="work-card-tag">{p.cat.split(' · ')[0]}</span>
              <span className="card-view"><span className="card-view-pill">View Campaign <i>↗</i></span></span>
            </div>
            <div className="work-card-meta">
              <h3 className="work-card-title">{p.title} <span className="dim">— {p.sub}</span></h3>
              <span className="mono dim">{p.year}</span>
            </div>
          </a>
        )}
      </div>
    </section>);

}

function HomeApp() {
  const [t, setTweak] = useTweaks(loadTweaks(SITE_TWEAK_DEFAULTS));
  useSiteSetup(t);
  useReveal();
  useClock();

  return (
    <div className="site">
      {t.grain && <div className="grain" aria-hidden="true" />}
      <MagneticCursor enabled={t.cursor} />
      <Nav current="home" />
      <div key={t.heroLayout}>
        <Hero layout={t.heroLayout} />
      </div>
      <HomeFeatured />
      <SlimFooter current="home" />
      <SiteTweaks page="home" t={t} setTweak={setTweak} />
    </div>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<HomeApp />);
window.initCurtain();