/* ============================================================
   HOME PAGE
   ============================================================ */

/* ---------- HERO ---------- */
function Hero() {
  const { go } = useNav();
  return (
    <section className="hero">
      <div className="blob" style={{ width: 360, height: 360, background: 'var(--green-100)', top: -60, right: '6%' }}></div>
      <div className="blob" style={{ width: 220, height: 220, background: 'var(--blue-100)', bottom: 40, left: '-4%' }}></div>
      <div className="blob" style={{ width: 160, height: 160, background: 'var(--orange-100)', top: '38%', right: '42%' }}></div>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="eyebrow">Детский благотворительный фонд · Челябинск</span>
          <h1 className="h-xl hero-title">
            Каждому подростку нужен <Squiggle color="var(--orange)">надёжный друг</Squiggle> рядом
          </h1>
          <p className="lead hero-lead">
            Мы помогаем детям из детских домов обрести «своего» взрослого — наставника, который будет рядом по-настоящему. Ваша поддержка превращается во встречи, заботу и веру в ребёнка.
          </p>
          <div className="hero-cta">
            <Btn to="donate" variant="orange" size="lg" iconLeft="heart">Помочь фонду</Btn>
            <Btn to="mentorship" variant="ghost" size="lg" icon="arrow">Стать наставником</Btn>
          </div>
          <div className="hero-trust">
            <div className="hero-trust-faces">
              <span style={{ background: 'var(--green)' }}>Н</span>
              <span style={{ background: 'var(--orange)' }}>А</span>
              <span style={{ background: 'var(--blue)' }}>Д</span>
            </div>
            <span>Уже десятки наставников рядом с подростками Челябинской области</span>
          </div>
        </div>

        <div className="hero-visual">
          <div className="hero-art-bg"></div>
          <svg className="hero-art-halo" viewBox="0 0 520 520" aria-hidden="true" focusable="false">
            <path d="M78 294C46 178 126 61 251 55c118-6 222 82 232 203 10 119-79 220-200 224C173 486 103 385 78 294Z" />
            <path d="M88 362c64 57 168 80 257 43 73-30 122-101 127-180" />
          </svg>
          <img className="hero-art" src="assets/characters-hero.png" alt="Три друга обнимаются — символ фонда «Надёжные люди»" />
          <div className="float-card fc-1">
            <div className="fc-icon" style={{ background: 'var(--green-50)', color: 'var(--green)' }}><Icon name="handHeart" size={22} /></div>
            <div><b>Наставник</b><span>персональный взрослый</span></div>
          </div>
          <div className="float-card fc-2">
            <div className="fc-icon" style={{ background: 'var(--blue-50)', color: 'var(--blue-700)' }}><Icon name="chat" size={22} /></div>
            <div><b>1 раз в неделю</b><span>встречи и общение</span></div>
          </div>
          <div className="float-card fc-3">
            <div className="fc-icon" style={{ background: 'var(--orange-50)', color: 'var(--orange-600)' }}><Icon name="sprout" size={22} /></div>
            <div><b>Рядом надолго</b><span>поддержка и опора</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- STAT STRIP ---------- */
const HOME_STATS = [
  { value: 'с 2021', label: 'Помогаем подросткам из детских домов Челябинской области', color: 'var(--green)' },
  { value: '100+', label: 'Подростков участвуют в проекте «Наставничество»', color: 'var(--orange-600)' },
  { value: '3', label: 'Получили президентских гранта на развитие наставничества', color: 'var(--blue-700)' },
  { value: '12+', label: 'Возраст детей, которым нужен наставник', color: 'var(--green)' },
];
function StatStrip() {
  return (
    <div className="wrap">
      <Reveal className="stat-strip">
        {HOME_STATS.map((s, i) => (
          <div className="stat-strip-item" key={i}>
            <Stat value={s.value} label={s.label} color={s.color} />
          </div>
        ))}
      </Reveal>
    </div>
  );
}

/* ---------- ABOUT TEASER ---------- */
function AboutTeaser() {
  const { go } = useNav();
  return (
    <section className="section">
      <div className="wrap about-teaser">
        <Reveal className="about-photo">
          <img
            className="about-photo-image"
            src="assets/team-photo.jpg"
            alt="Команда фонда «Надёжные люди»"
          />
          <div className="about-photo-badge">
            <Icon name="users" size={20} />
            <span>Команда фонда</span>
          </div>
        </Reveal>
        <Reveal className="about-copy" delay={120}>
          <span className="eyebrow">О нашем фонде</span>
          <h2 className="h-lg">Мы — «Надёжные люди».<br />И мы рядом с теми, кому это важнее всего</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Некоммерческая организация из Челябинска. Мы реализуем всероссийский проект «Наставничество» по технологии благотворительного фонда «Солнечный город» — чтобы у каждого подростка из детского дома появился близкий взрослый.
          </p>
          <ul className="check-list">
            <li><Icon name="check" size={20} /> Работаем по проверенной технологии – в реестре практик с доказанной эффективностью</li>
            <li><Icon name="check" size={20} /> Открыто отчитываемся о каждом полученном рубле</li>
            <li><Icon name="check" size={20} /> Трижды поддержаны Фондом президентских грантов</li>
          </ul>
          <div className="about-actions">
            <Btn to="about" variant="green" icon="arrow">Узнать больше</Btn>
            <button className="report-link" onClick={() => go('reports')}>
              <Icon name="shield" size={20} /> Годовые отчёты
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- MENTORSHIP 4 CARDS ---------- */
const MENTOR_CARDS = [
  { icon: 'sprout', tone: 'green', title: 'Что такое наставничество?', text: 'Проект для поддержки подростков из детских домов старше 12 лет — тех, кого реже всего забирают в семью.', to: 'mentorship' },
  { icon: 'handHeart', tone: 'orange', title: 'Кто такой наставник?', text: '«Персональный взрослый» подростка. В детском доме всё общее — а наставник только его, личный и настоящий.', to: 'mentorship' },
  { icon: 'chat', tone: 'blue', title: 'Как это работает?', text: 'Вы просто дружите с ребёнком: общаетесь не реже одного раза в неделю в удобное вам обоим время.', to: 'mentorship' },
  { icon: 'star', tone: 'green', title: 'Как стать наставником?', text: 'Им может стать человек старше 24 лет без судимостей и психических заболеваний. ', to: 'mentorship' },
];
function MentorSection() {
  return (
    <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: 620, margin: '14px auto 0' }}>
            Четыре коротких ответа на главные вопросы. А если захотите глубже — расскажем подробно.
          </p>
        </Reveal>
        <div className="mentor-grid">
          {MENTOR_CARDS.map((c, i) => (
            <Reveal key={i} delay={i * 90}>
              <MentorCard {...c} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}
function MentorCard({ icon, tone, title, text, to }) {
  const { go } = useNav();
  const map = {
    green: { bg: 'var(--green-50)', fg: 'var(--green)' },
    orange: { bg: 'var(--orange-50)', fg: 'var(--orange-600)' },
    blue: { bg: 'var(--blue-50)', fg: 'var(--blue-700)' },
  }[tone];
  return (
    <button className="card card-hover mentor-card" onClick={() => go(to)}>
      <div className="mentor-card-icon" style={{ background: map.bg, color: map.fg }}><Icon name={icon} size={28} /></div>
      <h3 className="h-md mentor-card-title">{title}</h3>
      <p className="mentor-card-text">{text}</p>
      <span className="mentor-card-link" style={{ color: map.fg }}>Узнать больше <Icon name="arrow" size={18} /></span>
    </button>
  );
}

/* ---------- IMPACT (where money goes) ---------- */
const IMPACT = [
  { icon: 'users', title: 'Подбор и обучение наставников', text: 'Отбор, обучение и проверка кандидатов в наставники — чтобы рядом с ребёнком был подготовленный взрослый.' },
  { icon: 'chat', title: 'Сопровождение психологом', text: 'Психолог проекта поддерживает каждую пару «наставник — подросток» на всём пути.' },
  { icon: 'gift', title: 'Встречи, поездки и досуг', text: 'Совместные прогулки, разговоры и личное внимание, которых так не хватает в детском доме.' },
  { icon: 'sprout', title: 'Развитие проекта', text: 'Чтобы наставников становилось больше и помощь дошла до каждого подростка, который её ждёт.' },
];
function ImpactSection() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="impact-head">
          <Reveal>
            <span className="eyebrow is-orange">Куда идут пожертвования</span>
            <h2 className="h-lg">Ваша помощь работает<br />каждый день</h2>
          </Reveal>
          <Reveal delay={120} className="impact-head-side">
            <p className="lead">Мы тратим средства прозрачно и по делу. Вот на что идёт каждое пожертвование.</p>
            <Btn to="donate" variant="orange" iconLeft="heart">Поддержать проект</Btn>
          </Reveal>
        </div>
        <div className="impact-grid">
          {IMPACT.map((it, i) => (
            <Reveal key={i} delay={i * 80} className="impact-item">
              <div className="impact-num">0{i + 1}</div>
              <div className="impact-icon"><Icon name={it.icon} size={26} /></div>
              <h3 className="impact-title">{it.title}</h3>
              <p className="impact-text">{it.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- STORY / QUOTE ---------- */
function StorySection() {
  return (
    <section className="section">
      <div className="wrap story">
        <Reveal className="story-photo-wrap">
          <img src="assets/photo-mentor-teen.png" alt="Наставник и подросток вместе" className="story-real-photo" />
        </Reveal>
        <Reveal className="story-quote" delay={120}>
          <Icon name="quote" size={56} className="story-q-mark" />
          <blockquote className="story-text">
            Раньше я думала, что никому не нужна. А теперь у меня есть человек, который приходит просто ко мне. Не потому что должен — а потому что хочет.
          </blockquote>
          <div className="story-author">
            <span className="story-author-name">Подросток, 14 лет</span>
            <span className="story-author-role">участник проекта «Наставничество»</span>
          </div>
          <p className="story-note">* История из практики фонда. Имя скрыто в интересах ребёнка.</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- NEWS ---------- */
const FALLBACK_NEWS = [
  { tag: 'События', tone: 'green', date: '12 мая 2026', title: 'Весенний выезд на природу для наставников и подростков', text: 'Провели большую встречу пар на свежем воздухе — игры, костёр и много тёплых разговоров.' },
  { tag: 'Проект', tone: 'blue', date: '28 апреля 2026', title: 'Новый набор в школу наставников открыт', text: 'Приглашаем взрослых, готовых стать опорой для подростка. Обучение и сопровождение — бесплатно.' },
  { tag: 'Спасибо', tone: 'orange', date: '9 апреля 2026', title: 'Отчитываемся: как ваши пожертвования помогли за квартал', text: 'Рассказываем, сколько встреч состоялось и какие события мы смогли подарить детям благодаря вам.' },
];

function formatNewsDate(value) {
  try {
    return new Intl.DateTimeFormat('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' }).format(new Date(value));
  } catch (err) {
    return value;
  }
}

function normalizeNewsItem(item) {
  return {
    id: item.id,
    tag: item.tag || 'VK',
    tone: item.tone || 'blue',
    date: formatNewsDate(item.date),
    title: item.title,
    text: item.excerpt || item.text || '',
    href: item.url || 'https://vk.com/fond_nl',
    imageUrl: item.imageUrl || null,
  };
}

function NewsSection() {
  const [items, setItems] = useState(() => FALLBACK_NEWS.map((item, index) => ({ ...item, id: `fallback-${index}` })));
  const [updatedAt, setUpdatedAt] = useState('');

  useEffect(() => {
    let cancelled = false;
    fetch('data/vk-posts.json', { cache: 'no-store' })
      .then((response) => {
        if (!response.ok) throw new Error(`Failed to load VK feed: ${response.status}`);
        return response.json();
      })
      .then((payload) => {
        if (cancelled || !payload?.items?.length) return;
        setItems(payload.items.slice(0, 3).map(normalizeNewsItem));
        setUpdatedAt(payload.updatedAt || '');
      })
      .catch(() => {});

    return () => { cancelled = true; };
  }, []);

  return (
    <section className="section section-cream">
      <div className="wrap">
        <div className="section-head-row">
          <Reveal className="news-head-copy">
            <span className="eyebrow is-blue">Новости фонда</span>
            <h2 className="h-lg">Чем мы живём</h2>
            {updatedAt ? <p className="news-meta">Лента обновлена {formatNewsDate(updatedAt)}</p> : null}
          </Reveal>
          <Reveal delay={100}>
            <a className="vk-cta" href="https://vk.com/fond_nl" target="_blank" rel="noopener">
              <img src="uploads/vk-logo-icon.png?v=102" alt="VK" className="vk-badge"/> Все новости ВКонтакте <Icon name="arrowUpRight" size={18} />
            </a>
          </Reveal>
        </div>
        <div className="news-grid">
          {items.map((n, i) => (
            <Reveal key={n.id || i} delay={i * 90}>
              <a className="card card-hover news-card" href={n.href || 'https://vk.com/fond_nl'} target="_blank" rel="noopener">
                <div className={`news-thumb news-thumb-${n.tone}`}>
                  <span className="news-tag">{n.tag}</span>
                  {n.imageUrl ? (
                    <img src={n.imageUrl} alt="" className="news-thumb-media" loading="lazy" />
                  ) : (
                    <img src="assets/characters-hero.png" alt="" className="news-thumb-art" loading="lazy" />
                  )}
                </div>
                <div className="news-body">
                  <span className="news-date">{n.date}</span>
                  <h3 className="news-title">{n.title}</h3>
                  <p className="news-text">{n.text}</p>
                  <span className="news-readmore">Читать <Icon name="arrow" size={16} /></span>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- DONATE TEASER (uses shared DonateWidget) ---------- */
function DonateTeaser() {
  return (
    <section className="section" id="donate-block">
      <div className="wrap">
        <div className="donate-teaser">
          <div className="blob" style={{ width: 280, height: 280, background: 'rgba(255,255,255,.14)', top: -80, right: -40 }}></div>
          <div className="blob" style={{ width: 200, height: 200, background: 'rgba(240,160,0,.22)', bottom: -70, left: '30%' }}></div>
          <Reveal className="donate-teaser-copy">
            <span className="eyebrow" style={{ color: '#fff' }}>Сделать пожертвование</span>
            <h2 className="h-lg" style={{ color: '#fff', fontSize: 'clamp(22px, 3.2vw, 42px)' }}>Любая сумма важна.<br />И каждая — это шаг<br />навстречу ребёнку</h2>
            <p className="lead" style={{ color: 'rgba(255,255,255,.9)', marginTop: 14 }}>
              Регулярные пожертвования помогают нам не останавливаться: наставники продолжают приходить, а подростки — чувствовать, что они кому-то нужны.
            </p>
          </Reveal>
          <Reveal delay={120} className="donate-teaser-widget">
            <DonateWidget compact />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- TEAM TEASER ---------- */
function TeamTeaser() {
  const { go } = useNav();
  return (
    <section className="section">
      <div className="wrap team-teaser">
        <Reveal>
          <span className="eyebrow">Наша команда</span>
          <h2 className="h-lg">Живые люди, которым<br />не всё равно</h2>
          <p className="lead" style={{ marginTop: 14, maxWidth: 440 }}>
            Директор, психологи, куратор и фандрайзер — дружная команда, которая каждый день держит проект на своих плечах.
          </p>
          <Btn to="team" variant="green" icon="arrow" style={{ marginTop: 8 }}>Познакомиться с командой</Btn>
        </Reveal>
        <Reveal delay={120} className="team-avatars">
          {TEAM.filter((m) => m.photo).slice(0, 6).map((m, i) => (
            <div className="team-avatar has-photo" key={i}>
              <img src={m.photo} alt={m.name} style={{ ...(m.zoom ? { transform: 'scale(' + m.zoom + ')' } : {}), ...(m.transformOrigin ? { transformOrigin: m.transformOrigin } : {}), ...(m.objectPosition ? { objectPosition: m.objectPosition } : {}) }} />
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- PARTNERS ---------- */
const PARTNERS = [
  'Фонд «Солнечный город»', 'Фонд президентских грантов', '2ГИС', 'ParkCity',
  'Гранты губернатора 74', 'АНО «Азбука семьи»', 'Анна Помогает', 'Фонд «Строим добро»',
];
function PartnersSection() {
  return (
    <section className="section-sm section-cream">
      <div className="wrap">
        <Reveal className="section-head">
          <span className="eyebrow">Наши партнёры</span>
          <h2 className="h-md">Нам доверяют и помогают</h2>
        </Reveal>
        <Reveal delay={80} className="partners-grid">
          {PARTNERS.map((p, i) => (
            <div className="partner-chip" key={i}>{p}</div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- HOME ---------- */
function Home() {
  return (
    <div className="page-enter">
      <Hero />
      <StatStrip />
      <AboutTeaser />
      <MentorSection />
      <ImpactSection />
      <StorySection />
      <NewsSection />
      <DonateTeaser />
      <TeamTeaser />
      <PartnersSection />
    </div>
  );
}

Object.assign(window, { Home });