/* Direction B — Console / Marathon Terminal */

function AsciiRule({ char = '─', length = 80 }) {
  return <div className="ascii-rule">{char.repeat(length)}</div>;
}

function ConsoleStatusBar() {
  return (
    <div className="status-bar">
      <div>
        <span className="pill"><span className="blink" /> ONLINE</span>
        <span className="pill" style={{color: 'var(--amber)'}}>● TX 102.5</span>
        <span className="pill">UPLINK · OK</span>
      </div>
      <div className="center">JKL.FM // PERSONAL TRANSMITTER // BUILD 26.05</div>
      <div className="right">
        <span><span className="k">NODE</span>RVA-01</span>
        <span><span className="k">UPTIME</span>11Y 04D</span>
        <span><span className="k">LOAD</span>0.12</span>
      </div>
    </div>
  );
}

function ConsoleNowPanel() {
  return (
    <aside className="now-panel">
      <div className="now-head">
        <span className="now-head-l">// NOW</span>
        <span className="now-head-r">2026·Q2</span>
      </div>

      <div className="now-lines">
        <span className="line"><span className="lbl">$</span> <span className="cy">whoami</span></span>
        <span className="line"><span className="v">jonny litten</span> <span className="lbl">— producer / builder</span></span>
        <span className="line"><span className="lbl">$</span> <span className="cy">status</span></span>
        <span className="line"><span className="ok">[OK]</span> <span className="v">accepting commissions</span></span>
        <span className="line"><span className="lbl">$</span> <span className="cy">offering</span></span>
        <span className="line"><span className="v">music · sound · software</span></span>
        <span className="line cur"><span className="lbl">$</span> <span className="cy">_</span></span>
      </div>
    </aside>
  );
}

function ConsoleSectionDivider({ idx, title, meta }) {
  return (
    <div className="sec-divider">
      <div className="idx">§{idx}</div>
      <div className="title">{title}</div>
      <div className="meta">{meta}</div>
    </div>
  );
}

