/* ============================================================
   INNER PAGES · About / Mentorship / Business / Team / Contacts
   ============================================================ */

const TEAM = [
  { name: 'Рогозин Никита', role: 'Создатель фонда', zoom: 1.75, tone: 'green', objectPosition: '50% -30%', photo: 'assets/team/nikita-rogozin.png?v=39', email: 'creator@fond-nl.ru' },
  { name: 'Гурьянова Любовь-Анастасия', role: 'Создательница фонда', zoom: 2.2, tone: 'green', objectPosition: '50% -190%', photo: 'assets/team/guryanova.png?v=45', email: 'creator@fond-nl.ru' },
  { name: 'Захарова Татьяна', role: 'Советник по фандрайзингу', tone: 'green', objectPosition: '50% 25%', photo: 'assets/team/zakharova.png?v=31', email: 'advisor@fond-nl.ru' },
  { name: 'Бабкина Юлия', role: 'куратор проекта', tone: 'orange', objectPosition: '50% 25%', photo: 'assets/team/yulia-bakina.png?v=31', email: 'curator@fond-nl.ru' },
  { name: 'Самойлова Светлана', role: 'психолог проекта', zoom: 1.3, objectPosition: '50% -5%', tone: 'orange', photo: 'assets/team/samoilova.png?v=31', email: 'psy@fond-nl.ru' },
  { name: 'Лупинина Ольга', role: 'психолог проекта', tone: 'orange', objectPosition: '50% 15%', photo: 'assets/team/lupinina.png?v=31', email: 'psy2@fond-nl.ru' },
  { name: 'Старова Евгения', role: 'Фандрайзер фонда', zoom: 1.5, transformOrigin: 'top center', tone: 'blue', objectPosition: '50% 0%', photo: 'assets/team/starova.png?v=34', email: 'charity@fond-nl.ru' },
  { name: 'Соколова Юлия', role: 'бухгалтер фонда', tone: 'blue', objectPosition: '50% 25%', photo: 'assets/team/sokolova.png?v=31', email: 'buh@fond-nl.ru' }
];

function PageHero({ eyebrow, eyebrowClass = '', title, lead, accent = 'var(--orange)', tint = 'green', leadStyle = {} }) {
  return (
    <section className={`page-hero page-hero-${tint}`}>
      <div className="blob" style={{ width: 280, height: 280, background: 'var(--green-100)', top: -50, right: '10%' }}></div>
      <div className="blob" style={{ width: 160, height: 160, background: 'var(--blue-100)', bottom: 10, left: '6%' }}></div>
      <div className="wrap page-hero-inner">
        <span className={`eyebrow ${eyebrowClass}`}>{eyebrow}</span>
        <h1 className="h-xl">{title}</h1>
        {lead && <p className="lead" style={{ maxWidth: 660, margin: '18px auto 0', ...leadStyle }}>{lead}</p>}
      </div>
    </section>
  );
}

