// Обо мне — имя + позиционирование + портрет, на светлом фоне.
(function () {
  const AREAS = [
    { area: "arbitration", icon: "../../assets/arbitrage.png", title: "Международный коммерческий арбитраж" },
    { area: "itip", icon: "../../assets/itip.png", title: "IT/IP" },
    { area: "crypto", icon: "../../assets/crypto.png", title: "Регулирование криптовалют" },
    { area: "other", icon: "../../assets/else.png", title: "Иные гражданско-правовые отрасли" },
  ];

  const PORTRAIT = "../../assets/portrait-arthur.jpeg";

  // SplitText (по мотивам React Bits) — слова появляются со сдвигом и затуханием,
  // запуск по входу в вьюпорт. Без gsap: stagger через CSS animation-delay.
  function SplitText({ text, bold = [], italic = [], blue = [] }) {
    const ref = React.useRef(null);
    const [inView, setInView] = React.useState(false);
    React.useEffect(() => {
      const el = ref.current;
      if (!el) return;
      if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) { setInView(true); return; }
      const io = new IntersectionObserver((es) => {
        es.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
      }, { threshold: 0.12 });
      io.observe(el);
      return () => io.disconnect();
    }, []);
    const words = text.split(" ");
    const clean = (w) => w.replace(/[.,—–]/g, "");
    const isBold = (w) => bold.indexOf(clean(w)) >= 0;
    const isItalic = (w) => italic.indexOf(clean(w)) >= 0;
    // Фразовая синяя подсветка: помечаем непрерывную последовательность слов фразы.
    const blueSet = new Set();
    blue.forEach((phrase) => {
      const pw = phrase.split(" ").map(clean);
      for (let i = 0; i + pw.length <= words.length; i++) {
        let ok = true;
        for (let j = 0; j < pw.length; j++) { if (clean(words[i + j]) !== pw[j]) { ok = false; break; } }
        if (ok) { for (let j = 0; j < pw.length; j++) blueSet.add(i + j); break; }
      }
    });
    return (
      <p ref={ref} className={"w-profile__desc w-split" + (inView ? " is-in" : "")}>
        {(() => {
          const out = [];
          let i = 0;
          while (i < words.length) {
            if (blueSet.has(i)) {
              // Подсвеченная фраза: вся фраза лежит в одном .w-marker, поэтому линия
              // проходит непрерывно (идеально, как в «Пишите в любое время»). Слова
              // внутри по-прежнему появляются пословно (.w-split__w + stagger).
              const run = [];
              while (i < words.length && blueSet.has(i)) { run.push(i); i++; }
              const inner = [];
              run.forEach((wi, k) => {
                inner.push(<span className="w-split__w" key={wi} style={{ animationDelay: (wi * 0.035) + "s" }}>{words[wi]}</span>);
                if (k < run.length - 1) inner.push(" ");
              });
              out.push(<span className="w-marker w-split__phrase" key={"ph" + run[0]}>{inner}</span>);
            } else {
              const wi = i;
              const w = words[wi];
              const cls = "w-split__w" + (isBold(w) ? " w-split__w--b" : "") + (isItalic(w) ? " w-split__w--i" : "");
              out.push(<span className={cls} key={wi} style={{ animationDelay: (wi * 0.035) + "s" }}>{w}</span>);
              i++;
            }
            if (i < words.length) out.push(" ");
          }
          return out;
        })()}
      </p>
    );
  }

  function About() {
    const [open, setOpen] = React.useState(false);
    React.useEffect(() => {
      if (!open) return;
      const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
      window.addEventListener("keydown", onKey);
      return () => window.removeEventListener("keydown", onKey);
    }, [open]);

    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>
              <SplitText bold={["Артур", "Демченко"]}
                text="Меня зовут Артур Демченко, я студент 3 курса юрфака БГУ и юрист. Я практикую преимущественно в сферах криптовалют и международного коммерческого арбитража, но интересуюсь и другими отраслями права." />
              <SplitText blue={["не кажутся мне привлекательными"]}
                text="В условиях, которые диктует современный мир, традиционные пути развития юридической карьеры не кажутся мне привлекательными. Я бы даже сказал, что они кажутся мне скучными." />
              <SplitText blue={["каким может быть юрист в 2026 году"]}
                text="Поэтому я решил объединить свои увлечения, – интерес к юриспруденции, тягу к созданию контента, владение новыми технологиями, – под одним брендом, чтобы показать, каким может быть юрист в 2026 году." />
            </div>
            <div className="w-profile__portrait">
              <image-slot id="ad-profile-portrait" shape="rect" placeholder="Перетащите фото" src={PORTRAIT}></image-slot>
              <button type="button" className="w-portrait-open" onClick={() => setOpen(true)}
                      aria-label="Открыть фото в полном размере">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6"/><path d="M9 21H3v-6"/><path d="M21 3l-7 7"/><path d="M3 21l7-7"/></svg>
              </button>
            </div>
          </div>

          {open && (
            <div className="w-lightbox" onClick={() => setOpen(false)} role="dialog" aria-modal="true">
              <button type="button" className="w-lightbox__close" aria-label="Закрыть"
                      onClick={() => setOpen(false)}>
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
              </button>
              <img className="w-lightbox__img" src={PORTRAIT} alt="Артур Демченко"
                   onClick={(e) => e.stopPropagation()} />
            </div>
          )}

          <div className="w-practice-col">
            <div className="w-practice-col__h">Сферы интересов</div>
            <div className="w-areacards">
              {AREAS.map((a) => (
                <div className={"w-areacard w-areacard--" + a.area} key={a.area}>
                  <span className={"w-areacard__dot w-areacard__dot--" + a.area} />
                  <img className="w-areacard__icon" src={a.icon} alt="" aria-hidden="true" />
                  <h3 className="w-areacard__title">{a.title}</h3>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }
  window.About = About;
})();