/* Changelog page — public release notes for OrthoVaultOS.
   Mirrors App/src/data/changelog.js by hand (App and Website are separate
   deploy targets with no shared package, so there's no way to import one
   from the other) — update both together, plus CHANGELOG.md at the App
   repo root, whenever a release ships. */

const CHANGELOG_DATA = [
  {
    version: '1.0.2',
    date: 'July 25, 2026',
    notes: [
      { type: 'added', text: 'Delete confirmations are now consistent everywhere in the app — every delete action asks "are you sure?" before removing something.' },
      { type: 'added', text: 'The Refresh button now shows a live percentage while a cloud sync is in progress.' },
      { type: 'fixed', text: 'Fixed the sign-in screen photo showing inconsistent black bars as the window is resized.' },
    ],
  },
  {
    version: '1.0.1',
    date: 'July 23, 2026',
    notes: [
      { type: 'fixed', text: "The window's close button now reliably quits the app." },
      { type: 'fixed', text: 'Fixed surgeon and procedure photos getting stuck on "Loading…" — shows "Image unavailable" with a Retry option instead.' },
      { type: 'changed', text: "Hid the Facebook sign-in button while Meta's App Review is pending." },
    ],
  },
  {
    version: '1.0.0',
    date: 'July 19, 2026',
    notes: [
      { type: 'added', text: 'First public release — macOS and Windows installers.' },
    ],
  },
];

const TYPE_META = {
  added:   { label: 'New',     color: '#1a9e5c' },
  fixed:   { label: 'Fixed',   color: '#2563eb' },
  changed: { label: 'Changed', color: null /* filled in with accent at render time */ },
};

function ChangelogApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const accent = t.accent || '#b91c2c';
  const theme = t.theme || 'light';
  const isMobile = useIsMobile();

  React.useEffect(() => {
    document.body.setAttribute('data-theme', theme);
    return () => { document.body.removeAttribute('data-theme'); };
  }, [theme]);

  return (
    <div data-theme={theme} style={{
      fontFamily: '"Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
      color: 'var(--text)',
      background: 'var(--bg)',
      minHeight: '100vh',
    }}>
      <Nav accent={accent} />

      {/* Header */}
      <section style={{ padding: isMobile ? '40px 20px 24px' : '72px 28px 32px', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(40% 70% at 80% 0%, ${accent}1a, transparent 60%)`,
        }}></div>
        <div style={{ position: 'relative', maxWidth: 800, margin: '0 auto' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1.4,
            textTransform: 'uppercase', marginBottom: 14
          }}>Changelog</div>
          <h1 style={{
            fontSize: isMobile ? 32 : 56, lineHeight: 1.05, letterSpacing: isMobile ? -1 : -1.6, fontWeight: 600,
            margin: '0 0 18px', color: 'var(--text)', textWrap: 'balance'
          }}>
            What's new in{' '}
            <span style={{ color: accent, fontWeight: 600, textTransform: 'uppercase', letterSpacing: -0.5 }}>
              ORTHOVAULTOS.
            </span>
          </h1>
          <p style={{ fontSize: isMobile ? 15.5 : 18, lineHeight: 1.55, color: 'var(--muted)', margin: '0 0 22px', maxWidth: 560, textWrap: 'pretty' }}>
            Every fix and improvement we ship, in one place. The app checks its own version automatically —
            update by downloading the latest installer below.
          </p>
          <a href="download.html" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '11px 20px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
            background: 'var(--btn-solid-bg)', color: 'var(--btn-solid-fg)',
            border: 'none', borderRadius: 9, cursor: 'pointer', letterSpacing: -0.1,
            textDecoration: 'none'
          }}>Download latest version →</a>
        </div>
      </section>

      {/* Release list */}
      <section style={{ padding: isMobile ? '16px 20px 56px' : '24px 28px 96px', borderTop: '1px solid var(--border)' }}>
        <div style={{ maxWidth: 800, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 32 }}>
          {CHANGELOG_DATA.map((release, i) => (
            <article key={release.version} style={{
              padding: isMobile ? '24px 22px' : '30px 34px',
              border: '1px solid var(--border)',
              borderRadius: 14,
              background: 'var(--surface)',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 18, flexWrap: 'wrap' }}>
                <h2 style={{ fontSize: 22, fontWeight: 600, letterSpacing: -0.4, margin: 0, color: 'var(--text)' }}>
                  Version {release.version}
                </h2>
                <span style={{ fontSize: 13, color: 'var(--subtle)' }}>{release.date}</span>
                {i === 0 && (
                  <span style={{
                    fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
                    padding: '3px 9px', borderRadius: 100, background: `${accent}1a`, color: accent,
                    fontFamily: '"Geist Mono", ui-monospace, monospace'
                  }}>Latest</span>
                )}
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {release.notes.map((note, j) => {
                  const meta = TYPE_META[note.type] || TYPE_META.changed;
                  const color = meta.color || accent;
                  return (
                    <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                      <span style={{
                        flexShrink: 0, marginTop: 2, fontSize: 10.5, fontWeight: 600, letterSpacing: 0.4,
                        textTransform: 'uppercase', padding: '2px 8px', borderRadius: 100,
                        background: `${color}1a`, color, fontFamily: '"Geist Mono", ui-monospace, monospace',
                        whiteSpace: 'nowrap'
                      }}>{meta.label}</span>
                      <span style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--muted)' }}>{note.text}</span>
                    </div>
                  );
                })}
              </div>
            </article>
          ))}

          {/* End CTA */}
          <div style={{
            marginTop: 8, padding: '28px 30px',
            border: '1px solid var(--border)', borderRadius: 14,
            background: 'var(--surface)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18,
            flexWrap: 'wrap'
          }}>
            <div>
              <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2 }}>
                Have feedback on a recent release?
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--muted)', marginTop: 4 }}>
                We respond to every email within 48 hours.
              </div>
            </div>
            <a href="support.html" style={{
              padding: '11px 20px', fontSize: 14, fontWeight: 600, fontFamily: 'inherit',
              background: 'var(--btn-solid-bg)', color: 'var(--btn-solid-fg)',
              border: 'none', borderRadius: 9, cursor: 'pointer', letterSpacing: -0.1,
              textDecoration: 'none'
            }}>Contact us</a>
          </div>
        </div>
      </section>

      <Footer accent={accent} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<ChangelogApp />);