/* global React */
const { PHOTO, DRIPS, PROFESSIONS } = window;

function Drips() {
  return (
    <section id="drips" className="about">
      <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="drips-grid reveal-stagger">
          {DRIPS.map((d, i) => (
            <div key={i} className="drip">
              <div className="drip-head">
                <h4>{d.name}</h4>
                <span className="drip-time">{d.duration}</span>
              </div>
              <p>{d.desc}</p>
              <div className="drip-foot">
                <span className="drip-price">{d.price}</span>
                <a href="#contacts" className="drip-cta">Записаться →</a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Professions() {
  return (
    <section id="professions">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">К нам обращаются</span>
            <h2 className="h-1">Эффективное лечение<br/>для людей <em>разных профессий</em></h2>
          </div>
          <p className="lead">
            К нам приходят с типичными проблемами офиса, со спортивными травмами и с последствиями физического труда. Для каждой группы — свой протокол.
          </p>
        </div>
        <div className="professions-grid reveal-stagger">
          {PROFESSIONS.map((p, i) => (
            <div key={i} className="profession">
              <img src={p.icon} alt="" />
              <span>{p.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeRehab() {
  return (
    <section id="home-rehab" className="home-rehab">
      <div className="container">
        <div className="hr-grid">
          <div className="hr-img reveal" style={{backgroundImage: `url(${PHOTO.massage})`}}></div>
          <div className="hr-text reveal" style={{transitionDelay: "100ms"}}>
            <span className="eyebrow">Реабилитация на дому</span>
            <h2 className="h-1" style={{marginTop: 16}}>Курс <em>восстановления</em><br/>у вас дома</h2>
            <p className="lead" style={{marginTop: 24, maxWidth: 520}}>
              Нужен курс реабилитации, чтобы вернуться к полноценной жизни? Теперь вы можете пройти его дома. Наш специалист приедет, проведёт оценку двигательных навыков и разработает индивидуальную программу занятий.
            </p>
            <div className="hr-tiers">
              <div className="hr-tier">
                <div className="hr-tier-eyebrow">Знакомство</div>
                <h3>Пробное занятие</h3>
                <ul>
                  <li>Диагностика двигательных навыков</li>
                  <li>Разработка программы занятий</li>
                  <li>Время — около 1 часа</li>
                </ul>
                <div className="hr-price">10 000 ₽</div>
                <a href="#contacts" className="btn btn-ghost">Оставить заявку</a>
              </div>
              <div className="hr-tier featured">
                <div className="hr-tier-eyebrow">Полный курс</div>
                <h3>Программа «Восстановление»</h3>
                <ul>
                  <li>Диагностика и план занятий</li>
                  <li>Разработка индивидуальной программы</li>
                  <li>10 занятий с инструктором ЛФК (~ 45 мин)</li>
                </ul>
                <div className="hr-price">100 000 ₽</div>
                <a href="#contacts" className="btn btn-accent">Записаться <span className="arrow">→</span></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Lab() {
  return (
    <section id="lab" className="lab">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Лаборатория</span>
            <h2 className="h-1">Приём анализов<br/>и капельная <em>терапия</em></h2>
          </div>
          <p className="lead">
            Прозрачные составы, индивидуальный подбор под состояние и задачи. Точные и быстрые результаты, более 1500 видов исследований, доступные цены.
          </p>
        </div>
        <div className="lab-grid reveal-stagger">
          <div className="lab-card">
            <div className="lab-num">01</div>
            <h3>Приём анализов</h3>
            <p>У взрослых и детей. Полный спектр лабораторных исследований — клинические, биохимические, гормональные, иммунологические анализы.</p>
            <ul>
              <li>Более 1500 видов исследований</li>
              <li>Точные и быстрые результаты</li>
              <li>Доступные цены</li>
              <li>Анализы у взрослых и детей</li>
            </ul>
          </div>
          <div className="lab-card">
            <div className="lab-num">02</div>
            <h3>Капельная терапия</h3>
            <p>Восстановительные, общеукрепляющие, детокс и омолаживающие капельницы. Состав подбирается врачом индивидуально.</p>
            <ul>
              <li>12 готовых протоколов капельниц</li>
              <li>Сертифицированные препараты</li>
              <li>Одноразовые расходные материалы</li>
              <li>Процедуру ведёт врач</li>
            </ul>
            <a href="#drips" className="lab-link">Все капельницы →</a>
          </div>
          <div className="lab-photo" style={{backgroundImage: `url(${PHOTO.lab})`}}></div>
        </div>
      </div>
    </section>
  );
}

function MapSection() {
  return (
    <section id="map-section" className="map-section">
      <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, maxWidth: 460}}>
              Москва, ул. Кировоградская, д. 2 (вход со двора). 2 минуты пешком от м. Чертановская.
            </p>
          </div>
          <div className="map-info">
            <div className="map-info-row">
              <div className="map-info-key">Метро</div>
              <div className="map-info-val">Чертановская — 2 мин пешком</div>
            </div>
            <div className="map-info-row">
              <div className="map-info-key">Адрес</div>
              <div className="map-info-val">ул. Кировоградская, д. 2<br/><span className="sub">Вход со двора</span></div>
            </div>
            <div className="map-info-row">
              <div className="map-info-key">Часы</div>
              <div className="map-info-val">Ежедневно 9:00 – 20:00</div>
            </div>
            <div className="map-info-row">
              <div className="map-info-key">Телефон</div>
              <div className="map-info-val"><a href="tel:+79991410101">+7 (999) 141-01-01</a></div>
            </div>
            <a href="https://yandex.ru/maps/?text=Кировоградская%202%20Москва" target="_blank" rel="noreferrer" className="btn btn-accent map-cta">
              Построить маршрут <span className="arrow">→</span>
            </a>
          </div>
        </div>
        <div className="map-wrap reveal">
          <iframe
            src="https://yandex.ru/map-widget/v1/?ll=37.604%2C55.620&mode=search&oid=212474134904&ol=biz&z=16"
            width="100%"
            height="100%"
            frameBorder="0"
            allowFullScreen
            title="Карта"
          ></iframe>
        </div>
      </div>
    </section>
  );
}

function Equipment() {
  return (
    <section className="about">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Оборудование</span>
            <h2 className="h-1">Современная база<br/>для глубокой <em>работы</em></h2>
          </div>
          <p className="lead">
            MLS-лазер, магнитная терапия Salus Talent, ударно-волновая и вакуум-градиентная терапия. Сертифицированное медицинское оборудование, которое мы соединяем в один комплексный сеанс.
          </p>
        </div>
        <div className="equipment-strip reveal-stagger">
          <div className="eq-card" style={{backgroundImage: `url(${PHOTO.massage})`}}>
            <div className="label">MLS-лазер</div>
          </div>
          <div className="eq-card" style={{backgroundImage: `url(${PHOTO.equipment})`}}>
            <div className="label">Salus Talent</div>
          </div>
          <div className="eq-card" style={{backgroundImage: `url(${PHOTO.physio})`}}>
            <div className="label">Ударно-волновая</div>
          </div>
          <div className="eq-card" style={{backgroundImage: `url(${PHOTO.spa})`}}>
            <div className="label">Вакуум-градиент</div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Drips, Professions, HomeRehab, Lab, MapSection, Equipment });