// Equipment + pricing sections
function Equipment() {
  return (
    <section id="wyposazenie" style={{paddingTop: 0}}>
      <div className="container">
        <div className="section-hdr">
          <div className="col">
            <div className="eyebrow"><span className="dot"></span>Pełne wyposażenie</div>
            <h2 className="h2" style={{marginTop: 16}}>
              Wsiadasz<br/>i <em>jedziesz</em>.
            </h2>
          </div>
          <div className="col">
            <p className="lede">
              Kamper wyjeżdża z bazy gotowy do drogi. W cenie wynajmu otrzymujesz wszystko poniżej —
              nic nie musisz dopożyczać ani dokupować na ostatnią chwilę.
            </p>
          </div>
        </div>

        <div className="equip-grid">
          {Object.entries(window.EQUIPMENT).map(([cat, items], i) => (
            <div key={i} className="equip-cat">
              <h4>{cat}</h4>
              <ul>
                {items.map((it, j) => (
                  <li key={j}>
                    <span className="bullet"></span>
                    {it}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing({ onBook }) {
  const p = window.PRICING;
  return (
    <section id="cennik" className="pricing">
      <div className="container">
        <div className="section-hdr">
          <div className="col">
            <div className="eyebrow"><span className="dot"></span>Cennik wynajmu</div>
            <h2 className="h2" style={{marginTop: 16}}>
              Cena za <em>dobę</em>,<br/>
              zależnie od <em>sezonu</em>.
            </h2>
          </div>
          <div className="col">
            <p className="lede">
              Ceny brutto, dotyczą jednej doby wynajmu. Im dłużej, tym łatwiej —
              powyżej 14 dni opłata serwisowa nie jest pobierana.
            </p>
          </div>
        </div>

        <div className="pricing-grid">
          {p.seasons.map((s, i) => (
            <div key={i} className={`price-card ${i === 0 ? "highlight" : ""}`}>
              <div className="price-head">
                <span className="label">{s.label}</span>
                {i === 0 && <span className="hot">●&nbsp;Top sezon</span>}
              </div>
              <div className="price-num">
                <span className="num">{s.price}</span>
                <span className="unit">zł / doba</span>
              </div>
              <div className="price-when">{s.when}</div>
              <div className="price-tag">
                <window.Icon name="check" size={14}/>
                {s.tag}
              </div>
            </div>
          ))}
        </div>

        <div className="pricing-extras">
          <div className="extra-card">
            <div className="extra-num">{p.serviceFee} <small>zł</small></div>
            <h4>Opłata serwisowa</h4>
            <p>{p.serviceFeeNote}</p>
          </div>
          <div className="extra-card">
            <div className="extra-num">{p.deposit.toLocaleString("pl-PL")} <small>zł</small></div>
            <h4>Kaucja zwrotna</h4>
            <p>Pobierana przy odbiorze pojazdu, zwracana po sprawdzeniu pojazdu przy zwrocie.</p>
          </div>
          <div className="extra-card">
            <div className="extra-num"><window.Icon name="check" size={28}/></div>
            <h4>Ubezpieczenie</h4>
            <p>{p.insurance}. W sezonie wysokim — brak limitu km. W pozostałych — 300 km/dobę.</p>
          </div>
        </div>

        <div style={{marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap"}}>
          <button className="btn btn-ember" onClick={onBook}>
            Sprawdź dostępność <window.Icon name="arrow" size={16}/>
          </button>
          <a className="btn btn-ghost" href="tel:+48790419336">
            <window.Icon name="phone" size={14}/> Zadzwoń: +48 790 419 336
          </a>
        </div>
      </div>
    </section>
  );
}

window.Equipment = Equipment;
window.Pricing = Pricing;