/* global React */
const DS_FEAT = window.SubEarthDesignSystem_9ae0a6;

function Features() {
  const { Card, Marquee } = window.SubEarthDesignSystem_9ae0a6;
  const items = [
    { n: '01', t: 'The Plugin', d: 'A distortion developed with bass music in mind.' },
    { n: '02', t: '12 Presets', d: 'Developed by bass music producers, for... you get the point.' },
    { n: '03', t: '5 Modes', d: 'Each with a unique sound, tunable to your liking.' },
    { n: '04', t: 'Oversampling', d: '2x, 4x, and 8x Oversampling.' },
  ];
  return (
    <React.Fragment>
      <div style={{ padding: 'var(--space-12) 0', borderBlock: '1px solid var(--line)' }}>
        <Marquee items={['SUB.EARTH', 'CHONKIFY', 'OUT NOW']} speed={26} size="var(--fs-d2)" />
      </div>

      <section id="included" style={{ padding: 'var(--section-y) var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--max-w)', margin: '0 auto' }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)', maxWidth: '40ch', marginBottom: 'var(--space-16)' }}>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 700, textTransform: 'uppercase',
              letterSpacing: 'var(--tr-tight)', lineHeight: 1.0, margin: 0, fontSize: 'var(--fs-d2)',
            }}>One plugin. All weight.</h2>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
            gap: 'var(--space-4)',
          }}>
            {items.map((it) => (
              <Card key={it.n} variant="surface" pad="var(--space-8)" style={{ minHeight: '220px', display: 'flex', flexDirection: 'column' }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 'var(--fs-2xs)',
                  letterSpacing: 'var(--tr-label)', color: 'var(--text-faint)',
                }}>{it.n}</span>
                <h3 style={{
                  marginTop: 'auto', marginBottom: 'var(--space-3)', fontFamily: 'var(--font-display)',
                  fontWeight: 600, textTransform: 'uppercase', letterSpacing: 'var(--tr-tight)',
                  fontSize: 'var(--fs-xl)',
                }}>{it.t}</h3>
                <p style={{ margin: 0, color: 'var(--text-secondary)', fontSize: 'var(--fs-sm)', lineHeight: 1.55, minHeight: 'calc(var(--fs-sm) * 1.55 * 2)' }}>{it.d}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.Features = Features;
window.__appReady.Features = true;