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

// ─── Marquee ───────────────────────────────────────────────
function Marquee({ items, speed=28 }){
  return (
    <div className="marquee" style={{ '--speed': speed + 's' }}>
      <div className="marquee-track">
        {[0,1].map(i => (
          <span key={i}>
            {items.map((it, n) => (
              <span key={n} className={it.tone || ''}>{it.text}{'  ◇  '}</span>
            ))}
          </span>
        ))}
      </div>
    </div>
  );
}

// ─── ASCII Logo ────────────────────────────────────────────
const LOGO_LINES = [
  "    _   ______  __ __ __ _______________",
  "   / | / / __ \\/ //_// //_/__  <  /__  /",
  "  /  |/ / / / / ,<  / ,<    / // /  / / ",
  " / /|  / /_/ / /| |/ /| |_ / // /  / /  ",
  "/_/ |_/\\____/_/ |_/_/ |_(_)_//_/  /_/   ",
];
function AsciiLogo({ glitch=true }){
  const text = LOGO_LINES.join("\n");
  return (
    <div className="logo-block">
      <pre
        className={"logo-ascii " + (glitch ? "glitch" : "")}
        data-text={text}
        aria-label="nokk.717"
      >{text}</pre>
      <Alias />
    </div>
  );
}

// ─── Alias / nickname ──────────────────────────────────────
function Alias(){
  return (
    <div className="alias">
      <span className="alias-bar" />
      <span className="alias-tag">alias</span>
      <span className="alias-sep">::</span>
      <span className="alias-name">@nokk<span className="ac">.717</span></span>
      <span className="alias-meta">// angel.engine / R.A.D.I.D.</span>
      <span className="alias-bar" />
    </div>
  );
}

// ─── Status row ────────────────────────────────────────────
function StatusRow({ status="ONLINE" }){
  return (
    <div className="status">
      <div className="seal" aria-hidden>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1" />
          <path d="M6 16 Q12 8 18 16" stroke="currentColor" strokeWidth="1" fill="none"/>
          <circle cx="12" cy="11" r="2.5" stroke="currentColor" strokeWidth="1" fill="none"/>
        </svg>
      </div>
      <div className="meta">
        <div className="row">
          <span className="k">Object:</span>
          <span className="slash">////////////</span>
          <span className="v">tattoo / digital artist</span>
        </div>
        <div className="row">
          <span className="k">Location:</span>
          <span className="slash">//////</span>
          <span className="v">Astana, KZ</span>
        </div>
        <div className="row">
          <span className="k">Status:</span>
          <span className="slash">/////////</span>
          <span className={status === "ONLINE" ? "online" : "muted"}>{status}</span>
        </div>
      </div>
      <div className="globe" aria-hidden>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="0.8">
          <ellipse cx="12" cy="12" rx="10" ry="10" />
          <ellipse cx="12" cy="12" rx="4" ry="10" />
          <line x1="2" y1="12" x2="22" y2="12" />
        </svg>
      </div>
    </div>
  );
}

// ─── Section header ────────────────────────────────────────
function SectionHead({ num, title, sub }){
  return (
    <h2>
      <span className="num">[{num}]</span>
      <span>{title}</span>
      <span className="ln" />
      {sub && <span className="dim" style={{textTransform:'none', letterSpacing:0}}>{sub}</span>}
    </h2>
  );
}

// ─── Topbar (back button) ─────────────────────────────────
function Topbar({ left, title, onBack }){
  return (
    <div className="topbar">
      <button onClick={onBack}>← back</button>
      <span>{title}</span>
      <span style={{width:46, textAlign:'right'}} className="dim">{left}</span>
    </div>
  );
}

// ─── Footer marks ──────────────────────────────────────────
function FooterMarks(){
  const I = window.Icons;
  return (
    <div className="marks">
      <div><span className="big">N717</span><span>tattoo</span></div>
      <div><I.MarkN717 /></div>
      <div><span className="big">©'25</span><span>nokk</span></div>
      <div><div className="barcode" /></div>
      <div><span className="big" style={{fontSize:13}}>◀◀</span><span>back</span></div>
      <div><I.MarkAngel /></div>
      <div><span className="big" style={{fontSize:11, letterSpacing:'0.06em'}}>BLK<br/>WORK</span></div>
      <div><span className="big" style={{fontSize:13}}>▶▶</span><span>next</span></div>
    </div>
  );
}

// ─── Terminal foot ─────────────────────────────────────────
function TermFoot(){
  const [t, setT] = useState(() => new Date());
  useEffect(()=>{ const id = setInterval(()=>setT(new Date()), 1000); return ()=>clearInterval(id); }, []);
  const pad = (n) => String(n).padStart(2,'0');
  const ts = `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`;
  return (
    <div className="term-foot">
      <span>nokk@dystopia ~ %</span>
      <span className="ac">●</span>
      <span>{ts} ASTN</span>
    </div>
  );
}

window.Components = { Marquee, AsciiLogo, StatusRow, SectionHead, Topbar, FooterMarks, TermFoot };