/* global React, PixelMosaic, DirTexture */

// ============================================================
// SHARED PIECES
// ============================================================

function Photo({ tone = "warm", label, children, style }) {
  return (
    <div className={`photo-placeholder tone-${tone}`} style={style}>
      <div className="ph-label">{label || "[фото]"}</div>
      {children}
    </div>
  );
}

function ArrowIcon() {
  return (
    <svg viewBox="0 0 12 12" fill="none">
      <path d="M2 6h8M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>
  );
}

// ============================================================
// TOPBAR
// ============================================================

function TopBar() {
  const links = [
    { label: "Что это", href: "#what" },
    { label: "Направления", href: "#directions" },
    { label: "Соавторы", href: "#collab" },
    { label: "Финал", href: "#prizes" },
    { label: "Сроки", href: "#timeline" },
    { label: "FAQ", href: "#faq" },
  ];
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <a href="#" className="topbar-logo">
          <span className="topbar-mark">
            <span /><span /><span />
            <span /><span /><span />
            <span /><span /><span />
          </span>
          <span>Творцы.РФ</span>
        </a>
        <nav className="topbar-nav">
          {links.map((l) => (
            <a key={l.href} href={l.href}><span className="dot" />{l.label}</a>
          ))}
        </nav>
        <button className="btn">
          Подать заявку <ArrowIcon />
        </button>
      </div>
    </header>
  );
}

// ============================================================
// HERO
// ============================================================

function Hero({ tezis }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-inner">
        <div className="hero-meta">
          <div className="cell">
            <span className="label">№</span>
            <span className="value">ТВ.РФ — 26 / SE-001</span>
          </div>
          <div className="cell">
            <span className="label">Цикл</span>
            <span className="value">Апрель — Ноябрь 2026</span>
          </div>
          <div className="cell">
            <span className="label">Финал</span>
            <span className="value">Москва, ноябрь 2026</span>
          </div>
          <div className="cell">
            <span className="label">Возраст</span>
            <span className="value">14 — 35 лет</span>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <PixelMosaic
            seed={4}
            cols={28} rows={14} cell={10} gap={2}
            color="#B8C5D6" color2="#E2C9CA"
            density={0.45} blobs={3}
            className="pixel-mosaic hero-mosaic-a"
          />
          <PixelMosaic
            seed={11}
            cols={18} rows={20} cell={10} gap={2}
            color="#E2C9CA" color2="#B8C5D6"
            density={0.48} blobs={3}
            className="pixel-mosaic hero-mosaic-b"
          />

          <div className="hero-grid" style={{ position: "relative", zIndex: 2 }}>
            <div>
              <h1 className="hero-title">
                Год работы.<br />
                Полгода<br />
                <em>в кадре.</em>
              </h1>
            </div>
            <div>
              <div className="hero-image">
                <span className="corner tl">SCN—01</span>
                <span className="corner tr">14:22:08</span>
                <span className="corner bl">сцена, прогон</span>
                <span className="corner br">36mm · iso 1600</span>
                <Photo tone="deep" label="[видео-фон: монтаж, репетиция, экран в работе — приглушённо, документальный свет]" />
              </div>
              <p className="hero-sub" style={{ marginTop: 32 }}>
                Фестиваль-конкурс для авторов <strong>14—35 лет</strong>.
                Пять направлений: аудио, визуал, танец, медиа, синтез.
                Полгода работы от заявки до финала в Москве.
              </p>
              <div className="hero-cta-row">
                <button className="btn">Подать заявку <ArrowIcon /></button>
                <span className="hero-deadline">
                  заявки до <strong>1 июня 2026</strong>
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Тезис — одна фраза */}
        <div className="tezis-row">
          <div className="tezis-label">
            [ТЕЗИС&nbsp;·&nbsp;PLACEHOLDER]<br />
            одной строкой
          </div>
          <div className="tezis">
            Творцы.РФ — это{" "}
            <span className="mark">полугодовой цикл</span>,
            где автор делает работу и выводит её на сцену в Москве.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ЧТО ЭТО + ANTI-POSITIONING
// ============================================================

