// Hero with three variants
const HeroTrust = () => (
  <div className="hero-trust">
    <div className="item"><div className="num">4+</div><div className="cap">Metai praktikos</div></div>
    <div className="item"><div className="num">1000+</div><div className="cap">Individualių seansų</div></div>
    <div className="item"><div className="num">1—4</div><div className="cap">Seansai pagrindinei disfunkcijai</div></div>
    <div className="item"><div className="num">0</div><div className="cap">Skausmo ir pooperacinio laiko</div></div>
  </div>
);

const HeroText = ({ onBook }) => (
  <div className="hero-text">
    <div className="hero-kicker">
      <span className="bar"></span>
      <span>Estetinė osteopatija · Kaunas &amp; Vilnius</span>
    </div>
    <h1>
      Grąžinkite kūnui pusiausvyrą — <em>ir veidas atjaunės pats</em>.
    </h1>
    <p className="hero-sub">
      Dirbame ne su pasekme, o su priežastimi — kad rezultatas veidrodyje būtų natūrali sveikatos pasekmė, o ne laikina maskuotė.
    </p>
    <div className="hero-ctas">
      <button className="btn btn-sage" onClick={onBook}>
        Registruotis konsultacijai <Icon name="arrow" size={14} />
      </button>
      <button className="btn btn-ghost-dark" onClick={()=>{
        const el = document.getElementById('method');
        if (el) window.scrollTo({top: el.offsetTop - 80, behavior: 'smooth'});
      }}>
        Kaip vyksta seansas
      </button>
    </div>
  </div>
);

const HeroSide = () => (
  <div className="hero-side">
    <div className="portrait-placeholder"></div>
    <div className="hero-tag">Registracija atidaryta</div>
    <div className="portrait-label">[ portretas · natūrali šviesa · artimas planas ]</div>
  </div>
);

const Hero = ({ variant, onBook }) => {
  return (
    <section className={`hero variant-${variant}`} id="top">
      <div className="hero-inner">
        <HeroText onBook={onBook} />
        <HeroSide />
        {variant !== 'centered' && (
          <div style={{gridColumn: '1 / -1'}}>
            <HeroTrust />
          </div>
        )}
        {variant === 'centered' && <HeroTrust />}
      </div>
      <div className="scroll-hint">
        <span>Slinkti</span><span className="line"></span>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });