/* DedPay — Header, Hero (3 variants), Categories */
const { useState: useStateT, useEffect: useEffectT, useRef: useRefT } = React;

/* ---------------- Header ---------------- */
function Header({ data, onMenu }) {
  const [scrolled, setScrolled] = useStateT(false);
  useEffectT(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"header" + (scrolled ? " scrolled" : "")} id="top">
      <div className="container header-inner">
        <Logo />
        <nav className="nav">
          {data.nav.map((n) =>
          <a key={n.href} href={n.href}>{n.label}</a>
          )}
        </nav>
        <div className="header-actions">
          <Button variant="primary" telegram href={data.tg}>Перейти в Telegram</Button>
          <button className="hamburger" onClick={onMenu} aria-label="Меню">
            <Icon name="menu" />
          </button>
        </div>
      </div>
    </header>);

}

/* ---------------- Service marquee ---------------- */
function ServiceMarquee({ services }) {
  const row = [...services, ...services];
  return (
    <div className="marquee-wrap">
      <div className="marquee">
        {row.map((s, i) =>
        <span className="svc-pill" key={i}>
            <span className="glyph"><Icon name={s.icon} size={14} /></span>
            {s.name}
          </span>
        )}
      </div>
    </div>);

}

/* ---------------- Telegram preview card ---------------- */
function TgPreview() {
  return (
    <div className="tg-card">
      <div className="tg-top">
        <span className="tg-avatar"><img src="assets/dedpay-mark.png" alt="DedPay" /></span>
        <span className="meta">
          <b>DedPay bot</b>
          <span>@dedpayrobot · online</span>
        </span>
        <span className="ico"><Icon name="search" size={18} /><Icon name="more-vertical" size={18} /></span>
      </div>
      <div className="tg-body">
        <div className="bubble in">
          Привет! Что хотите оформить сегодня?
          <div className="t">14:02</div>
        </div>
        <div className="tg-chips">
          <span className="tg-chip">🎵 Музыка</span>
          <span className="tg-chip">🎮 Игры</span>
          <span className="tg-chip"> Apple</span>
          <span className="tg-chip">🎬 Видео</span>
          <span className="tg-chip">🎁 Карты</span>
        </div>
        <div className="bubble out">
          Spotify Premium на 1 месяц
          <div className="t" style={{ color: "rgba(6,8,13,.55)" }}>14:02 ✓✓</div>
        </div>
        <div className="bubble in">
          Отлично. Уточните ссылку на профиль — и переходим к оплате.
          <div className="t">14:03</div>
        </div>
      </div>
      <div className="tg-input">
        <span className="field">Сообщение…</span>
        <span className="send"><TgGlyph size={16} /></span>
      </div>
    </div>);

}

/* ---------------- Hero ---------------- */
function Hero({ data, direction }) {
  const h1Aurora =
  <>Оплата зарубежных<br />цифровых сервисов <span className="accent">без лишней возни</span></>;

  const sub = "DedPay помогает оформить доступ к подпискам, цифровым пополнениям и игровым балансам: Spotify, Apple Music, Steam, PSN, App Store и другим сервисам.";

  const trustRow =
  <div className="hero-trust">
      <span className="item"><Icon name="shield-check" size={16} />Автоматическое оформление</span>
      <span className="item"><Icon name="headphones" size={16} />Поддержка перед оплатой</span>
    </div>;


  const ctas =
  <div className="hero-cta">
      <Button variant="primary" size="lg" telegram href={data.tg}>Перейти в Telegram-бота</Button>
      <Button variant="ghost" size="lg" href="#services">Посмотреть услуги</Button>
    </div>;


  if (direction === "console") {
    return (
      <section className="hero console">
        <div className="container">
          <div className="hero-grid">
            <Reveal>
              <span className="hero-badge"><span className="dot"></span>Цифровое содействие в оплате</span>
              <h1>{h1Aurora}</h1>
              <p className="hero-sub">{sub}</p>
              {ctas}
              {trustRow}
            </Reveal>
            <Reveal delay={120}><TgPreview /></Reveal>
          </div>
        </div>
        <div className="container" style={{ marginTop: 56 }}>
          <ServiceMarquee services={data.services} />
        </div>
      </section>);

  }

  if (direction === "spotlight") {
    return (
      <section className="hero spotlight">
        <div className="container">
          <Reveal>
            <span className="hero-badge"><span className="dot"></span>DedPay · цифровое содействие</span>
            <h1>Зарубежные сервисы — <span className="accent">просто оплатить</span></h1>
            <p className="hero-sub">{sub}</p>
            {ctas}
            <div className="hero-foot">
              <span className="stat"><span className="n">10+</span><span className="l">направлений сервисов</span></span>
              <span className="stat"><span className="n">Telegram</span><span className="l">всё оформление в боте</span></span>
              <span className="stat"><span className="n">Оферта</span><span className="l">работаем по документам</span></span>
            </div>
          </Reveal>
        </div>
        <div className="container" style={{ marginTop: 64 }}>
          <ServiceMarquee services={data.services} />
        </div>
      </section>);

  }

  // aurora (default)
  return (
    <section className="hero aurora">
      <div className="hero-orb"></div>
      <div className="container">
        <Reveal>
          <span className="hero-badge"><span className="dot"></span>Помощь с оплатой подписок</span>
          <h1>{h1Aurora}</h1>
          <p className="hero-sub">{sub}</p>
          {ctas}
          {trustRow}
        </Reveal>
        <Reveal delay={140} className="marquee-wrap-outer">
          <div className="marquee-wrap" style={{ marginTop: 56 }}>
            <div className="marquee">
              {[...data.services, ...data.services].map((s, i) =>
              <span className="svc-pill" key={i}>
                  <span className="glyph"><Icon name={s.icon} size={14} /></span>{s.name}
                </span>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------------- Categories ---------------- */
function Categories({ data }) {
  const [active, setActive] = useStateT(null); // null = all highlighted
  return (
    <section className="section" id="services">
      <div className="container">
        <SectionHead
          eyebrow="Услуги"
          title="Что можно оформить через DedPay"
          sub="Полный список — в Telegram-боте." />
        
        <div className="cat-tabs">
          <button className={"cat-tab" + (active === null ? " active" : "")} onClick={() => setActive(null)}>
            Все направления
          </button>
          {data.categories.map((c) =>
          <button
            key={c.id}
            className={"cat-tab" + (active === c.id ? " active" : "")}
            onClick={() => setActive(active === c.id ? null : c.id)}>
            
              <Icon name={c.icon} size={16} />{c.title}
            </button>
          )}
        </div>
        <div className="cat-grid">
          {data.categories.map((c, i) =>
          <Reveal
            as="div"
            delay={i % 3 * 70}
            key={c.id}
            className={"card cat-card" + (active && active !== c.id ? " dim" : "")}
            onClick={() => setActive(active === c.id ? null : c.id)}>
            
              <span className="icon-tile"><Icon name={c.icon} /></span>
              <h3>{c.title}</h3>
              <p>{c.desc}</p>
              <div className="cat-examples">
                {c.examples.map((e) => <span key={e}>{e}</span>)}
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Header, Hero, Categories, ServiceMarquee, TgPreview });