const heroStyles = {
  hero: {
    position: 'relative', height: '100vh',
    display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center',
    textAlign: 'center', padding: '8rem 2rem 4rem', overflow: 'hidden',
  },
  bgWrap: {
    position: 'absolute', inset: 0, overflow: 'hidden', zIndex: 0,
  },
  bgIframe: {
    position: 'absolute',
    top: '50%', left: '50%',
    width: '177.78vh',
    height: '56.25vw',
    minWidth: '100%', minHeight: '100%',
    transform: 'translate(-50%, -50%)',
    border: 0, pointerEvents: 'none',
  },
  bgOverlay: {
    position: 'absolute', inset: 0,
    background:
      'linear-gradient(to bottom, rgba(8,7,6,0.78) 0%, rgba(8,7,6,0.62) 40%, rgba(8,7,6,0.95) 100%), ' +
      'radial-gradient(ellipse 70% 60% at 50% 55%, rgba(8,7,6,0.35) 0%, rgba(8,7,6,0.55) 100%), ' +
      'radial-gradient(ellipse 60% 55% at 50% 60%, rgba(201,169,110,0.07) 0%, transparent 70%), ' +
      'radial-gradient(ellipse 80% 40% at 50% 100%, rgba(201,169,110,0.04) 0%, transparent 60%)',
    pointerEvents: 'none', zIndex: 1,
  },
  content: { position: 'relative', zIndex: 2 },
  eyebrow: {
    fontSize: '0.72rem', letterSpacing: '.25em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '2rem',
    display: 'flex', alignItems: 'center', gap: '1rem', justifyContent: 'center',
    maxWidth: 'none', whiteSpace: 'nowrap',
    animation: 'fadeUp .8s .2s forwards', opacity: 0,
  },
  rule: { content: '""', display: 'block', width: 40, height: 1, background: 'var(--border)' },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2.5rem, 6vw, 5rem)', fontWeight: 700, lineHeight: 1.0,
    letterSpacing: '-0.02em', marginBottom: '16px',
    animation: 'fadeUp .9s .4s forwards', opacity: 0,
  },
  sub: {
    fontSize: 'clamp(1rem, 2vw, 1.25rem)', fontWeight: 300,
    color: 'var(--fg-muted)', maxWidth: 720, margin: '0 auto 3.5rem',
    animation: 'fadeUp .9s .6s forwards', opacity: 0,
  },
  meta: {
    display: 'flex', gap: '3rem', alignItems: 'center', justifyContent: 'center',
    flexWrap: 'wrap', marginBottom: '3.5rem',
    animation: 'fadeUp .9s .7s forwards', opacity: 0,
  },
  metaLabel: {
    fontSize: '0.65rem', letterSpacing: '.2em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '.3rem',
  },
  metaValue: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '1.4rem', fontWeight: 400, color: 'var(--fg)',
  },
  metaSep: { width: 1, height: 48, background: 'var(--border)' },
  cta: {
    display: 'inline-block', background: 'var(--gold)', color: 'var(--bg)',
    fontSize: '0.8rem', letterSpacing: '.15em', textTransform: 'uppercase',
    padding: '.9rem 3rem', textDecoration: 'none', fontWeight: 500,
    transition: 'background .25s, transform .2s',
    animation: 'fadeUp .9s .85s forwards', opacity: 0,
  },
  scroll: {
    position: 'absolute', bottom: '2.5rem', left: '50%',
    transform: 'translateX(-50%)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '.5rem',
    fontSize: '0.65rem', letterSpacing: '.18em', textTransform: 'uppercase',
    color: 'var(--fg-muted)', zIndex: 2,
    animation: 'fadeUp .9s 1.2s forwards', opacity: 0,
  },
  scrollLine: { width: 1, height: 40, background: 'var(--border)', display: 'block', animation: 'pulse 2s infinite' },
};

function Hero() {
  const heroRef = React.useRef(null);
  const contentRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      if (!heroRef.current) return;
      const p = Math.min(1, window.scrollY / (window.innerHeight * 0.4));
      const r = `${p * 72}px`;
      heroRef.current.style.borderBottomLeftRadius = r;
      heroRef.current.style.borderBottomRightRadius = r;
      if (contentRef.current) {
        contentRef.current.style.opacity = Math.max(0, 1 - p * 1.5);
        contentRef.current.style.transform = `translateY(${p * -60}px)`;
      }
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const vimeoSrc = 'https://player.vimeo.com/video/1189442150?h=fe722fccb2&background=1&autoplay=1&loop=1&muted=1&autopause=0&controls=0&dnt=1';
  return (
    <header ref={heroRef} className="hero-block" style={heroStyles.hero}>
      <div style={heroStyles.bgWrap}>
        <iframe src={vimeoSrc} allow="autoplay; fullscreen" style={heroStyles.bgIframe} title="REnderia Day background" />
      </div>
      <div style={heroStyles.bgOverlay} />

      <div ref={contentRef} style={heroStyles.content}>
        <p style={heroStyles.eyebrow}>
          <span style={heroStyles.rule}></span>
          Il mercato immobiliare sta cambiando. Sei pronto?
          <span style={heroStyles.rule}></span>
        </p>

        <h1 style={heroStyles.title}>
          REnderia<br/><em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>Day</em>
        </h1>

        <p style={heroStyles.sub}>
          Un evento per chi vende e costruisce immobili e vuole capire dove sta andando il mercato, e come trasformare quel cambiamento in vantaggio competitivo.
        </p>

        <div className="hero-meta" style={heroStyles.meta}>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Data</p>
            <p style={heroStyles.metaValue}>23 Giugno 2026</p>
          </div>
          <div className="hero-meta-sep" style={heroStyles.metaSep}></div>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Luogo</p>
            <p style={heroStyles.metaValue}>UNA Hotels MH · Matera</p>
          </div>
          <div className="hero-meta-sep" style={heroStyles.metaSep}></div>
          <div style={{ textAlign: 'center' }}>
            <p style={heroStyles.metaLabel}>Orario</p>
            <p style={heroStyles.metaValue}>17:30 – 20:00</p>
          </div>
        </div>

        <a href="#registrati" style={heroStyles.cta}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gold-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--gold)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
          Prenota il tuo posto →
        </a>
      </div>

      <div style={heroStyles.scroll}>
        <span style={heroStyles.scrollLine}></span>
      </div>
    </header>
  );
}

window.Hero = Hero;