/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// Crop masonry columns to the shortest one (desktop only).
// JS measures heights after images load and clips taller columns with max-height + overflow:hidden.
// Diagnostic logging: open page with ?debug=1 to see per-call measurements in console.
function useEvenColumns(ref, deps) {
  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    if (window.innerWidth < 1024) return;

    const DEBUG = (() => { try { return new URL(window.location.href).searchParams.get('debug') === '1'; } catch(_) { return false; } })();
    const t0 = performance.now();
    const log = (...a) => { if (DEBUG) console.log('[masonry +' + Math.round(performance.now() - t0) + 'ms]', ...a); };

    const cols = () => Array.from(root.children).filter(c => c.classList && c.classList.contains('masonry-col'));

    let callCount = 0;
    const apply = (reason) => {
      callCount++;
      const list = cols();
      if (list.length < 2) return;
      list.forEach(c => { c.style.maxHeight = ''; c.style.overflow = ''; });
      const heights = list.map(c => c.getBoundingClientRect().height);
      const minH = Math.min(...heights);
      if (DEBUG) {
        const media = Array.from(root.querySelectorAll('img, video'));
        const loaded = media.filter(m => m.complete && m.naturalHeight > 0).length;
        log('#' + callCount + ' (' + reason + ') heights=[' + heights.map(h=>Math.round(h)).join(',') + '] minH=' + Math.round(minH) + ' media=' + loaded + '/' + media.length);
      }
      list.forEach((c, i) => {
        if (heights[i] > minH + 1) {
          c.style.maxHeight = minH + 'px';
          c.style.overflow = 'hidden';
        }
      });
    };

    let raf = requestAnimationFrame(() => apply('initial-raf'));
    const rerunWith = (reason) => () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => apply(reason)); };
    const onLoad = rerunWith('img-load');
    const onMeta = rerunWith('img-meta');
    const onErr  = rerunWith('img-error');
    const onResize = rerunWith('resize');

    const media = Array.from(root.querySelectorAll('img, video'));
    log('mounted: ' + media.length + ' media, ' + cols().length + ' cols, container=' + Math.round(root.getBoundingClientRect().width) + 'px');
    media.forEach(m => {
      m.addEventListener('load', onLoad);
      m.addEventListener('loadedmetadata', onMeta);
      m.addEventListener('error', onErr);
    });
    window.addEventListener('resize', onResize);

    return () => {
      cancelAnimationFrame(raf);
      media.forEach(m => {
        m.removeEventListener('load', onLoad);
        m.removeEventListener('loadedmetadata', onMeta);
        m.removeEventListener('error', onErr);
      });
      window.removeEventListener('resize', onResize);
    };
  }, deps);
}

// Scroll-parallax для плиток галерей (desktop-only).
// Берёт каждую .tile внутри ref, считает смещение её центра от центра viewport,
// прокидывает в CSS-переменную --parallax-y. CSS перетранслирует <img>/<video>
// внутри плитки на эту величину — изображение «отстаёт» от фона при скролле,
// создаётся параллакс-глубина. Под капотом — requestAnimationFrame чтобы
// не нагружать рендер на каждом scroll-event.
function useParallax(ref, deps) {
  useEffect(() => {
    const root = ref.current;
    if (!root) return;
    if (window.innerWidth < 1024) return;
    // Уважаем prefers-reduced-motion — параллакс может укачивать
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;

    const MAX_SHIFT = 28; // px — диапазон смещения изображения

    const apply = () => {
      const vh = window.innerHeight;
      const tiles = root.querySelectorAll('.tile, .sketch');
      tiles.forEach(tile => {
        const r = tile.getBoundingClientRect();
        if (r.bottom < -100 || r.top > vh + 100) return;
        const center = r.top + r.height / 2;
        const offset = (center - vh / 2) / vh; // -0.5..+0.5 примерно
        const dy = -offset * MAX_SHIFT; // знак — чтобы фото шло против скролла
        tile.style.setProperty('--parallax-y', dy.toFixed(1) + 'px');
      });
    };

    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { raf = null; apply(); });
    };

    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    apply();

    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, deps);
}

const API_BASE = window.NOKK_API ||
  ((['127.0.0.1', 'localhost'].includes(window.location.hostname))
    ? 'http://127.0.0.1:8001/api'
    : '/api');

// ─── Portfolio data ───────────────────────────────────────
const WORKS = [
  { id:'NK-027', src:'works/w27.jpg', tag:'flash',   style:'traditional',  size:'wide' },
  { id:'NK-001', src:'works/w01.webp', tag:'tattoo', style:'gothic / engraving' },
  { id:'NK-018', src:'works/w18.jpg',  tag:'tattoo', style:'blackwork' },
  { id:'NK-025', src:'works/w25.jpg',  tag:'tattoo', style:'fineline' },
  { id:'NK-002', src:'works/w02.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-003', src:'works/w03.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-004', src:'works/w04.webp', tag:'tattoo', style:'blackwork' },
  { id:'NK-005', src:'works/w05.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-VID', src:'works/v_5s.mp4', tag:'video',  style:'process', video:true },
  { id:'NK-007', src:'works/w07.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-008', src:'works/w08.webp', tag:'tattoo', style:'gothic' },
  { id:'NK-009', src:'works/w09.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-010', src:'works/w10.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-011', src:'works/w11.webp', tag:'tattoo', style:'blackwork' },
  { id:'NK-012', src:'works/w12.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-V12', src:'works/v_12s.mp4',tag:'video',  style:'studio', video:true },
  { id:'NK-013', src:'works/w13.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-014', src:'works/w14.webp', tag:'tattoo', style:'blackwork' },
  { id:'NK-015', src:'works/w15.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-016', src:'works/w16.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-017', src:'works/w17.webp', tag:'tattoo', style:'gothic' },
  { id:'NK-019', src:'works/w19.webp', tag:'tattoo', style:'blackwork' },
  { id:'NK-020', src:'works/w20.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-021', src:'works/w21.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-022', src:'works/w22.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-V08', src:'works/v_8s.mp4', tag:'video', style:'process', video:true },
  { id:'NK-023', src:'works/w23.webp', tag:'tattoo', style:'illustrative' },
  { id:'NK-024', src:'works/w24.webp', tag:'tattoo', style:'fineline' },
  { id:'NK-026', src:'works/w26.webp', tag:'tattoo', style:'gothic' },
];

const SKETCHES_AVAILABLE = [
  { id:'SK-A1', src:'works/w01.webp', price:'90.000 ₸', taken:false, size:'M' },
  { id:'SK-A2', src:'works/w27.jpg',  price:'140.000 ₸', taken:false, size:'L' },
  { id:'SK-A3', src:'works/w17.webp', price:'70.000 ₸', taken:true,  size:'S' },
  { id:'SK-A4', src:'works/w20.webp', price:'85.000 ₸', taken:false, size:'M' },
  { id:'SK-A5', src:'works/w11.webp', price:'120.000 ₸', taken:false, size:'L' },
  { id:'SK-A6', src:'works/w08.webp', price:'95.000 ₸', taken:true,  size:'M' },
  { id:'SK-A7', src:'works/w14.webp', price:'80.000 ₸', taken:false, size:'M' },
  { id:'SK-A8', src:'works/w22.webp', price:'65.000 ₸', taken:false, size:'S' },
];

