// car-about.jsx — "browse mode" car detail page from Fleet menu.
// Layout matches the hero booking flow: a full-width BookingWidget at the
// top (pickup, dates, times), then the about-the-car content below.

const CarAbout = ({ car, onBack, onLogo, onSelectCar, onContinue }) => {
  const handleSearch = (s) => onContinue(s);

  return (
    <div className="detail-page car-about-page">
      <Nav onLogo={onLogo} onSelectCar={onSelectCar} />

      <div className="ca-hero">
        <div className="ca-hero-inner">
          <a className="detail-back" onClick={onBack} style={{color: "white", marginBottom: 18}}>
            <Icon name="arrow-left" size={14} /> Back to home
          </a>
          <div className="ca-hero-eyebrow">{car.cat}</div>
          <h1 className="ca-hero-title">
            {car.name}
            <span className="ca-hero-or">{car.or}</span>
          </h1>
          <p className="ca-hero-sub">{car.description} <strong>From XCD {car.pricePerDay}/day.</strong> Pick your dates below to continue.</p>
          <BookingWidget onSearch={handleSearch} carId={car.id} />
        </div>
      </div>

      <div className="ca-body">
        <div className="ca-body-inner">
          <div className="ca-content">
            <div className="ca-illustration">
              <CarIllustration id={car.id} />
            </div>

            <div className="detail-section">
              <h3>About this car</h3>
              <p style={{fontSize:16, lineHeight:1.7, color:"var(--ink-700)", marginBottom:0, textWrap:"pretty"}}>
                {car.long || car.description}
              </p>
            </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>Availability</h3>
              <Availability carId={car.id} />
            </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="ca-cta-banner">
              <div>
                <div className="ca-cta-label">Ready to roll?</div>
                <div className="ca-cta-text">Choose your dates above and continue to driver info.</div>
              </div>
              <a className="ca-cta-btn" onClick={() => window.scrollTo({top: 0, behavior: "smooth"})}>
                <Icon name="arrow-right" size={14} color="white" />
                Pick dates
              </a>
            </div>
          </div>
        </div>
      </div>

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

window.CarAbout = CarAbout;