const { useState, useEffect, useMemo } = React;

/* =========================================================
   TR-CAMP 2026 — main app
   ========================================================= */

const NAV_ITEMS = [
{ id: "program", label: "Программа лагеря" },
{ id: "about", label: "О нас" },
{ id: "price", label: "Стоимость" },
{ id: "reviews", label: "Отзывы участников" },
{ id: "gallery", label: "Галлерея" },
{ id: "faq", label: "FAQ" }];


const PROGRAM_CARDS = [
{
  n: "01",
  title: "Дата и место проведения лагеря",
  body: "29 июня — 4 июля 2026 года\nАдрес: Hanko Santalan Kartanontie 177",
  icon: "29",
  cls: "c1"
},
{
  n: "02",
  title: "Развлекательная программа",
  body: "Вас ждут увлекательные мастер-классы, спортивные соревнования, творческие конкурсы, участие в розыгрыше, вечера у костра и многое другое.",
  icon: "★",
  cls: "c2"
},
{
  n: "03",
  title: "Духовная программа",
  body: "Вас ждут вдохновляющие проповеди, дискуссионные группы, вечера хвалы, а также личные и общие молитвы.",
  icon: "+",
  cls: "c3"
},
{
  n: "04",
  title: "Незабываемые впечатления",
  body: "Погрузитесь в атмосферу дружбы, творчества и взаимопомощи, которая запомнится на всю жизнь.",
  icon: "∞",
  cls: "c4"
}];


const TARIFFS = [
{
  key: "standard",
  name: "Тариф «Стандарт»",
  desc: "",
  items: [
  "Проживание в домиках",
  "Пятиразовое питание",
  "Участие во всей программе лагеря",
  "Участие в розыгрышах с призами",
  "Всё необходимое для комфортного отдыха"],

  price: 140,
  ribbon: "Популярный",
  featured: true
},
{
  key: "guest",
  name: "Тариф «Гость издалека»",
  desc: "Для тех, кто не проживает в Финляндии (например, гости из Эстонии, Испании и других стран) и прилетает специально на лагерь.",
  items: [
  "Проживание в домиках",
  "Пятиразовое питание",
  "Участие во всей программе лагеря",
  "Участие в розыгрышах с призами",
  "Всё необходимое для комфортного отдыха"],

  price: 120
},
{
  key: "tent",
  name: "Тариф «Без стен»",
  desc: "Для тех, кто приезжает со своей палаткой.",
  items: [
  "Пятиразовое питание",
  "Участие во всей программе лагеря",
  "Участие в розыгрышах с призами",
  "Всё необходимое для комфортного отдыха"],

  price: 100
}];


const REVIEWS = [
{
  name: "Александр и Лаура",
  role: "родители Карины",
  initials: "АЛ",
  photo: "photos/review-alex-laura.jpg",
  cls: "r1",
  text: "«Наша дочь побывала в этом лагере, и мы, как родители, остались очень довольны! Это место не только для отдыха, но и для духовного роста. Особенно нам понравилась атмосфера любви и заботы, которая чувствовалась среди вожатых и детей. Кроме того, лагерь предлагал разнообразные спортивные и творческие активности, которые способствовали развитию командного духа, взаимопомощи и дружбы. Дети возвращались домой полные новых впечатлений и новых друзей. Это было незабываемо, и мы с радостью отправим нашего ребенка сюда снова.»"
},
{
  name: "Карина",
  role: "участница",
  initials: "К",
  photo: "photos/review-karina.jpg",
  cls: "r2",
  text: "«Это было одно из самых ярких и запоминающихся летних событий для меня! Каждый день был особенным. Я почувствовала, что здесь можно быть собой.»"
},
{
  name: "Полина",
  role: "участница",
  initials: "П",
  photo: "photos/review-polina.jpg",
  cls: "r3",
  text: "Безумно крутая атмосфера, куча эмоций, отзывчивые ребята, никогда еще такого не видела. Всегда интересная программа, как и активная, так и более спокойная, очень быстро пролетает время там. Очень хорошее проживание, вкусная еда, уютные комнаты, чистые санузлы и душевые. Еще очень много всего, конкурсы, шоу талантов, игры, интерактивы и т. д. Советую!!\n*В предвкушении нового лагеря*"
},
{
  name: "Галина",
  role: "мама Владислава",
  initials: "Г",
  photo: "photos/review-galina.jpg",
  cls: "r4",
  text: "Добрый день, дорогие друзья!\nХочу поделиться своими впечатлениями и мыслями о лагере TR-Camp. Название церкви — «Свет Мира». Вдумайтесь, пожалуйста, в эти слова — какой глубокий смысл они несут.\n\nВ лагере я была уже несколько раз вместе со своим несовершеннолетним сыном. Впечатления — непередаваемые. Атмосфера, взаимопонимание, место и время, где царит только любовь. Ведь Бог — это любовь.\n\nС нетерпением жду следующего лагеря.\nДорогие друзья, кто ещё не был или сомневается в своём решении — могу сказать лично: едьте, даже не задумываясь. Это нужно просто пережить — словами этого не передать"
}];


