/* Shared layout components: Nav, Footer, Marquee, Floating CTA, Tweaks panel */

const Logo = ({ size = 36, fg = 'var(--accent)' }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" aria-hidden="true">
    <circle cx="22" cy="22" r="7" fill={fg}/>
    <circle cx="78" cy="22" r="7" fill={fg}/>
    <circle cx="22" cy="78" r="7" fill={fg}/>
    <circle cx="78" cy="78" r="7" fill={fg}/>
    <path d="M50 26 A24 24 0 1 1 49.9 26 Z M50 40 A10 10 0 1 0 50.1 40 Z" fill={fg}/>
  </svg>
);

const Marquee = ({ on = true }) => (
  <div className="marquee" data-on={on ? 1 : 0} aria-hidden="true">
    <div className="marquee-inner">
      {[...Array(2)].map((_, k) => (
        <React.Fragment key={k}>
          <span>● МЕТОД БЕЗ ОТКАТОВ</span>
          <span>● РАБОТАЕМ ТОЛЬКО С ТЕМИ, У КОГО ГОРИТ</span>
          <span>● НЕ ЧИНИМ МУЖЕЙ</span>
          <span>● ПРАВДА · ДЫХАНИЕ · ТЕЛО</span>
          <span>● АВТОРСКАЯ ПРАКТИКА</span>
          <span>● OSOZNANKA.COM</span>
        </React.Fragment>
      ))}
    </div>
  </div>
);

const Nav = ({ current = 'home' }) => {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <>
      <header className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a className="nav-brand" href="index.html" aria-label="Осознанка наизнанку — на главную">
          <Logo size={38}/>
          <div className="nav-brand-text">
            осознанка
            <small>наизнанку</small>
          </div>
        </a>
        <nav className="nav-links" aria-label="Основная навигация">
          <a className="nav-link" href="method.html">Метод</a>
          <a className="nav-link" href="for-whom.html">Для кого</a>
          <a className="nav-link" href="about.html">От кого</a>
          <div className="nav-link has-sub" tabIndex="0">Продукты
            <div className="sub" role="menu">
              <div>
                <h4>Форматы</h4>
                <a href="session.html">Индивидуальная сессия</a>
                <a href="group.html">Терапевтическая группа</a>
                <a href="vip.html">VIP-сопровождение</a>
                <div className="sub-divider">▾ новое</div>
                <a href="challenge-ves-les.html" className="nav-new">
                  Челлендж · Вес-лес <span className="nav-new-tag">NEW</span>
                </a>
              </div>
              <div>
                <h4>Программы</h4>
                <a href="ves-les.html">Вес-лес</a>
                <a href="money.html">Деньги</a>
                <a href="relations.html">Отношения</a>
                <a href="business.html">Бизнес</a>
                <a href="age.html">Старость</a>
              </div>
            </div>
          </div>
          <a className="nav-link" href="cases.html">Кейсы</a>
          <a className="nav-link" href="events.html">События</a>
          <a className="nav-link" href="media.html">Медиа</a>
          <a className="btn btn-orange" href="session.html">Записаться →</a>
        </nav>
        <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Открыть меню">
          <span></span>
        </button>
      </header>

      <div className={`mobile-drawer ${open ? 'open' : ''}`} role="dialog" aria-modal="true">
        <button className="mobile-drawer-close" onClick={() => setOpen(false)} aria-label="Закрыть меню">×</button>
        <nav>
          <a href="method.html" onClick={()=>setOpen(false)}>Метод</a>
          <a href="for-whom.html" onClick={()=>setOpen(false)}>Для кого</a>
          <a href="about.html" onClick={()=>setOpen(false)}>От кого</a>
          <a href="session.html" onClick={()=>setOpen(false)}>Сессия</a>
          <a href="group.html" onClick={()=>setOpen(false)}>Группа</a>
          <a href="vip.html" onClick={()=>setOpen(false)}>VIP</a>
          <a href="challenge-ves-les.html" onClick={()=>setOpen(false)} style={{padding:'10px 12px',background:'rgba(227,104,62,0.1)',borderLeft:'3px solid var(--orange)',color:'var(--orange)',fontWeight:800}}>Челлендж · Вес-лес <span className="nav-new-tag" style={{marginLeft:8}}>NEW</span></a>
          <a href="ves-les.html" onClick={()=>setOpen(false)}>Вес-лес</a>
          <a href="money.html" onClick={()=>setOpen(false)}>Деньги</a>
          <a href="relations.html" onClick={()=>setOpen(false)}>Отношения</a>
          <a href="business.html" onClick={()=>setOpen(false)}>Бизнес</a>
          <a href="age.html" onClick={()=>setOpen(false)}>Старость</a>
          <a href="cases.html" onClick={()=>setOpen(false)}>Кейсы</a>
          <a href="events.html" onClick={()=>setOpen(false)}>События</a>
          <a href="media.html" onClick={()=>setOpen(false)}>Медиа</a>
          <a className="btn btn-orange" href="session.html" style={{marginTop:32}} onClick={()=>setOpen(false)}>Записаться →</a>
        </nav>
      </div>
    </>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="footer-grid">
      <div>
        <div className="footer-brand-name">
          осознанка <span className="orange">наизнанку</span>
        </div>
        <p style={{margin:0, color:'var(--cream-77)', lineHeight: 1.5}}>
          Метод синхронизации души и тела. Авторская практика
          К.&nbsp;Пуляткиной и Е.&nbsp;Новиковской. Без откатов.
        </p>
      </div>
      <div>
        <h5>НАВИГАЦИЯ</h5>
        <a href="method.html">Метод</a>
        <a href="for-whom.html">Для кого</a>
        <a href="about.html">От кого</a>
        <a href="cases.html">Кейсы</a>
        <a href="events.html">События</a>
        <a href="media.html">Медиа</a>
      </div>
      <div>
        <h5>ПРОДУКТЫ</h5>
        <a href="session.html">Сессия</a>
        <a href="group.html">Группа</a>
        <a href="vip.html">VIP</a>
        <a href="challenge-ves-les.html"><span style={{color:'var(--orange)'}}>●</span> Челлендж · Вес-лес</a>
        <a href="ves-les.html">Вес-лес (программа)</a>
        <a href="money.html">Деньги · Отношения · Бизнес</a>
        <a href="age.html">Старость</a>
      </div>
      <div>
        <h5>КОНТАКТЫ</h5>
        <a href="about.html#contacts">Форма и все контакты →</a>
        <a href="https://t.me/soulnovikovskaya" target="_blank" rel="noreferrer">TG @soulnovikovskaya</a>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 — ПОЛИТИКА · ОФЕРТА · СОГЛАСИЕ</span>
      <span>OSOZNANKA.COM</span>
    </div>
  </footer>
);

