import React from 'react'
import { sections } from '../../constants/sectionConfig'
import RevealCard from '../ui/RevealCard'

export default function FirstMile({ active }) {
  const config = sections[0]
  return (
    <RevealCard active={active} id="first-mile-section">
      <div className="section-badge">Stage 01</div>
      <h2 className="section-title">{config.title}</h2>
      <h3 className="section-subtitle">{config.subtitle}</h3>
      <p className="section-description">{config.description}</p>
      <div className="section-metrics">
        <div className="metric-item">
          <span className="metric-value">14,250</span>
          <span className="metric-label">Parcels Processed</span>
        </div>
        <div className="metric-item">
          <span className="metric-value">99.98%</span>
          <span className="metric-label">Sorting Accuracy</span>
        </div>
      </div>
    </RevealCard>
  )
}