const FAQ = [
{ q: "Как добраться до лагеря?", a: "Вы можете доехать с организованным трансфером или самостоятельно." },
{ q: "Откуда отправляется автобус?", a: "Ж/д станция Tikkurila (парковка за автобусными платформами)\n🚌 [Остановка](https://tr-camp.short.gy/maps)" },
{ q: "Во сколько выезд и возвращение?", a: "Выезд планируется в 12:00 🕛 возвращение примерно в 16:00 🕓\nПри любых изменениях мы заранее сообщим точную информацию в нашем телеграмм канале." },
{ q: "Сколько стоит трансфер?", a: "Стоимость трансфера составляет 10€" },
{ q: "Можно ли приехать самостоятельно?", a: "Да, можно. В таком случае важно заранее сообщить организаторам." },
{ q: "Можно ли вернуть предоплату, если я не смогу поехать?", a: "Для бронирования места в лагере вносится предоплата 30€. Эта сумма не возвращается, так как она идёт на подготовку лагеря (закупки, организация и т.д.).\nЕсли у вас изменятся планы, обязательно напишите нам как можно раньше — мы постараемся найти решение 🤍" },
{ q: "Что входит в стоимость?", a: "В стоимость лагеря входит проживание, вкусное пятиразовое питание, участие во всей программе (игры, активности, мастер-классы), а также участие в розыгрыше 🎉" },
{ q: "Где мы будем жить?", a: "Проживание зависит от выбранного вами тарифа:\n\n*Тариф «Без стен»*\nВы проживаете в палатке на специально отведённой территории лагеря. При этом участники могут пользоваться всеми удобствами: душем, туалетами и общей инфраструктурой.\n\n*Тариф «Стандарт»*\nВы проживаете в домиках или комнатах на территории лагеря. Размещение — от 2 до 8 человек в комнате, в зависимости от типа домика." },
{ q: "Нужно ли брать постельное бельё или его выдают?", a: "Постельное бельё не предоставляется — пожалуйста, возьмите его с собой. Также советуем взять плед, чтобы вам было ещё уютнее 🤍" },
{ q: "Что если я никогда не был(а) в христианском лагере?", a: "Это вообще не проблема 🙂 Многие приезжают впервые. Обычно уже в первый день находишь новых друзей и чувствуешь себя частью команды." },
{ q: "Что включает духовная программа?", a: "В программе есть общие встречи, прославление, короткие послания и обсуждения в группах. Всё проходит в дружелюбной и открытой атмосфере 🤍" },
{ q: "Кто отвечает за безопасность?", a: "За участниками следит команда наставников и организаторов, которые сопровождают группы на протяжении всего лагеря." },
{ q: "Есть ли медицинская помощь?", a: "Да, в лагере есть ответственный за первую помощь. В случае необходимости будет оказана помощь и организовано обращение к врачам." },
{ q: "Что обязательно взять?", a: "Одежду по погоде, удобную обувь, средства личной гигиены, полотенце и хорошее настроение\nОстальной список будет в нашем Telegram-канале." },
{ q: "Что не нужно брать?", a: "Дорогие вещи, которые вы боитесь потерять, а также всё, что может мешать другим участникам. Сигареты, алкоголь и прочие запрещённые вещества." },
{ q: "Нужны ли деньги с собой?", a: "Основные расходы уже включены, но можно взять немного денег на кофешоп, расположенный на территории лагеря." }];


