// ── PAGES ──────────────────────────────────────────────────────────────

// ── ASCII Logo (sampled from ava.jpg) ──────────────────────────────────
function AsciiLogo() {
  const art = window.__ASCII_LOGO__ || '';
  const [glitched, setGlitched] = React.useState('');

  // Calmer glitch: rare, only a handful of char swaps, no line shifts
  React.useEffect(() => {
    if (!art) return;
    const junk = '▒░·#';
    const id = setInterval(() => {
      if (Math.random() < 0.82) {setGlitched('');return;}
      const arr = art.split('');
      const n = 2 + Math.floor(Math.random() * 4);
      for (let k = 0; k < n; k++) {
        const idx = Math.floor(Math.random() * arr.length);
        if (arr[idx] !== '\n' && arr[idx] !== ' ') {
          arr[idx] = junk[Math.floor(Math.random() * junk.length)];
        }
      }
      setGlitched(arr.join(''));
    }, 380);
    return () => clearInterval(id);
  }, [art]);

  return (
    <div className="ascii-stack">
      <pre className="ascii-logo ascii-r" aria-hidden="true">{glitched || art}</pre>
      <pre className="ascii-logo ascii-g" aria-hidden="true">{glitched || art}</pre>
      <pre className="ascii-logo ascii-main">{glitched || art}</pre>
    </div>);

}

// ── Home ───────────────────────────────────────────────────────────────
function HomePage({ setPage }) {
  return (
    <div className="page home" data-screen-label="01 Home">
      <div className="home-logo home-logo-ascii">
        <AsciiLogo />
      </div>
      <div className="home-title-row">
        <div className="home-name glitch" data-text="[ shi o kiku ]">
          [ shi&nbsp;o&nbsp;kiku ]
        </div>
      </div>
    </div>);

}

// ── Releases ──────────────────────────────────────────────────────────
function ReleasesPage({ layout, onOpenRelease }) {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? RELEASES : RELEASES.filter((r) => r.genre === filter);

  return (
    <div className="page page-wrap" data-screen-label="02 Releases">
      <div className="page-head">
        <h1>releases<span style={{ color: 'var(--accent)' }}>.</span></h1>
        <div className="breadcrumb">
          [ <span className="count">{filtered.length.toString().padStart(3, '0')}</span> / {RELEASES.length.toString().padStart(3, '0')} ] · sok catalog
        </div>
      </div>

      <div className="filters">
        <button className={`chip ${filter === 'all' ? 'active' : ''}`} onClick={() => setFilter('all')}>all</button>
        {GENRES.map((g) =>
        <button key={g} className={`chip ${filter === g ? 'active' : ''}`} onClick={() => setFilter(g)}>{g}</button>
        )}
      </div>

      {layout === 'grid' ?
      <div className="releases-grid">
          {filtered.map((r) =>
        <div className="rel-card" key={r.id} onClick={() => onOpenRelease(r)}>
              <div className="rel-cover" style={{ '--swatch': r.swatch }}>
                <div className="swatch" style={{ background: r.swatch }}></div>
                <div className="cov-tl">{r.cat}</div>
                <div className="cov-glyph"><span className="big">{r.glyph}</span></div>
                <div className="cov-meta">
                  <span>{r.genre}</span>
                  <span>{r.date}</span>
                </div>
                <div className="play">▶</div>
              </div>
              <div className="rel-info">
                <div className="left">
                  <div className="title">{r.title}</div>
                  <div className="artist">{r.artists.join(' & ')}</div>
                </div>
                <div className="cat">{r.cat}</div>
              </div>
            </div>
        )}
        </div> :

      <div className="releases-list">
          {filtered.map((r, i) =>
        <div className="rel-row" key={r.id} onClick={() => onOpenRelease(r)}>
              <span className="num">{String(filtered.length - i).padStart(3, '0')}</span>
              <div className="mini" style={{ background: r.swatch, '--swatch': r.swatch }}></div>
              <div>
                <div className="title">{r.title}</div>
                <div className="artist">{r.artists.join(' & ')}</div>
              </div>
              <div className="cat">{r.genre}</div>
              <div className="cat">{r.cat}</div>
              <div className="date">{r.date}</div>
              <div className="arrow">→</div>
            </div>
        )}
        </div>
      }
    </div>);

}

