const Hero = () => (
  <section className="hero shell" id="top">
    <div className="hero-grid">
      <div>
        <div className="overline">Демо-проект · nail studio</div>
        <h1>
          Маникюр,<br/>
          <span className="accent">в котором</span><br/>
          <span className="amp">&</span> видна <span className="accent">душа</span>
        </h1>
        <p className="hero-sub">
          Частный кабинет Анны Ковалёвой — авторский дизайн, японская техника
          обработки кутикулы и стерильные инструменты. Ногти, которые хочется
          фотографировать две недели подряд.
        </p>
        <div className="hero-actions">
          <a href="#booking" className="btn btn-ink">
            Записаться онлайн <Icon name="arrowUpRight" size={16}/>
          </a>
          <a href="#gallery" className="btn btn-ghost">
            Смотреть работы
          </a>
        </div>
        <div className="hero-meta">
          <div className="stat">
            <b style={{whiteSpace:"nowrap"}}>90–180</b>
            <span>минут визит —<br/>от японского до наращивания</span>
          </div>
          <div className="stat">
            <b>8</b>
            <span>лет в профессии<br/>и постоянном обучении</span>
          </div>
          <div className="stat">
            <b>2 нед.</b>
            <span>живёт покрытие<br/>в среднем без сколов</span>
          </div>
        </div>
      </div>

      <div className="hero-collage">
        <div className="hero-card hc-main">
          <NailPlaceholder src="anna_hero_main.png" bg="#E9C9C1" accent="#9A5550" label="Chrome blush"/>
        </div>
        <div className="hero-card hc-small">
          <NailPlaceholder src="anna_hero_detail.png" bg="#C4B89A" accent="#6B7259" label="Detail"/>
        </div>
        <div className="hc-tag">
          <span className="dot"/> свободно на этой неделе — 3 окна
        </div>
        <div className="hc-badge">
          авторский<br/>дизайн '26
        </div>
      </div>
    </div>
  </section>
);

const Marquee = () => {
  const words = ["японский маникюр", "арт-дизайн", "гель-лак", "снятие бережно", "наращивание форм", "омбре & френч", "стерильно", "чайлд-френдли"];
  const block = (
    <span>
      {words.map((w, i) => (
        <React.Fragment key={i}>
          {i === 0 ? null : <span className="dot"/>}
          <em>{w}</em>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {block}{block}{block}{block}
      </div>
    </div>
  );
};

Object.assign(window, { Hero, Marquee });