/* global React */
/*
 * Virtue Console — the voices, as planned.
 *
 * All nine voices have artwork as of 2026-09-04, so this section is live on
 * the page - the ?voices=on gate that held it back while two were unusable is
 * gone. See assets-src/console-voices/README.md for what each file is and how
 * the two retouched ones were checked.
 *
 * ============================ THREE HARD RULES ============================
 *
 * 1. NONE OF THESE EXIST YET. docs/console-emulation-proposal.md is marked
 *    "Status: proposal. Nothing here is implemented yet", and Console itself is
 *    unreleased. So this is a WHAT IS BEING BUILT section, not a feature list.
 *    Every line below is written in the future or the conditional, and the
 *    heading says so. check:facts catches some phrasings of "you can pick these
 *    today" and not others; the framing is on us.
 *
 * 2. NEVER NAME THE HARDWARE. FACTS.json console-no-manufacturer-names, added
 *    the day Rodney sent the internal voice table and said the "Modeled on"
 *    column cannot reach the public. Describe the SOUND. The descriptions below
 *    are his own words and are the approved way to say each one.
 *
 * 3. THE ART IS THE CHECKER'S BLIND SPOT. A text rule cannot read a wordmark
 *    painted into a render, which is how one of the nine supplied icons nearly
 *    went up carrying a real manufacturer's badge - see the README in
 *    assets-src/console-voices/, which names it. Every render here was opened
 *    at full size and looked at before it was converted. Do that again for any
 *    new one; it is the only check there is.
 *
 * Names are VC-<style>: V for Virtue, C for Console, then the console style.
 * They are painted into the faceplates, so the art constrains the naming.
 */

const VOICES = [
  {
    name: 'VC-Dark',
    art: 'vc-dark',
    line: 'Unusual midrange articulation, and it stays solid under heavy pushing. A classic seventies desk.',
  },
  {
    name: 'VC-Rock',
    art: 'vc-rock',
    line: 'Big and glossy, and it tightens up the bass.',
  },
  {
    name: 'VC-Holo',
    art: 'vc-holo',
    line: 'Adds 3D space — a holographic sense of where a source is sitting.',
  },
  {
    name: 'VC-Punch',
    art: 'vc-punch',
    line: 'Aggressive and punchy. The one you reach for when something has to hit.',
  },
  {
    name: 'VC-Eight',
    art: 'vc-eight',
    line: 'Valve windows and a transformer saturation control, on eight channels.',
  },
  {
    name: 'VC-Nine',
    art: 'vc-nine',
    line: 'Colour-coded channels feeding a summing amp you can see on the panel.',
  },
  {
    name: 'VC-X',
    art: 'vc-x',
    line: 'Stone and lava, with STONE, FIRE and DISCONTINUITY on every channel. Not a desk that ever existed.',
  },
  /* Both of these were blocked until 2026-09-04 and are now in. They were
     RETOUCHED, not re-rendered: one carried a real manufacturer's badge, the
     other a typo on its nameplate. Checked at full size and by pixel diff
     before they were brought in - each change is confined to the region that
     was wrong (0.046% and 0.010% of the image), and neither reads as a
     retouch at the size these display. See assets-src/console-voices/README.md. */
  {
    name: 'VC-Tube',
    art: 'vc-tube',
    line: 'Warm and valve-driven, with the colouration that comes with it.',
  },
  {
    name: 'VC-M-Analog',
    art: 'vc-m-analog',
    line: 'Seven channels, bar meters, navy and gold.',
  },
];

const VoiceCard = ({ v }) => (
  <figure
    style={{
      margin: 0,
      background: 'var(--surface)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius)',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
    }}
  >
    {/* Every voice has its artwork as of 2026-09-04, so there is no empty-slot
        branch here any more. If a tenth voice is ever added before its render
        exists, the placeholder that used to live here is in the history -
        a labelled "artwork in progress" panel, NOT a stand-in desk. A fake one
        sitting in a row of real ones is a lie told with a picture. */}
    <img
      src={`../../imgs/console/${v.art}.webp`}
      alt={`${v.name}, a planned voice for Virtue Console: a rendered mixing desk in its own colours, with VC-${v.name.slice(3)} on the nameplate.`}
      loading="lazy"
      width="800"
      height="800"
      style={{ width: '100%', height: 'auto', display: 'block', background: 'var(--grey-900)' }}
    />
    <figcaption style={{ padding: '18px 20px 22px' }}>
      <h3 style={{ fontSize: 17, marginBottom: 6, fontFamily: 'var(--mono)', letterSpacing: '-0.01em' }}>
        {v.name}
      </h3>
      <p style={{ color: 'var(--t-2)', lineHeight: 1.6, margin: 0, fontSize: 15 }}>{v.line}</p>
    </figcaption>
  </figure>
);

const ConsoleVoices = () => (
  <section
    id="voices"
    className="section-shell"
    style={{ paddingTop: 88, paddingBottom: 88, background: 'var(--bg-2)' }}
  >
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <p className="eyebrow">Planned · none of this is built yet</p>
      <h2 style={{ fontSize: 'clamp(26px, 3.4vw, 38px)', letterSpacing: '-0.03em', marginBottom: 14, maxWidth: '24ch' }}>
        Nine desks, and none of them exist.
      </h2>
      <p style={{ color: 'var(--t-2)', maxWidth: '64ch', lineHeight: 1.7, fontSize: 17, marginBottom: 10 }}>
        The channel strip is one sound today. The plan is that it becomes nine, each with the look
        and the behaviour of a different kind of desk, chosen per track and still off until you ask
        for it. This is the drawing board, not a feature list — the artwork exists, the voices do
        not, and nothing here can be selected in the product.
      </p>
      <p style={{ color: 'var(--t-3)', maxWidth: '64ch', lineHeight: 1.65, fontSize: 15, marginBottom: 34 }}>
        Each one is described by how it should sound.
      </p>

      <div
        style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 22,
        }}
      >
        {VOICES.map((v) => (
          <VoiceCard key={v.name} v={v} />
        ))}
      </div>
      {/* Rodney, 2026-09-05: a credit, "extremely small and discrete". One line, quiet
          colour, after the grid. It stays true whatever the voices become: the console
          stages that exist are ports of Chris Johnson's Airwindows code under MIT. */}
      <p style={{ color: 'var(--t-3)', fontSize: 12, lineHeight: 1.6, marginTop: 22, maxWidth: '64ch' }}>
        Console stages are built on Chris Johnson's Airwindows code, used under the MIT licence.
      </p>
    </div>
  </section>
);

window.ConsoleVoices = ConsoleVoices;