Features

<Features content={defaultFeatures} />

import type { FeaturesSectionContent } from '@/types'

interface FeaturesProps {
  content: FeaturesSectionContent
}

export function Features({ content }: FeaturesProps): React.JSX.Element {
  return (
    <section id="features" className="features-section section-pad">
      <div className="section-inner">
        {/* Section header: 2-col */}
        <div className="features-header">
          <div>
            <div className="section-eyebrow">{content.eyebrow}</div>
            <h2 className="section-title">{content.title}</h2>
          </div>
          <p className="section-sub">{content.subtitle}</p>
        </div>

        {/* Ledger rows */}
        <div className="features-ledger">
          {content.features.map((feature) => (
            <div key={feature.index + '-' + feature.title} className="feature-row">
              <div className="feature-index">{feature.index}</div>
              <div className="feature-content">
                <div className="feature-title">{feature.title}</div>
                <p className="feature-description">{feature.description}</p>
              </div>
              <div className="feature-tag">{feature.tag}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}