const SERVICES = [
  { i:'⌘', name:'Tattoo / black work',   desc:'Чёрная татуировка, иллюстративный / blackwork стиль.', price:'от 50.000 ₸' },
  { i:'✕', name:'Cover-up / re-work',     desc:'Перекрытие старой татуировки. Бесплатная консультация.', price:'от 90.000 ₸' },
  { i:'☉', name:'Custom sketch',          desc:'Эскиз с нуля по твоей идее. 7–14 дней разработки.', price:'от 25.000 ₸' },
  { i:'⊠', name:'Flash / готовый эскиз',  desc:'Готовый авторский эскиз из доступных в Эскизы.', price:'от 65.000 ₸' },
  { i:'△', name:'Digital artwork',        desc:'Цифровой арт, post-internet / glitch / dystopia.', price:'от 40.000 ₸' },
  { i:'⌬', name:'Sleeve / большой объём', desc:'Рукав / большой проект. Сессии по 4–6 ч.', price:'от 350.000 ₸' },
];

const FAQ_ITEMS = [
  { q:'Сколько стоит татуировка?', a:'Минимум 50.000 ₸. Цена считается по эскизу: размер, время, сложность, расположение. Точную цифру скажу после согласования эскиза. Предоплата 30% — она входит в общую сумму.' },
  { q:'Делаешь ли по моему эскизу?', a:'Да, но я оставляю за собой право доработать его под свой стиль. Если хочешь точную копию — приноси готовый файл; я скажу, могу ли я с этим работать.' },
  { q:'Больно ли это?', a:'Зависит от зоны. Рёбра, локоть, шея, ключица — самые жёсткие. Предплечье, плечо, бедро — спокойно. Не приходи на голодный желудок и без сна. Алкоголь / энергетики за 24 ч до сеанса — нет.' },
  { q:'Сколько заживает?', a:'Поверхностно — 7–10 дней, полностью — около месяца. Подробная инструкция по заживлению — после сеанса в Telegram.' },
  { q:'Можно ли в 16 лет?', a:'С 18. Без исключений. Ничего личного — это закон.' },
  { q:'Где находится студия?', a:'Астана, центр. Точный адрес скидываю в Telegram после подтверждения брони.' },
  { q:'Делаешь дома / по выезду?', a:'Нет. Только в студии — это вопрос стерильности.' },
  { q:'Принимаешь карты?', a:'Kaspi, перевод, нал. Чек выдаю.' },
];

// ─── API hook ─────────────────────────────────────────────
const _apiCache = new Map();

function useApi(path, fallback) {
  const url = path ? API_BASE + path : null;
  const [data, setData] = useState(() => (url && _apiCache.has(url)) ? _apiCache.get(url) : fallback);
  useEffect(() => {
    if (!url) return;
    if (_apiCache.has(url)) { setData(_apiCache.get(url)); return; }
    let dead = false;
    fetch(url, { headers: { Accept: 'application/json' } })
      .then(r => r.json())
      .then(json => {
        if (dead) return;
        const d = json.data !== undefined ? json.data : json;
        _apiCache.set(url, d);
        setData(d);
      })
      .catch(() => {});
    return () => { dead = true; };
  }, [url]);
  return data;
}

const fmtPrice  = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ' ₸';
const normWork  = w => ({ id: w.code, src: w.media, tag: w.tag, style: w.style, video: !!w.is_video, ...(w.is_wide ? { size: 'wide' } : {}) });
const normSketch = s => ({ id: s.code, src: s.image, price: fmtPrice(s.price), size: s.size, taken: !!s.taken });
const normSvc   = s => ({ i: s.icon, name: s.name, desc: s.description, price: s.price_text, show_on_home: s.show_on_home });
const normFaq   = f => ({ q: f.question, a: f.answer });
const normOpt   = o => ({ k: o.code, l: o.label, d: o.description || '' });

// Returns value of a setting key from /api/settings, falls back to provided default.
// Settings JSON may store arrays as actual arrays OR as JSON-encoded strings — handle both.
function useSetting(key, fallback) {
  const all = useApi('/settings', null);
  if (!all || all[key] === undefined || all[key] === null) return fallback;
  const v = all[key];
  if (typeof v === 'string' && (v.startsWith('[') || v.startsWith('{'))) {
    try { return JSON.parse(v); } catch { return v; }
  }
  return v;
}

