frontend/components/HowItWorks.js

export default function HowItWorks() {
  const steps = [
    { num: '01', title: 'Launch Your Economy', desc: 'Deploy your token, liquidity vault, and NFT collection contracts in a single transaction.' },
    { num: '02', title: 'Distribute Tokens', desc: 'Share your tokens with fans. Every transfer includes a small tax that flows to the liquidity vault.' },
    { num: '03', title: 'Whales Join Vault', desc: 'Large holders deposit tokens and base assets into the vault to earn rewards from taxes and royalties.' },
    { num: '04', title: 'Mint & Trade NFTs', desc: 'Create exclusive NFT content. Royalties from secondary sales automatically flow back to the vault.' },
  ];

  return (
    <section className="features" id="how-it-works" style={{ paddingTop: '2rem' }}>
      <div className="section-header">
        <h2>How It <span className="accent">Works</span></h2>
        <p>From zero to a full creator economy in four steps</p>
      </div>

      <div style={{ maxWidth: '800px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
        {steps.map((step) => (
          <div key={step.num} className="glass-card" style={{ display: 'flex', alignItems: 'center', gap: '1.5rem', padding: '1.5rem 2rem' }}>
            <div style={{
              minWidth: '56px', height: '56px', borderRadius: '14px',
              background: 'linear-gradient(135deg, #C8FF00 0%, #228B22 100%)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: "'Space Mono', monospace", fontSize: '1.2rem', fontWeight: 700, color: '#050508',
            }}>
              {step.num}
            </div>
            <div>
              <h3 style={{ fontSize: '1.2rem', marginBottom: '0.35rem', color: '#F8FAF0' }}>{step.title}</h3>
              <p style={{ color: 'rgba(248,250,240,0.5)', lineHeight: 1.5, fontSize: '0.95rem' }}>{step.desc}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}