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 MidMile({ active }) {
  const config = sections[1]
  const lenis = useSceneStore((state) => state.lenis)

  const handleClose = () => {
    // Smoothly scroll to 57.5% progress, which is just after the truck resumes moving (at 57%).
    // Relative to the experience spacer (the section sits below the page hero).
    smoothScrollToY(lenis, progressToScrollY(0.575))
  }

  return (
    <RevealCard active={active} id="mid-mile-section">
      <div className="section-badge">Stage 02</div>
      <h2 className="section-title">{config.title}</h2>
      <h3 className="section-subtitle">{config.subtitle}</h3>
      <p className="section-description">{config.description}</p>
      {/* Enterprise information strip — icon + title + description rows with
          subtle hairline separators (no KPI cards / oversized statistics).
          Keeps the `section-metrics` class so the RevealCard entrance stagger
          still treats it as a single animated block. */}
      <div className="section-metrics mm-info-strip">
        <div className="mm-info-row">
          <span className="mm-info-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="1" y="3" width="15" height="13"></rect>
              <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
              <circle cx="5.5" cy="18.5" r="2.5"></circle>
              <circle cx="18.5" cy="18.5" r="2.5"></circle>
            </svg>
          </span>
          <div className="mm-info-content">
            <h4 className="mm-info-title">Vehicles In Transit</h4>
            <p className="mm-info-text">A live view of active vehicles moving shipments between regional distribution hubs.</p>
          </div>
        </div>
        <div className="mm-info-row">
          <span className="mm-info-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"></line>
              <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
              <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
              <line x1="12" y1="22.08" x2="12" y2="12"></line>
            </svg>
          </span>
          <div className="mm-info-content">
            <h4 className="mm-info-title">Packages In Transit</h4>
            <p className="mm-info-text">Real-time visibility into parcels currently moving through the mid-mile network.</p>
          </div>
        </div>
      </div>
      <button className="section-close-btn" onClick={handleClose}>
        Continue Journey
        <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>
  )
}
