// confirm.jsx — booking confirmation

const Confirm = ({ car, search, form, total, onLogo, onHome, onSelectCar }) => {
  const days = Math.max(1, Math.round((search.dates.end - search.dates.start) / 86400000));
  const ref = "784-" + Math.random().toString(36).slice(2, 8).toUpperCase();
  return (
    <div className="detail-page">
      <Nav onLogo={onLogo} onSelectCar={onSelectCar} />
      <div className="confirm-wrap">
        <div className="confirm-card">
          <div className="confirm-check"><Icon name="check" size={32} strokeWidth={3} color="white" /></div>
          <div className="detail-cat">Booking confirmed</div>
          <h1 style={{fontFamily:"var(--font-display)", fontSize:38, fontWeight:600, letterSpacing:"-0.02em", margin:"6px 0 8px", lineHeight:1.05}}>You're all set, {form.firstName || "friend"}.</h1>
          <p style={{color:"var(--ink-500)", fontSize:16, marginBottom:24}}>Confirmation <strong style={{color:"var(--ink-900)"}}>{ref}</strong> · sent to {form.email || "your email"}</p>

          <div className="confirm-grid">
            <div className="confirm-tile">
              <div className="confirm-tile-label">Vehicle</div>
              <div style={{display:"flex", alignItems:"center", gap:12, marginTop:8}}>
                <div style={{width:80, height:60, background:"var(--sand-50)", borderRadius:8, display:"grid", placeItems:"center"}}><CarIllustration id={car.id} /></div>
                <div>
                  <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:18}}>{car.name}</div>
                  <div style={{fontSize:13, color:"var(--ink-500)"}}>{car.cat}</div>
                </div>
              </div>
            </div>
            <div className="confirm-tile">
              <div className="confirm-tile-label">Pickup</div>
              <div style={{fontWeight:600, fontSize:15, marginTop:8}}>{search.pickup.name}</div>
              <div style={{fontSize:13, color:"var(--ink-500)"}}>{fmtShort(search.dates.start)} · {search.pickupTime}</div>
            </div>
            <div className="confirm-tile">
              <div className="confirm-tile-label">Drop-off</div>
              <div style={{fontWeight:600, fontSize:15, marginTop:8}}>{search.dropoff.name}</div>
              <div style={{fontSize:13, color:"var(--ink-500)"}}>{fmtShort(search.dates.end)} · {search.dropoffTime}</div>
            </div>
            <div className="confirm-tile">
              <div className="confirm-tile-label">Total · {days} day{days>1?"s":""}</div>
              <div style={{fontFamily:"var(--font-display)", fontWeight:600, fontSize:26, marginTop:6}}>XCD {total.toLocaleString()}</div>
              <div style={{fontSize:12, color:"var(--ink-400)"}}>≈ USD ${Math.round(total/2.7)} · {form.payment === "card-now" ? "20% deposit charged" : "Pay at pickup"}</div>
            </div>
          </div>

          <div style={{background:"var(--sea-50)", borderRadius:"var(--radius-md)", padding:18, marginTop:24, fontSize:14, color:"var(--sea-800)", display:"flex", gap:12}}>
            <Icon name="whatsapp" size={20} color="var(--sea-600)" />
            <div>We'll send your contract and pickup instructions via <strong>WhatsApp</strong> to {form.phone || "your phone"} within an hour. Reply <em>"on my way"</em> when you're 30 min out.</div>
          </div>

          <div style={{display:"flex", gap:12, marginTop:24}}>
            <button className="summary-cta" style={{flex:1, background:"var(--ink-900)"}} onClick={onHome}>Back to home</button>
            <button className="summary-cta" style={{flex:1}}>Add to calendar</button>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
};

window.Confirm = Confirm;