// ── Artists ───────────────────────────────────────────────────────────
function ArtistsPage() {
  return (
    <div className="page page-wrap" data-screen-label="03 Artists">
      <div className="page-head">
        <h1>roster<span style={{ color: 'var(--accent)' }}>.</span></h1>
        <div className="breadcrumb">
          [ <span className="count">{ARTISTS.length.toString().padStart(2, '0')}</span> ] · resident producers
        </div>
      </div>

      <div className="artists-grid">
        {ARTISTS.map((a, i) =>
        <div className="artist-card" key={a.name}>
            <span className="idx">{String(i + 1).padStart(2, '0')}</span>
            <div>
              <div className="role">{a.role}</div>
              <div className="name" style={{ marginTop: 10 }}>{a.name}</div>
            </div>
            <div>
              <div style={{ color: 'var(--dim)', fontSize: 11, marginBottom: 12 }}>{a.sig}</div>
              <div className="stat">
                <span>loc <b>{a.loc}</b></span>
                <span>releases <b>{a.releases}</b></span>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// ── Events ────────────────────────────────────────────────────────────
function EventsPage() {
  return (
    <div className="page page-wrap" data-screen-label="04 Events">
      <div className="page-head">
        <h1>parties<span style={{ color: 'var(--accent)' }}>.</span></h1>
        <div className="breadcrumb">
          live · b2b · listening sessions
        </div>
      </div>

      <div className="events-list">
        {EVENTS.map((e, i) =>
        <div className={`event ${e.past ? 'past' : ''}`} key={i}>
            <div className="date">
              <span className="day">{e.day}</span>
              <span className="mon">{e.mon}</span>
            </div>
            <div>
              <h3>{e.title}</h3>
              <div className="loc">// {e.loc}</div>
              <div className="line-up">
                line-up: {e.lineup.map((n, j) =>
              <React.Fragment key={j}><b>{n}</b>{j < e.lineup.length - 1 ? ' · ' : ''}</React.Fragment>
              )}
              </div>
            </div>
            <div className="right">
              {e.tcEvent && e.tcToken ?
              <button type="button" className="tc-buy" data-tc-event={e.tcEvent} data-tc-token={e.tcToken} data-tc-lang="ru">buy ticket →</button> :
              e.url ?
              <a className="price" href={e.url} target="_blank" rel="noopener noreferrer" style={{ borderBottom: '1px solid var(--accent)', color: 'var(--accent)', paddingBottom: 1 }}>{e.price} →</a> :
              <div className="price">{e.price}</div>}
              <div className="tag" style={{ marginTop: 10 }}>{e.tag}</div>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// ── Shop ──────────────────────────────────────────────────────────────
function ShopPage() {
  return (
    <div className="page page-wrap" data-screen-label="05 Shop">
      <div className="page-head">
        <h1>shop<span style={{ color: 'var(--accent)' }}>.</span></h1>
        <div className="breadcrumb">SHIPS WORLDWIDE

        </div>
      </div>

      <div className="shop-grid">
        {SHOP.map((it, i) =>
        <div className="shop-item" key={i}>
            <div className="shop-thumb" style={{ background: it.swatch }}>
              {it.tag && <span className="tag">{it.tag}</span>}
              <div className="glyph">{it.glyph}</div>
            </div>
            <div className="shop-info">
              <span className="ttl">{it.ttl}</span>
              <span className="price">{it.price}</span>
            </div>
          </div>
        )}
      </div>
    </div>);

}

// ── Contact ───────────────────────────────────────────────────────────
function ContactPage() {
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {e.preventDefault();setSent(true);};
  return (
    <div className="page page-wrap" data-screen-label="06 Contact">
      <div className="page-head">
        <h1>send a demo<span style={{ color: 'var(--accent)' }}>.</span></h1>
        <div className="breadcrumb">
          we listen to everything · reply within ~2 weeks
        </div>
      </div>

      <div className="contact-grid">
        <div>
          <h2>// the deal</h2>
          <p>
            we're not picky about <b>genre</b>, only about <b>intent</b>. send 2–5 tracks,
            unmastered is fine, .wav or a private soundcloud link works. no rar archives, please.
          </p>
          <p style={{ marginTop: 12 }}>
            we listen on a saturday over a kettle of bad coffee.
            if you don't hear back in two weeks — we did listen, and it wasn't a fit (this time).
            try again with the next one.
          </p>

          <form onSubmit={submit} style={{ marginTop: 30 }}>
            <div className="form-row">
              <label>artist name</label>
              <input type="text" placeholder="@your_alias" required />
            </div>
            <div className="form-row">
              <label>email or telegram</label>
              <input type="text" placeholder="you@somewhere / @tg_handle" required />
            </div>
            <div className="form-row">
              <label>genre</label>
              <select defaultValue="">
                <option value="" disabled>— pick one —</option>
                {GENRES.map((g) => <option key={g} value={g}>{g}</option>)}
                <option value="other">other / can't classify</option>
              </select>
            </div>
            <div className="form-row">
              <label>link to demo</label>
              <input type="text" placeholder="soundcloud / dropbox / google drive" required />
            </div>
            <div className="form-row">
              <label>a few words about it</label>
              <textarea placeholder="three tracks, made on a broken laptop in three nights..."></textarea>
            </div>
            <div className="form-actions">
              <button type="submit" className="btn primary">{sent ? 'sent ✓' : 'submit demo'}</button>
              <span className="form-note">{sent ? 'we will get back to you.' : 'no attachments — links only'}</span>
            </div>
          </form>
        </div>

        <div className="contact-side">
          <div className="block">
            <div className="lbl">demos</div>
            <a className="val" href="mailto:demo@shiokiku.ru">demo@shiokiku.ru</a>
          </div>
          <div className="block">
            <div className="lbl">booking</div>
            <a className="val" href="mailto:book@shiokiku.ru">book@shiokiku.ru</a>
          </div>
          <div className="block">
            <div className="lbl">telegram</div>
            <a className="val" href="#">@shiokiku</a>
          </div>
          <div className="block">
            <div className="lbl">based in</div>
            <div className="val">krasnodar · rf · 45°02′N 38°58′E</div>
          </div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { HomePage, ReleasesPage, ArtistsPage, EventsPage, ShopPage, ContactPage });