const FloatingCTA = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 400);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const toTop = (e) => {
    e.preventDefault();
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <>
      <button
        className="cta-totop"
        onClick={toTop}
        aria-label="Наверх"
        style={{ opacity: scrolled ? 1 : 0, pointerEvents: scrolled ? 'auto' : 'none' }}
      >↑</button>
      <a className="cta-float" href="session.html" aria-label="Записаться">● Записаться</a>
      <a className="cta-sticky" href="session.html">Записаться на сессию →</a>
    </>
  );
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "orange",
  "posterScale": 1,
  "marquee": true
}/*EDITMODE-END*/;

const TweaksPanel = ({ tweaks, setTweaks }) => {
  const [editMode, setEditMode] = React.useState(false);
  React.useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (edits) => {
    const next = {...tweaks, ...edits};
    setTweaks(next);
    try { window.parent.postMessage({type:'__edit_mode_set_keys', edits}, '*'); } catch(e){}
  };

  if (!editMode) return null;
  return (
    <aside className="tweaks open" aria-label="Tweaks">
      <h4>Tweaks</h4>
      <label>Акцент
        <div className="row">
          <button className={`chip ${tweaks.accent === 'orange' ? 'on' : ''}`} onClick={() => persist({accent: 'orange'})}>оранжевый</button>
          <button className={`chip ${tweaks.accent === 'acid' ? 'on' : ''}`} onClick={() => persist({accent: 'acid'})}>кислота</button>
        </div>
      </label>
      <label>Размер постерных заголовков
        <div className="row">
          <input type="range" min="0.6" max="1.3" step="0.05"
            value={tweaks.posterScale}
            onChange={(e) => persist({posterScale: Number(e.target.value)})}/>
          <span style={{minWidth: 40, textAlign:'right', fontFamily:'var(--f-mono)'}}>
            ×{Number(tweaks.posterScale).toFixed(2)}
          </span>
        </div>
      </label>
      <label>Бегущая строка
        <div className="row">
          <button className={`chip ${tweaks.marquee ? 'on' : ''}`} onClick={() => persist({marquee: true})}>ВКЛ</button>
          <button className={`chip ${!tweaks.marquee ? 'on' : ''}`} onClick={() => persist({marquee: false})}>ВЫКЛ</button>
        </div>
      </label>
    </aside>
  );
};

const applyTweaks = (t) => {
  const r = document.documentElement;
  r.style.setProperty('--accent', t.accent === 'acid' ? 'var(--acid)' : 'var(--orange)');
  r.style.setProperty('--poster-scale', String(t.posterScale));
};

// Универсальный блок «что дальше» — ставится внизу страниц, до футера.
// items: [{label, desc, href, primary?:bool}]
const NextSteps = ({ kicker = '§ дальше', title, items, note }) => (
  <section className="section bg-deep" style={{paddingTop: 56, paddingBottom: 56}}>
    <div className="tag">{kicker}</div>
    <h2 className="poster poster-md" style={{margin:'14px 0 28px'}}>{title}</h2>
    <div style={{display:'grid', gridTemplateColumns:`repeat(${items.length}, 1fr)`, gap: 0, borderTop:'2px solid var(--cream)', borderBottom:'2px solid var(--cream)'}} className="next-grid">
      {items.map((it, i) => (
        <a key={i} href={it.href} className="next-card" style={{
          padding:'28px 28px 32px',
          borderRight: i < items.length - 1 ? '1px solid var(--cream-33)' : 'none',
          textDecoration:'none', color:'inherit',
          display:'flex', flexDirection:'column', gap: 14,
          background: it.primary ? 'var(--accent)' : 'transparent',
          color: it.primary ? '#1A2535' : 'var(--cream)',
          transition: 'background .2s',
          minHeight: 220,
        }}>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.12em'}}>
            /0{i + 1}
          </div>
          <div style={{fontFamily:'var(--f-display)', fontSize:'clamp(22px, 2.40vw, 29px)', fontWeight: 900, letterSpacing:'-0.015em', lineHeight: 1.1}}>
            {it.label}
          </div>
          <div style={{fontSize: 15, lineHeight: 1.5, opacity: 0.85, flex: 1}}>
            {it.desc}
          </div>
          <div style={{fontFamily:'var(--f-mono)', fontSize: 14, letterSpacing:'0.1em', marginTop: 4}}>
            →
          </div>
        </a>
      ))}
    </div>
    {note ? (
      <p style={{marginTop: 18, fontSize: 12, lineHeight: 1.5, color:'var(--cream-77)'}}>{note}</p>
    ) : null}
  </section>
);

Object.assign(window, { Logo, Marquee, Nav, Footer, FloatingCTA, TweaksPanel, TWEAK_DEFAULTS, applyTweaks, NextSteps });