/* global React, ReactDOM, LeftSidebar, SiteHeader, SiteFooter, Lenis */
/*
 * Support development — the contribution page.
 *
 * THE COPY IS OZZY'S AND IT IS CHECKED. Every word on this page comes from
 * marketing/support-page-copy.md, which was written against FACTS.json and
 * Rodney's bio page. Do not reword anything here to make a layout work — move
 * the layout. Three lines in particular are legal rather than tonal:
 *
 *   "Not a licence"          a donation is not a purchase, and VFxM's $29 is
 *   "Not a promise of any     the purchase. Blurring the two turns a checkout
 *    feature on any date"     into a sale of something undelivered.
 *   "Not a share of anything" NO EQUITY, NO REVENUE, NO RETURN. Softening this
 *                             one turns a Polar donation into a securities
 *                             offer. It stays exactly as written.
 *
 * "Participation" on this page means early builds, a voice on the public
 * roadmap, and a name in the credits. It never means a stake.
 *
 * ONE FILLED BUTTON. `btn-primary` appears once on this page, on Contribute,
 * and nowhere else - the same rule products.jsx follows on the home page. The
 * checkout opens in the SAME TAB: it is where the visitor is going, not an
 * external reference they will come back from. rel="noopener" all the same.
 *
 * TRANSLATION COST: every string here is new English and ships untranslated in
 * the other eleven locales. Lookups use the English sentence as the key, so a
 * missing translation renders as the English - which is the correct fallback
 * for a page that did not exist before. No EXISTING key was reworded to build
 * this, so nothing already translated regresses.
 */

const { useEffect: useEffectS } = React;

const useLenisS = () => {
  useEffectS(() => {
    if (typeof Lenis === 'undefined') return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const lenis = new Lenis({ duration: 0.6, smoothWheel: true });
    let raf;
    const tick = (t) => { lenis.raf(t); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); lenis.destroy(); };
  }, []);
};

/* Rodney's Polar product, "Name a fair price", one-time. The URL lives here and
   in marketing/support-page-copy.md and nowhere else on the site. */
const CHECKOUT = 'https://buy.polar.sh/polar_cl_WhJo4PMMoOxoqqsvsY5o9MCSUz1OuD5TwFqZd2r9la0';

const Section = ({ id, children, tone }) => (
  <section
    id={id}
    className="section-shell"
    style={{
      paddingTop: 72,
      paddingBottom: 72,
      background: tone === 'sunk' ? 'var(--bg-2)' : 'transparent',
    }}
  >
    <div style={{ maxWidth: 860, margin: '0 auto' }}>{children}</div>
  </section>
);

/* One of the three "why this exists" blocks. A rule above it, a heading, and a
   paragraph - no cards, no shadows, per the design system. */
const Block = ({ n, title, children }) => (
  <div style={{ padding: '30px 0 0', borderTop: '1px solid var(--line)', marginTop: 30 }}>
    <p style={{
      fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.16em',
      /* --accent-ink, not --o: 12px accent text. Small text takes the ink
         variant, and this block sits on --bg-2 where --o is 4.6:1. */
      color: 'var(--accent-ink)', margin: '0 0 8px',
    }}>
      {n}
    </p>
    <h3 style={{ fontSize: 'clamp(20px, 2.4vw, 24px)', letterSpacing: '-0.02em', marginBottom: 12, color: 'var(--t)' }}>
      {title}
    </h3>
    <p style={{ color: 'var(--t-2)', lineHeight: 1.7, margin: 0, maxWidth: '66ch' }}>{children}</p>
  </div>
);

const Gets = ({ children }) => (
  <li style={{ display: 'flex', gap: 14, alignItems: 'flex-start', color: 'var(--t-2)', lineHeight: 1.65 }}>
    <span aria-hidden="true" style={{ color: 'var(--o)', flexShrink: 0, marginTop: 1 }}>—</span>
    <span>{children}</span>
  </li>
);

