function Hero({ accent }) {
  const [phase, setPhase] = React.useState(0);

  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 200);
    const t2 = setTimeout(() => setPhase(2), 900);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <section id="top" data-screen-label="Hero" style={{
      position: 'relative',
      padding: '110px 24px 60px',
      background: 'var(--bg)',
    }}>
      <div style={{
        maxWidth: 1480, margin: '0 auto',
        position: 'relative',
      }}>
        <div className="hero-image-card" style={{
          position: 'relative',
          borderRadius: 28,
          overflow: 'hidden',
          minHeight: 'min(720px, 88vh)',
          background: 'var(--bg-3)',
          opacity: phase >= 1 ? 1 : 0,
          transform: phase >= 1 ? 'translateY(0)' : 'translateY(30px)',
          transition: 'all 1s cubic-bezier(.2,.7,.2,1)',
          boxShadow: '0 40px 100px -40px rgba(20,19,15,0.25)',
        }}>
          <img
            src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1800&q=80"
            alt="Modern interieur"
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover',
            }}
          />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(110deg, rgba(20,19,15,0.7) 0%, rgba(20,19,15,0.4) 50%, rgba(20,19,15,0.2) 100%)',
          }} />

          {/* Top brand mark removed — nav handles it */}

          <div style={{
            position: 'relative',
            height: '100%',
            minHeight: 'min(720px, 88vh)',
            padding: 'clamp(32px, 5vw, 80px)',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            gap: 32,
            maxWidth: 900,
          }}>
            <h1 className="serif" style={{
              fontSize: 'clamp(44px, 7.5vw, 104px)',
              fontWeight: 400,
              lineHeight: 1.02,
              letterSpacing: '-0.025em',
              color: '#fff',
              textWrap: 'balance',
              opacity: phase >= 2 ? 1 : 0,
              transform: phase >= 2 ? 'translateY(0)' : 'translateY(20px)',
              transition: 'all 1.2s cubic-bezier(.2,.7,.2,1) .1s',
            }}>
              Uw interieur, van <span style={{ color: accent, fontStyle: 'italic' }}>ontwerp</span> tot <span style={{ color: accent, fontStyle: 'italic' }}>oplevering.</span>
            </h1>
            <p style={{
              fontSize: 18, lineHeight: 1.7,
              color: 'rgba(255,255,255,0.88)', maxWidth: 600,
              fontWeight: 300,
              opacity: phase >= 2 ? 1 : 0,
              transform: phase >= 2 ? 'translateY(0)' : 'translateY(20px)',
              transition: 'all 1.2s cubic-bezier(.2,.7,.2,1) .25s',
            }}>
              Bij Assos Groep krijgt u meer dan een leverancier — u krijgt een partner die met u meedenkt. Van keukens en badkamers tot complete interieurbouw, alles in eigen beheer.
            </p>
            <div style={{
              display: 'flex', flexWrap: 'wrap', gap: 12,
              opacity: phase >= 2 ? 1 : 0,
              transform: phase >= 2 ? 'translateY(0)' : 'translateY(20px)',
              transition: 'all 1.2s cubic-bezier(.2,.7,.2,1) .4s',
            }}>
              <a href="#bedrijven" className="btn btn-accent">
                Ontdek onze bedrijven <span className="arrow">↗</span>
              </a>
              <a href="#offerte" className="btn" style={{
                background: 'rgba(255,255,255,0.1)',
                color: '#fff',
                border: '1px solid rgba(255,255,255,0.25)',
                backdropFilter: 'blur(8px)',
              }}>
                Offerte aanvragen
              </a>
            </div>
          </div>
        </div>

        {/* Scroll indicator below */}
        <div style={{
          marginTop: 32,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
          opacity: phase >= 2 ? 0.6 : 0,
          transition: 'opacity 1s ease 1s',
        }}>
          <span style={{ fontSize: 11, letterSpacing: '0.3em', textTransform: 'uppercase', color: 'var(--fg-mute)', fontWeight: 600 }}>Scroll</span>
          <div style={{ width: 1, height: 32, background: 'var(--fg-mute)', animation: 'scrollPulse 2s ease infinite' }}></div>
        </div>
      </div>

      <style>{`
        @keyframes scrollPulse {
          0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.3; }
          50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;
