/* global React, PixelMosaic, DirTexture, ArrowIcon */

// ============================================================
// ПЯТЬ НАПРАВЛЕНИЙ
// ============================================================

function Directions() {
  const dirs = [
    {
      n: "01", kind: "audio", name: "Аудио",
      genres: "Композиция · саунд-дизайн · экспериментальная электроника · песня · полевая запись",
      cond: "соло или коллаб", tag: "demo · 1—2 трека",
      mosaicColor: "#B8C5D6", size: "size-3",
    },
    {
      n: "02", kind: "visual", name: "Визуал",
      genres: "Иллюстрация · моушн · 3D · AI · фотография · графика серией",
      cond: "соло или коллаб", tag: "портфолио · 8—12 работ",
      mosaicColor: "#E2C9CA", size: "size-3",
    },
    {
      n: "03", kind: "dance", name: "Танец",
      genres: "Современная хореография · перформанс · contemporary",
      cond: "соло или ансамбль", tag: "видео · 3—5 мин",
      mosaicColor: "#D6CFC1", size: "size-2",
    },
    {
      n: "04", kind: "media", name: "Медиа",
      genres: "Короткий метр · док · экспериментальное видео · реклама",
      cond: "соло или команда", tag: "1 фильм · до 15 мин",
      mosaicColor: "#A8B6C9", size: "size-4",
    },
    {
      n: "05", kind: "synthesis", name: "Синтез",
      genres: "Произведение на стыке направлений: AV-перформанс, инсталляция, медиа-балет, генеративный театр",
      cond: "только команда · 2—5 авторов · из разных направлений",
      tag: "главная номинация · грант ×2",
      mosaicColor: "#B8C5D6", size: "size-feature",
    },
  ];

  return (
    <section id="directions" className="section" data-screen-label="04 Направления">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">04 / Направления</div>
          </div>
          <div>
            <h2 className="section-title">
              Пять направлений.<br />
              Пятое — главное.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 480 }}>
              Подать заявку можно в одно из четырёх классических направлений или в синтез — произведение, которое собирается на стыке.
            </p>
          </div>
        </div>

        <div className="dir-grid">
          {dirs.map((d) => (
            <div className={`dir-card ${d.size}`} key={d.n}>
              <div className="dir-head">
                <div className="dir-num">{d.n} / {d.kind.toUpperCase()}</div>
                <div className="dir-tag">{d.tag}</div>
              </div>
              <div className="dir-texture" aria-hidden>
                {d.size === "size-feature" ? (
                  <DirTexture kind={d.kind} size={220} mono />
                ) : (
                  <DirTexture kind={d.kind} size={88} />
                )}
              </div>
              <div className="dir-name">{d.name}</div>
              <div className="dir-genres">{d.genres}</div>
              <div className="dir-cond">
                <span>{d.cond}</span>
                <span>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ЧТО ПОЛУЧАЮТ ФИНАЛИСТЫ
// ============================================================

function Prizes() {
  const minis = [
    { title: "Оборудование", desc: "Доступ к студиям, монтажным, сценам — на цикл работы." },
    { title: "Продакшн", desc: "Команда фестиваля закрывает производство финальной работы." },
    { title: "Статус", desc: "Победители заходят в резиденции и фестивали-партнёры вне очереди." },
    { title: "Поддержка", desc: "Юридическое сопровождение, права остаются за автором." },
  ];
  return (
    <section id="prizes" className="section" data-screen-label="05 Финал">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">05 / Что получают финалисты</div>
          </div>
          <div>
            <h2 className="section-title">
              Грант на следующий проект — не приз за этот.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 520 }}>
              Деньги идут в работу, не на стол. Минимумы — из положения. Конкретные суммы и формы поддержки могут вырасти к финалу.
            </p>
          </div>
        </div>

        <div className="prize-row">
          <div className="prize-hero">
            <div style={{ position: "relative", zIndex: 2 }}>
              <div className="label">грант на продакшн · номинант</div>
              <div className="amount">
                <span className="from">от</span>
                300 000<span className="ruble">₽</span>
              </div>
              <div style={{ marginTop: 24, color: "rgba(255,255,255,0.7)", fontSize: 15, lineHeight: 1.5, maxWidth: 460 }}>
                Сумма — минимум по положению. Гран-при и победители в номинациях получают больше. Грант перечисляется на следующий проект, а не на гонорар за финальную работу.
              </div>
            </div>
            <PixelMosaic
              seed={7}
              cols={32} rows={14} cell={8} gap={2}
              color="#E2C9CA" color2="#B8C5D6"
              density={0.42} blobs={3}
              style={{ position: "absolute", right: -60, bottom: -30, width: 540, opacity: 0.55 }}
            />
            <div className="foot">
              <span>гран-при, синтез — ×2</span>
              <span>выплата · 2027</span>
            </div>
          </div>

          <div className="prize-side">
            {minis.map((m, i) => (
              <div className="prize-mini" key={i}>
                <div className="icon">
                  <PixelMosaic
                    seed={i * 3 + 2}
                    cols={5} rows={5} cell={7} gap={1}
                    color={i % 2 ? "#A8B6C9" : "#C9A8AB"}
                    density={0.6} blobs={1} rounded scatter={false}
                  />
                </div>
                <div className="text-block">
                  <div className="title">{m.title}</div>
                  <div className="desc">{m.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ЭКСПЕРТЫ
// ============================================================

function Experts() {
  // Per brief: лучше 3 карточки с реальной фактурой, чем 10 с пустыми регалиями.
  // 3 placeholder cards + 1 "будет объявлено" tile.
  const experts = [
    { name: "Имя будет объявлено", role: "Композитор · работает с симфоническими оркестрами и электроникой", lead: "Аудио · мастерская" },
    { name: "Имя будет объявлено", role: "Режиссёр документального кино, фильмы в международном прокате", lead: "Медиа · мастерская" },
    { name: "Имя будет объявлено", role: "Хореограф, ставит для российских и зарубежных трупп", lead: "Танец · мастерская" },
  ];
  return (
    <section id="experts" className="section" data-screen-label="06 Эксперты">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">06 / Эксперты</div>
            <div className="mono" style={{ marginTop: 12, color: "var(--rose-deep)" }}>
              <span style={{ display: "inline-block", width: 8, height: 8, background: "var(--rose-deep)", borderRadius: "50%", marginRight: 6, verticalAlign: "middle" }} />
              имена утверждаются
            </div>
          </div>
          <div>
            <h2 className="section-title">
              Старшие практики, не лекторы.
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", maxWidth: 480 }}>
              Каждое направление ведёт человек, который работает в нём прямо сейчас. Не «звёзды», а те, кто разбирается в материале.
            </p>
          </div>
        </div>

        <div className="experts-grid">
          {experts.map((e, i) => (
            <div className="expert-card" key={i}>
              <div className="expert-photo">
                <Photo tone={i === 0 ? "blue" : i === 1 ? "warm" : "rose"} label="[рабочее фото · не глянец]" />
              </div>
              <div className="expert-meta">
                <div className="expert-name">{e.name}</div>
                <div className="expert-role">{e.role}</div>
                <div className="expert-tag">{e.lead}</div>
              </div>
            </div>
          ))}
          <div className="expert-card pending">
            <div className="expert-photo">
              <div className="ph-label">[будет<br />объявлено<br />к маю]</div>
            </div>
            <div className="expert-meta">
              <div className="expert-name" style={{ color: "var(--mute)" }}>Анонс эксперта</div>
              <div className="expert-role">Состав по направлениям визуал и синтез будет объявлен к старту приёма заявок.</div>
              <div className="expert-tag">подписаться на анонс →</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ТАЙМЛАЙН / СРОКИ
// ============================================================

function Timeline() {
  const stops = [
    { date: "1 апр", title: "Открытие заявок", desc: "Анкета, портфолио, одна работа на выбор.", state: "past" },
    { date: "1 июн", title: "Дедлайн заявок", desc: "Шорт-лист собирает кураторская команда.", state: "now" },
    { date: "июль — сент", title: "Мастерские, показы", desc: "Полгода работы над финальным произведением.", state: "future" },
    { date: "октябрь", title: "Шорт-лист", desc: "Список финалистов и пары-коллаборации.", state: "future" },
    { date: "ноябрь", title: "Финал · Москва", desc: "Сцена, выставка, показы. Площадка уточняется.", state: "future" },
  ];
  const progress = (stops.findIndex((s) => s.state === "now") + 0.5) / stops.length * 100;
  return (
    <section id="timeline" className="section section-tight" data-screen-label="07 Сроки">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">07 / Сроки</div>
          </div>
          <div>
            <h2 className="section-title">Цикл за три секунды.</h2>
          </div>
        </div>

        <div className="timeline">
          <div className="timeline-track">
            <div className="timeline-rule" />
            <div className="timeline-fill" style={{ width: `${progress}%` }} />
            {stops.map((s, i) => (
              <div className={`tl-stop ${s.state}`} key={i}>
                <div className="tl-dot" />
                <div className="tl-date">{s.date} · 2026</div>
                <div className="tl-title">{s.title}</div>
                <div className="tl-desc">{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    {
      q: "Кому остаются права на работу?",
      a: <span><span className="pending">точная формулировка из положения</span> Авторское право и исключительные права остаются за автором. Фестиваль получает право показа работы на площадках цикла и использования в архиве и анонсах. Любое коммерческое использование — по отдельному договору.</span>,
    },
    {
      q: "Что считается «синтезом» — главным направлением?",
      a: "Произведение, которое нельзя отнести к одному направлению. Аудио-визуальный перформанс, медиа-балет, генеративная инсталляция, документальный фильм с собственным саундтреком и движением. Команда от двух до пяти человек из разных направлений.",
    },
    {
      q: "Можно ли подавать в несколько направлений?",
      a: "Можно одну заявку как автор и сколько угодно как соавтор в чужих заявках. Все заявки должны быть разными работами.",
    },
    {
      q: "Что если у меня нет команды, а хочется в синтез?",
      a: <span>На фестивале есть механизм мэтчинга — он подберёт соавторов из других направлений по интересам и материалу. <span className="pending">формат уточняется</span> Подробности — ближе к открытию заявок.</span>,
    },
    {
      q: "Кто такие иностранные студенты в РФ и как они подают?",
      a: "Студенты вузов России из стран БРИКС, ШОС и СНГ — те же условия, что и для граждан РФ. Требуется подтверждение учёбы в российском вузе.",
    },
    {
      q: "Что будет с работой после финала?",
      a: <span><span className="pending">уточняется честный ответ</span> Финальные работы попадают в архив фестиваля и в показы партнёрских площадок в течение года. Гран-при и победители получают грант на следующий проект.</span>,
    },
    {
      q: "Сколько стоит участие?",
      a: "Ничего. Заявка, мастерские, поездка финалистов в Москву, проживание и продакшн — за счёт фестиваля.",
    },
  ];
  return (
    <section id="faq" className="section" data-screen-label="08 FAQ">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">08 / FAQ</div>
          </div>
          <div>
            <h2 className="section-title">Вопросы, которые задают чаще.</h2>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div
              key={i}
              className={`faq-item ${open === i ? "open" : ""}`}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="num">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <div className="q">{it.q}</div>
                <div className="a">{it.a}</div>
              </div>
              <div className="toggle">
                <svg viewBox="0 0 14 14" width="12" height="12" fill="none">
                  <path d="M7 1v12M1 7h12" stroke="currentColor" strokeWidth="1.4" />
                </svg>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ПАРТНЁРЫ
// ============================================================

function Partners() {
  const names = [
    "Фонд «Лидеры будущего»",
    "АСИ", "ПФКИ", "Минкульт",
    "Россотрудничество", "Росмолодёжь",
    "Институт развития интернета", "Mosfilm",
    "ВКонтакте", "MAX", "ВДНХ", "ГЭС-2",
  ];
  return (
    <section id="partners" className="section section-tight" data-screen-label="09 Партнёры">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <div className="section-num">09 / Партнёры</div>
          </div>
          <div>
            <h2 className="section-title">Соорганизаторы и&nbsp;площадки.</h2>
          </div>
        </div>
        <div className="partner-grid">
          {names.map((n, i) => (
            <div className="partner" key={i}>{n}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FOOTER
// ============================================================

function Footer() {
  return (
    <footer className="footer" data-screen-label="10 Подвал">
      <PixelMosaic
        seed={9}
        cols={40} rows={20} cell={10} gap={2}
        color="#E2C9CA" color2="#B8C5D6"
        density={0.5} blobs={4}
        className="pixel-mosaic footer-bg-mosaic"
      />
      <div className="footer-inner">
        <h2 className="footer-cta">
          Заявки<br />
          до <span style={{ color: "var(--rose)" }}>1 июня</span>
        </h2>
        <div style={{ marginTop: 40, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <button className="btn" style={{ background: "var(--paper)", color: "var(--ink)" }}>
            Подать заявку <ArrowIcon />
          </button>
          <span className="mono" style={{ color: "rgba(255,255,255,0.55)" }}>анкета · 12 минут · можно сохранить и вернуться</span>
        </div>

        <div className="footer-row">
          <div>
            <h6>Творцы.РФ — 2026</h6>
            <p>Фестиваль-конкурс для авторов 14—35 лет. Цикл — апрель–ноябрь 2026. Финал в Москве.</p>
          </div>
          <div>
            <h6>Связь</h6>
            <a href="#">Telegram</a>
            <a href="#">ВКонтакте</a>
            <a href="#">MAX</a>
          </div>
          <div>
            <h6>Документы</h6>
            <a href="#">Положение</a>
            <a href="#">Согласие на обработку данных</a>
            <a href="#">Лицензионная справка</a>
          </div>
          <div>
            <h6>Подписаться на анонс</h6>
            <a href="#">e-mail</a>
            <a href="#">Telegram-канал</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© Фонд «Лидеры будущего», 2026</span>
          <span>SE-001 / ТВ.РФ — 26</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Directions, Prizes, Experts, Timeline, FAQ, Partners, Footer });