// ─── Home ─────────────────────────────────────────────────
function HomeScreen({ go, tweaks }){
  const I = window.Icons;
  const C = window.Components;
  const rawWorks    = useApi('/works', null);
  const rawServices = useApi('/services', null);
  const works    = rawWorks    ? rawWorks.map(normWork)   : WORKS;
  const services = rawServices ? rawServices.map(normSvc) : SERVICES;
  const linkInstagram = useSetting('contacts.instagram', 'https://instagram.com/nokk.717');
  const linkTiktok    = useSetting('contacts.tiktok',    'https://tiktok.com');
  const linkEmail     = useSetting('contacts.email_public', 'nokk717@mail');
  return (
    <div className="screen">
      {/* watermarks (B) — sit behind content */}
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:120, right:-60, width:280, opacity:0.13}} />
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:520, left:-30, width:160, opacity:0.18}} />
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{top:1040, right:-20, width:120, opacity:0.16}} />
      <img className="deco-wm" src="cutouts/c24.png" aria-hidden alt=""
           style={{top:1480, left:-40, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c18.png" aria-hidden alt=""
           style={{top:1980, right:-30, width:180, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{bottom:60, left:'50%', transform:'translateX(-50%)', width:240, opacity:0.10}} />

      <C.AsciiLogo glitch={tweaks.glitch} />

      <div className="status-social-row">
        <C.StatusRow status={useSetting('site.online_status', 'ONLINE')} />

        <div className="brackets">
          <button className="bracket" onClick={()=>window.open(linkInstagram,'_blank')}>[ Insta ]</button>
          <button className="bracket" onClick={()=>window.open(linkTiktok,'_blank')}>[ TikTok ]</button>
          <button className="bracket acid" onClick={()=>window.open('mailto:' + linkEmail,'_blank')}>[ G·mail ]</button>
        </div>
      </div>

      <div className="chalk-rows">
        <button className="chalk-row" onClick={()=>go('faq')}>
          <span className="box"><img src="cutouts/without_background/c01.png" alt="" /></span>
          <span>
            <div className="label">F.A.Q.</div>
            <div className="sub">// частые вопросы</div>
          </span>
        </button>
        <button className="chalk-row" onClick={()=>go('sketch')}>
          <span className="box"><img src="cutouts/without_background/c02.png" alt="" /></span>
          <span>
            <div className="label">Эскизы</div>
            <div className="sub">// готовые авторские</div>
          </span>
        </button>
        <button className="chalk-row" onClick={()=>go('about')}>
          <span className="box"><img src="cutouts/without_background/c19.png" alt="" /></span>
          <span>
            <div className="label">О мастере</div>
            <div className="sub">// info / studio / kit</div>
          </span>
        </button>
      </div>

      {/* small icon strip — chalk PNG icons from cutouts */}
      <div className="icon-strip">
        <button className="icon-cell" onClick={()=>go('services')} title="Услуги">
          <span className="icon-box">
            <img src="cutouts/without_background/c01.png" alt="" />
            <span className="tag">001</span>
          </span>
          <span className="name">Услуги</span>
          <span className="sub">// прайс / форматы</span>
        </button>
        <button className="icon-cell" onClick={()=>go('sketch')} title="Эскизы">
          <span className="icon-box">
            <img src="cutouts/without_background/c02.png" alt="" />
            <span className="tag">002</span>
          </span>
          <span className="name">Эскизы</span>
          <span className="sub">// готовые авторские</span>
        </button>
        <button className="icon-cell" onClick={()=>go('faq')} title="F.A.Q.">
          <span className="icon-box">
            <img src="cutouts/without_background/c03.png" alt="" />
            <span className="tag">003</span>
          </span>
          <span className="name">F.A.Q.</span>
          <span className="sub">// частые вопросы</span>
        </button>
        <button className="icon-cell" onClick={()=>go('book')} title="Заявка">
          <span className="icon-box">
            <img src="cutouts/without_background/c04.png" alt="" />
            <span className="tag">004</span>
          </span>
          <span className="name">Заявка</span>
          <span className="sub">// запись на сеанс</span>
        </button>
        <button className="icon-cell" onClick={()=>go('portfolio')} title="Работы">
          <span className="icon-box">
            <img src="cutouts/without_background/c06.png" alt="" />
            <span className="tag">005</span>
          </span>
          <span className="name">Работы</span>
          <span className="sub">// архив 29</span>
        </button>
        <button className="icon-cell" onClick={()=>go('about')} title="Мастер">
          <span className="icon-box">
            <img src="cutouts/without_background/c19.png" alt="" />
            <span className="tag">006</span>
          </span>
          <span className="name">Мастер</span>
          <span className="sub">// info / studio / kit</span>
        </button>
      </div>

      <div className="deco-divider">
        <img src="cutouts/c11.png" alt="" />
        <span className="lbl">// dossier</span>
        <img src="cutouts/c11.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('home.section_meet_num', '01')}
          title={useSetting('home.section_meet_title', 'meet the artist')}
          sub={useSetting('home.section_meet_sub', '// obj.001')} />
        <div className="portrait portrait--home">
          <img src={useSetting('home.portrait_image', 'works/c03.png')} alt="nokk.717" />
          <div className="portrait-meta">
            <div className="portrait-tag">{useSetting('home.portrait_subject', 'SUBJECT // OBJ.001')}</div>
            <div className="portrait-name">{useSetting('home.portrait_name_main', '@nokk')}<span className="ac">{useSetting('home.portrait_name_acid', '.717')}</span></div>
            <div className="portrait-loc">{useSetting('home.portrait_loc', 'astana, kz · since 2019')}</div>
            <p className="portrait-bio" dangerouslySetInnerHTML={{__html: useSetting('home.portrait_bio', 'tattoo как <em>обряд</em>. engraving, anime, кибернетический мистицизм. краска под кожей — сообщение, которое останется когда сервер упадёт.')}} />
          </div>
          <div className="portrait-corners" aria-hidden>
            <span/><span/><span/><span/>
          </div>
        </div>
        <button className="bracket home-cta" style={{width:'100%', marginTop:8}} onClick={()=>go('about')}>
          {useSetting('home.btn_full_dossier', '[ полное досье → ]')}
        </button>
      </div>

      <div className="deco-divider">
        <img src="cutouts/c07.png" alt="" />
        <span className="lbl">// archive</span>
        <img src="cutouts/c13.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('home.section_works_num', '02')}
          title={useSetting('home.section_works_title', 'WORKS')}
          sub={useSetting('home.section_works_sub', '// последние')} />
      </div>
      <PortfolioGrid limit={9} works={works} onSelect={(idx)=>go('portfolio', { focus: idx })} />
      <div style={{padding:'14px 18px'}}>
        <button className="bracket home-cta" style={{width:'100%'}} onClick={()=>go('portfolio')}>
          {useSetting('home.btn_all_works_template', '[ all works → {count} ]').replace('{count}', works.length)}
        </button>
      </div>

      <div className="deco-divider">
        <img src="cutouts/c14.png" alt="" />
        <span className="lbl">// price index</span>
        <img src="cutouts/c14.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('home.section_services_num', '03')}
          title={useSetting('home.section_services_title', 'services')} />
      </div>
      <div className="services">
        {services.slice(0,3).map((s,i)=>(
          <div className="service" key={i} onClick={()=>go('book')} style={{cursor:'pointer'}}>
            <div className="i">{s.i}</div>
            <div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
            </div>
            <div className="price">{s.price}</div>
          </div>
        ))}
      </div>
      <div style={{padding:'14px 18px'}}>
        <button className="bracket home-cta" style={{width:'100%'}} onClick={()=>go('services')}>
          {useSetting('home.btn_all_services', '[ все услуги ]')}
        </button>
      </div>

      <C.FooterMarks />
      <C.TermFoot />
    </div>
  );
}

// ─── Portfolio ─────────────────────────────────────────────
function PortfolioGrid({ limit, onSelect, works = WORKS }){
  const items = limit ? works.slice(0, limit) : works;
  const COLS = 4;
  const galleryRef = useRef(null);
  useEvenColumns(galleryRef, [items]);
  useParallax(galleryRef, [items]);
  const renderTile = (w, i) => (
    <div
      key={w.id}
      className={"tile " + (w.size==='wide'?'wide':'') + (w.video?' video':'')}
      onClick={()=> onSelect(i)}
    >
      {w.video
        ? <video src={w.src} muted loop playsInline autoPlay preload="metadata" />
        : <img src={w.src} alt={w.id} />}
      <div className="meta">
        <span className="id">{w.id}</span>
        <span>{w.style}</span>
      </div>
    </div>
  );
  return (
    <div className="gallery gallery--preview" ref={galleryRef}>
      {Array.from({length: COLS}, (_, ci) => (
        <div className="masonry-col" key={ci}>
          {items.map((w, i) => i % COLS === ci ? renderTile(w, i) : null)}
        </div>
      ))}
    </div>
  );
}

function Lightbox({ idx, items, onClose, onPrev, onNext }){
  if (idx == null) return null;
  const w = items[idx];
  useEffect(()=>{
    const k = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowLeft') onPrev();
      if (e.key === 'ArrowRight') onNext();
    };
    window.addEventListener('keydown', k);
    return ()=> window.removeEventListener('keydown', k);
  }, [idx]);
  return (
    <div className="lightbox" onClick={onClose}>
      <button className="lb-close" onClick={onClose}>✕</button>
      <div className="lb-meta">
        <span className="id">{w.id}</span>
        <span>{w.style}</span>
      </div>
      {w.video
        ? <video src={w.src} controls autoPlay onClick={e=>e.stopPropagation()} />
        : <img src={w.src} alt={w.id} onClick={e=>e.stopPropagation()} />}
      <div className="nav" onClick={e=>e.stopPropagation()}>
        <button onClick={onPrev}>◀ prev</button>
        <button onClick={onNext}>next ▶</button>
      </div>
    </div>
  );
}

