import React from 'react'
import { sections } from '../../constants/sectionConfig'
import { useSceneStore } from '../../store/useSceneStore'
import RevealCard from '../ui/RevealCard'
import { progressToScrollY, smoothScrollToY } from '../../utils/helpers'

export default function LastMile({ active }) {
  const config = sections[2]
  const lenis = useSceneStore((state) => state.lenis)

  const handleClose = () => {
    // Smoothly scroll to 92% progress, which lands on the analytics-dashboard
    // view where the closing promise card is revealed.
    // Relative to the experience spacer (the section sits below the page hero).
    smoothScrollToY(lenis, progressToScrollY(0.92))
  }

  return (
    <RevealCard active={active} id="last-mile-section">
      <div className="section-badge">Stage 03</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">99.4%</span>
          <span className="metric-label">On-Time Delivery</span>
        </div>
        <div className="metric-item">
          <span className="metric-value">12.5 min</span>
          <span className="metric-label">Avg. Doorstep Time</span>
        </div>
      </div>
      <div className="section-supporting">
        <span className="supporting-dot"></span>
        <div className="supporting-text">
          <span className="supporting-value">Real-Time visibility</span>
          <span className="supporting-label">Live GPS · Active now</span>
        </div>
      </div>
      <button className="section-close-btn" onClick={handleClose}>
        Continue
        <svg 
          width="14" 
          height="14" 
          viewBox="0 0 24 24" 
          fill="none" 
          stroke="currentColor" 
          strokeWidth="2.5" 
          strokeLinecap="round" 
          strokeLinejoin="round" 
          style={{ marginLeft: '6px' }}
        >
          <line x1="5" y1="12" x2="19" y2="12"></line>
          <polyline points="12 5 19 12 12 19"></polyline>
        </svg>
      </button>
    </RevealCard>
  )
}
