frontend/components/Features.js

export default function Features() {
  const features = [
    {
      icon: '🪙',
      title: 'Creator Tokens',
      description: 'Launch your own ERC20 token with built-in transfer taxes that reward liquidity providers and stakeholders automatically.',
    },
    {
      icon: '🏦',
      title: 'Liquidity Vaults',
      description: 'Whales deposit tokens and base assets to earn rewards from transaction taxes and NFT royalties in real-time.',
    },
    {
      icon: '🎨',
      title: 'NFT Collections',
      description: 'Create custom NFT collections with royalty splits that automatically distribute earnings to creators and vaults.',
    },
    {
      icon: '⚡',
      title: 'One-Click Deploy',
      description: 'Deploy your entire creator economy — token, vault, and NFT collection — in a single blockchain transaction.',
    },
    {
      icon: '🔒',
      title: 'Built-in Security',
      description: 'Tax rates and royalties are capped at 10%. All contracts use battle-tested OpenZeppelin patterns.',
    },
    {
      icon: '🌐',
      title: 'On-Chain Economy',
      description: 'Everything lives on Ethereum. Your tokens, vaults, and NFTs are fully composable with DeFi protocols.',
    },
  ];

  return (
    <section className="features" id="features">
      <div className="section-header">
        <h2>Build Your <span className="accent">Creator Economy</span></h2>
        <p>Everything you need to launch and grow your decentralized creator brand</p>
      </div>
      <div className="features-grid">
        {features.map((f, i) => (
          <div className="feature-card" key={f.title}>
            <div className="feature-icon">{f.icon}</div>
            <h3>{f.title}</h3>
            <p>{f.description}</p>
          </div>
        ))}
      </div>
    </section>
  );
}