import React from 'react'
import RevealCard from '../ui/RevealCard'

/**
 * Promise — Final card
 * ---------------------------------------------------------------------------
 * Closing-statement card and the final beat of the experience, revealed as the
 * journey closes (right after Stage 03 — Last Mile). It's a regular centred
 * in-experience overlay card (same chrome as the others) — NOT a separate
 * scroll section — so the camera, scene, and scroll timing are untouched.
 */
export default function Promise({ active }) {
  return (
    <RevealCard active={active} id="promise-section">
      <div className="section-badge">The Doormile Promise</div>
      <h2 className="section-title promise-title">
        One Connected System.
        <br />
        One Promise Kept.
      </h2>
      <span className="promise-divider" aria-hidden></span>
      <p className="section-description promise-desc">
        Stop managing three separate logistics services. Doormile unifies first,
        mid and last mile into a single intelligent delivery system powered by
        MileTruth&trade; AI.
      </p>
    </RevealCard>
  )
}
