/* global React, Wordmark */
const DS_PLAN = window.SubEarthDesignSystem_9ae0a6;

function Plans({ onBuy }) {
  const { Eyebrow, Button, Badge } = window.SubEarthDesignSystem_9ae0a6;
  // Wordmark is defined in Nav.jsx and available globally
  const incl = [
    'Chonkify standalone — VST3 · AU',
    '...',
    'Free updates, forever',
    '14-day no-questions return',
  ];
  return (
    <section id="plan" style={{ padding: 'var(--section-y) var(--gutter)', position: 'relative', overflow: 'hidden', backgroundImage: 'var(--spotlight-soft)' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'var(--grain)', backgroundSize: '160px 160px', opacity: 0.05, mixBlendMode: 'screen', pointerEvents: 'none' }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'var(--grain)', backgroundSize: '110px 110px', opacity: 0.16, mixBlendMode: 'overlay', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', zIndex: 2, maxWidth: '560px', margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-6)' }}>
        <Eyebrow align="center" index="03">One price</Eyebrow>
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 'var(--tr-tight)', lineHeight: 1.0, margin: 0, fontSize: 'var(--fs-d2)' }}>Own it. Forever</h2>

        <div style={{
          width: '100%', marginTop: 'var(--space-6)', padding: 'var(--space-10)',
          background: 'var(--surface-card)', boxShadow: 'var(--ring-strong)', borderRadius: 'var(--radius-lg)',
          display: 'flex', flexDirection: 'column', gap: 'var(--space-8)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Wordmark size={20} />
            <Badge variant="solid">v2.6</Badge>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: '10px' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'var(--fs-d1)', letterSpacing: 'var(--tr-tight)', textShadow: 'var(--glow-sm)' }}>$39</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)', letterSpacing: 'var(--tr-mono)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>standalone</span>
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)', textAlign: 'left' }}>
            {incl.map((i) => (
              <li key={i} style={{ display: 'flex', gap: '12px', alignItems: 'flex-start', color: 'var(--text-secondary)', fontSize: 'var(--fs-sm)' }}>
                <span style={{ color: 'var(--text-primary)', flex: '0 0 auto' }}>—</span>{i}
              </li>
            ))}
          </ul>
          <Button variant="primary" size="lg" full iconRight={<span>↗</span>} onClick={onBuy}>Buy Now</Button>
        </div>
      </div>
    </section>
  );
}

window.Plans = Plans;
window.__appReady.Plans = true;