// detail.jsx — vehicle detail page

const Detail = ({ car, search, onBack, onLogo, onContinue, onSelectCar }) => {
  const hasSearch = !!search;
  const fallbackStart = new Date(Date.now() + 86400000 * 2);
  const fallbackEnd = new Date(Date.now() + 86400000 * 5);
  const useSearch = hasSearch ? search : {
    pickup: window.LOCATIONS[0],
    dropoff: window.LOCATIONS[0],
    dates: { start: fallbackStart, end: fallbackEnd },
    pickupTime: "10:00",
    dropoffTime: "10:00",
  };
  const days = Math.max(1, Math.round((useSearch.dates.end - useSearch.dates.start) / 86400000));
  const subtotal = car.pricePerDay * days;
  const cdw = 0;
  const fees = 60;
  const total = subtotal + fees;

  return (
    <div className="detail-page">
      <Nav onLogo={onLogo} onSelectCar={onSelectCar} />
      <div className="detail-header">
        <div className="detail-header-inner">
          <a className="detail-back" onClick={onBack}>
            <Icon name="arrow-left" size={14} /> {hasSearch ? "Back to results" : "Back to home"}
          </a>
        </div>
      </div>

      <div className="detail-body">
        <div className="detail-main">
          <div className="detail-cat">{car.cat}</div>
          <h1 className="detail-name">{car.name} <span style={{color:"var(--ink-400)", fontWeight: 400, fontSize: 22, fontStyle:"italic"}}>{car.or}</span></h1>
          <p className="detail-tagline">{car.description}</p>

          <div className="detail-hero">
            <CarIllustration id={car.id} />
          </div>

          <div className="detail-section">
            <h3>Vehicle specs</h3>
            <div className="spec-grid">
              <div className="spec-tile">
                <div className="ico"><Icon name="users" size={16} /></div>
                <div className="label">Seats</div>
                <div className="value">{car.seats}</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="luggage" size={16} /></div>
                <div className="label">Luggage</div>
                <div className="value">{car.bags} bags</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="settings" size={16} /></div>
                <div className="label">Transmission</div>
                <div className="value">{car.transmission}</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="compass" size={16} /></div>
                <div className="label">Drivetrain</div>
                <div className="value">{car.drive}</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="door" size={16} /></div>
                <div className="label">Doors</div>
                <div className="value">{car.doors}</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="snowflake" size={16} /></div>
                <div className="label">Air con</div>
                <div className="value">Yes</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="fuel" size={16} /></div>
                <div className="label">Fuel economy</div>
                <div className="value">{car.mpg}</div>
              </div>
              <div className="spec-tile">
                <div className="ico"><Icon name="shield" size={16} /></div>
                <div className="label">CDW included</div>
                <div className="value">Yes</div>
              </div>
            </div>
          </div>

          <div className="detail-section">
            <h3>What's included</h3>
            <div className="feat-grid">
              {[
                "Free cancellation up to 48h",
                "Unlimited mileage on island",
                "24/7 roadside assistance",
                "Free delivery within 10 km",
                "CDW with $2,500 deductible",
                "Third-party liability cover",
                ...car.features
              ].map((f, i) => (
                <div key={i} className="feat-item">
                  <span className="check"><Icon name="check" size={12} strokeWidth={2.6} /></span>
                  {f}
                </div>
              ))}
            </div>
          </div>

          <div className="detail-section">
            <h3>Optional extras</h3>
            <div className="feat-grid">
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                Zero-deductible cover · XCD $35/day
              </div>
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                Child seat (0–4 yrs) · XCD $15/day
              </div>
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                Booster seat (4–8 yrs) · XCD $10/day
              </div>
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                Additional driver · XCD $20/day
              </div>
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                GPS / SIM with data · XCD $25/day
              </div>
              <div className="feat-item">
                <span className="check"><Icon name="plus" size={12} strokeWidth={2.6} /></span>
                Cooler box &amp; beach kit · XCD $50 flat
              </div>
            </div>
          </div>
        </div>

        <aside className="detail-aside">
          <div className="summary-card">
            <div className="summary-price">
              <div>
                <div className="amt"><span className="cur">XCD </span>{car.pricePerDay}</div>
                <div className="summary-usd">≈ USD ${Math.round(car.pricePerDay / 2.7)} per day</div>
              </div>
              <div className="per">/day</div>
            </div>

            <div className="summary-trip-block">
              <div className="leg">
                <div className="dot" />
                <div className="leg-meta">
                  <div className="label">Pickup</div>
                  <div className="where">{useSearch.pickup.name}</div>
                  <div className="when">{fmtShort(useSearch.dates.start)} · {useSearch.pickupTime}</div>
                </div>
              </div>
              <div className="connector" />
              <div className="leg">
                <div className="dot end" />
                <div className="leg-meta">
                  <div className="label">Drop-off</div>
                  <div className="where">{useSearch.dropoff.name}</div>
                  <div className="when">{fmtShort(useSearch.dates.end)} · {useSearch.dropoffTime}</div>
                </div>
              </div>
            </div>

            <div className="summary-rows">
              <div className="summary-row">
                <span>XCD {car.pricePerDay} × {days} day{days>1?"s":""}</span>
                <span>XCD {subtotal.toLocaleString()}</span>
              </div>
              <div className="summary-row">
                <span>CDW + 3rd party</span>
                <span style={{color:"var(--sea-600)", fontWeight:600}}>Included</span>
              </div>
              <div className="summary-row">
                <span>Driver's permit fee</span>
                <span>XCD 60</span>
              </div>
              <div className="summary-row total">
                <span>Total</span>
                <span style={{textAlign:"right"}}>
                  XCD {total.toLocaleString()}
                  <div className="usd-tot">≈ USD ${Math.round(total / 2.7)}</div>
                </span>
              </div>
            </div>

            <button className="summary-cta" onClick={onContinue}>Continue to driver info</button>

            <div className="summary-trust">
              <div className="summary-trust-item">
                <Icon name="shield" size={14} />
                Free cancellation until 48h before pickup
              </div>
              <div className="summary-trust-item">
                <Icon name="check" size={14} />
                No credit card charged today
              </div>
              <div className="summary-trust-item">
                <Icon name="whatsapp" size={14} />
                Confirmation by email &amp; WhatsApp
              </div>
            </div>
          </div>
        </aside>
      </div>

      <Footer />
    </div>
  );
};

window.Detail = Detail;