/* global React */
/*
 * Front-page release reveal.
 *
 * Sits directly under the hero so the news is the second thing on the page,
 * before the evergreen pitch. It speaks to two audiences at once: people who
 * already own VFxM and want to know what changed, and people who have never
 * seen it and are being told what kind of tool this is. So each card leads
 * with the benefit rather than the feature name.
 *
 * Styling is inline and uses the same tokens as the rest of the site
 * (--surface, --line, --o, --t-2) rather than new classes, so it inherits
 * light/dark automatically and cannot drift from the theme.
 */

const WhatsNew = () => {
  const card = {
    background: 'var(--surface)',
    border: '1px solid var(--line)',
    borderRadius: '16px',
    padding: '26px',
    display: 'grid',
    gap: '10px',
    alignContent: 'start',
  };
  const kbd = {
    display: 'inline-block',
    minWidth: '22px',
    textAlign: 'center',
    padding: '2px 7px',
    margin: '0 2px',
    borderRadius: '6px',
    background: 'rgba(var(--accent-rgb), 0.12)',
    border: '1px solid rgba(var(--accent-rgb), 0.30)',
    color: 'var(--o)',
    fontFamily: 'var(--mono)',
    fontSize: '12px',
    fontWeight: 700,
    lineHeight: 1.6,
  };
  const h3 = { fontSize: '17px', fontWeight: 750, color: 'var(--t)', margin: 0 };
  const body = { fontSize: '14px', lineHeight: 1.65, color: 'var(--t-2)', margin: 0 };

  return (
    <section className="section-shell" data-screen-label="01b What's New" style={{ paddingTop: '2rem', paddingBottom: '4rem' }}>
      <div style={{ maxWidth: '1040px', margin: '0 auto' }}>

        <div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap', marginBottom: '10px' }}>
          <span style={{
            padding: '4px 10px', borderRadius: '999px', background: 'var(--o)', color: 'var(--on-accent)',
            fontSize: '11px', fontWeight: 800, letterSpacing: '0.05em', textTransform: 'uppercase',
            fontFamily: 'var(--mono)',
          }}>Version 1.2.2</span>
          <span className="eyebrow" style={{ margin: 0 }}>Just released</span>
        </div>

        <h2 style={{ fontSize: 'clamp(28px, 4vw, 40px)', lineHeight: 1.15, margin: '0 0 12px 0', maxWidth: '760px' }}>
          Your toolbar is <em style={{ fontStyle: 'normal', color: 'var(--o)' }}>yours</em>, and it stays that way.
        </h2>
        <p style={{ ...body, fontSize: '16px', maxWidth: '680px', marginBottom: '30px' }}>
          Seven fixes, no new features. Two of them came from users who lost
          something and told us about it.
        </p>

        <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: 'repeat(auto-fit, minmax(290px, 1fr))' }}>

          <div style={card}>
            <h3 style={h3}>Your toolbar is backed up first</h3>
            <p style={body}>
              REAPER keeps toolbar layouts in one file, and installing VFxM has
              to write to it. From 1.2.2 the installer copies that file to
              <strong style={{ color: 'var(--t)' }}> Virtue/Backups/</strong> before
              it touches anything, with a plain-English note explaining how to
              put it back.
            </p>
            <p style={body}>
              If an earlier version already flattened your toolbar, this cannot
              bring it back — there is no copy of yours to restore. You get
              REAPER's defaults. The protection starts here.
            </p>
          </div>

          <div style={card}>
            <h3 style={h3}>Uninstalling no longer breaks it either</h3>
            <p style={body}>
              The uninstaller used to delete its own line outright. REAPER stops
              reading at the first gap, so anyone who had dragged the Virtue
              button toward the front of their strip lost everything after it —
              and reinstalling added past the hole, so it never came back.
            </p>
            <p style={body}>
              The slot is now cleared rather than removed, and installing
              repairs a toolbar that already has a gap.
            </p>
          </div>

          <div style={card}>
            <h3 style={h3}>A crashing plugin is not tried twice</h3>
            <p style={body}>
              When a plugin crashes REAPER during a scan, VFxM records it so the
              scan can resume past it. That record was written to one place and
              read from another, so the same plugin could be opened again — and
              crash again.
            </p>
            <p style={body}>
              Both now agree, and <strong style={{ color: 'var(--t)' }}>Resume
              Crashed Scan</strong> does what it says.
            </p>
          </div>

        </div>

        <div style={{
          marginTop: '20px', padding: '18px 22px', borderRadius: '14px',
          background: 'rgba(var(--accent-rgb), 0.06)', border: '1px solid rgba(var(--accent-rgb), 0.22)',
          display: 'grid', gap: '6px',
        }}>
          <strong style={{ fontSize: '14px', color: 'var(--t)' }}>Also in 1.2.2</strong>
          <p style={{ ...body, fontSize: '13.5px' }}>
            Plugins you uninstalled long ago stop appearing — VFxM was reading
            plugin lists from every processor architecture while REAPER only
            maintains the one it is running. The search box no longer clears
            itself while you are reading the results, and the delay is now yours
            to set. Panels you deliberately hid stay hidden across an update.
          </p>
        </div>

        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', marginTop: '26px' }}>
          <a href="download/" className="btn-primary">Download 1.2.2</a>
          <a href="changelog/" className="btn-ghost">Read the full release notes</a>
        </div>

      </div>
    </section>
  );
};