/* global React, PillButton */

function Hero({ scrollTo }) {
  return (
    <section id="hero" data-screen-label="Hero" style={{
      position: 'relative', width: '100%', minHeight: '100svh',
      background: '#000', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
    }}>
      <video autoPlay muted loop playsInline
        src="assets/background-image.mp4"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />

      <nav style={{ position: 'absolute', top: 'clamp(20px, 3vw, 32px)', right: 'clamp(20px, 3vw, 40px)', zIndex: 10 }}>
        <a href="#" style={{ display: 'block', color: '#fff' }}>
          <img src="assets/wordmark.svg" alt="LexPars"
               style={{ width: 'clamp(120px, 14vw, 182px)', height: 'auto', display: 'block', filter: 'brightness(0) invert(1)' }} />
        </a>
      </nav>

      <div style={{
        position: 'absolute', zIndex: 10,
        top: '37%', left: 30,
        width: 'min(680px, calc(100% - 60px))',
      }}>
        <p style={{
          font: '400 24px/28px var(--font-display)',
          color: '#fff',
          mixBlendMode: 'difference',
          margin: '0 0 30px 0',
        }}>
          LexPars is a digital wealth management tool designed for Single Family Offices.<br />
          <span style={{ color: 'rgba(255, 255, 255, 0.50)' }}>
            Track investments, reconcile cash flows and generate robust financial reports from a simple, customisable platform.
          </span>
        </p>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <PillButton href="#about" onClick={(e) => { e.preventDefault(); scrollTo('about'); }}>About Us</PillButton>
          <PillButton href="#services" onClick={(e) => { e.preventDefault(); scrollTo('services'); }}>Services</PillButton>
          <PillButton href="#contact" onClick={(e) => { e.preventDefault(); scrollTo('contact'); }}>Contact</PillButton>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;