/* global React */

// Two download cards — Stable (cream CTA) + Dev (cream CTA, orange hover).
// Copy lifted from the live site.

const DownloadCard = ({ kind, version, meta, note, onClick }) => {
  const isStable = kind === 'stable';
  const [hover, setHover] = React.useState(false);
  const badgeBg = isStable ? 'rgba(33,88,164,0.30)' : 'rgba(235,162,93,0.20)';
  const badgeCol = isStable ? 'var(--mlc-gold)' : 'var(--mlc-orange)';
  const border = isStable ? 'rgba(33,88,164,0.25)' : 'rgba(235,162,93,0.25)';
  const hoverBg = isStable ? 'var(--mlc-blue)' : 'var(--mlc-orange)';

  return (
    <div
      style={{
        position: 'relative',
        width: '100%', maxWidth: 340,
        background: 'rgba(33,88,164,0.10)',
        borderRadius: 16,
        border: `1px solid ${border}`,
        padding: 16,
        display: 'flex', flexDirection: 'column',
        minHeight: 230,
      }}
    >
      <div
        style={{
          fontSize: 11, fontWeight: 600,
          borderRadius: 11, padding: '3px 10px',
          background: badgeBg, color: badgeCol,
          display: 'inline-block', alignSelf: 'flex-start',
          marginBottom: 10, letterSpacing: '0.04em',
        }}
      >
        {isStable ? 'Stable' : 'Dev'}
      </div>
      <div style={{
        fontSize: 20, fontWeight: 600,
        color: 'var(--mlc-cream)', textAlign: 'center',
        marginBottom: 6, letterSpacing: '-0.01em',
      }}>
        {version}
      </div>
      <div style={{
        fontSize: 12, color: 'rgba(254,255,238,0.35)',
        textAlign: 'center', marginBottom: 16, flex: 1,
      }}>
        {meta}
      </div>
      <a
        href="#"
        onClick={(e) => { e.preventDefault(); onClick?.(); }}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          display: 'block',
          borderRadius: 22, padding: '12px 16px',
          fontSize: 14, fontWeight: 600,
          textAlign: 'center', textDecoration: 'none',
          transition: 'background .2s, color .2s, box-shadow .2s',
          marginTop: 'auto',
          background: hover ? hoverBg : 'var(--mlc-cream)',
          color: hover ? 'var(--mlc-cream)' : 'rgba(10,15,26,0.90)',
          boxShadow: hover ? `0 0 24px ${isStable ? 'rgba(33,88,164,0.45)' : 'rgba(235,162,93,0.45)'}` : 'none',
        }}
      >
        ↓ Download for Windows
      </a>
      {note && (
        <p style={{
          fontSize: 11, color: 'rgba(254,255,238,0.35)',
          textAlign: 'center', margin: '10px 0 0',
        }}>
          {note}
        </p>
      )}
    </div>
  );
};

const Download = () => (
  <section
    id="download"
    data-screen-label="07 Download"
    style={{ padding: '80px 32px', position: 'relative', zIndex: 1 }}
  >
    <div style={{ maxWidth: 1080, margin: '0 auto' }}>
      <h2 style={{
        fontSize: 42, fontWeight: 700, lineHeight: 1.15,
        letterSpacing: '-0.02em', color: 'var(--mlc-cream)',
        textAlign: 'center', margin: '0 0 12px',
      }}>
        Download mylittlechart
      </h2>
      <p style={{
        textAlign: 'center', fontSize: 16,
        color: 'rgba(254,255,238,0.50)', margin: '0 0 28px',
      }}>
        Available for Windows, macOS, and Linux.
      </p>
      <div style={{
        display: 'flex', gap: 24,
        justifyContent: 'center', flexWrap: 'wrap',
      }}>
        <DownloadCard
          kind="stable"
          version="v0.14.3"
          meta="Windows 10+ · 64-bit"
        />
        <DownloadCard
          kind="dev"
          version="v0.15.0-dev.8"
          meta="Windows 10+ · 64-bit"
          note="Development build. May contain bugs."
        />
      </div>
      <div style={{
        marginTop: 24, textAlign: 'center',
        fontSize: 13, color: 'rgba(254,255,238,0.45)',
      }}>
        <a href="#" style={{ color: 'rgba(254,255,238,0.60)', textDecoration: 'none' }}>macOS</a>
        <span style={{ margin: '0 8px', color: 'rgba(254,255,238,0.25)' }}>·</span>
        <a href="#" style={{ color: 'rgba(254,255,238,0.60)', textDecoration: 'none' }}>Linux</a>
      </div>
    </div>
  </section>
);

window.Download = Download;