/* global React */
const { useState, useRef } = React;
const { PHOTO, DOCTORS } = window;

function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-img reveal" style={{backgroundImage: `url(${PHOTO.clinic})`, backgroundSize: "cover", backgroundPosition: "center"}}></div>
          <div className="reveal" style={{transitionDelay: "100ms"}}>
            <span className="eyebrow">О клинике</span>
            <h2 className="h-1" style={{marginTop: 16}}>Клиника<br/>мануальной <em>терапии</em><br/>и реабилитации</h2>
            <p className="lead" style={{marginTop: 28}}>
              Лечение болей в мышцах, суставах и позвоночнике. Реабилитация после травм и операций командой специалистов с опытом более 10 лет.
            </p>
            <p className="lead" style={{marginTop: 16}}>
              В Э-клинике принимают квалифицированные врачи с высшим образованием и большим опытом работы, в том числе со сложными пациентами с хроническим болевым синдромом и сильной травматизацией. Каждый протокол собирается под пациента — его историю, диагноз и образ жизни.
            </p>
            <div className="stats">
              <div>
                <div className="num">10+</div>
                <div className="lbl">лет работы<br/>в Чертаново</div>
              </div>
              <div>
                <div className="num">13</div>
                <div className="lbl">направлений<br/>в одном протоколе</div>
              </div>
              <div>
                <div className="num">600+</div>
                <div className="lbl">отзывов<br/>в Яндекс и 2ГИС</div>
              </div>
              <div>
                <div className="num">4.9</div>
                <div className="lbl">средняя<br/>оценка</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Doctors() {
  return (
    <section id="doctors">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Команда</span>
            <h2 className="h-1">Наши <em>специалисты</em></h2>
            <p className="lead" style={{marginTop: 16}}>Решают даже самые сложные случаи без операции</p>
          </div>
          <p className="lead">
            Сертифицированные мануальные терапевты, реабилитологи, травматологи и неврологи. Каждый специалист ведёт пациента от первичной диагностики до полного восстановления.
          </p>
        </div>
        <div className="doctors-row reveal-stagger">
          {DOCTORS.map((d, i) => (
            <div key={i} className="doctor">
              <div className="photo" style={{backgroundImage: `url(${d.photo})`, backgroundSize: "cover", backgroundPosition: "center top"}}></div>
              <div className="body">
                <h4>{d.name}</h4>
                <div className="role">{d.role}</div>
                <div className="meta-row">
                  <span><strong>{d.price}</strong> приём</span>
                  <a href="#contacts" className="record-link">Записаться →</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function VideoBlock() {
  const [playing, setPlaying] = useState(false);
  const videoRef = useRef(null);
  const handlePlay = () => {
    setPlaying(true);
    setTimeout(() => {
      const v = videoRef.current;
      if (v) { v.play().catch(() => {}); }
    }, 50);
  };
  return (
    <section id="video" className="video-section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Видео</span>
            <h2 className="h-1">Загляните <em>внутрь</em><br/>нашей клиники</h2>
          </div>
          <p className="lead">
            Современные кабинеты, оборудование Salus Talent, MLS-лазер, ударно-волновая терапия. 90-секундная экскурсия по Э-Клинике на Кировоградской.
          </p>
        </div>
        <div className="video-wrap reveal">
          {!playing && (
            <button className="video-poster" onClick={handlePlay} aria-label="Воспроизвести видео">
              <div className="video-poster-img" style={{backgroundImage: `url(${PHOTO.clinic})`}}></div>
              <div className="video-overlay"></div>
              <div className="video-play">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
                  <path d="M11 7L25 16L11 25V7Z" fill="currentColor"/>
                </svg>
              </div>
              <div className="video-caption">
                <div className="video-eyebrow">Экскурсия по клинике</div>
                <div className="video-title">Кировоградская, 2 · 1:30</div>
              </div>
            </button>
          )}
          {playing && (
            <video
              ref={videoRef}
              className="video-player"
              src="https://dl.dropboxusercontent.com/s/94ve18yuxqwpkmk/IMG_6380.mp4?dl=0"
              poster={PHOTO.clinic}
              controls
              playsInline
            />
          )}
        </div>
        <div className="video-bullets reveal-stagger">
          <div className="vb">
            <div className="vb-num">5</div>
            <div className="vb-lbl">кабинетов<br/>с современным оборудованием</div>
          </div>
          <div className="vb">
            <div className="vb-num">2 мин</div>
            <div className="vb-lbl">пешком<br/>от м. Чертановская</div>
          </div>
          <div className="vb">
            <div className="vb-num">9–20</div>
            <div className="vb-lbl">часы работы<br/>без выходных</div>
          </div>
          <div className="vb">
            <div className="vb-num">9 мин</div>
            <div className="vb-lbl">время отклика<br/>администратора</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, Doctors, VideoBlock });