// Обо мне — имя + позиционирование + портрет, на светлом фоне.
(function () {
  const AREAS = [
    { area: "arbitration", label: "Арбитраж" },
    { area: "itip", label: "IT/IP" },
    { area: "crypto", label: "Криптовалюты" },
    { area: "ai", label: "Legal-Tech" },
  ];

  function About() {
    return (
      <section className="w-band w-band--light" id="about">
        <div className="w-inner">
          <h2 className="w-section-title">Обо мне</h2>
          <div className="w-profile" style={{ marginTop: 40 }}>
            <div>
              <h2 className="w-profile__name">Артур<br/>Демченко</h2>
              <p className="w-profile__desc">
                Меня зовут Артур Демченко, я студент 3 курса юрфака БГУ и юрист. Я практикую
                преимущественно в сферах криптовалют и международного коммерческого арбитража,
                но не ограничиваюсь только ими. Но особый интерес испытываю именно к ним.
              </p>
              <p className="w-profile__desc">
                В условиях, которые диктует современный мир, традиционные пути развития
                юридической карьеры не кажутся мне привлекательными. Я бы даже сказал, из-за
                своей кипучей юношеской энергии мне кажется это скучным. Поэтому я собираюсь
                объединить все свои интересы — интерес в юриспруденции, любовь к творчеству,
                тяга к новым технологиям — под своим личным брендом.
              </p>
              <div className="w-practice-col">
                <div className="w-practice-col__h">Сферы интересов</div>
                <div className="w-areagrid">
                  {AREAS.map((a) => (
                    <div className={"w-areatile w-areatile--" + a.area} key={a.area}>
                      <span className={"w-areatile__dot w-areatile__dot--" + a.area} />
                      <span className="w-areatile__label">{a.label}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="w-profile__portrait">
              <image-slot id="ad-profile-portrait" shape="rect" placeholder="Перетащите фото" src="../../assets/portrait-arthur.jpeg"></image-slot>
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.About = About;
})();