/* ===================== ABOUT ===================== */
const ABOUT_VALUES = [
  { icon: 'shield', title: 'Прозрачность', text: 'Публикуем отчеты раз в год и открыты к диалогу с нашими благотворителями.' },
  { icon: 'users', title: 'Взаимодействие', text: 'Работаем по технологии фонда «Солнечный город» при сопровождении психологов-супервизоров.' },
  { icon: 'heart', title: 'Заботливость', text: 'В основе всего - построение отношений и их влияние на качество жизни.' }
];
function AboutPage() {
  const { go } = useNav();
  return (
    <div className="page-enter">
      <PageHero
        eyebrow="О фонде"
        title={<>Наша миссия <Squiggle color="var(--green)">помогать детям</Squiggle></>}
        lead="Помогаем подросткам-сиротам и детям в трудной жизненной ситуации. Мы верим что у каждого подростка должен быть рядом надёжный человек- наставник!"
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap about-split">
          <Reveal className="about-split-photo">
            <image-slot id="about-main" src="assets/about_main.jpg" style={{ width: '100%', height: '520px', display: 'block' }} shape="rounded" radius="30" placeholder="Команда фонда"></image-slot>
          </Reveal>
          <Reveal className="about-split-copy" delay={120}>
            <span className="eyebrow is-blue bar-green">Наша миссия</span>
            <h2 className="h-lg" style={{ fontSize: 'clamp(21px, 3vw, 34px)' }}>Чтобы у каждого подростка из детского дома был старший друг - наставник</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Наша команда уже 5 лет развивает «Наставничество» в Челябинской области. Это системная благотворительность, которая помогает подросткам стать увереннее.
            </p>
            <p className="lead" style={{ marginTop: 14, color: 'var(--ink-soft)' }}>
              Проект «Наставничество» работает по трем трекам:<br />
              <span style={{display:'inline-block',width:8,height:8,borderRadius:'2px',background:'var(--green)',marginRight:8,verticalAlign:'middle'}}></span> мы ищем волонтёров;<br />
              <span style={{display:'inline-block',width:8,height:8,borderRadius:'2px',background:'var(--green)',marginRight:8,verticalAlign:'middle'}}></span> мы бесплатно обучаем кандидатов в наставники;<br />
              <span style={{display:'inline-block',width:8,height:8,borderRadius:'2px',background:'var(--green)',marginRight:8,verticalAlign:'middle'}}></span> мы развиваем и сопровождаем наставников, чтобы<br />              <span style={{display:'inline-block',width:8,height:8,borderRadius:'2px',background:'transparent',marginRight:8,verticalAlign:'middle'}}></span> дружба была долгой (до 21-23 лет наставляемого).
            </p>
            <div className="about-actions" style={{ marginTop: 24 }}>
              <Btn to="mentorship" variant="green" icon="arrow">К наставничеству</Btn>
              <button className="report-link" onClick={() => go('reports')}><Icon name="shield" size={20} /> Наша отчетность</button>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section section-cream">
        <div className="wrap">
          <Reveal className="section-head"><span className="eyebrow">В чём наша сила</span><h2 className="h-lg">Наши ценности</h2></Reveal>
          <div className="values-grid">
            {ABOUT_VALUES.map((v, i) => (
              <Reveal key={i} delay={i * 90} className="card value-card">
                <div className="value-icon"><Icon name={v.icon} size={26} /></div>
                <h3 className="h-md" style={{ fontSize: 24 }}>{v.title}</h3>
                <p style={{ color: 'var(--ink-soft)', marginTop: 8 }}>{v.text}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <Reveal className="section-head"><span className="eyebrow is-orange">Что нам помогает расти</span><h2 className="h-lg">Наши партнёры</h2></Reveal>
          <Reveal className="grant-band">
            <div className="grant-band-mark"><Icon name="star" size={30} /></div>
            <div className="grant-band-text">
              <h3 className="h-md">БФ «Солнечный город» с 2021 года</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 8, maxWidth: 640 }}>
                С самого начала финансовым партнёром являются наши Новосибирские друзья из Благотворительного фонда «Солнечный город»
              </p>
            </div>
              <Btn href="https://sgdeti.ru/" variant="ghost" icon="arrowUpRight">Подробнее</Btn>
          </Reveal>
          <Reveal className="grant-band">
            <div className="grant-band-mark"><Icon name="star" size={30} /></div>
            <div className="grant-band-text">
              <h3 className="h-md">Президентский грант 2023 года</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 8, maxWidth: 640 }}>
                В 2023 году фонд получил Президентский грант на расширение проекта «Наставничество» в Чебаркульский район Челябинской области.
              </p>
            </div>
              <Btn href="https://xn--80afcdbalict6afooklqi5o.xn--p1ai/public/application/item?id=e8f7434f-e446-4946-a4dd-97bc58d66c1e" variant="ghost" icon="arrowUpRight">Подробнее</Btn>
          </Reveal>
          <Reveal className="grant-band">
            <div className="grant-band-mark"><Icon name="star" size={30} /></div>
            <div className="grant-band-text">
              <h3 className="h-md">Президентский грант 2024 года</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 8, maxWidth: 640 }}>
                В 2024 году фонд получил Президентский грант на расширение проекта «Наставничество» в опекунские семьи, где опекунами являются бабушки и дедушки подростка.
              </p>
            </div>
              <Btn href="https://xn--80afcdbalict6afooklqi5o.xn--p1ai/public/application/item?id=05bb14e0-6972-4cfb-810e-055218b9b536" variant="ghost" icon="arrowUpRight">Подробнее</Btn>
          </Reveal>
          <Reveal className="grant-band">
            <div className="grant-band-mark"><Icon name="star" size={30} /></div>
            <div className="grant-band-text">
              <h3 className="h-md">Президентский грант 2026 года</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 8, maxWidth: 640 }}>
                В 2026 году фонд получил Президентский грант на расширение проекта «Наставничество» для выпускников детских домов – подростков от 16 лет и старше, которые после окончания 9 класса переехали из учреждений, расположенных в сёлах и малых городах Челябинской области, в областной центр с целью получения среднего профессионального образования.
              </p>
            </div>
              <Btn href="https://xn--80afcdbalict6afooklqi5o.xn--p1ai/public/application/item?id=ad2aa491-c5c0-4611-9c79-9c944c6de257" variant="ghost" icon="arrowUpRight">Подробнее</Btn>
          </Reveal>
        </div>
      </section>
    </div>
  );
}
/* ===================== MENTORSHIP ===================== */
const MENTOR_REQS = [
  'Возраст старше 24 лет', 'Отсутствие судимостей', 'Психическое здоровье',
  'Готовность видеться 1 раз в неделю', 'Желание быть рядом надолго', 'Открытость и ответственность'
];
const MENTOR_STEPS = [
  { n: 1, title: 'Оставьте заявку', text: 'Заполните анкету — это ни к чему не обязывает. Мы свяжемся и всё расскажем.' },
  { n: 2, title: 'Знакомство и обучение', text: 'Вы пройдёте бесплатное обучение и собеседование в наставники' },
  { n: 3, title: 'Подбор подростка', text: 'Мы аккуратно подберём ребёнка, которому вы подходите по характеру и интересам.' },
  { n: 4, title: 'Дружба под сопровождением', text: 'Вы начинаете встречаться, а психолог фонда поддерживает вас на каждом этапе.' }
];
function MentorshipPage() {
  const [showForm, setShowForm] = React.useState(false);
  return (
    <div className="page-enter">
      <PageHero
        eyebrowClass="is-blue"
        eyebrow="Главный проект фонда"
        title={<>Станьте <Squiggle color="var(--blue)">наставником</Squiggle> для подростка</>}
        lead="«Персональный взрослый» — вот кто такой наставник. В детском доме всё общее, а наставник у ребёнка только один: личный, свой, настоящий."
        tint="blue"
      />

      <section className="section" style={{ paddingTop: 28 }}>
        <div className="wrap">
          <div className="mentor-grid">
            {MENTOR_CARDS.map((c, i) => (
              <Reveal key={i} delay={i * 80}><MentorCard {...c} to="mentorship" /></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <Reveal className="mentor-doc-band">
            <div className="mentor-doc-icon"><Icon name="doc" size={28} /></div>
            <div className="mentor-doc-copy">
              <span className="eyebrow is-blue">Документ программы</span>
              <h2 className="h-md">Заверенная программа «Наставничество»</h2>
              <p>
                Подробное описание проекта, технологии сопровождения и принципов работы наставников.
              </p>
            </div>
            <Btn href="/uploads/docs/programma-nastavnichestvo-2025.pdf" variant="blue" size="lg" icon="download">
              Скачать PDF
            </Btn>
          </Reveal>
        </div>
      </section>

      <section className="section section-cream">
        <div className="wrap">
          <Reveal className="section-head"><span className="eyebrow is-blue">Путь наставника</span><h2 className="h-lg">Как стать наставником</h2>
            <p className="lead" style={{ maxWidth: 600, margin: '14px auto 0' }}>Четыре шага — и рядом с подростком появится близкий человек.</p>
          </Reveal>
          <div className="steps">
            {MENTOR_STEPS.map((s, i) => (
              <Reveal key={i} delay={i * 90} className="step">
                <div className="step-num">{s.n}</div>
                <h3 className="step-title">{s.title}</h3>
                <p className="step-text">{s.text}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap reqs-layout">
          <Reveal className="reqs-copy">
            <span className="eyebrow">Кто может стать</span>
            <h2 className="h-lg">Наставником может стать почти каждый</h2>
            <p className="lead" style={{ marginTop: 14 }}>Главное — желание быть рядом. Остальному мы научим и поможем на каждом шаге.</p>
            <Btn onClick={() => setShowForm(true)} variant="blue" size="lg" icon="arrow" style={{ marginTop: 22 }}>Оставить заявку</Btn>
          </Reveal>
          <Reveal delay={120} className="reqs-list">
            {MENTOR_REQS.map((r, i) => (
              <div className="req-item" key={i}><span className="req-check"><Icon name="check" size={18} /></span>{r}</div>
            ))}
          </Reveal>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="mentor-help-band">
            <div>
              <h3 className="h-md" style={{ color: '#fff' }}>Пока не готовы стать наставником?</h3>
              <p style={{ color: 'rgba(255,255,255,.88)', marginTop: 8 }}>Вы можете поддержать тех, кто уже рядом с детьми — оформите пожертвование.</p>
            </div>
            <Btn to="donate" variant="white" size="lg" iconLeft="heart">Помочь фонду</Btn>

      {/* Application Modal */}
      {showForm && (
        <div className="modal-overlay" onClick={() => setShowForm(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setShowForm(false)}>
              <Icon name="close" size={22} />
            </button>
            <ApplicationForm onClose={() => setShowForm(false)} />
          </div>
        </div>
      )}

          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== BUSINESS ===================== */
const BIZ_WAYS = [
  { icon: 'gift', title: 'Финансовая поддержка', text: 'Разовое или регулярное пожертвование от компании на проект «Наставничество».' },
  { icon: 'hands', title: 'Совместные акции', text: 'Благотворительные мероприятия, корпоративный фандрайзинг и спецпроекты.' },
  { icon: 'users', title: 'Волонтёрство сотрудников', text: 'Команда вашей компании помогает делами, навыками и временем.' },
  { icon: 'star', title: 'Информационная помощь', text: 'Расскажите о фонде своей аудитории и помогите найти новых наставников.' }
];
const BIZ_PARTNERS = [
  { name: 'Фонд «Солнечный город»', file: 'solnechny', href: 'https://sgdeti.ru' },
  { name: '2ГИС', file: '2gis', href: 'https://2gis.ru' },
  { name: 'Фитнес-центр ParkCity', file: 'parkcity', href: null },
  { name: 'Гранты губернатора Челябинской области', file: 'gubernator', href: 'https://грантыгубернатора74.рф' },
  { name: 'АНО «Азбука семьи»', file: 'azbuka', href: null },
  { name: 'Анна Помогает', file: 'anna', href: null },
  { name: 'Фонд «Строим добро»', file: 'stroimdobro', href: 'https://stroimdobro.ru/o-fonde/' },
  { name: 'Фонд президентских грантов', file: 'pgrants', href: 'https://президентскиегранты.рф/' }
];
function BusinessPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrowClass="is-orange"
        eyebrow="Бизнесу"
        title={<>Помогать детям — <Squiggle color="var(--orange)">вместе</Squiggle> с вашей компанией</>}
        lead="Мы сотрудничаем с компаниями Челябинска и области. Вместе мы можем сделать больше — и для детей, и для репутации вашего бренда."
      />
      <section className="section" style={{ paddingTop: 28 }}>
        <div className="wrap">
          <div className="biz-grid">
            {BIZ_WAYS.map((b, i) => (
              <Reveal key={i} delay={i * 80} className="card card-hover biz-card">
                <div className="biz-icon"><Icon name={b.icon} size={26} /></div>
                <h3 className="h-md" style={{ fontSize: 24 }}>{b.title}</h3>
                <p style={{ color: 'var(--ink-soft)', marginTop: 8 }}>{b.text}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="biz-cta biz-cta-blue">
            <div className="biz-cta-photo">
              <img src="assets/team/starova.png?v=32" alt="Елена Старова" style={{ width: '100%', height: '114%' }} />
            </div>
            <div className="biz-cta-content" style={{ padding: '0px 50px' }}>
              <h2 className="h-lg" style={{ color: '#fff' }}>Обсудим сотрудничество?</h2>
              <p className="lead" style={{ color: 'rgba(255,255,255,.9)', marginTop: 12, maxWidth: 520 }}>
                Напишите в мессенджер или на почту, мы обсудим детали партнёрства.
              </p>
              <div className="biz-cta-actions" style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 18 }}>
                <Btn href="mailto:charity@fond-nl.ru" variant="ghost" size="lg" iconLeft="mail" style={{ color: '#f0a000', boxShadow: 'none', border: 'none' }}>charity@fond-nl.ru</Btn>
                <Btn href="tel:+79658058008" variant="ghost" size="lg" iconLeft="phone" style={{ color: 'rgb(24,145,76)', boxShadow: 'none', border: 'none' }}>+7 96 580-580-08</Btn>
              </div>
            </div>
          </div>
        </div>
      </section>

            <section className="section section-cream" style={{ paddingTop: 72, paddingBottom: 72 }}>
        <div className="wrap">
          <div className="section-head">
            <span className="eyebrow is-orange">Наши партнёры</span>
            <h2 className="h-lg" style={{ marginTop: 12 }}>Нам помогают</h2>
            <p className="lead" style={{ marginTop: 14 }}>
              Компании и организации, которые оказывают фонду финансовую, информационную и иную поддержку
              в реализации проектов на территории Челябинской области.
            </p>
          </div>
          <div className="partners-logo-grid">
            {BIZ_PARTNERS.map((p, i) => {
              const inner = (
                <>
                  <div className="partner-logo-img">
                    <img src={`assets/partners/${p.file}.png`} alt={p.name} />
                  </div>
                  <span className="partner-logo-name">{p.name}</span>
                </>
              );
              return p.href ? (
                <Reveal key={i} as="a" delay={i * 50} className="partner-logo card card-hover" {...{ href: p.href, target: '_blank', rel: 'noopener' }}>
                  {inner}
                </Reveal>
              ) : (
                <Reveal key={i} delay={i * 50} className="partner-logo card">{inner}</Reveal>
              );
            })}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== TEAM ===================== */
function TeamPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrow="Наша команда"
        title={<>Люди, которым <Squiggle color="var(--green)">не всё равно</Squiggle></>}
        lead="Дружная команда фонда, которая каждый день делает так, чтобы рядом с подростками появлялись надёжные взрослые." leadStyle={{ marginTop: 40 }}
      />
      <section className="section" style={{ paddingTop: 28 }}>
        <div className="wrap">
          <div className="team-grid">
            {TEAM.map((m, i) => (
              <Reveal key={i} delay={i * 70} className="card team-card">
                <div className={`team-card-avatar${m.photo ? ' has-photo' : ''}${m.tone ? ` tone-${m.tone}` : ''}`}>
                  {m.photo ? (
                    <img src={m.photo} alt={m.name} style={{ ...(m.zoom ? { transform: 'scale(' + m.zoom + ')' } : {}), ...(m.transformOrigin ? { transformOrigin: m.transformOrigin } : {}), ...(m.objectPosition ? { objectPosition: m.objectPosition } : {}) }} />
                  ) : (
                    m.name.split(' ').map((w) => w[0]).slice(0, 2).join('')
                  )}
                </div>
                  <h3 className="team-card-name">{m.name}</h3>
                  <span className="team-card-role">{m.role}</span>
                  {m.phone && <a className="team-card-phone" href={`tel:${m.phone.replace(/\s|-/g, '')}`}><Icon name="phone" size={16} /> {m.phone}</a>}
                  {m.email && <a className="team-card-phone" href={`mailto:${m.email}`}><Icon name="mail" size={16} /> {m.email}</a>}
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="join-band">
            <div>
              <h2 className="h-md">Хотите в команду или стать волонтёром?</h2>
              <p style={{ color: 'var(--ink-soft)', marginTop: 8 }}>Напишите нам — мы всегда рады надёжным людям.</p>
            </div>
            <Btn to="contacts" variant="green" icon="arrow">Связаться с нами</Btn>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== CONTACTS ===================== */
const REQUISITES = [
  ['Полное наименование', 'Детский благотворительный фонд «Надёжные люди»'],
  ['Директор', 'Рогозин Никита Юрьевич'],
  ['ИНН / КПП', '7453340992 / 745301001'],
  ['ОГРН', '1217400018186'],
  ['Расчётный счёт', '40703810712010790892'],
  ['Банк', 'Филиал «Корпоративный» ПАО «Совкомбанк», г. Москва'],
  ['Корр. счёт', '30101810445250000360'],
  ['БИК', '044525360'],
  ['Юридический адрес', '454080, г. Челябинск, ул. Лесопарковая, д. 15, оф. 212'],
  ['Фактический адрес', 'г. Челябинск, ул. Энгельса, 43, оф. 403 (4 этаж)']
];
function ContactsPage() {
  const { go } = useNav();
  const [sent, setSent] = useState(false);
  const [contactFields, setContactFields] = useState({ name: '', contact: '', message: '' });
  const [contactError, setContactError] = useState('');
  const [contactSubmitting, setContactSubmitting] = useState(false);

  const setContactField = (key) => (event) => {
    setContactFields((current) => ({ ...current, [key]: event.target.value }));
    if (contactError) setContactError('');
  };

  const handleContactSubmit = async (event) => {
    event.preventDefault();
    if (contactSubmitting) return;
    setContactSubmitting(true);
    setContactError('');
    try {
      await sendSiteForm('/api/send-contact', contactFields);
      reachFormGoal('contact');
      setSent(true);
      setContactFields({ name: '', contact: '', message: '' });
    } catch (err) {
      setContactError(err.message || 'Не удалось отправить сообщение');
    } finally {
      setContactSubmitting(false);
    }
  };

  return (
    <div className="page-enter">
      <PageHero
        eyebrow="Контакты"
        title={<>Свяжитесь <Squiggle color="var(--orange)">с нами</Squiggle></>}
        lead="С вопросом, предложением или желанием помочь — мы всегда на связи."
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap contacts-layout">
          <div className="contacts-info">
            <div className="contact-cards">
              <a className="contact-card" href="tel:+79822905050">
                <div className="contact-card-ic" style={{ background: 'var(--green-50)', color: 'var(--green)' }}><Icon name="phone" size={22} /></div>
                <div><span>Телефон</span><b>+7 982 290-50-50</b></div>
              </a>
              <a className="contact-card" href="mailto:info@fond-nl.ru">
                <div className="contact-card-ic" style={{ background: 'var(--blue-50)', color: 'var(--blue-700)' }}><Icon name="mail" size={22} /></div>
                <div><span>Почта</span><b>info@fond-nl.ru</b></div>
              </a>
              <a className="contact-card" href="https://vk.com/fond_nl" target="_blank" rel="noopener">
                <div className="contact-card-ic" style={{ background: 'var(--blue-50)', color: 'var(--blue-700)' }}><img src="uploads/vk-logo-icon.png?v=102" alt="VK" className="vk-badge" style={{ width: 46, height: 46, background: 'transparent' }} /></div>
                <div><span>ВКонтакте</span><b>vk.com/fond_nl</b></div>
              </a>
              <div className="contact-card">
                <div className="contact-card-ic" style={{ background: 'var(--orange-50)', color: 'var(--orange-600)' }}><Icon name="pin" size={22} /></div>
                <div><span>Адрес</span><b>Челябинск, ул. Энгельса, 43, оф. 403</b></div>
              </div>
            </div>

            <details className="requisites">
              <summary>Реквизиты фонда <Icon name="arrow" size={18} /></summary>
              <table>
                <tbody>
                  {REQUISITES.map((r, i) => (
                    <tr key={i}><td>{r[0]}</td><td>{r[1]}</td></tr>
                  ))}
                </tbody>
              </table>
            </details>
          </div>

          <div className="contact-form-wrap">
            {!sent ? (
              <form className="contact-form" onSubmit={handleContactSubmit}>
                <h3 className="h-md">Напишите нам</h3>
                <p style={{ color: 'var(--ink-soft)', margin: '6px 0 18px' }}>Ответим в течение пары дней.</p>
                <label>Как вас зовут?<input type="text" required placeholder="Имя" value={contactFields.name} onChange={setContactField('name')} /></label>
                <label>Телефон или e-mail<input type="text" required placeholder="Как с вами связаться" value={contactFields.contact} onChange={setContactField('contact')} /></label>
                <label>Сообщение<textarea rows="4" placeholder="Ваш вопрос или предложение" value={contactFields.message} onChange={setContactField('message')}></textarea></label>
                {contactError && <div className="dw-status is-error"><Icon name="close" size={16} /><span>{contactError}</span></div>}
                <Btn variant="orange" size="lg" icon="arrow" style={{ width: '100%' }} disabled={contactSubmitting}>
                  {contactSubmitting ? 'Отправляем...' : 'Отправить'}
                </Btn>
                <p className="dw-legal" style={{ marginTop: 14 }}>Нажимая кнопку, вы соглашаетесь с <a href="#" onClick={(e) => { e.preventDefault(); go('privacy'); }} style={{ textDecoration: 'underline', cursor: 'pointer' }}>политикой конфиденциальности</a>.</p>
              </form>
            ) : (
              <div className="contact-sent contact-sent-card">
                <div className="contact-sent-ic"><Icon name="check" size={40} /></div>
                <h3 className="h-md">Спасибо, сообщение уже у нас</h3>
                <p style={{ color: 'var(--ink-soft)', marginTop: 8 }}>Мы передали его в CRM и вернёмся с ответом в ближайшее время.</p>
                <button className="btn btn-ghost" type="button" style={{ marginTop: 12 }} onClick={() => setSent(false)}>Отправить ещё одно</button>
              </div>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { TEAM, PageHero, AboutPage, MentorshipPage, BusinessPage, TeamPage, ContactsPage });

/* ===================== PAYMENT POLICY ===================== */
function PolicyPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrow="Документы"
        eyebrowClass="is-blue"
        title={<>Политика <Squiggle color="var(--blue)">безопасности</Squiggle> платежей</>}
        lead="Как проходит оплата на сайте фонда и как мы заботимся о безопасности ваших данных."
        tint="blue"
      />

      <section className="section" style={{ paddingTop: 16 }}>
        <div className="wrap wrap-narrow">
          <article className="prose">
            <h2>Оплата с помощью банковской карты</h2>
            <p>
              Для оплаты с помощью банковской карты на соответствующей странице сайта нажмите кнопку «Пожертвовать»,
              затем введите номер карты, срок действия, имя держателя карты (латинскими буквами, как на карте),
              код CVC2/CVV2 и нажмите «Оплатить».
            </p>
            <p>
              Оплата происходит через авторизационный сервер процессингового центра <b>ПАО «Совкомбанк»</b> с
              использованием банковских карт следующих платёжных систем:
            </p>
            <ul className="prose-list">
              <li>VISA International</li>
              <li>MasterCard Europe Sprl.</li>
              <li>Национальная система платёжных карт «Мир»</li>
            </ul>
            <p>
              Для оплаты вы будете перенаправлены на платёжный шлюз ПАО <b>«Совкомбанк»</b> для ввода реквизитов вашей
              карты. Сайт поддерживает 256-битное шифрование. Конфиденциальность сообщаемой персональной информации
              обеспечивается ПАО <b>«Совкомбанк»</b>. Введённая информация не будет предоставлена третьим лицам, за
              исключением случаев, предусмотренных законодательством РФ. Платежи по банковским картам проводятся в
              строгом соответствии с требованиями платёжных систем Visa Int., MasterCard Europe Sprl и Национальной
              системы платёжных карт «Мир». Пожалуйста, приготовьте вашу карту заранее.
            </p>
            <p>
              Если ваш банк поддерживает технологию безопасного проведения интернет-платежей Verified By Visa,
              MasterCard SecureCode или Национальной системы платёжных карт «Мир», для проведения платежа может
              потребоваться ввод специального пароля. Способы получения паролей уточняйте в банке, выпустившем карту.
            </p>

            <h2>Возвраты</h2>
            <p>Проведение возвратов не предусмотрено.</p>

            <h2>Сбой при оплате</h2>
            <p>
              При возникновении сбоя при оплате обратитесь по номеру{' '}
              <a href="tel:+79822905050">+7 982 290-50-50</a> или напишите на почту{' '}
              <a href="mailto:info@fond-nl.ru">info@fond-nl.ru</a>.
            </p>

            <h2>Меры безопасности при онлайн-операциях по банковской карте</h2>
            <ul className="prose-list">
              <li>
                Не сообщайте персональные данные или информацию о банковской карте (счёте) через интернет — например,
                ПИН, пароли доступа к ресурсам банка, срок действия карты, кредитные лимиты, историю операций.
              </li>
              <li>
                Проводите онлайн-операции только на защищённых страницах сайта: в адресной строке браузера появится
                «https://» и значок закрытого замочка. Это означает, что данные передаются в зашифрованном виде.
              </li>
              <li>
                Рекомендуется проводить онлайн-операции только со своего компьютера в целях сохранения
                конфиденциальности персональных данных и информации о карте.
              </li>
              <li>
                Если операция совершается с чужого компьютера, не сохраняйте на нём персональные данные, а после
                завершения убедитесь, что данные не сохранились (повторно загрузив страницу в браузере).
              </li>
            </ul>
          </article>


         

          <div className="policy-docs">
            <a className="policy-doc" href="/uploads/offer.pdf" target="_blank" rel="noopener">
              <div className="policy-doc-ic"><Icon name="shield" size={22} /></div>
              <div><b>Договор-оферта</b><span>Условия оказания услуг и приёма пожертвований</span></div>
              <Icon name="arrowUpRight" size={18} />
            </a>

          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PolicyPage });

function PrivacyPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrow="Документы"
        eyebrowClass="is-blue"
        title={<>Политика <Squiggle color="var(--blue)">конфиденциальности</Squiggle></>}
        lead="Обработка персональных данных и меры по ее обеспечению."
        tint="blue"
      />
      <section className="section" style={{ paddingTop: 16 }}>
        <div className="wrap wrap-narrow">
          <article className="prose">
<h2>Политика в отношении обработки персональных данных</h2>

            <h3>1. Общие положения</h3>
            <p>Настоящая политика обработки персональных данных составлена в соответствии с требованиями Федерального закона от 27.07.2006. № 152-ФЗ «О персональных данных» (далее — Закон о персональных данных) и определяет порядок обработки персональных данных и меры по обеспечению безопасности персональных данных, предпринимаемые Детский благотворительный фонд "Надёжные люди" (далее — Оператор).</p>
            <p>Оператор ставит своей важнейшей целью и условием осуществления своей деятельности соблюдение прав и свобод человека и гражданина при обработке его персональных данных, в том числе защиты прав на неприкосновенность частной жизни, личную и семейную тайну.</p>
            <p>Настоящая политика Оператора в отношении обработки персональных данных (далее — Политика) применяется ко всей информации, которую Оператор может получить о посетителях веб-сайта https://fond-nl.ru.</p>

            <h3>2. Основные понятия, используемые в Политике</h3>
            <p>Автоматизированная обработка персональных данных — обработка персональных данных с помощью средств вычислительной техники.</p>
            <p>Блокирование персональных данных — временное прекращение обработки персональных данных (за исключением случаев, если обработка необходима для уточнения персональных данных).</p>
            <p>Веб-сайт — совокупность графических и информационных материалов, а также программ для ЭВМ и баз данных, обеспечивающих их доступность в сети интернет по сетевому адресу https://fond-nl.ru.</p>
            <p>Информационная система персональных данных — совокупность содержащихся в базах данных персональных данных и обеспечивающих их обработку информационных технологий и технических средств.</p>

            <h3>3. Основные права и обязанности Оператора</h3>
            <p>Оператор имеет право: получать от субъекта персональных данных достоверные информацию и/или документы, содержащие персональные данные; в случае отзыва согласия на обработку персональных данных продолжить обработку при наличии оснований, указанных в Законе о персональных данных.</p>
            <p>Оператор обязан: предоставлять субъекту персональных данных по его просьбе информацию, касающуюся обработки его персональных данных; организовывать обработку в соответствии с законодательством РФ; принимать правовые, организационные и технические меры для защиты персональных данных.</p>

            <h3>4. Основные права и обязанности субъектов персональных данных</h3>
            <p>Субъекты персональных данных имеют право: получать информацию об обработке их персональных данных; требовать уточнения, блокирования или уничтожения персональных данных; на отзыв согласия на обработку персональных данных; обжаловать неправомерные действия Оператора в уполномоченный орган.</p>
            <p>Субъекты персональных данных обязаны: предоставлять Оператору достоверные данные о себе; сообщать об уточнении (обновлении, изменении) своих персональных данных.</p>

            <h3>5. Цели обработки персональных данных</h3>
            <p>Цель обработки: информирование Пользователя посредством отправки электронных писем. Персональные данные: фамилия, имя, отчество; электронный адрес; номера телефонов.</p>

            <h3>6. Порядок сбора, хранения, передачи и других видов обработки персональных данных</h3>
            <p>Безопасность персональных данных обеспечивается путем реализации правовых, организационных и технических мер, необходимых для выполнения требований законодательства в области защиты персональных данных.</p>
            <p>Персональные данные Пользователя никогда, ни при каких условиях не будут переданы третьим лицам, за исключением случаев, связанных с исполнением действующего законодательства либо в случае, если субъектом дано согласие на передачу данных третьему лицу для исполнения обязательств по гражданско-правовому договору.</p>
            <p>В случае выявления неточностей в персональных данных, Пользователь может актуализировать их самостоятельно путем направления уведомления на email: info@fond-nl.ru.</p>

            <h3>7. Заключительные положения</h3>
            <p>Пользователь может получить любые разъяснения по интересующим вопросам, касающимся обработки его персональных данных, обратившись к Оператору через электронную почту info@fond-nl.ru.</p>
            <p>В данном документе будут отражены любые изменения политики обработки персональных данных Оператором. Политика действует бессрочно до замены ее новой версией.</p>
            <p>Актуальная версия Политики расположена в свободном доступе на данной странице.</p>          </article>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PrivacyPage });

/* ===================== ANNUAL REPORTS ===================== */


/* ===================== ANNUAL REPORTS ===================== */
const REPORTS = [
  {
    year: 2025,
    items: [
      { label: 'Публичный годовой отчёт', file: '/uploads/Публичный отчёт о благотворительной деятельности в 2025 году.pdf', color: 'blue' },
      { label: 'Отчёт в Министерство Юстиции', file: '/uploads/отчёт в МинЮст за 2025 год.pdf', color: 'orange' },
    ],
  },
  {
    year: 2024,
    items: [
      { label: 'Публичный годовой отчёт', file: '/uploads/Публичный отчёт о благотворительной деятельности в 2024 году.pdf', color: 'blue' },
      { label: 'Отчёт в Министерство Юстиции', file: '/uploads/отчёт о благотворительной деятельности в 2024 году - в минюст.pdf', color: 'orange' },
    ],
  },
  {
    year: 2023,
    items: [
      { label: 'Публичный годовой отчёт', file: '/uploads/Публичный отчёт о благотворительной деятельности в 2023 году.pdf', color: 'blue' },
      { label: 'Отчёт в Министерство Юстиции', file: '/uploads/отчёт о благотворительной деятельности в 2023 году - в минюст.pdf', color: 'orange' },
    ],
  },
  {
    year: 2022,
    items: [
      { label: 'Публичный годовой отчёт', file: '/uploads/Публичный отчёт о благотворительной деятельности в 2022 году.pdf', color: 'blue' },
      { label: 'Отчёт в Министерство Юстиции', file: '/uploads/отчёт о благотворительной деятельности в 2022 году - в минюст.pdf', color: 'orange' },
    ],
  },

];
function ReportsPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrowClass="is-blue"
        eyebrow="Документы"
        title={<>Годовые <Squiggle color="var(--blue)">отчёты</Squiggle></>}
        lead="Мы работаем открыто. Подробная информация о проектах, полученных средствах и их использовании — в публичных годовых отчётах фонда."
        tint="blue"
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap wrap-narrow">
          <div className="reports-list">
            {REPORTS.map((r, i) => {
      if (r.items) {
        return (
          <Reveal key={r.year} delay={i * 60} className="report-card card card-hover">
            <div className="report-card-year">
              <Icon name="doc" size={22} />
              <b>{r.year}</b>
            </div>
            <div className="report-card-body" style={{display: 'flex', flexDirection: 'column', gap: 10}}>
              {r.items.map((item, j) => (
                <a key={j} href={item.file} target="_blank" rel="noopener"
                  className={"report-card-dl" + (item.color === 'orange' ? ' is-orange' : '')}>
                  <Icon name="download" size={18} /> {item.label}
                </a>
              ))}
            </div>
          </Reveal>
        );
      }
      return (
        <Reveal key={r.year} as="a" delay={i * 60} className="report-card card card-hover"
          {...{ href: r.file, target: '_blank', rel: 'noopener' }}>
          <div className="report-card-year">
            <Icon name="doc" size={22} />
            <b>{r.year}</b>
          </div>
          <div className="report-card-body">
            <h3 className="report-card-title">Годовой отчёт за {r.year} год</h3>
            <p className="report-card-note">{r.note}</p>
          </div>
          <span className="report-card-dl">
            <Icon name="download" size={18} /> PDF
          </span>
        </Reveal>
      );
    })}
          </div>

          <div className="reports-foot">
            <Icon name="shield" size={20} />
            <p>
              Отчёты также доступны в{' '}
              <a href="https://disk.360.yandex.ru/d/_DC8e1IurQujRQ" target="_blank" rel="noopener">облачном хранилище фонда</a>.
              Если у вас остались вопросы по нашей работе — <a href="mailto:info@fond-nl.ru">напишите нам</a>.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

/* ===================== STATUTORY DOCUMENTS ===================== */
const STATUTORY_DOCS = [
  { title: 'Устав фонда', note: 'Скан устава', file: '/uploads/docs/ustav-skan.pdf', tone: 'green' },
  { title: 'Свидетельство ОГРН', note: 'Регистрационный документ фонда', file: '/uploads/docs/svidetelstvo-ogrn.pdf', tone: 'blue' },
  { title: 'Свидетельство о постановке на учёт', note: 'Документ налогового учёта', file: '/uploads/docs/svidetelstvo-postanovka-na-uchet.pdf', tone: 'orange' },
  { title: 'Выписка из ЕГРЮЛ', note: 'Актуальная выписка', file: '/uploads/docs/vypiska-egrul.pdf', tone: 'green' },
  { title: 'Лист записи ЕГРЮЛ', note: 'Регистрационная запись', file: '/uploads/docs/list-zapisi-egrul.pdf', tone: 'blue' },
  { title: 'Смена директора: выписка и лист записи ЕГРЮЛ', note: 'Комплект документов по смене директора', file: '/uploads/docs/smena-direktora-egrul.pdf', tone: 'orange' },
  { title: 'Протокол о смене директора', note: 'Решение о смене руководителя', file: '/uploads/docs/protokol-smena-direktora.pdf', tone: 'green' },
  { title: 'Протокол 2025: полномочия Рогозина Н. Ю.', note: 'Подтверждение полномочий', file: '/uploads/docs/protokol-polnomochiya-rogozin-2025.pdf', tone: 'blue' },
  { title: 'Протокол: новое правление 2026', note: 'Состав правления фонда', file: '/uploads/docs/protokol-pravlenie-2026.pdf', tone: 'orange' },
  { title: 'Решение о назначении Правления фонда', note: 'Назначение органов управления', file: '/uploads/docs/reshenie-naznachenie-pravleniya.pdf', tone: 'green' },
  { title: 'Решение учредителя', note: 'Учредительный документ', file: '/uploads/docs/reshenie-uchreditelya.pdf', tone: 'blue' },
  { title: 'Заверенная программа «Наставничество»', note: 'Программа от 19.05.2025', file: '/uploads/docs/programma-nastavnichestvo-2025.pdf', tone: 'orange' },
];

function DocsPage() {
  return (
    <div className="page-enter">
      <PageHero
        eyebrowClass="is-blue"
        eyebrow="Документы фонда"
        title={<>Уставные <Squiggle color="var(--blue)">документы</Squiggle></>}
        lead="Здесь собраны регистрационные, учредительные и управленческие документы фонда в формате PDF."
        tint="blue"
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="docs-grid">
            {STATUTORY_DOCS.map((doc, i) => (
              <Reveal key={doc.file} delay={i * 40}>
                <a className={`card card-hover docs-card docs-card-${doc.tone}`} href={doc.file} target="_blank" rel="noopener">
                  <div className="docs-card-icon"><Icon name="doc" size={24} /></div>
                  <div className="docs-card-body">
                    <h2>{doc.title}</h2>
                    <p>{doc.note}</p>
                  </div>
                  <span className="docs-card-action">
                    <Icon name="download" size={18} /> PDF
                  </span>
                </a>
              </Reveal>
            ))}
          </div>
          <div className="reports-foot docs-foot">
            <Icon name="shield" size={20} />
            <p>
              Если вам нужен документ в другом формате или заверенная копия, напишите нам на{' '}
              <a href="mailto:info@fond-nl.ru">info@fond-nl.ru</a>.
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}



/* ===== Application Form Component ===== */
function NotFoundPage() {
  const { go } = useNav();
  return (
    <div className="page-enter">
      <section className="not-found-page">
        <div className="not-found-blob not-found-blob-green"></div>
        <div className="not-found-blob not-found-blob-blue"></div>
        <div className="wrap not-found-inner">
          <Reveal className="not-found-card">
            <div className="not-found-code">404</div>
            <img className="not-found-logo" src="uploads/logo.png?v=96" alt="Надёжные люди" />
            <h1 className="h-lg">Такой страницы нет</h1>
            <p className="lead">
              Возможно, ссылка устарела или в адресе закралась ошибка. Давайте вернёмся туда, где можно быть рядом с подростками.
            </p>
            <div className="not-found-actions">
              <Btn to="home" variant="green" size="lg" icon="arrow">На главную</Btn>
              <Btn to="donate" variant="orange" size="lg" iconLeft="heart">Помочь фонду</Btn>
            </div>
            <button className="not-found-link" type="button" onClick={() => go('contacts')}>
              Связаться с фондом
            </button>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function reachFormGoal(formType) {
  if (window.nlReachGoal) window.nlReachGoal('form', { form: formType });
}

async function sendSiteForm(endpoint, payload) {
  const res = await fetch(endpoint, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload),
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.error || 'Не удалось отправить форму');
  return data;
}

function ApplicationForm({ onClose }) {
  const [fields, setFields] = React.useState({
    name: '', phone: '', email: '', contactMethod: '', city: ''
  });
  const [errors, setErrors] = React.useState({});
  const [submitError, setSubmitError] = React.useState('');
  const [submitting, setSubmitting] = React.useState(false);
  const [sent, setSent] = React.useState(false);

  const contactOptions = ['Telegram', 'VK', 'MAX', 'E-mail', 'WhatsApp'];

  const validate = () => {
    const errs = {};
    if (!fields.name.trim()) errs.name = 'Укажите ФИО';
    if (!fields.phone.trim()) errs.phone = 'Укажите телефон';
    if (!fields.email.trim()) errs.email = 'Укажите E-mail';
    if (!fields.contactMethod) errs.contactMethod = 'Выберите способ связи';
    if (!fields.city.trim()) errs.city = 'Укажите город';
    setErrors(errs);
    return Object.keys(errs).length === 0;
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setSubmitError('');
    try {
      await sendSiteForm('/api/send-application', fields);
      reachFormGoal('mentor_application');
      setSent(true);
    } catch (err) {
      setSubmitError(err.message || 'Ошибка отправки. Попробуйте позже.');
    } finally {
      setSubmitting(false);
    }
  };

  const set = (key) => (e) => {
    setFields({ ...fields, [key]: e.target.value });
    if (errors[key]) setErrors({ ...errors, [key]: '' });
  };

  if (sent) {
    return (
      <div className="modal-success">
        <div className="success-badge"><Icon name="check" size={42} /></div>
        <h3>Заявка отправлена!</h3>
        <p>Спасибо за готовность быть рядом. Мы передали заявку команде фонда и скоро свяжемся с вами.</p>
        <button className="btn btn-blue" type="button" onClick={onClose}>Готово</button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <h2>Заявка на наставничество</h2>
      <p>Заполните форму, и мы свяжемся с вами</p>

      <div className="form-group">
        <label className="form-label">Фамилия Имя <span className="required">*</span></label>
        <input className={"form-input" + (errors.name ? ' error' : '')} type="text" value={fields.name} onChange={set('name')} placeholder="Иванов Иван" />
        {errors.name && <div className="form-error">{errors.name}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">Телефон <span className="required">*</span></label>
        <input className={"form-input" + (errors.phone ? ' error' : '')} type="tel" value={fields.phone} onChange={set('phone')} placeholder="+7 (999) 123-45-67" />
        {errors.phone && <div className="form-error">{errors.phone}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">E-mail <span className="required">*</span></label>
        <input className={"form-input" + (errors.email ? ' error' : '')} type="email" value={fields.email} onChange={set('email')} placeholder="mail@example.com" />
        {errors.email && <div className="form-error">{errors.email}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">Удобный способ связи <span className="required">*</span></label>
        <select className={"form-select" + (errors.contactMethod ? ' error' : '')} value={fields.contactMethod} onChange={set('contactMethod')}>
          <option value="">— выберите —</option>
          {contactOptions.map(o => <option key={o} value={o}>{o}</option>)}
        </select>
        {errors.contactMethod && <div className="form-error">{errors.contactMethod}</div>}
      </div>

      <div className="form-group">
        <label className="form-label">Город <span className="required">*</span></label>
        <input className={"form-input" + (errors.city ? ' error' : '')} type="text" value={fields.city} onChange={set('city')} placeholder="Москва" />
        {errors.city && <div className="form-error">{errors.city}</div>}
      </div>

      {submitError && <div className="dw-status is-error"><Icon name="close" size={16} /><span>{submitError}</span></div>}

      <button type="submit" className="form-submit" disabled={submitting}>
        {submitting ? 'Отправка...' : 'Отправить заявку'}
      </button>
    </form>
  );
}

Object.assign(window, { ReportsPage, NotFoundPage });