function OrnamentDivider() {
  return (
    <div style={{ position: 'relative', zIndex: 1, padding: '0 32px', maxWidth: 'var(--max)', margin: '0 auto' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, transparent, #2A2238)' }}/>
        <span style={{
          fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
          fontSize: 18, color: '#38304A', lineHeight: 1, userSelect: 'none',
        }}>✦</span>
        <div style={{ flex: 1, height: 1, background: 'linear-gradient(90deg, #2A2238, transparent)' }}/>
      </div>
    </div>
  );
}

function App(){
  const onNav = (id) => {
    if (id === 'top') { window.scrollTo({top:0, behavior:'smooth'}); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 50;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  return (
    <div id="top">
      <Header onNav={onNav}/>
      <Hero/>
      <Marquee/>
      <OrnamentDivider/>
      <SeriesScroll/>
      <Contact/>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);