/* Download page — pick your platform. Two big cards (macOS / Windows),
   each with a placeholder for the binary the user will upload later.
   When a build is uploaded, set the matching tier's `href` and flip
   `status` from 'soon' to 'available'. */

const PLATFORMS = [
  {
    id: 'mac',
    name: 'macOS',
    subtitle: 'Apple silicon & Intel',
    requirements: 'macOS 12 Monterey or later',
    size: '—',
    version: 'v1.4.2',
    status: 'soon',
    href: null,
    icon: (
      <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">
        <path d="M17.05 12.04c-.02-2.42 1.98-3.58 2.07-3.64-1.13-1.65-2.89-1.88-3.51-1.9-1.49-.15-2.92.88-3.68.88-.77 0-1.94-.86-3.2-.84-1.64.02-3.16.96-4 2.43-1.71 2.96-.44 7.34 1.22 9.74.81 1.18 1.78 2.5 3.05 2.45 1.22-.05 1.69-.79 3.17-.79s1.89.79 3.19.76c1.32-.02 2.15-1.2 2.96-2.38.93-1.37 1.31-2.7 1.34-2.77-.03-.01-2.57-.99-2.59-3.94zM14.47 4.83c.67-.82 1.13-1.95 1-3.08-.97.04-2.15.65-2.85 1.46-.62.72-1.17 1.88-1.03 2.99 1.09.08 2.2-.55 2.88-1.37z"/>
      </svg>
    )
  },
  {
    id: 'windows',
    name: 'Windows',
    subtitle: 'x64 & ARM64',
    requirements: 'Windows 11 or Windows 10 (22H2+)',
    size: '—',
    version: 'v1.4.2',
    status: 'soon',
    href: null,
    icon: (
      <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">
        <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-13.051-1.351"/>
      </svg>
    )
  }
];