function PortfolioScreen({ go, focusIdx=null }){
  const C = window.Components;
  const [filter, setFilter] = useState('all');
  const [lb, setLb] = useState(focusIdx);
  const rawWorks = useApi('/works', null);
  const works = rawWorks ? rawWorks.map(normWork) : WORKS;
  useEffect(()=>{ if (focusIdx != null) setLb(focusIdx); }, [focusIdx]);
  const filtered = useMemo(()=>{
    if (filter==='all') return works;
    return works.filter(w => w.tag===filter || w.style.includes(filter));
  }, [filter, works]);
  const galleryRef = useRef(null);
  useEvenColumns(galleryRef, [filtered]);
  useParallax(galleryRef, [filtered]);
  const filters = useSetting('portfolio.filters', [
    {k:'all', l:'все'},
    {k:'blackwork', l:'blackwork'},
    {k:'fineline', l:'fineline'},
    {k:'gothic', l:'gothic'},
    {k:'illustrative', l:'illustr.'},
    {k:'video', l:'video'},
  ]);
  const portfolioTopbarTitle = useSetting('portfolio.topbar_title', '// PORTFOLIO');
  const portfolioTopbarLeft  = useSetting('portfolio.topbar_left_template', '{count} pcs').replace('{count}', works.length);
  const portfolioFilterTitle = useSetting('portfolio.section_filter_title', 'filter');
  const portfolioFilterNum   = useSetting('portfolio.section_filter_num', '01');
  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{top:80, right:-30, width:130, opacity:0.18}} />
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:520, left:-40, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:1200, right:-30, width:140, opacity:0.14}} />
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{bottom:80, left:'50%', transform:'translateX(-50%)', width:220, opacity:0.10}} />

      <C.Topbar onBack={()=>go('home')} title={portfolioTopbarTitle} left={portfolioTopbarLeft} />
      <div className="section">
        <C.SectionHead num={portfolioFilterNum} title={portfolioFilterTitle} />
        <div style={{display:'flex', gap:6, flexWrap:'wrap', marginBottom: 12}}>
          {filters.map(f => (
            <button
              key={f.k}
              className={"bracket " + (filter===f.k ? 'acid' : '')}
              style={{padding:'4px 10px', fontSize:11, borderRadius:0, minWidth:0}}
              onClick={()=>setFilter(f.k)}
            >{f.l}</button>
          ))}
        </div>
      </div>
      <div className="deco-divider">
        <img src="cutouts/c14.png" alt="" />
        <span className="lbl">// archive</span>
        <img src="cutouts/c12.png" alt="" />
      </div>
      <div className="gallery gallery--full" ref={galleryRef}>
        {Array.from({length: 4}, (_, ci) => (
          <div className="masonry-col" key={ci}>
            {filtered.map((w, i) => i % 4 === ci ? (
              <div
                key={w.id}
                className={"tile " + (w.video?'video':'')}
                onClick={()=>setLb(works.indexOf(w))}
              >
                {w.video
                  ? <video src={w.src} muted loop playsInline autoPlay preload="metadata" />
                  : <img src={w.src} alt={w.id} />}
                <div className="meta"><span className="id">{w.id}</span><span>{w.style}</span></div>
              </div>
            ) : null)}
          </div>
        ))}
      </div>
      <div style={{height: 30}} />
      <C.TermFoot />
      {lb != null && (
        <Lightbox
          idx={lb} items={works}
          onClose={()=>setLb(null)}
          onPrev={()=>setLb(p => (p - 1 + works.length) % works.length)}
          onNext={()=>setLb(p => (p + 1) % works.length)}
        />
      )}
    </div>
  );
}

