// Single-camper showcase — Fiat Ducato McLouis
function Fleet({ onBook }) {
  return (
    <section id="flota" style={{paddingTop: 40}}>
      <div className="container">
        <div className="section-hdr">
          <div className="col">
            <div className="eyebrow"><span className="dot"></span>Nasz kamper</div>
            <h2 className="h2" style={{marginTop: 16}}>
              {window.CAMPER.name}<br/>
              <em>{window.CAMPER.type.toLowerCase()}</em>.
            </h2>
          </div>
          <div className="col">
            <p className="lede">
              Jeden, świetnie wyposażony kamper. Salon, sypialnia, kuchnia, łazienka z osobnym prysznicem
              i „taras" z markizą. Pełna lista wyposażenia poniżej.
            </p>
            <button className="btn btn-ember" style={{marginTop: 20}} onClick={() => onBook()}>
              Sprawdź dostępność <window.Icon name="arrow" size={16}/>
            </button>
          </div>
        </div>

        <div className="camper-hero">
          <div className="camper-img" style={{backgroundImage: `url(${window.CAMPER.img})`}}>
            <span className="badge-top">Fiat Ducato · McLouis</span>
          </div>
          <div className="camper-rooms">
            {window.CAMPER.rooms.map((r, i) => (
              <div key={i} className="camper-room">
                <div className="num">0{i+1}</div>
                <div>
                  <h4>{r.title}</h4>
                  <p>{r.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Fleet = Fleet;