/* ---------------- NAV ---------------- */
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo">
          <span className="dot"></span>
          TR-CAMP
        </a>
        <div className="nav-links">
          {NAV_ITEMS.map((i) =>
          <a key={i.id} href={`#${i.id}`}>{i.label}</a>
          )}
        </div>
        <a href="#register" className="nav-cta">Регистрация →</a>
      </div>
    </nav>);

}

/* ---------------- HERO ---------------- */
function Hero() {
  return (
    <header className="hero wrap" id="top">
      <h1 className="hero-title">
        <div><span>Добро</span> <span className="it pink">пожаловать</span></div>
        <div className="hero-line-transform">в <span className="stroke">Transformation</span></div>
        <div><span style={{ color: "var(--pink)" }}>Camp</span><span style={{ color: "var(--ink)" }}>.</span></div>
      </h1>

      {/* Desktop-only absolute stickers */}
      <div className="sticker s-pink starburst hero-sticker-abs hero-sticker-date">
        29 ИЮНЯ<br />↓<br />4 ИЮЛЯ
      </div>
      <div className="sticker s-aqua round hero-sticker-abs hero-sticker-hanko" style={{ fontSize: 14, transform: "rotate(8deg)" }}>
        HANKO, FI 📍
      </div>
      <div className="sticker s-sun round hero-sticker-abs hero-sticker-lf" style={{ fontSize: 14, transform: "rotate(-10deg)" }}>
        LOST &amp; FOUND ✶
      </div>

      {/* Mobile-only: starburst left + two pills stacked right */}
      <div className="hero-stickers-mobile">
        <div className="sticker s-pink starburst hero-sticker-mobile-star">29 ИЮНЯ<br/>↓<br/>4 ИЮЛЯ</div>
        <div className="hero-stickers-pills">
          <div className="sticker s-aqua round" style={{ fontSize: 13, transform: "rotate(4deg)" }}>HANKO, FI 📍</div>
          <div className="sticker s-sun round" style={{ fontSize: 13, transform: "rotate(-5deg)" }}>LOST &amp; FOUND ✶</div>
        </div>
      </div>

      <div className="hero-grid" style={{ marginTop: 40 }}>
        <div>
          <p className="hero-sub">
            Здесь вас ждут яркие моменты, новые знакомства и шанс отвлечься от повседневных забот. Присоединяйтесь, чтобы провести время в компании единомышленников и вдохновиться.
          </p>
          <div className="hero-cta-row">
            <a href="#about" className="btn">Узнать больше</a>
            <a href="#register" className="btn pink">
              Регистрация
              <svg className="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                <path d="M5 12h14M13 5l7 7-7 7" />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </header>);

}

/* ---------------- MARQUEE ---------------- */
function Marquee({ items, variant = "" }) {
  const row = items.flatMap((t, i) => [<span key={`a${i}`}>{t}</span>, <span className="dot" key={`d${i}`}></span>]);
  return (
    <div className={`marquee ${variant}`}>
      <div className="marquee-track">
        <span>{row}</span>
        <span>{row}</span>
      </div>
    </div>);

}

/* ---------------- ABOUT ---------------- */
function About() {
  return (
    <section className="section" id="about">
      <div className="about">
        <span className="about-eyebrow">● О НАС</span>
        <h2 className="about-h">
          Уже <em>пятый год</em> мы<br />собираем своих.
        </h2>
        <div className="about-grid">
          <div className="about-text">
            <p>
              <strong>Transformation Camp</strong> — это христианский молодежный лагерь, организованный евангельской церковью. Уже пятый год мы собираем подростков и молодежь, чтобы вместе прожить незабываемые 6 дней – полные ярких эмоций, активных игр, вдохновляющих встреч и теплого общения.
            </p>
            <p>Мы создаем атмосферу поддержки и роста, где каждый может:</p>
            <ul className="about-bullets">
              <li><span className="b-num">01</span> Укрепить свою веру</li>
              <li><span className="b-num">02</span> Найти настоящих друзей</li>
              <li><span className="b-num">03</span> Научиться работать в команде</li>
              <li><span className="b-num">04</span> Зарядиться вдохновением на новые свершения</li>
            </ul>
            <a href="#register" className="btn lime" style={{ marginTop: 12 }}>
              Зарегестрироваться
              <svg className="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
            </a>
          </div>
          <aside className="about-side">
            <div className="mission-card">
              <h4>Наша миссия</h4>
              <p style={{ marginBottom: 12 }}>
                Мы верим, что каждый подросток уникален и имеет огромный потенциал. Наша цель – помочь молодежи расти духовно, развивать лидерские качества и учиться жить осознанно и смело.
              </p>
              <p>
                Через совместные активности, наставничество и глубокие беседы мы вдохновляем участников быть верными своим принципам, открытыми к новым вызовам и готовыми помогать другим.
              </p>
              <p style={{ marginTop: 14, fontWeight: 700 }}>
                Присоединяйся к нам и стань частью большой TR-CAMP семьи!
              </p>
            </div>
          </aside>
        </div>
      </div>
    </section>);

}

/* ---------------- PROGRAM ---------------- */
function Program() {
  return (
    <section className="section wrap" id="program">
      <span className="sticker s-ink round" style={{ position: "static", display: "inline-flex", marginBottom: 16, fontSize: 13 }}>
        ● ПРОГРАММА — 6 ДНЕЙ
      </span>
      <h2 className="program-h">
        Узнайте о нашей <span className="it">программе</span>
      </h2>

      <div className="program-theme" style={{ marginTop: 32 }}>
        <span className="label">Тема этого года</span>
        <div className="name">
          <span>«Lost</span>{" "}
          <span>&amp;</span>{" "}
          <span>Found»</span>
        </div>
      </div>

      <p className="program-intro">
        Это история о Боге, Который ищет человека, говорит с ним и зовёт к близким отношениям.
        В течение лагеря мы будем рассуждать о том, как Бог говорит, ведёт и почему Он так сильно хочет, чтобы человек был рядом с Ним.
      </p>

      <div className="program-grid">
        {PROGRAM_CARDS.map((c) =>
        <div key={c.n} className={`prog-card ${c.cls}`}>
            <div>
              <div className="num">{c.n} / 04</div>
              <h4>{c.title}</h4>
              <p style={{ whiteSpace: "pre-line" }}>{c.body}</p>
            </div>
            <div className="icon">{c.icon}</div>
          </div>
        )}
      </div>
    </section>);

}

/* ---------------- PRICING ---------------- */
function Pricing() {
  return (
    <section className="section pricing" id="price">
      <div className="wrap">
        <div className="pricing-head">
          <h2>
            Стоимость участия<br />в <span className="script" style={{ fontWeight: 700, fontSize: "1.1em" }}>молодёжном</span> лагере
          </h2>
          <p>
            Узнайте подробности о стоимости участия в нашем замечательном лагере, а также о всех условиях, необходимых для успешной регистрации.
          </p>
        </div>

        <div className="pricing-grid">
          {TARIFFS.map((t) =>
          <div key={t.key} className={`tariff ${t.featured ? "featured" : ""}`}>
              {t.ribbon && <span className="ribbon">★ {t.ribbon}</span>}
              <h4>{t.name}</h4>
              {t.desc && <div className="desc">{t.desc}</div>}
              <ul>
                {t.items.map((it, i) => <li key={i}>{it}</li>)}
              </ul>
              <div className="price">{t.price}<small>€</small></div>
            </div>
          )}
        </div>

        <div className="booking-row">
          <div className="b-price">30€</div>
          <div className="b-text">
            <b>Бронирование места.</b>{" "}
            После регистрации мы обязательно свяжемся с вами через Telegram или электронную почту, которую вы указали, и отправим все необходимые реквизиты для оплаты. Если возникнут вопросы — мы всегда на связи!
          </div>
          <a href="#register" className="btn lime">
            Забронировать
            <svg className="arr" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
        </div>

        <div style={{ marginTop: 28 }}>
          <span className="pricing-note">⚠ Регистрация обязательна. Без регистрации участие в лагере невозможно.</span>
        </div>
      </div>
    </section>);

}

/* ---------------- REVIEWS ---------------- */
function Reviews() {
  return (
    <section className="section wrap" id="reviews">
      <div className="reviews-head">
        <h2>
          Отзывы <span className="it">участников</span>
        </h2>
        <span className="sticker s-ink round" style={{ position: "static", fontSize: 13 }}>
          ❤ {REVIEWS.length} ИСТОРИИ
        </span>
      </div>
      <div className="reviews-grid">
        {REVIEWS.map((r, i) =>
        <div key={i} className={`review ${r.cls}`}>
            <span className="quote-mark">"</span>
            <div className="who">
              <image-slot
                id={`review-avatar-${i}`}
                shape="circle"
                src={r.photo}
                style={{ width: 64, height: 64, flexShrink: 0, border: "2px solid var(--ink)", borderRadius: "50%" }}
                placeholder="Фото">
              </image-slot>
              <div>
                <div className="name-block">{r.name}</div>
                <div className="role">{r.role}</div>
              </div>
            </div>
            <p>{renderReview(r.text)}</p>
          </div>
        )}
      </div>
    </section>);

}

function renderReview(t) {
  // turn *text* into em
  const parts = t.split(/(\*[^*]+\*)/g);
  return parts.map((p, i) => {
    if (p.startsWith("*") && p.endsWith("*")) {
      return <em key={i}>{p.slice(1, -1)}</em>;
    }
    return <React.Fragment key={i}>{p}</React.Fragment>;
  });
}

/* ---------------- FAQ ---------------- */
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap">
        <div className="faq-head">
          <h2>
            Часто задаваемые<br /><span style={{ fontStyle: "italic", color: "var(--pink)" }}>вопросы</span>
          </h2>
          <p>
            Собрали ответы на самые популярные вопросы про лагерь, трансфер, проживание и что брать с собой. Если что-то останется неясным — пишите нам в Telegram.
          </p>
        </div>

        <div className="faq-list">
          {FAQ.map((item, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{item.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq-a">
                <p>{renderFaq(item.a)}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}
function renderFaq(t) {
  const parts = t.split(/(\*[^*]+\*|\[[^\]]+\]\([^)]+\))/g);
  return parts.map((p, i) => {
    if (p.startsWith("*") && p.endsWith("*")) {
      return <em key={i}>{p.slice(1, -1)}</em>;
    }
    const linkMatch = p.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
    if (linkMatch) {
      return <a key={i} href={linkMatch[2]} target="_blank" rel="noreferrer">{linkMatch[1]}</a>;
    }
    return <React.Fragment key={i}>{p}</React.Fragment>;
  });
}

/* Google Script endpoint — замените на актуальный URL после деплоя скрипта */
const GOOGLE_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbxZWwaoVWxdKNP3P7Eq610nRZcFl9AxbAKFzy3v4_fHwfH2KHwfWApqsb_66OyjV2DQ/exec";

const TARIFF_LABELS = { standard: "Стандарт (140€)", guest: "Гость издалека (120€)", tent: "Без стен (100€)" };
const TRANSPORT_LABELS = { vantaa: "Из Vantaa (+10€)", hanko: "От станции Hanko", self: "Самостоятельно" };

/* ---------------- REG FORM ---------------- */
function RegForm() {
  const [form, setForm] = useState({
    name: "",
    bday: "",
    age: 18,
    city: "",
    email: "",
    telegram: "",
    parent: "",
    parentPhone: "",
    allergy: "",
    transport: "",
    tariff: "standard",
    rules: false,
    privacy: false
  });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);

  const upd = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const valid = form.name && form.email && form.rules && form.privacy;

  const submit = async (e) => {
    e.preventDefault();
    if (!valid || sending) return;
    setSending(true);
    try {
      const payload = {
        name:         form.name,
        bday:         form.bday,
        age:          String(form.age),
        city:         form.city,
        email:        form.email,
        telegram:     form.telegram,
        parent:       form.parent,
        parentPhone:  form.parentPhone,
        allergy:      form.allergy || "нет",
        transport:    TRANSPORT_LABELS[form.transport] || form.transport,
        tariff:       TARIFF_LABELS[form.tariff] || form.tariff,
        rules:        form.rules ? "Согласен(-а)" : "",
        privacy:      form.privacy ? "Согласен(-а)" : "",
      };
      await fetch(GOOGLE_SCRIPT_URL, {
        method: "POST",
        body: JSON.stringify(payload),
        mode: "no-cors",
      });
    } catch (_) {}
    setSending(false);
    setSent(true);
    setTimeout(() => {
      document.getElementById("register")?.scrollIntoView({ behavior: "smooth", block: "start" });
    }, 50);
  };

  if (sent) {
    return (
      <section className="section reg" id="register">
        <div className="wrap">
          <div className="reg-form form-success">
            <div style={{ fontSize: 80, marginBottom: 8 }}>🚀</div>
            <h3>Заявка отправлена!</h3>
            <p style={{ fontSize: 17, maxWidth: 520, margin: "0 auto 28px" }}>
              Мы свяжемся с вами через Telegram или email, который вы указали, и пришлём реквизиты для оплаты бронирования. Ждём вас в лагере!
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <a href="https://t.me/tr_camp" target="_blank" rel="noreferrer" className="btn pink" style={{ textDecoration: "none" }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.833.941z"/></svg>
                Перейти в Telegram-канал
              </a>
              <button className="btn" onClick={() => setSent(false)}>Заполнить ещё раз</button>
            </div>
          </div>
        </div>
      </section>);
  }

  return (
    <section className="section reg" id="register">
      <div className="wrap">
        <div className="reg-head">
          <span className="badge">● ЗАЯВКА</span>
          <h2>Поехали с <em>нами</em>?</h2>
          <p>Пожалуйста, внимательно заполняйте форму!</p>
        </div>

        <form className="reg-form" onSubmit={submit}>
          <div className="reg-grid">
            <div className="field full">
              <label>Фамилия, имя</label>
              <input value={form.name} onChange={(e) => upd("name", e.target.value)} placeholder="Иванов Иван" />
            </div>

            <div className="field">
              <label>Дата рождения</label>
              <input type="date" value={form.bday} onChange={(e) => upd("bday", e.target.value)} />
            </div>

            <div className="field">
              <label>Полный возраст</label>
              <div className="range-wrap">
                <span className="mono" style={{ fontSize: 13 }}>14</span>
                <input type="range" min="14" max="30" value={form.age} onChange={(e) => upd("age", e.target.value)} />
                <span className="mono" style={{ fontSize: 13 }}>30</span>
                <span className="range-val">{form.age}</span>
              </div>
            </div>

            <div className="field">
              <label>Город проживания (на данный момент)</label>
              <input value={form.city} onChange={(e) => upd("city", e.target.value)} placeholder="Хельсинки" />
            </div>

            <div className="field">
              <label>Email</label>
              <input type="email" value={form.email} onChange={(e) => upd("email", e.target.value)} placeholder="you@mail.com" />
            </div>

            <div className="field">
              <label>Telegram</label>
              <input value={form.telegram} onChange={(e) => upd("telegram", e.target.value)} placeholder="@username" />
            </div>

            <div className="field">
              <label>Аллергия</label>
              <input value={form.allergy} onChange={(e) => upd("allergy", e.target.value)} placeholder="нет / опишите" />
            </div>

            <div className="field">
              <label>ФИО родителя / опекуна</label>
              <input value={form.parent} onChange={(e) => upd("parent", e.target.value)} />
            </div>

            <div className="field">
              <label>Контактный телефон родителя / опекуна</label>
              <input value={form.parentPhone} onChange={(e) => upd("parentPhone", e.target.value)} placeholder="+358..." />
            </div>

            <div className="field full">
              <label>Нужна ли вам помощь с транспортом?</label>
              <div className="radio-group">
                {[
                { v: "vantaa", l: "Да, нужен из Vantaa (+10€)" },
                { v: "hanko", l: "Да, нужен от станции Hanko" },
                { v: "self", l: "Нет, добираюсь самостоятельно" }].
                map((o) =>
                <div key={o.v} className={`radio-opt ${form.transport === o.v ? "active" : ""}`} onClick={() => upd("transport", o.v)}>
                    <span className="dot"></span>
                    <span>{o.l}</span>
                  </div>
                )}
              </div>
            </div>

            <div className="field full">
              <label>Тариф</label>
              <div className="tariff-pick">
                {[
                { v: "standard", n: "Стандарт", p: "140€" },
                { v: "guest", n: "Гость издалека", p: "120€" },
                { v: "tent", n: "Без стен", p: "100€" }].
                map((o) =>
                <div key={o.v} className={`tariff-opt ${form.tariff === o.v ? "active" : ""}`} onClick={() => upd("tariff", o.v)}>
                    <div className="t-name">{o.n}</div>
                    <div className="t-price">{o.p}</div>
                  </div>
                )}
              </div>
            </div>

            <div className="field full" style={{ gap: 10 }}>
              <div className={`checkrow ${form.rules ? "active" : ""}`} onClick={() => upd("rules", !form.rules)}>
                <span className="box">{form.rules ? "✓" : ""}</span>
                <span><b>Cогласен с политикой и правилами проведения лагеря</b></span>
              </div>
              <div className={`checkrow ${form.privacy ? "active" : ""}`} onClick={() => upd("privacy", !form.privacy)}>
                <span className="box">{form.privacy ? "✓" : ""}</span>
                <span><b>Согласие на обработку персональных данных</b></span>
              </div>
            </div>
          </div>

          <button className="submit-btn" disabled={!valid || sending}>
            {sending ? "Отправляем…" : "Зарегестрироваться ✶"}
          </button>
        </form>
      </div>
    </section>);

}

/* ---------------- GALLERY ---------------- */
const GALLERY_TILES = [
  { id: "g1", ar: "16/9",  rot: "-2deg",   cap: "Команда 🤝",      src: "photos/gallery-5-holi-group.jpg" },
  { id: "g2", ar: "3/4",   rot: "1.5deg",  cap: "вечер хвалы",   src: "photos/gallery-6-worship.jpg" },
  { id: "g3", ar: "1/1",   rot: "-1deg",   cap: "игры",          src: "photos/gallery-1-games.jpg" },
  { id: "g4", ar: "16/9",  rot: "2.5deg",  cap: "Worship Time",  src: "photos/gallery-4-band.jpg" },
  { id: "g5", ar: "4/5",   rot: "-2deg",   cap: "дискуссии",     src: "photos/gallery-7-discussion.jpg" },
  { id: "g6", ar: "1/1",   rot: "1deg",    cap: "Активности",    src: "photos/gallery-2-dance.jpg" },
  { id: "g7", ar: "9/16",  rot: "-1.5deg", cap: "цвета",         src: "photos/gallery-8-holi-friends.jpg" },
  { id: "g8", ar: "1/1",   rot: "1.8deg",  cap: "молитва",       src: "photos/gallery-3-prayer.jpg" },
];

function Gallery() {
  return (
    <section className="section wrap gallery-sec" id="gallery">
      <div className="gallery-head">
        <span className="sticker s-pink round" style={{ position: "static", display: "inline-flex", fontSize: 13 }}>
          ◉ ГАЛЛЕРЕЯ
        </span>
        <h2 className="gallery-h">
          Как это <span className="it">было</span> ↓
        </h2>
        <p className="gallery-sub">
          Кадры с прошлых лагерей — закаты, костры, друзья и километры улыбок.
        </p>
      </div>

      <div className="gallery-grid">
        {GALLERY_TILES.map((t) => (
          <div key={t.id} className="gtile" style={{ transform: `rotate(${t.rot})` }}>
            <image-slot
              id={`gallery-${t.id}`}
              shape="rounded"
              radius="14"
              src={t.src}
              placeholder="Drop photo"
              style={{ width: "100%", aspectRatio: t.ar, display: "block" }}>
            </image-slot>
            <span className="gtile-cap script">{t.cap}</span>
          </div>
        ))}
      </div>

      <div className="gallery-stickers">
        <div className="sticker s-sun round gst-1">✦ summer<br/>vibes only</div>
        <div className="sticker s-lime round gst-2">★ TR-CAMP</div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer() {
  return (
    <footer className="foot">
      <div className="wrap">
        <h3>
          Остались <span className="it">вопросы?</span><br />Мы на связи.
        </h3>
        <p style={{ maxWidth: 560, fontSize: 17, marginBottom: 40 }}>
          Если у вас возникнут вопросы — смело пишите или звоните! Мы всегда на связи и с радостью поможем.
        </p>

        <div className="foot-grid">
          <div className="foot-card">
            <div className="label">● Соцсети</div>
            <div className="name">Подпишись</div>
            <div className="foot-socials">
              <a href="https://www.instagram.com/tr.camp.fi?igsh=dXF0cmxiajg3cTMw" target="_blank" rel="noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>
                Instagram
              </a>
              <a href="https://t.me/tr_camp" target="_blank" rel="noreferrer">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.833.941z"/></svg>
                Telegram канал
              </a>
            </div>
          </div>

          <div className="foot-card">
            <div className="label">● Координатор</div>
            <div className="name">Анжелика</div>
            <a href="tel:+358406149316">📞 +358 40 614 93 16</a>
            <a href="https://t.me/NorthernAmazon" target="_blank" rel="noreferrer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.833.941z"/></svg> @NorthernAmazon</a>
          </div>

          <div className="foot-card">
            <div className="label">● Координатор</div>
            <div className="name">Алина</div>
            <a href="tel:+358453475514">📞 +358 45 347 55 14</a>
            <a href="https://t.me/alinusiaaaa" target="_blank" rel="noreferrer"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.447 1.394c-.16.16-.295.295-.605.295l.213-3.053 5.56-5.023c.242-.213-.054-.333-.373-.12l-6.871 4.326-2.962-.924c-.643-.204-.657-.643.136-.953l11.57-4.461c.537-.194 1.006.131.833.941z"/></svg> @alinusiaaaa</a>
          </div>
        </div>

        <div className="foot-bottom">
          <span>TR-CAMP © 2026 · LOST &amp; FOUND</span>
          <span>HANKO, FI · 29.06 — 04.07</span>
        </div>
      </div>
    </footer>);

}

/* ---------------- APP ---------------- */
function ScrollTopBtn() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 400);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <a href="#top" className={`fab-top ${show ? "fab-top--visible" : ""}`} aria-label="Наверх">
      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
    </a>
  );
}

function App() {
  return (
    <>
      <ScrollTopBtn />
      <Nav />
      <Hero />
      <Marquee
        items={["TR-CAMP 2026", "★", "LOST & FOUND", "✦", "29 ИЮНЯ — 4 ИЮЛЯ", "✶", "HANKO, FINLAND", "❋"]} />
      
      <About />
      <Gallery />
      <Marquee
        variant="pink-bg"
        items={["6 ДНЕЙ", "✦", "5 РАЗОВОЕ ПИТАНИЕ", "★", "КОСТРЫ", "✶", "МАСТЕР-КЛАССЫ", "❋", "НОВЫЕ ДРУЗЬЯ", "✦"]} />
      
      <Program />
      <Pricing />
      <Reviews />
      <FAQSection />
      <RegForm />
      <Marquee
        variant="ink-bg"
        items={["ПОЕХАЛИ С НАМИ", "✶", "REGISTER NOW", "★", "БРОНЬ — 30€", "✦", "TR-CAMP.FI", "❋"]} />
      
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);