// ─── About ─────────────────────────────────────────────────
function AboutScreen({ go }){
  const C = window.Components;
  const identity      = useSetting('about.identity', [
    {k:'alias', v:'nokk.717'},
    {k:'real name', v:'[ classified ]'},
    {k:'since', v:'2019'},
    {k:'based', v:'Astana, KZ'},
    {k:'studio', v:'private — only by appointment'},
    {k:'stack', v:'Cheyenne Hawk · Eternal Ink · iPad / Procreate'},
    {k:'languages', v:'RU · EN · KZ'},
  ]);
  const studioKv      = useSetting('about.studio_kv', [
    {k:'hours', v:'пн–сб · 12:00 — 21:00'},
    {k:'session', v:'2–6 ч · перерывы каждые 90 мин'},
    {k:'deposit', v:'30% брони · возврат за 7+ дней'},
    {k:'payment', v:'Kaspi · перевод · cash'},
  ]);
  const manifestParas = useSetting('about.manifest_paragraphs', [
    'tattoo как <em>обряд</em>. краска под кожей — сообщение, которое останется, когда сервер упадёт. <strong>research and development in dystopia.</strong>',
    'работаю на стыке engraving, anime и кибернетического мистицизма. ангельские мотивы, библейские геометрии, помехи на сигнале — переписанные через язык pixel art и monoline.',
    'стоп-лист: расистские / нацистские / гомофобные сюжеты, копии чужих работ без разрешения автора, лица живых публичных людей. остальное — обсуждаем.',
  ]);
  // 5 отдельных image/string-настроек вместо одного JSON — даёт мастеру
  // медиа-пикер в админке вместо ручного JSON-редактирования.
  const manifestImgs = {
    primary:          useSetting('about.manifest_image_primary',          'cutouts/c29.png'),
    primary_alt:      useSetting('about.manifest_image_primary_alt',      ''),
    secondary_top:    useSetting('about.manifest_image_secondary_top',    'cutouts/c25.png'),
    secondary_mid:    useSetting('about.manifest_image_secondary_mid',    'cutouts/without_background/c26.png'),
    secondary_bottom: useSetting('about.manifest_image_secondary_bottom', 'cutouts/without_background/c23.png'),
  };
  const phone     = useSetting('contacts.phone', '');
  const workHours = useSetting('contacts.work_hours', '');
  const addrPub   = useSetting('contacts.address_public', '');
  const nextWin   = useSetting('contacts.next_window', '');
  const tgHandle  = useSetting('contacts.telegram_handle', '');
  const igHandle  = useSetting('contacts.instagram_handle', '');
  const tgUrl     = useSetting('contacts.telegram', 'https://t.me/nokk717');
  const waUrl     = useSetting('contacts.whatsapp', '#');
  const igUrl     = useSetting('contacts.instagram', 'https://instagram.com/nokk.717');
  const mailAddr  = useSetting('contacts.email_public', 'nokk717@mail');
  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:140, right:-50, width:200, opacity:0.14}} />
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:680, left:-30, width:160, opacity:0.18}} />
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{top:1180, right:-20, width:120, opacity:0.16}} />
      <img className="deco-wm" src="cutouts/c18.png" aria-hidden alt=""
           style={{top:1620, left:-30, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{bottom:80, left:'50%', transform:'translateX(-50%)', width:200, opacity:0.10}} />

      <C.Topbar onBack={()=>go('home')}
        title={useSetting('about.topbar_title', '// ABOUT')}
        left={useSetting('about.topbar_left', 'OBJ.001')} />
      <div className="section">
        <C.SectionHead
          num={useSetting('about.section_identity_num', '01')}
          title={useSetting('about.section_identity_title', 'identity')} />
        <div className="portrait">
          <img src={useSetting('about.portrait_image', 'works/c03.png')} alt="nokk.717" />
          <div className="portrait-meta">
            <div className="portrait-tag">{useSetting('about.portrait_subject', 'SUBJECT // OBJ.001')}</div>
            <div className="portrait-name">{useSetting('about.portrait_name_main', '@nokk')}<span className="ac">{useSetting('about.portrait_name_acid', '.717')}</span></div>
            <div className="portrait-loc">{useSetting('about.portrait_loc', 'astana, kz · since 2019')}</div>
          </div>
          <div className="portrait-corners" aria-hidden>
            <span/><span/><span/><span/>
          </div>
        </div>
        <div className="kv">
          {identity.map((row, i) => (
            <React.Fragment key={i}>
              <span className="k">{row.k}</span>
              <span className="v">{row.v}</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="deco-divider">
        <img src="cutouts/c11.png" alt="" />
        <span className="lbl">// since 2019</span>
        <img src="cutouts/c11.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('about.section_manifest_num', '02')}
          title={useSetting('about.section_manifest_title', 'manifest')} />
        <div style={{display:'flex', gap:14, alignItems:'flex-start', margin:'8px 0 14px'}}>
          <img src={manifestImgs.primary} alt={manifestImgs.primary_alt || ''} style={{width:'62%', objectFit:'contain', mixBlendMode:'screen', filter:'drop-shadow(0 0 12px rgba(200,255,46,0.4))'}} />
          <div style={{display:'grid', gap:8, flex:1, minWidth:0}}>
            <img src={manifestImgs.secondary_top} alt="" style={{width:48, objectFit:'contain', mixBlendMode:'screen'}} />
            <img src={manifestImgs.secondary_mid} alt="" style={{width:48, objectFit:'contain'}} />
            <img src={manifestImgs.secondary_bottom} alt="" style={{width:'100%', objectFit:'contain', opacity:0.9}} />
          </div>
        </div>
        {manifestParas.map((p, i) => (
          <p key={i} className="bio" dangerouslySetInnerHTML={{__html: p}} />
        ))}
      </div>

      <div className="deco-divider">
        <img src="cutouts/c18.png" alt="" />
        <span className="lbl">// studio kit</span>
        <img src="cutouts/c07.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('about.section_studio_num', '03')}
          title={useSetting('about.section_studio_title', 'studio')} />
        <div className="kv">
          {studioKv.map((row, i) => (
            <React.Fragment key={i}>
              <span className="k">{row.k}</span>
              <span className="v">{row.v}</span>
            </React.Fragment>
          ))}
        </div>
      </div>

      <div className="deco-divider">
        <img src="cutouts/c14.png" alt="" />
        <span className="lbl">// channels</span>
        <img src="cutouts/c14.png" alt="" />
      </div>

      <div className="section">
        <C.SectionHead
          num={useSetting('about.section_contact_num', '04')}
          title={useSetting('about.section_contact_title', 'contact')} />
        <div className="kv" style={{marginBottom:14}}>
          {phone     && <><span className="k">phone</span><span className="v">{phone}</span></>}
          {workHours && <><span className="k">hours</span><span className="v">{workHours}</span></>}
          {addrPub   && <><span className="k">studio</span><span className="v">{addrPub}</span></>}
          {nextWin   && <><span className="k">next window</span><span className="v">{nextWin}</span></>}
          {tgHandle  && <><span className="k">telegram</span><span className="v">{tgHandle}</span></>}
          {igHandle  && <><span className="k">instagram</span><span className="v">{igHandle}</span></>}
        </div>
        <div className="brackets" style={{padding:0, gridTemplateColumns:'1fr 1fr'}}>
          <button className="bracket" onClick={()=>window.open(tgUrl, '_blank')}>[ telegram ]</button>
          <button className="bracket" onClick={()=>window.open(waUrl, '_blank')}>[ whatsapp ]</button>
          <button className="bracket acid" onClick={()=>window.open(igUrl, '_blank')}>[ instagram ]</button>
          <button className="bracket blood" onClick={()=>window.open('mailto:' + mailAddr, '_blank')}>[ e-mail ]</button>
        </div>
      </div>

      <div style={{height:24}} />
      <C.TermFoot />
    </div>
  );
}

// ─── Services ──────────────────────────────────────────────
function ServicesScreen({ go }){
  const C = window.Components;
  const rawServices = useApi('/services', null);
  const services = rawServices ? rawServices.map(normSvc) : SERVICES;
  const bookingOpen = String(useSetting('contacts.booking_open', '1')) !== '0';
  const ctaBook   = useSetting('services.cta_book_session', '[ BOOK SESSION ]');
  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:140, right:-40, width:200, opacity:0.12}} />
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:520, left:-30, width:160, opacity:0.18}} />
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{top:980, right:-20, width:130, opacity:0.16}} />
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{bottom:120, left:'50%', transform:'translateX(-50%)', width:200, opacity:0.10}} />

      <C.Topbar onBack={()=>go('home')}
        title={useSetting('services.topbar_title', '// SERVICES')}
        left={useSetting('services.topbar_left', String(services.length).padStart(2,'0'))} />
      <div className="section">
        <C.SectionHead
          num={useSetting('services.section_price_num', '01')}
          title={useSetting('services.section_price_title', 'прайс')}
          sub={useSetting('services.section_price_sub', 'ориентировочный')} />
      </div>
      <div className="deco-divider">
        <img src="cutouts/c14.png" alt="" />
        <span className="lbl">// price index</span>
        <img src="cutouts/c07.png" alt="" />
      </div>
      <div className="services">
        {services.map((s,i)=>(
          <div className="service" key={i} onClick={()=>go('book')} style={{cursor:'pointer'}}>
            <div className="i" style={{fontSize:18}}>{s.i}</div>
            <div>
              <div className="name">{s.name}</div>
              <div className="desc">{s.desc}</div>
            </div>
            <div className="price">{s.price}<span className="from">{useSetting('services.price_from_label', 'от')}</span></div>
          </div>
        ))}
      </div>
      <div className="section">
        <p className="bio dim" style={{fontSize:11}} dangerouslySetInnerHTML={{__html: useSetting('services.footer_text', 'итоговая цена считается по эскизу: размер, сложность, время, расположение.<br/>выезды и работы на дому не делаю — только студия.<br/>предоплата 30%, входит в общую сумму.')}} />
      </div>
      <div className="cta-bar">
        <button
          onClick={()=>bookingOpen && go('book')}
          disabled={!bookingOpen}
          style={bookingOpen ? {} : {opacity:.5, cursor:'not-allowed'}}>
          {bookingOpen ? ctaBook : '◌ запись закрыта'}
        </button>
      </div>
    </div>
  );
}

