// Hero.jsx
const Hero = ({ onOrder, variant = 'split' }) => {
  return (
    <section id="top" className={'psd-hero psd-hero--centered' + (variant === 'banner' ? ' psd-hero--banner' : '') + (variant === 'photo-bg' ? ' psd-hero--photo-bg' : '') + (variant === 'blue' ? ' psd-hero--blue' : '')}>
      <div className="psd-hero-copy psd-hero-copy--centered">
        <div className="psd-eyebrow">
          <span className="psd-flag-glyph" aria-hidden="true">★</span>
          <span>Fresh Puerto Rican Breakfast &amp; Sandwiches</span>
          <span className="psd-flag-glyph" aria-hidden="true">★</span>
        </div>
        <h1 className="psd-hero-headline">
          Real Puerto Rican<br />
          <span className="psd-hero-headline-accent">sandwiches.</span>
        </h1>
        <p className="psd-hero-lede">
          Pressed fresh on soft sobao bread. Hot breakfast all day. Slow-roasted pernil overnight.
        </p>
        <div className="psd-hero-cta-row">
          <button className="psd-btn psd-btn--primary psd-btn--lg" onClick={onOrder}>
            Order Online <span aria-hidden="true">→</span>
          </button>
          <a href="#menu" className="psd-btn psd-btn--secondary psd-btn--lg">See the Menu</a>
        </div>
      </div>
      <a href="#menu" className="psd-hero-scroll" aria-label="Scroll to menu">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <polyline points="6 9 12 15 18 9" />
        </svg>
      </a>
    </section>
  );
};

window.Hero = Hero;