/* Hero.jsx — Section 1
   Left column: greeting, headline, CTAs, pinned availability line.
   Right column: photo that bleeds to top + right edges, with pulsing dot/tooltip. */
function Hero({ onSeeWork, onContact }) {
  return (
    <div className="hero">
      <div className="hero-copy">
        <div className="greeting">Hi, I'm Zuzana Hrušovská</div>
        <h1 className="headline">
          I turn messy <mark>B2B problems</mark> into clear product direction through <span className="wavy">design</span>, <span className="wavy">strategy</span>, and whatever it takes.
        </h1>
        <div className="hero-ctas">
          <button type="button" className="btn primary" onClick={onSeeWork}><span className="btn-label">View case studies</span></button>
          <button type="button" className="btn secondary" onClick={onContact}><span className="btn-label">Get in touch</span></button>
        </div>
        <div className="hero-meta">
          Available from <strong>September 1st</strong> — Based in Prague, working <strong>remotely</strong>
        </div>
      </div>
      <div className="hero-photo-wrap">
        <img className="hero-photo" src="assets/Photo-Hero.webp" alt="Zuzana speaking on stage" fetchpriority="high" />
        <span className="img-tip hero-tip" tabIndex="0">
          <span className="label">Me talking about customer visits in front of 400 of my colleagues.</span>
        </span>
      </div>
    </div>);

}
window.Hero = Hero;