// ─── FAQ ───────────────────────────────────────────────────
function FaqScreen({ go }){
  const C = window.Components;
  const [open, setOpen] = useState(0);
  const rawFaqs = useApi('/faqs', null);
  const faqs = rawFaqs ? rawFaqs.map(normFaq) : FAQ_ITEMS;
  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:160, right:-30, width:160, opacity:0.14}} />
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:680, left:-40, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{bottom:140, right:-20, width:130, opacity:0.16}} />

      <C.Topbar onBack={()=>go('home')}
        title={useSetting('faq.topbar_title', '// F.A.Q.')}
        left={useSetting('faq.topbar_left_template', '{count} Q').replace('{count}', faqs.length)} />
      <div className="section">
        <C.SectionHead
          num={useSetting('faq.section_num', '01')}
          title={useSetting('faq.section_title', 'frequently asked')} />
        <div className="deco-divider" style={{margin:'0 0 10px'}}>
          <img src="cutouts/c14.png" alt="" />
          <span className="lbl">// log</span>
          <img src="cutouts/c12.png" alt="" />
        </div>
        <div className="faq">
          {faqs.map((f, i) => (
            <div className={"q " + (open===i?'open':'')} key={i} onClick={()=>setOpen(open===i?-1:i)}>
              <div className="q-line">
                <span className="marker">[{String(i+1).padStart(2,'0')}]</span>
                <span className="text">{f.q}</span>
                <span className="chev">▶</span>
              </div>
              <div className="a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="section">
        <p className="bio dim" style={{fontSize:11}} dangerouslySetInnerHTML={{__html: useSetting('faq.footer_text', 'не нашёл ответ — пиши в telegram. отвечаю в течение суток.')}} />
      </div>
      <div style={{height:24}} />
      <C.TermFoot />
    </div>
  );
}

// ─── Sketches ──────────────────────────────────────────────
function SketchScreen({ go }){
  const C = window.Components;
  const [filter, setFilter] = useState('all');
  const rawSketches = useApi('/sketches', null);
  const sketches = rawSketches ? rawSketches.map(normSketch) : SKETCHES_AVAILABLE;
  const filtered = sketches.filter(s => filter==='all' ? true : (filter==='free' ? !s.taken : s.taken));
  const sketchesRef = useRef(null);
  useEvenColumns(sketchesRef, [filtered]);
  useParallax(sketchesRef, [filtered]);
  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{top:120, right:-30, width:140, opacity:0.14}} />
      <img className="deco-wm" src="cutouts/c28.png" aria-hidden alt=""
           style={{top:520, left:-30, width:130, opacity:0.16}} />
      <img className="deco-wm" src="cutouts/c25.png" aria-hidden alt=""
           style={{top:1100, right:-40, width:180, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{bottom:100, left:'50%', transform:'translateX(-50%)', width:200, opacity:0.10}} />

      <C.Topbar onBack={()=>go('home')}
        title={useSetting('sketch.topbar_title', '// ЭСКИЗЫ')}
        left={useSetting('sketch.topbar_left_template', '{count} free').replace('{count}', sketches.filter(s=>!s.taken).length)} />
      <div className="section">
        <C.SectionHead
          num={useSetting('sketch.section_num', '01')}
          title={useSetting('sketch.section_title', 'готовые авторские')}
          sub={useSetting('sketch.section_sub', '// flash')} />
        <p className="bio dim" style={{fontSize:11}} dangerouslySetInnerHTML={{__html: useSetting('sketch.helper_text', 'один эскиз — одна татуировка. забронируешь — он исчезает из списка.')}} />
        <div style={{display:'flex', gap:6, marginTop: 10, marginBottom: 10}}>
          {useSetting('sketch.filters', [{k:'all', l:'все'},{k:'free',l:'свободно'},{k:'taken',l:'занято'}]).map(f=>(
            <button key={f.k}
              className={"bracket " + (filter===f.k ? 'acid' : '')}
              style={{padding:'4px 10px', fontSize:11, borderRadius:0, minWidth:0}}
              onClick={()=>setFilter(f.k)}>{f.l}</button>
          ))}
        </div>
      </div>
      <div className="deco-divider">
        <img src="cutouts/c11.png" alt="" />
        <span className="lbl">// flash · stamped</span>
        <img src="cutouts/c14.png" alt="" />
      </div>
      <div className="sketches" ref={sketchesRef}>
        {Array.from({length: 4}, (_, ci) => (
          <div className="masonry-col" key={ci}>
            {filtered.map((s, i) => i % 4 === ci ? (
              <div className={"sketch " + (s.taken?'taken':'')} key={s.id} onClick={()=>!s.taken && go('book', { sketch: s.id })}>
                <img src={s.src} alt={s.id} />
                <span className="tag">{s.id} · {s.size}</span>
                <span className="price">{s.price}</span>
              </div>
            ) : null)}
          </div>
        ))}
      </div>
      <div style={{height:30}} />
      <C.TermFoot />
    </div>
  );
}

// ─── Booking (multi-step) ──────────────────────────────────
const BOOK_STEPS_FALLBACK = ['type', 'size', 'zone', 'date', 'time', 'contact', 'done'];
const STEP_TITLES_FALLBACK = { type:'что мы делаем?', size:'размер?', zone:'где будет?', date:'дата?', time:'время?', contact:'контакт' };

const StepTitle = ({ t }) => (
  <h3 style={{
    fontFamily:'var(--mono)', fontWeight:400, fontSize: 16, marginTop: 14, marginBottom: 6,
    color:'var(--ink)', letterSpacing:'0.04em'
  }}>{'> ' + t}</h3>
);