function DownloadApp() {
  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 20px' : '80px 28px 24px',
        position: 'relative',
        overflow: 'hidden'
      }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `radial-gradient(45% 70% at 80% 0%, ${accent}1f, transparent 60%)`,
        }}></div>
        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', textAlign: 'center' }}>
          <div style={{
            fontSize: 11.5, fontWeight: 600, color: accent, letterSpacing: 1.4,
            textTransform: 'uppercase', marginBottom: 14
          }}>Download</div>
          <h1 style={{
            fontSize: isMobile ? 34 : 72, lineHeight: 1.05, letterSpacing: isMobile ? -1.2 : -2.2, fontWeight: 600,
            margin: '0 0 18px', color: 'var(--text)', textWrap: 'balance'
          }}>
            Pick your{' '}
            <span style={{
              color: accent, fontWeight: 600,
              textTransform: 'uppercase', letterSpacing: -0.8
            }}>PLATFORM.</span>
          </h1>
          <p style={{
            fontSize: 18, lineHeight: 1.55, color: 'var(--muted)',
            margin: '0 auto', maxWidth: 560, textWrap: 'pretty'
          }}>
            OrthoVaultOS runs natively on both. Pick the build for your machine and you&rsquo;re scrubbed-in.
          </p>
        </div>
      </section>

      {/* Platform cards */}
      <section style={{ padding: isMobile ? '28px 20px 40px' : '40px 28px 64px' }}>
        <div style={{
          maxWidth: 1000, margin: '0 auto',
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: isMobile ? 16 : 24
        }}>
          {PLATFORMS.map((p) => {
            const isAvailable = p.status === 'available';
            return (
              <article key={p.id} style={{
                background: 'var(--surface)',
                border: '1px solid var(--border)',
                borderRadius: 18,
                padding: isMobile ? '24px 20px 20px' : '36px 32px 28px',
                display: 'flex', flexDirection: 'column', gap: 22,
                boxShadow: 'var(--shadow-card)',
                position: 'relative',
                overflow: 'hidden'
              }}>
                {/* Soft platform-tinted backdrop */}
                <div aria-hidden="true" style={{
                  position: 'absolute', inset: 0, pointerEvents: 'none',
                  background: `radial-gradient(60% 50% at 80% 0%, ${accent}10, transparent 60%)`,
                }}></div>

                <div style={{ position: 'relative', display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14 }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: 14,
                    background: 'var(--surface-2)',
                    border: '1px solid var(--border)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--text)'
                  }}>{p.icon}</div>
                  <span style={{
                    fontSize: 10.5, fontWeight: 600, letterSpacing: 0.6, textTransform: 'uppercase',
                    padding: '4px 10px', borderRadius: 100,
                    background: isAvailable ? `${accent}1a` : 'var(--surface-2)',
                    color: isAvailable ? accent : 'var(--subtle)',
                    fontFamily: '"Geist Mono", ui-monospace, monospace',
                    border: `1px solid ${isAvailable ? 'transparent' : 'var(--border)'}`
                  }}>{isAvailable ? 'Available' : 'Coming soon'}</span>
                </div>

                <div style={{ position: 'relative' }}>
                  <h2 style={{
                    fontSize: 32, fontWeight: 600, letterSpacing: -1, margin: '0 0 6px',
                    color: 'var(--text)'
                  }}>{p.name}</h2>
                  <div style={{ fontSize: 14, color: 'var(--muted)' }}>{p.subtitle}</div>
                </div>

                <dl style={{
                  position: 'relative', margin: 0, display: 'grid',
                  gridTemplateColumns: '1fr 1fr', gap: '10px 18px',
                  paddingTop: 18, borderTop: '1px solid var(--border-soft)'
                }}>
                  <div>
                    <dt style={{
                      fontSize: 10.5, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 0.8,
                      textTransform: 'uppercase', fontFamily: '"Geist Mono", ui-monospace, monospace'
                    }}>Requires</dt>
                    <dd style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--text)' }}>{p.requirements}</dd>
                  </div>
                  <div>
                    <dt style={{
                      fontSize: 10.5, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 0.8,
                      textTransform: 'uppercase', fontFamily: '"Geist Mono", ui-monospace, monospace'
                    }}>Version</dt>
                    <dd style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--text)', fontFamily: '"Geist Mono", ui-monospace, monospace' }}>{p.version}</dd>
                  </div>
                  <div>
                    <dt style={{
                      fontSize: 10.5, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 0.8,
                      textTransform: 'uppercase', fontFamily: '"Geist Mono", ui-monospace, monospace'
                    }}>Size</dt>
                    <dd style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--text)', fontFamily: '"Geist Mono", ui-monospace, monospace' }}>{p.size}</dd>
                  </div>
                  <div>
                    <dt style={{
                      fontSize: 10.5, fontWeight: 600, color: 'var(--subtle)', letterSpacing: 0.8,
                      textTransform: 'uppercase', fontFamily: '"Geist Mono", ui-monospace, monospace'
                    }}>Signed</dt>
                    <dd style={{ margin: '4px 0 0', fontSize: 13.5, color: 'var(--text)' }}>{isAvailable ? 'Yes · notarized' : '—'}</dd>
                  </div>
                </dl>

                {isAvailable ? (
                  <a href={p.href} style={{
                    position: 'relative',
                    padding: '13px 22px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit',
                    background: 'var(--btn-solid-bg)', color: 'var(--btn-solid-fg)',
                    border: 'none', borderRadius: 10, cursor: 'pointer', letterSpacing: -0.1,
                    textAlign: 'center', textDecoration: 'none', display: 'block'
                  }}>Download for {p.name}</a>
                ) : (
                  <div style={{
                    position: 'relative',
                    padding: '13px 22px', fontSize: 15, fontWeight: 600, fontFamily: 'inherit',
                    background: 'var(--surface-2)', color: 'var(--subtle)',
                    border: '1px dashed var(--border-strong)', borderRadius: 10,
                    textAlign: 'center'
                  }}>Build coming soon</div>
                )}
              </article>
            );
          })}
        </div>

        {/* What you get */}
        <div style={{
          maxWidth: 1000, margin: isMobile ? '24px auto 0' : '40px auto 0',
          padding: isMobile ? '20px 20px' : '28px 32px',
          border: '1px solid var(--border)', borderRadius: 16,
          background: 'var(--surface-2)'
        }}>
          <div style={{
            fontSize: 11, fontWeight: 600, color: accent, letterSpacing: 1.2,
            textTransform: 'uppercase', marginBottom: 14, fontFamily: '"Geist Mono", ui-monospace, monospace'
          }}>What you get</div>
          <div style={{
            display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 14 : 18
          }}>
            {[
              { k: 'Full app, no time limit', v: 'Free tier never expires.' },
              { k: 'Cloud synced', v: 'Your library syncs securely to the cloud. Always accessible, always backed up.' },
              { k: 'Native builds', v: 'Apple silicon and Windows ARM64 supported.' },
            ].map((m) => (
              <div key={m.k}>
                <div style={{
                  fontSize: 14, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2,
                  marginBottom: 4
                }}>{m.k}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5 }}>{m.v}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Want to be notified */}
        <div style={{
          maxWidth: 1000, margin: '24px auto 0',
          padding: '20px 28px',
          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: 14.5, fontWeight: 600, color: 'var(--text)', letterSpacing: -0.2 }}>
              Want a heads-up when builds drop?
            </div>
            <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>
              Email us and we&rsquo;ll ping you the moment your platform is live.
            </div>
          </div>
          <a href="support.html" style={{
            padding: '10px 18px', fontSize: 13.5, 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'
          }}>Notify me</a>
        </div>
      </section>

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

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