// Hero.jsx — modernized two-column hero with editorial serif + display sans
const Hero = () => {
  return (
    <section className="dd-hero bg-grain">
      <div className="container-x dd-hero__inner">
        <div className="dd-hero__copy">
          <h1 className="dd-hero__title">
            <span className="h-display">AI-КОНТЕНТ</span>
            <span className="h-editorial dd-hero__title-em">для food-брендів.</span>
          </h1>
          <p className="dd-hero__sub">
            Реалістичні відео і фото без зйомки. Швидше і в&nbsp;
            <span className="gold">5&nbsp;разів дешевше</span> за класичну продакшн-зйомку.
          </p>
        </div>
        <div className="dd-hero__visual">
          <div className="dd-hero__plate" aria-hidden="true">
            <div className="dd-hero__plate-frame">
              <video
                className="dd-hero__plate-video"
                autoPlay
                muted
                loop
                playsInline
                poster="assets/hero-poster.avif"
              >
                <source src="assets/hero-reel.mp4" type="video/mp4" />
                <source src="assets/hero-reel.webm" type="video/webm" />
              </video>
            </div>
            <div className="dd-hero__plate-caption">
              <span className="eyebrow">ВІДЕО · AI-ГЕНЕРАЦІЯ</span>
            </div>
          </div>
        </div>
        <div className="dd-hero__cta">
          <a href="#cases" className="btn btn-primary">Переглянути кейси</a>
          <a href="#contact" className="btn btn-ghost">Обговорити проект →</a>
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;