// mv-homepage.jsx — the resolved ModVedi homepage.

if (typeof document !== 'undefined' && !document.getElementById('mv-homepage-styles')) {
  const s = document.createElement('style');
  s.id = 'mv-homepage-styles';
  s.textContent = `
    .mv-scrollcue{position:absolute;left:80px;bottom:42px;z-index:3;display:inline-flex;align-items:center;
      gap:10px;text-decoration:none;cursor:pointer;opacity:.9;transition:opacity .3s ease}
    .mv-scrollcue:hover{opacity:1}
    .mv-scrollcue-label{font-family:${MV.sans};
      font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:${MV.gold}}
    .mv-scrollcue-arrow{color:${MV.gold};transition:transform .3s cubic-bezier(.32,.72,0,1)}
    .mv-scrollcue:hover .mv-scrollcue-arrow{transform:translateY(3px)}
  `;
  document.head.appendChild(s);
}

function HeroHome() {
  const rootRef = React.useRef(null);
  const fieldRef = React.useRef(null);

  const goManifesto = (e) => {
    e.preventDefault();
    const el = document.getElementById('manifesto');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY, behavior: 'smooth' });
  };

  return (
    <div className="mv-root mv-hero" ref={rootRef} data-screen-label="Hero"
      style={{ background: `radial-gradient(135% 105% at 74% 60%, ${MV.navy} 0%, ${MV.navyDeep} 70%)`,
        minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>

      <MeasurementField variant="arc" on="navy" innerRef={fieldRef}
        style={{ right: -220, top: '50%', transform: 'translateY(-50%) rotate(-45deg)', transformOrigin: 'center', width: 1060, height: 954, opacity: 0.95, overflow: 'visible' }} />

      {/* gradient banner: graphic stays behind it, nav text on top */}
      <div aria-hidden="true" style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 168,
        pointerEvents: 'none', zIndex: 1, background: `linear-gradient(to bottom, #02080F 0%, ${MV.navyDeep} 34%, rgba(4,15,26,0) 100%)` }} />

      {/* letterhead — wordmark + Apple-style mega dropdown nav */}
      <MegaNav />

      {/* held headline + standfirst + CTAs */}
      <div style={{ position: 'relative', zIndex: 1, flex: 1, padding: '64px 80px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <h1 className="mv-serif" style={{ margin: 0, color: MV.cream, fontWeight: 500,
          fontSize: 'clamp(34px, 3.8vw, 58px)', lineHeight: 1.08, letterSpacing: '-0.018em', maxWidth: 920, textWrap: 'balance' }}>
          We <em style={{ fontStyle: 'italic', fontWeight: 400 }}>build</em> and <em style={{ fontStyle: 'italic', fontWeight: 400 }}>engineer</em> digital transformation for physical-asset industries.
        </h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 40 }}>
          <a className="mv-btn mv-btn-navy" href="ModVedi - Thesis.html">Read our thesis</a>
          <a className="mv-textlink" href="ModVedi - Contact.html">Get in touch <MVArrow /></a>
        </div>
      </div>

      {/* smooth-scroll cue down to the manifesto */}
      <a className="mv-scrollcue" href="#manifesto" onClick={goManifesto} aria-label="Scroll to our manifesto">
        <span className="mv-scrollcue-label">Our Manifesto</span>
        <svg className="mv-scrollcue-arrow" width="10" height="7" viewBox="0 0 10 7" fill="none"
          stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M1 1.5l4 4 4-4" />
        </svg>
      </a>
    </div>
  );
}

function Homepage() {
  return (
    <div style={{ width: '100%' }}>
      <HeroHome />
      <HomeSections />
      <MVFooter />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Homepage />);