function ConsoleArtboard(props) {
  const credits = ['01','02','03','04','05','06','07','08','09'];
  const opts = props || {};
  const rootStyle = {};
  if (opts.primary) rootStyle['--amber'] = opts.primary;
  if (opts.primaryDim) rootStyle['--amber-dim'] = opts.primaryDim;
  if (opts.secondary) rootStyle['--cyan'] = opts.secondary;
  if (opts.secondaryDim) rootStyle['--cyan-dim'] = opts.secondaryDim;
  if (typeof opts.scanlines === 'number') rootStyle['--scanline-opacity'] = opts.scanlines;

  return (
    <div className={`console artboard-reset ${opts.densityClass || ''}`} style={rootStyle}>
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid">
          <div>
            <h1>
              Jonny<br/>
              Litten
            </h1>
            <p className="lede">
              Producer &amp; builder. <span className="amber">Music</span> for artists,{' '}
              <span className="amber">sounds</span> for video games, and{' '}
              <span className="amber">software</span> when something needs to exist.
            </p>
            <p className="bio">
              Ten-plus years across music production, audio engineering, composition, and
              creative tools.
            </p>
            <p className="bio">
              If something here interests you, email me.{' '}
              <span style={{color: 'var(--ink)'}}>I read everything</span>.
            </p>

            <div className="prompt-row">
              <span className="sigil">jkl@Jonnys-MacBook-Pro ~ %</span>
              <span className="cmd">contact</span>
              <span style={{color: 'var(--dim)'}}>—</span>
              <a href="mailto:hello@jkl.fm">hello@jkl.fm</a>
            </div>
          </div>
          <ConsoleNowPanel />
        </div>
      </section>

      {/* MUSIC */}
      <section className="section">
        <ConsoleSectionDivider idx="02" title="// MUSIC" meta={<>Records · Sessions<br/>selected credits</>} />

        <p className="section-intro">
          Worked on albums with a lot of artists — specializing in digital composition and
          sound design.
        </p>

        <div className="credits-grid">
          {credits.map((c) => (
            <a key={c} className="credit"
               href="https://www.allmusic.com/artist/jonny-litten-mn0003254267"
               target="_blank" rel="noopener noreferrer"
               aria-label={`Album credit ${c} — open on AllMusic`}>
              <img src={`credits/${c}.webp`} alt="" loading="lazy" />
              <span className="credit-idx">{c}</span>
              <span className="credit-badge"><span className="b-txt">ALLMUSIC</span><span className="b-arr">↗</span></span>
            </a>
          ))}
        </div>
      </section>

      {/* TOOLS FOR PRODUCERS */}
      <section className="section">
        <ConsoleSectionDivider idx="03" title="// TOOLS FOR PRODUCERS" meta={<>Flagship product<br/>+ packs · rigs · M4L</>} />

        <div className="featured">
          <div className="left">
            <div className="eyebrow"><span className="sq" />FLAGSHIP · ACTIVE</div>
            <h3>Playhead<span className="dot">.</span></h3>
            <p className="lede">
              An AI collaborator that lives inside your Ableton session.
            </p>
            <p className="body">
              Reads your clips, understands your intent, and iterates with you in plain
              language. Ships as a Max for Live device — drag it onto a track and start
              talking. Built so it feels like a producer who happens to live in your DAW.
            </p>
            <a href="https://playhead.live" className="link">▸ playhead.live</a>
          </div>
          <div className="right">
            <div className="row"><span className="k">format</span><span className="v">M4L Device</span></div>
            <div className="row"><span className="k">stack</span><span className="v cy">Max · LLM</span></div>
            <div className="row"><span className="k">price</span><span className="v">TBD · 2026</span></div>
            <div className="row"><span className="k">status</span><span className="v am">ALPHA</span></div>
            <div className="row"><span className="k">build</span><span className="v">26.05.17</span></div>
          </div>
        </div>

        <p className="section-intro">
          Plus smaller things — browser-based utilities and live-rig
          services for the way producers actually work.
        </p>

        <div className="tools">
          <div className="tool">
            <div className="eyebrow"><span>03·A</span><span>SHOP</span></div>
            <h3>Ableton Tools</h3>
            <p>
              Max for Live devices and browser-based tools built for the
              way I actually work. Calibrated, opinionated, kept small.
            </p>
            <a href="https://jklfm.gumroad.com" className="link">jklfm.gumroad.com →</a>
          </div>
          <div className="tool">
            <div className="eyebrow"><span>03·B</span><span>SERVICE</span></div>
            <h3>Live Playback Rigs</h3>
            <p>
              Two-computer multitrack playback rigs for live concert settings. If you need
              stable, redundant playback for a tour or installation, write me.
            </p>
            <a href="mailto:hello@jkl.fm?subject=Playback%20Rig" className="link">hello@jkl.fm →</a>
          </div>
        </div>
      </section>

      {/* SOFTWARE AS A SERVICE */}
      <section className="section">
        <ConsoleSectionDivider idx="04" title="// SOFTWARE AS A SERVICE" meta={<>Alert · aggregation<br/>tools for noisy systems</>} />
        <p className="section-intro">
          A small portfolio of SaaS — alert and aggregation tools for annoying government
          websites and noisy corners of the internet.
        </p>
        <div className="projects">
          {[
            { num: '[1]', name: 'ApiDrift', status: 'ACTIVE', cls: 'active',
              desc: 'Migration PRs before vendor APIs break your code. Watches dependency changelogs, finds affected lines via AST analysis, and opens pull requests with the diff, reasoning, and a link to the canonical doc.',
              href: 'https://apidrift.co', link: 'apidrift.co →' },
            { num: '[2]', name: 'GovPing', status: 'ACTIVE', cls: 'active',
              desc: 'SAM.gov contract alerts for small federal contractors. AI-curated daily digest of opportunities you actually qualify for.',
              href: 'https://govping.co', link: 'govping.co →' },
            { num: '[3]', name: 'GrantPing', status: 'ACTIVE', cls: 'active',
              desc: 'Federal grant opportunity alerts. Same model, different audience — nonprofits and universities tired of grants.gov.',
              href: 'https://grantping.co', link: 'grantping.co →' },
            { num: '[4]', name: 'TrademarkSentry', status: 'ACTIVE', cls: 'active',
              desc: 'Real-time USPTO trademark filing alerts. Character, phonetic, and Nice-class matching with adjustable sensitivity.',
              href: 'https://www.trademarksentry.co', link: 'trademarksentry.co →' },
            { num: '[5]', name: 'BountyPing', status: 'ACTIVE · FREE', cls: 'active',
              desc: 'Bug-bounty programs aggregated across HackerOne, Bugcrowd, Immunefi, Code4rena, Huntr. A tool I wanted for myself.',
              href: 'https://bountyping-site.pages.dev', link: 'bountyping-site →' },
          ].map((p) => (
            <div className="proj" key={p.num}>
              <div className="num">{p.num}</div>
              <div className="name">{p.name}</div>
              <div className={`status-pill ${p.cls}`}>{p.status}</div>
              {p.href ? (
                <a className="link" href={p.href}>{p.link}</a>
              ) : (
                <span className="link" style={{color: 'var(--dim)', borderColor: 'var(--line)'}}>{p.link}</span>
              )}
              <p className="desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CREATIVE CODING */}
      <section className="section">
        <ConsoleSectionDivider idx="05" title="// CREATIVE CODING" meta={<>Generative · interactive<br/>sound systems</>} />
        <p className="section-intro">
          Generative sketches at the intersection of math, physics, and audio.
        </p>
        <div className="cc-link">
          <a className="cc-link-a" href="https://jonnylitten.github.io/portfolio/">
            <span className="cc-link-arrow">▸</span>
            <span className="cc-link-url">jonnylitten.github.io/portfolio</span>
            <span className="cc-link-meta">full archive →</span>
          </a>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="foot">
        <div className="l">
          JONNY LITTEN
        </div>
        <div className="sig">JKL<span className="am">.</span>FM</div>
        <div className="r">
          <a href="mailto:hello@jkl.fm">HELLO@JKL.FM</a><br/>
          STATIC · NO TRACKERS · NO COOKIES
        </div>
      </footer>
    </div>
  );
}

window.ConsoleArtboard = ConsoleArtboard;