const Hero = ({ onNavigate }) => {
  return (
    <section className="hero">
      <h1>Improve OR efficiency</h1>
      <p style={{ fontSize: '1.25rem', color: 'var(--text-dim)', maxWidth: '600px', margin: '1.5rem auto 2.5rem auto', lineHeight: '1.6' }}>
        Designed by an OR nurse to reduce delays and improve communication in real surgical workflows
      </p>
      
      <div className="hero-actions">
        <button className="btn btn-primary" onClick={() => onNavigate('playground')}>Try Live OR Dashboard</button>
        <button className="btn btn-outline" onClick={() => window.location.href='mailto:contact@example.com'}>Contact</button>
      </div>
      
      <div style={{ marginTop: '5rem', position: 'relative' }}>
        <div style={{ position: 'absolute', top: '-50%', left: '50%', transform: 'translateX(-50%)', width: '80%', height: '200px', background: 'radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%)', zIndex: -1 }}></div>
        <img 
          src="https://images.unsplash.com/photo-1551076805-e1869033e561?auto=format&fit=crop&q=80&w=2000" 
          alt="OR Dashboard Preview" 
          style={{ width: '100%', maxWidth: '900px', borderRadius: '24px', border: '1px solid var(--border)', boxShadow: '0 20px 50px rgba(0,0,0,0.5)' }}
        />
      </div>
    </section>
  );
};

window.Hero = Hero;