function WhatIs() {
  return (
    <section id="what" className="section" data-screen-label="02 Что это">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">02 / Что это</div>
          </div>
          <div>
            <h2 className="section-title">
              Полгода между заявкой и&nbsp;сценой. Грант, мастерские, продакшн —&nbsp;на одно произведение.
            </h2>
          </div>
        </div>

        <div className="what-grid">
          <div className="what-cell">
            <div className="num">A · Возраст</div>
            <div className="big">14<span style={{ color: "var(--mute-2)" }}>—</span>35</div>
            <div className="small">Авторы с собственным голосом. Регионы РФ + иностранные студенты в России из БРИКС, ШОС, СНГ.</div>
          </div>
          <div className="what-cell">
            <div className="num">B · Направления</div>
            <div className="big">5</div>
            <div className="small">Аудио, визуал, танец, медиа, синтез. Можно подать в одно или собраться в команду на стыке.</div>
          </div>
          <div className="what-cell">
            <div className="num">C · Цикл</div>
            <div className="big">6 мес.</div>
            <div className="small">Заявка → мастерские → показы → шорт-лист → финал. Дедлайны фиксированные.</div>
          </div>
        </div>

        <div className="anti-row">
          <div className="label">anti-positioning · чем не является</div>
          <div className="anti-list">
            <div className="anti-item"><s>open call</s></div>
            <div className="anti-item"><s>питч-сессия</s></div>
            <div className="anti-item"><s>конкурс на один вечер</s></div>
            <div className="anti-item"><s>лагерь молодёжных лидеров</s></div>
            <div className="anti-item"><s>акселератор</s></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ОДИН ИЛИ ВМЕСТЕ — COLLABORATION
// ============================================================

function CollabSchema() {
  // Profiles and lines drawn explicitly so we control positions.
  // Connections animate in on scroll-into-view.
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach((e) => e.isIntersecting && setActive(true)),
      { threshold: 0.4 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  // node positions in % of stage
  const nodes = [
    { id: "a", x: 18, y: 25, role: "Композитор", name: "AUTH—01", region: "Казань" },
    { id: "b", x: 14, y: 72, role: "Хореограф", name: "AUTH—04", region: "СПб" },
    { id: "c", x: 78, y: 22, role: "Motion-дизайнер", name: "AUTH—09", region: "Алматы" },
    { id: "d", x: 82, y: 70, role: "Режиссёр", name: "AUTH—12", region: "Москва" },
  ];
  const project = { x: 50, y: 48 };

  return (
    <div className="collab-stage" ref={ref}>
      <div className="gridbg" />
      <svg
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", zIndex: 2 }}
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
      >
        <defs>
          <pattern id="d-pattern" x="0" y="0" width="2" height="2" patternUnits="userSpaceOnUse">
            <rect width="0.8" height="0.8" fill="rgba(21,21,26,0.5)" />
          </pattern>
        </defs>
        {nodes.map((n, i) => (
          <line
            key={n.id}
            x1={n.x} y1={n.y}
            x2={project.x} y2={project.y}
            stroke="#15151A"
            strokeWidth="0.2"
            strokeDasharray="0.6 0.6"
            style={{
              strokeDashoffset: active ? 0 : 200,
              transition: `stroke-dashoffset 1.4s ${i * 0.15}s ease-out`,
            }}
            pathLength="200"
          />
        ))}
        {/* outer ring around project */}
        <circle cx={project.x} cy={project.y} r="9" fill="none" stroke="#15151A" strokeWidth="0.15" opacity={active ? 0.4 : 0} style={{ transition: "opacity 0.6s 0.6s" }} />
        <circle cx={project.x} cy={project.y} r="14" fill="none" stroke="#15151A" strokeWidth="0.12" opacity={active ? 0.2 : 0} style={{ transition: "opacity 0.6s 0.9s" }} />
      </svg>

      {nodes.map((n) => (
        <div
          key={n.id}
          className="profile-node"
          style={{
            left: `${n.x}%`, top: `${n.y}%`,
            transform: "translate(-50%, -50%)",
            opacity: active ? 1 : 0,
            transition: "opacity 0.5s ease-out",
            transitionDelay: "0.1s",
          }}
        >
          <div className="avatar">
            <PixelMosaic
              seed={n.id.charCodeAt(0)}
              cols={6} rows={6} cell={6} gap={1}
              color={n.id === "a" ? "#B8C5D6" : n.id === "b" ? "#E2C9CA" : n.id === "c" ? "#D6CFC1" : "#A8B6C9"}
              density={0.55} blobs={2} rounded scatter={false}
              style={{ position: "absolute" }}
            />
          </div>
          <div className="name">{n.name}</div>
          <div className="role">{n.role} · {n.region}</div>
        </div>
      ))}

      <div
        className="collab-project"
        style={{
          left: `${project.x}%`, top: `${project.y}%`,
          transform: "translate(-50%, -50%)",
          opacity: active ? 1 : 0,
          transition: "opacity 0.6s 0.4s ease-out",
        }}
      >
        <span style={{ width: 6, height: 6, background: "var(--rose)", borderRadius: "50%" }} />
        Проект · SE-074
      </div>

      {/* corner labels around stage */}
      <span className="mono" style={{ position: "absolute", top: 14, left: 16, color: "var(--mute)" }}>fig. 01 — связь авторов</span>
      <span className="mono" style={{ position: "absolute", top: 14, right: 16, color: "var(--mute)" }}>n = 4 · region: РФ + БРИКС</span>
      <span className="mono" style={{ position: "absolute", bottom: 14, left: 16, color: "var(--mute)" }}>линии прорисовываются по скроллу</span>
      <span className="mono" style={{ position: "absolute", bottom: 14, right: 16, color: "var(--mute)" }}>→ один проект, четыре автора</span>
    </div>
  );
}

function CollabPairs() {
  const pairs = [
    { a: { name: "Аудио", color: "var(--blue)" }, b: { name: "Визуал", color: "var(--rose)" }, out: "Аудио-визуальная инсталляция" },
    { a: { name: "Танец", color: "var(--rose)" }, b: { name: "Медиа", color: "var(--blue-deep)" }, out: "Перформанс с проекцией" },
    { a: { name: "Композитор", color: "var(--blue)" }, b: { name: "Хореограф", color: "var(--rose-deep)" }, out: "Партитура и движение" },
    { a: { name: "Motion", color: "var(--rose)" }, b: { name: "AI-художник", color: "var(--blue)" }, out: "Процедурный визуал" },
    { a: { name: "Режиссёр", color: "var(--blue-deep)" }, b: { name: "Композитор", color: "var(--rose)" }, out: "Короткий метр" },
    { a: { name: "Танец", color: "var(--rose-deep)" }, b: { name: "Аудио", color: "var(--blue)" }, out: "Сольная сцена" },
  ];
  return (
    <div className="pair-grid">
      {pairs.map((p, i) => (
        <div className="pair" key={i}>
          <div className="equation">
            <span className="chip"><span className="chip-dot" style={{ background: p.a.color }} />{p.a.name}</span>
            <span className="arrow">+</span>
            <span className="chip"><span className="chip-dot" style={{ background: p.b.color }} />{p.b.name}</span>
            <span className="arrow">=</span>
          </div>
          <div className="out">{p.out}</div>
        </div>
      ))}
    </div>
  );
}

function Collab() {
  return (
    <section id="collab" className="section" data-screen-label="03 Один или вместе">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">03 / Один или вместе</div>
          </div>
          <div>
            <h2 className="section-title">
              Одному не вытянуть.<br />
              На фестивале можно собрать команду.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 540 }}>
              Соавторы — другие участники из регионов России и иностранные студенты, которые здесь учатся. Не сноска. Одно из главных предложений фестиваля.
            </p>
            <div style={{ marginTop: 28, display: "flex", gap: 12, alignItems: "center" }}>
              <button className="btn btn-ghost">Найти соавтора <ArrowIcon /></button>
              <span className="mono" style={{ color: "var(--mute)" }}>
                <span style={{ display: "inline-block", width: 8, height: 8, background: "var(--rose-deep)", borderRadius: "50%", marginRight: 8, verticalAlign: "middle" }} />
                механизм мэтчинга финализируется
              </span>
            </div>
          </div>
        </div>

        <CollabSchema />

        <div style={{ marginTop: 64, display: "grid", gridTemplateColumns: "220px 1fr", gap: 48 }}>
          <div>
            <div className="mono" style={{ color: "var(--mute)" }}>fig. 02</div>
            <div style={{ marginTop: 6, fontSize: 17, lineHeight: 1.4 }}>Типичные сочетания направлений и что из них получается</div>
          </div>
          <CollabPairs />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { TopBar, Hero, WhatIs, Collab, Photo, ArrowIcon });