const SupportDevelopment = () => {
  useLenisS();

  return (
    <>
      <SiteHeader base="../" />
      <LeftSidebar base="../" />

      <main id="main">

        {/* ---- Headline and lead ---------------------------------------- */}
        <Section id="top">
          <p className="eyebrow" style={{ marginBottom: 16 }}>Virtue Creative Systems · Support</p>
          <h1 style={{ fontSize: 'clamp(38px, 5vw, 58px)', lineHeight: 1.04, letterSpacing: '-0.04em', marginBottom: 22 }}>
            Build the tools with us.
          </h1>
          <p style={{ fontSize: 19, color: 'var(--t-2)', lineHeight: 1.65, maxWidth: '62ch', margin: 0 }}>
            Virtue is one person, a few years of savings, and a conviction: REAPER users deserve
            tools that show them what they have instead of making them hunt for it. VFxM exists.
            Virtue Console is being built. If any of it has made your sessions better, this is the
            place to put something back into the next one.
          </p>
        </Section>

        {/* ---- Why this exists ------------------------------------------- */}
        <Section id="why" tone="sunk">
          <Block n="1" title="Where the money goes">
            Every contribution buys development time, and nothing else. No office, no ads, no
            salaries but one. A day funded is a day of fixing what you reported, finishing a
            language, or building the thing that is still on the drawing board. You can see exactly
            what that looks like: the changelog lists every fix by name.
          </Block>

          <Block n="2" title="What twenty-five years of film taught me">
            Before audio software I spent twenty-five years in visual effects — supervising teams of
            a hundred to four hundred artists on work for Netflix and global brands, running a
            studio across three countries, judging the VES Awards, teaching the next generation at
            Clemson. Film pipelines are built for one thing: letting hundreds of people find the
            right asset in seconds without breaking concentration. That discipline is the whole idea
            behind VFxM. The industry that taught me is not a music industry, and that is precisely
            the point — the approach is new here.
          </Block>

          <Block n="3" title="Giving back to the room you learned in">
            Nobody learns production alone. Forum threads, free scripts, someone's tutorial at two
            in the morning — that is how all of us got here. VFxM's trial is ten days with no card
            and no sign-up because that is how I would want to be treated. A contribution keeps that
            true, and it keeps the tools priced for working musicians rather than for studios.
          </Block>
        </Section>

        {/* ---- The two lists --------------------------------------------- */}
        <Section id="what-you-get">
          <h2 style={{ fontSize: 'clamp(26px, 3.4vw, 34px)', letterSpacing: '-0.03em', marginBottom: 22, maxWidth: '22ch' }}>
            What a contribution gets you
          </h2>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 16, maxWidth: '68ch' }}>
            <Gets>
              <strong style={{ color: 'var(--t)' }}>Early builds.</strong>{' '}
              Contributors see releases before the forum does, and their bug reports get answered first.
            </Gets>
            <Gets>
              <strong style={{ color: 'var(--t)' }}>A voice on the roadmap.</strong>{' '}
              Contributors' requests go on the board I plan from, and they are weighed alongside everyone else's.
            </Gets>
            <Gets>
              <strong style={{ color: 'var(--t)' }}>A name in the credits</strong>
              , on this site, if you want it there.
            </Gets>
            <Gets>
              <strong style={{ color: 'var(--t)' }}>The company's own updates</strong>
              , written by me, about what is being built and why — including the things that did not work.
            </Gets>
          </ul>

          {/* The not-list. It is the reason this page can exist at all, so it
              is the same size as the list above it, not a footnote. */}
          <div style={{ marginTop: 44, paddingTop: 30, borderTop: '1px solid var(--line)' }}>
            <h2 style={{ fontSize: 'clamp(22px, 2.8vw, 28px)', letterSpacing: '-0.03em', marginBottom: 14, maxWidth: '22ch' }}>
              What it does not get you
            </h2>
            <p style={{ color: 'var(--t-2)', lineHeight: 1.7, margin: 0, maxWidth: '66ch' }}>
              Not a licence — VFxM costs $29 and that is a purchase, not a donation. Not a promise
              of any feature on any date. Not a share of anything. This is a way to fund independent
              work by someone who has shown you what he does with it.
            </p>
          </div>
        </Section>

        {/* ---- The ask ---------------------------------------------------- */}
        <Section id="contribute" tone="sunk">
          <div style={{ maxWidth: 620 }}>
            <p style={{ fontSize: 19, color: 'var(--t)', lineHeight: 1.6, marginBottom: 28 }}>
              Name your own amount. Fifty is the suggestion; anything is welcome; nothing is expected.
            </p>
            {/* THE one filled button on this page. Same tab: a checkout is a
                destination, not a reference. */}
            <a href={CHECKOUT} rel="noopener" className="btn-primary">Contribute</a>
            <p style={{ color: 'var(--t-3)', fontSize: 14, lineHeight: 1.6, margin: '20px 0 0', maxWidth: '56ch' }}>
              <em>
                One-time payment, handled by Polar. You will get a receipt and a thank-you from me,
                not a newsletter you did not ask for.
              </em>
            </p>
          </div>
        </Section>

        {/* ---- Close ------------------------------------------------------ */}
        <Section id="close">
          <p style={{ color: 'var(--t-2)', lineHeight: 1.7, margin: 0, maxWidth: '62ch' }}>
            Thank you for reading this far. The best way to support the work is still to use it,
            tell someone about it, and tell me when it breaks.
          </p>
          <p style={{ color: 'var(--t-3)', fontFamily: 'var(--mono)', fontSize: 14, margin: '20px 0 0' }}>
            — Rodney Costa, Virtue Creative Systems
          </p>
        </Section>

      </main>

      <SiteFooter base="../" />
    </>
  );
};

const rootS = ReactDOM.createRoot(document.getElementById('root'));
rootS.render(<SupportDevelopment />);