/* global React, SiteFooter */
/*
 * The two products, on the company home.
 *
 * Rodney's decision, 2026-09-03: the homepage FRAMES Virtue FX Manager, it does
 * not demote it. So this block sits immediately under the hero - the company
 * sentence and both products are above the fold on a laptop - while VFxM keeps
 * the primary call to action in the hero itself. `/` is the only page on this
 * site with search ranking and VFxM is the only product anyone can buy; a
 * company page that buried it would cost real money to prove a point about
 * information architecture.
 *
 * The Console card ANNOUNCES. No price, no buy, no download - there is nothing
 * to license yet. See FACTS.json, rule console-not-shipping.
 *
 * Every string here is new English. It ships untranslated in the other eleven
 * locales until someone translates it, which Rodney approved on 2026-09-03 -
 * the alternative was holding the restructure until 11 x N translations came
 * back. No EXISTING key was reworded to build this, so nothing that is already
 * translated regresses.
 */

const ProductCard = ({ status, statusTone, name, href, line, points, actions, note }) => (
  <article
    style={{
      background: 'var(--surface)',
      border: '1px solid var(--line)',
      borderRadius: 'var(--radius)',
      padding: '26px 28px',
      display: 'flex',
      flexDirection: 'column',
      gap: 14,
    }}
  >
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span
        style={{
          fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
          padding: '4px 10px', borderRadius: 999,
          color: statusTone === 'live' ? 'var(--ok)' : 'var(--o-dim)',
          background: statusTone === 'live' ? 'var(--ok-soft)' : 'var(--o-soft)',
          border: `1px solid ${statusTone === 'live' ? 'var(--ok)' : 'rgba(var(--accent-rgb), 0.28)'}`,
        }}
      >
        {status}
      </span>
    </div>

    <div>
      <h3 style={{ fontSize: 26, letterSpacing: '-0.03em', marginBottom: 8 }}>
        <a href={href} style={{ color: 'var(--t)' }}>{name}</a>
      </h3>
      <p style={{ color: 'var(--t-2)', lineHeight: 1.6, margin: 0 }}>{line}</p>
    </div>

    {/* Actions BEFORE the bullets. They used to be pinned to the bottom of a
        ~420px card, so on a 768px laptop the card's top could be above the
        fold while "Start the free trial" was not. The bullets are the part
        that can wait for a scroll; the button is not. */}
    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
      {actions}
    </div>
    {note && (
      <p style={{ color: 'var(--t-3)', fontSize: 13, margin: '-4px 0 0', fontFamily: 'var(--mono)' }}>{note}</p>
    )}

    <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 0', display: 'grid', gap: 8 }}>
      {points.map((p) => (
        <li key={p} style={{ display: 'flex', gap: 10, alignItems: 'flex-start', color: 'var(--t-2)', fontSize: 15, lineHeight: 1.5 }}>
          <span aria-hidden="true" style={{ color: 'var(--o)', flexShrink: 0, marginTop: 1 }}>—</span>
          <span>{p}</span>
        </li>
      ))}
    </ul>
  </article>
);

const Products = () => (
  /* The eyebrow, headline and lead that used to open this section are in the
     hero now - they ARE the hero. This section is the pair, and it starts as
     close to the fold as the layout allows. */
  <section id="products" className="section-shell" style={{ paddingTop: 8, paddingBottom: 88 }}>
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <div
        /* NOT .product-layout-grid. That class is forced to a single column
           below 900px for the store and console pages, whose grids are fixed
           two-column splits with no fallback. This one is auto-fit with a 320px
           minimum, so it stacks by itself exactly when it needs to - and being
           swept up in that rule was putting the Console card ~450px below the
           VFxM card on every tablet. */
        className="home-products-grid"
        style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 24, alignItems: 'stretch' }}
      >
        <ProductCard
          status="Shipping · 1.2.2"
          statusTone="live"
          name="Virtue FX Manager"
          href="products/virtue-fx-manager/"
          line="See your plugins instead of reading their names. Thumbnails of the real interfaces, favourites boards you build yourself, and FX chains you can drag onto a track."
          points={[
            'Thumbnails of the actual plugin windows, scanned from your own library',
            'Favourites and FX chains as objects, with artwork you choose',
            'Scans VST, VST3, AU, CLAP and JSFX',
            'macOS and Windows',
          ]}
          actions={
            <>
              <a href="download/" className="btn-primary">Start the free trial</a>
              <a href="store/" className="btn-ghost">Buy — $29</a>
            </>
          }
          note="$29 once, 2 activations. Trial: 10 days, no credit card, no sign-up."
        />

        <ProductCard
          status="In development"
          statusTone="soon"
          name="Virtue Console"
          href="products/virtue-console/"
          line="A mixer with calibrated metering on every track, and a channel strip that stays out of the way until you switch it on. Opening it inserts nothing."
          points={[
            'A meter bridge across the top: VU, PPM, K-12/14/20 and LUFS',
            'Key detection per track, ranked, with a confidence figure',
            'Drag a plugin straight from Virtue FX Manager onto a channel',
            'An opt-in channel strip, off by default, oversampled where it matters',
          ]}
          /* NEITHER of Console's buttons is filled, deliberately. When both cards
             carried a btn-primary they were 10,593px2 and 10,128px2 of solid
             accent at the same height - so "Start the free trial" stopped being
             THE action on the page and became one of two, with the other one
             pointing at a product nobody can buy. There is exactly one filled
             button in the page content now, and it belongs to the product that
             ships. */
          actions={
            <>
              <a href="products/virtue-console/" className="btn-ghost">See what it does</a>
              <a
                href="contact/"
                style={{
                  alignSelf: 'center',
                  color: 'var(--accent-ink)',
                  textDecoration: 'underline',
                  fontSize: 15,
                }}
              >
                Tell me when it ships
              </a>
            </>
          }
          note="Not released. No price yet. macOS, inside REAPER."
        />
      </div>

      {/* ONE QUIET LINE, and it is deliberately not a third card and not a
          second filled button. The page's single filled control is "Start the
          free trial"; a funding button here would compete with the one thing
          on this site that takes money for a product that exists.
          --t-3 at 14px, the arrow link in --accent-ink because it is small
          accent text - see the rule at the accent tokens in styles.css.
          It sits BELOW the grid, so the Console card's fold position does not
          move. Measured at 1280x911: 469px before and after. */}
      <p style={{
        color: 'var(--t-3)', fontSize: 14, lineHeight: 1.6,
        margin: '28px 0 0', textAlign: 'center',
      }}>
        Independent, self-funded, one developer.{' '}
        <a href="support-development/" style={{ color: 'var(--accent-ink)', textDecoration: 'underline' }}>
          Here is how to help →
        </a>
      </p>
    </div>
  </section>
);

window.Products = Products;