function BookScreen({ go, prefilledSketch }){
  const C = window.Components;
  const [step, setStep] = useState(0);
  const BOOK_STEPS  = useSetting('booking.steps',       BOOK_STEPS_FALLBACK);
  const STEP_TITLES = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  const btnBack = useSetting('booking.btn_back', '← back');
  const btnNext = useSetting('booking.btn_next', '[ NEXT →');
  const btnSend = useSetting('booking.btn_send', '[ SEND →');
  const [data, setData] = useState({
    type: prefilledSketch ? 'flash' : null,
    sketchId: prefilledSketch || null,
    size: null,
    zone: null,
    date: null,
    time: null,
    duration_minutes: null,
    name: '', tg: '', desc: '',
  });

  const set = (patch) => setData(d => ({ ...d, ...patch }));
  const canNext = () => {
    if (step===0) return !!data.type;
    if (step===1) return !!data.size;
    if (step===2) return !!data.zone;
    if (step===3) return !!data.date;
    if (step===4) return !!data.time;
    if (step===5) return data.name && data.tg;
    return true;
  };

  return (
    <div className="screen">
      <img className="deco-wm" src="cutouts/c21.png" aria-hidden alt=""
           style={{top:300, right:-40, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c18.png" aria-hidden alt=""
           style={{top:680, left:-30, width:200, opacity:0.10}} />
      <img className="deco-wm" src="cutouts/c27.png" aria-hidden alt=""
           style={{bottom:140, right:-20, width:140, opacity:0.16}} />

      <C.Topbar onBack={()=> step===0 ? go('home') : setStep(s=>s-1)}
        title={useSetting('booking.topbar_title', '// BOOK')}
        left={`${step+1}/${BOOK_STEPS.length}`} />
      <div className="section">
        <div className="steps">
          {BOOK_STEPS.map((s, i)=>(
            <div key={s} className={"step " + (i<step?'done':'') + (i===step?' cur':'')}>
              <span className="lab">{s}</span>
            </div>
          ))}
        </div>

        {step===0 && <StepType data={data} set={set} />}
        {step===1 && <StepSize data={data} set={set} />}
        {step===2 && <StepZone data={data} set={set} />}
        {step===3 && <StepDate data={data} set={set} />}
        {step===4 && <StepTime data={data} set={set} />}
        {step===5 && <StepContact data={data} set={set} />}
        {step===6 && <StepDone data={data} go={go} />}
      </div>

      {step < 6 && (
        <div className="cta-bar">
          <button className="ghost" onClick={()=> step===0 ? go('home') : setStep(s=>s-1)}>{btnBack}</button>
          <button disabled={!canNext()} onClick={()=>setStep(s=>s+1)}>
            {step===5 ? btnSend : btnNext}
          </button>
        </div>
      )}
    </div>
  );
}

function StepType({ data, set }){
  const FALLBACK_TYPES = [
    { k:'tattoo', l:'tattoo', d:'обычная татуировка по нашему эскизу' },
    { k:'flash',  l:'flash',  d:'готовый эскиз из «Эскизы»' },
    { k:'cover',  l:'cover-up', d:'перекрытие старой татуировки' },
    { k:'digital',l:'digital art',d:'цифровая работа без татуировки' },
  ];
  const raw = useApi('/booking/types', null);
  const opts = raw ? raw.map(normOpt) : FALLBACK_TYPES;
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  return (
    <div>
      <StepTitle t={titles.type || 'что мы делаем?'} />
      <div className="choice-grid">
        {opts.map(o=>(
          <button key={o.k} className={"choice " + (data.type===o.k?'sel':'')} onClick={()=>set({type:o.k})}>
            <div className="lbl">{o.l}</div>
            <div className="desc">{o.d}</div>
          </button>
        ))}
      </div>
      {data.sketchId && <p className="dim" style={{fontSize:11, marginTop:14}}>выбран эскиз: <span className="ac">{data.sketchId}</span></p>}
    </div>
  );
}

function StepSize({ data, set }){
  const FALLBACK_SIZES = [
    { k:'XS', l:'XS · до 5 см', d:'надпись, символ, маленький объект' },
    { k:'S',  l:'S · 5–10 см',  d:'мини-иллюстрация' },
    { k:'M',  l:'M · 10–20 см', d:'предплечье, бедро' },
    { k:'L',  l:'L · 20–35 см', d:'крупная работа' },
    { k:'XL', l:'XL · 35+ см',  d:'рукав / спина / нога' },
  ];
  const raw = useApi('/booking/sizes', null);
  const opts = raw ? raw.map(normOpt) : FALLBACK_SIZES;
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  return (
    <div>
      <StepTitle t={titles.size || 'размер?'} />
      <div className="choice-grid">
        {opts.map(o=>(
          <button key={o.k} className={"choice " + (data.size===o.k?'sel':'')} onClick={()=>set({size:o.k})}>
            <div className="lbl">{o.l}</div>
            <div className="desc">{o.d}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepZone({ data, set }){
  const FALLBACK_ZONES = ['предплечье','плечо','бицепс','спина','грудь','рёбра','бедро','голень','шея','кисть','стопа','другое'];
  const raw = useApi('/booking/zones', null);
  const opts = raw ?? FALLBACK_ZONES;
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  return (
    <div>
      <StepTitle t={titles.zone || 'где будет?'} />
      <div className="choice-grid" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
        {opts.map(o=>(
          <button key={o} className={"choice " + (data.zone===o?'sel':'')}
            style={{minHeight:60, padding:'10px 6px'}}
            onClick={()=>set({zone:o})}>
            <div className="lbl" style={{fontSize:12}}>{o}</div>
          </button>
        ))}
      </div>
    </div>
  );
}

function StepDate({ data, set }){
  const today = new Date();
  const [month, setMonth] = useState(new Date(today.getFullYear(), today.getMonth(), 1));
  const monthLbl = month.toLocaleString('ru-RU', { month: 'long', year: 'numeric' });
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  const weekdays = useSetting('booking.calendar_weekdays', ['пн','вт','ср','чт','пт','сб','вс']);
  const legend = useSetting('booking.calendar_legend', '● красным — занято · подчёркнутые — недоступны');
  const rawDates = useApi('/booking/dates', null);
  const blockedSet = new Set(
    rawDates
      ? rawDates.filter(d => d.status === 'blocked').map(d => d.date.slice(0, 10))
      : []
  );
  // Local YYYY-MM-DD (avoids UTC offset bug where toISOString shifts day in non-UTC zones)
  const localKey = (date) =>
    `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
  const days = [];
  const first = new Date(month.getFullYear(), month.getMonth(), 1);
  let lead = (first.getDay() + 6) % 7;
  for (let i=0; i<lead; i++) days.push({ dim: true, n: '' });
  const lastDay = new Date(month.getFullYear(), month.getMonth()+1, 0).getDate();
  for (let d=1; d<=lastDay; d++){
    const date = new Date(month.getFullYear(), month.getMonth(), d);
    const past = date < new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const key = localKey(date);
    days.push({
      n: d,
      dim: past,
      busy: !past && blockedSet.has(key),
      isToday: date.toDateString() === today.toDateString(),
      key,
    });
  }
  return (
    <div>
      <StepTitle t={titles.date || 'дата?'} />
      <div className="cal-month">
        <button onClick={()=>setMonth(m=>new Date(m.getFullYear(), m.getMonth()-1, 1))}>‹</button>
        <span>{monthLbl}</span>
        <button onClick={()=>setMonth(m=>new Date(m.getFullYear(), m.getMonth()+1, 1))}>›</button>
      </div>
      <div className="cal-head">
        {weekdays.map(d => <span key={d}>{d}</span>)}
      </div>
      <div className="calendar">
        {days.map((d,i)=>(
          <button key={i}
            className={"cal-day "
              + (d.dim?'dim ':'')
              + (d.busy?'busy ':'')
              + (d.isToday?'today ':'')
              + (data.date===d.key?'sel ':'')}
            disabled={d.dim || d.busy || !d.n}
            onClick={()=>!d.busy && d.n && set({date: d.key})}
          >{d.n}</button>
        ))}
      </div>
      <p className="dim" style={{fontSize:10, marginTop:14}}>{legend}</p>
    </div>
  );
}

function StepTime({ data, set }){
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  const rawSizes = useApi('/booking/sizes', null);
  const sizeRec = rawSizes ? rawSizes.find(s => s.code === data.size) : null;
  const duration = sizeRec?.duration_minutes ?? 120;

  // Fetch slots for the chosen date + duration
  const url = `/booking/slots?date=${encodeURIComponent(data.date || '')}&duration=${duration}`;
  const rawSlots = useApi(data.date ? url : null, null);
  const slots = Array.isArray(rawSlots) ? rawSlots : [];

  // Auto-store duration in the form data so it ships with the payload
  useEffect(() => {
    if (data.duration_minutes !== duration) set({ duration_minutes: duration });
  }, [duration]);

  const fmtDur = (m) => m >= 60 ? `${Math.floor(m/60)}ч${m%60 ? ' ' + (m%60) + 'м' : ''}` : `${m}м`;

  return (
    <div>
      <StepTitle t={titles.time || 'время?'} />
      <p className="dim" style={{fontSize:11, marginBottom:10}}>
        размер <span className="ac">{data.size}</span> · сеанс ~ <span className="ac">{fmtDur(duration)}</span>
      </p>
      {slots.length === 0 ? (
        <p className="dim" style={{fontSize:12, padding:'18px 0', textAlign:'center'}}>
          {rawSlots === null ? 'загружаю слоты...' : 'на этот день свободных слотов нет — выбери другую дату'}
        </p>
      ) : (
        <div className="choice-grid" style={{gridTemplateColumns:'repeat(4,1fr)', gap:6}}>
          {slots.map(t => (
            <button key={t}
              className={"choice " + (data.time===t?'sel':'')}
              style={{minHeight:46, padding:'8px 4px'}}
              onClick={()=>set({time:t})}>
              <div className="lbl" style={{fontSize:13}}>{t}</div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

function StepContact({ data, set }){
  const titles = useSetting('booking.step_titles', STEP_TITLES_FALLBACK);
  return (
    <div>
      <StepTitle t={titles.contact || 'контакт'} />
      <div className="field">
        <label>{useSetting('booking.contact_field_name', 'имя')}</label>
        <input value={data.name} onChange={e=>set({name:e.target.value})} placeholder={useSetting('booking.contact_field_name_ph', 'как обращаться')} />
      </div>
      <div className="field">
        <label>{useSetting('booking.contact_field_tg', 'telegram / instagram')}</label>
        <input value={data.tg} onChange={e=>set({tg:e.target.value})} placeholder={useSetting('booking.contact_field_tg_ph', '@nickname')} />
      </div>
      <div className="field">
        <label>{useSetting('booking.contact_field_desc', 'идея / референсы')}</label>
        <textarea rows={4} value={data.desc} onChange={e=>set({desc:e.target.value})}
          placeholder={useSetting('booking.contact_field_desc_ph', 'что хочешь сделать. ссылки можно сразу')} />
      </div>
      <p className="dim" style={{fontSize:10, marginTop:14}}>{useSetting('booking.contact_consent', 'нажимая «отправить», ты соглашаешься получить ответ в мессенджер.')}</p>
    </div>
  );
}

function StepDone({ data, go }){
  const [state, setState] = useState({ status: 'sending', code: null, error: null });

  useEffect(() => {
    let cancelled = false;
    const payload = {
      type: data.type,
      sketch_id: data.sketchId || null,
      size: data.size,
      zone: data.zone,
      date: data.date,
      time: data.time || null,
      duration_minutes: data.duration_minutes || null,
      name: data.name,
      contact: data.tg,
      note: data.desc || null,
    };
    fetch(API_BASE + '/bookings', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(payload),
    })
      .then(r => r.json().then(j => ({ ok: r.ok, body: j })))
      .then(({ ok, body }) => {
        if (cancelled) return;
        if (ok && body.code) setState({ status: 'ok', code: body.code, error: null });
        else setState({ status: 'fail', code: null, error: body.error || 'unknown' });
      })
      .catch((e) => {
        if (cancelled) return;
        // graceful offline fallback so the demo still tells the visitor something useful
        const fallback = "NK-" + Math.floor(100000 + Math.random()*900000);
        setState({ status: 'offline', code: fallback, error: e.message });
      });
    return () => { cancelled = true; };
  }, []);

  const banner = {
    sending: { color: 'var(--ink-dim)', text: useSetting('booking.banner_sending', '// TRANSMITTING SIGNAL...') },
    ok:      { color: 'var(--acid)',    text: useSetting('booking.banner_ok',      '// SIGNAL TRANSMITTED') },
    offline: { color: 'var(--warn)',    text: useSetting('booking.banner_offline', '// OFFLINE — saved locally, follow up in tg') },
    fail:    { color: 'var(--blood)',   text: useSetting('booking.banner_fail',    '// TRANSMISSION FAILED') },
  }[state.status];

  const titleSending = useSetting('booking.title_sending', 'отправляю...');
  const titleFail    = useSetting('booking.title_fail',    'не доставлено');
  const titleOk      = useSetting('booking.title_ok',      'заявка отправлена');
  const codeLabel    = useSetting('booking.code_label',    'код брони');
  const followup     = useSetting('booking.followup_text', 'отвечу в течение суток. если срочно — пинай в telegram.');
  const btnHome      = useSetting('booking.btn_home',  '[ home ]');
  const btnWorks     = useSetting('booking.btn_works', '[ works ]');
  const addrFull     = useSetting('contacts.address_full', 'выдаётся в Telegram после подтверждения');

  return (
    <div className="confirm">
      <div style={{fontSize:11, letterSpacing:'0.2em', color: banner.color}}>{banner.text}</div>
      <h3>{state.status === 'sending' ? titleSending : state.status === 'fail' ? titleFail : titleOk}</h3>
      {state.code && <p className="muted" style={{fontSize:12}}>{codeLabel} <span className="ac">{state.code}</span></p>}
      {(state.status === 'ok' || state.status === 'offline') && addrFull && (
        <p className="muted" style={{fontSize:12, marginTop:4}}>адрес студии · <span className="ac">{addrFull}</span></p>
      )}
      {state.status === 'fail' && <p className="muted" style={{fontSize:11, color:'var(--blood)'}}>error: {state.error}</p>}
      <pre>{`type      : ${data.type}
sketch    : ${data.sketchId || '—'}
size      : ${data.size}
zone      : ${data.zone}
date      : ${data.date}
time      : ${data.time || '—'}
duration  : ${data.duration_minutes ? data.duration_minutes + ' мин' : '—'}
name      : ${data.name}
contact   : ${data.tg}
note      : ${data.desc || '—'}`}</pre>
      <p className="dim" style={{fontSize:11, marginTop:14}}>{followup}</p>
      <div style={{display:'flex', gap:8, marginTop:18}}>
        <button className="bracket" style={{flex:1}} onClick={()=>go('home')}>{btnHome}</button>
        <button className="bracket acid" style={{flex:1}} onClick={()=>go('portfolio')}>{btnWorks}</button>
      </div>
    </div>
  );
}

// ─── Export ────────────────────────────────────────────────
window.Screens = {
  HomeScreen, PortfolioScreen, AboutScreen, ServicesScreen, FaqScreen, SketchScreen, BookScreen
};