function Hero({ onBook }) {
  const [dates, setDates] = React.useState({ from: null, to: null });
  const [camper, setCamper] = React.useState(null);
  const fmt = (d) => d ? new Date(d).toLocaleDateString("pl-PL", { day: "numeric", month: "short" }) : null;

  return (
    <section className="hero" id="wynajem">
      <div className="container">
        <div className="hero-tag">
          <span className="badge"><span className="dot"></span>Wynajem · Mobilny serwis</span>
          <span className="badge">Sezon 2026 — pisz / dzwoń</span>
        </div>

        <div className="hero-grid">
          <div>
            <h1 className="display">
              Jeden kamper.<br/>
              <em>Pełne</em> wyposażenie.<br/>
              Mobilny <em>serwis</em>.
            </h1>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={onBook}>
                Sprawdź dostępność <window.Icon name="arrow" size={16}/>
              </button>
              <a href="#cennik" className="btn btn-ghost">
                Zobacz cennik
              </a>
            </div>

            <div className="booking" onClick={onBook}>
              <div className="booking-cell">
                <label>Odbiór</label>
                <div className="val">
                  {dates.from ? fmt(dates.from) : <span className="placeholder">Wybierz datę</span>}
                </div>
              </div>
              <div className="booking-cell">
                <label>Zwrot</label>
                <div className="val">
                  {dates.to ? fmt(dates.to) : <span className="placeholder">Wybierz datę</span>}
                </div>
              </div>
              <div className="booking-cell">
                <label>Kamper</label>
                <div className="val">Fiat Ducato McLouis</div>
              </div>
              <div className="booking-cta">
                <button className="btn btn-ember">
                  Sprawdź <window.Icon name="arrow" size={16}/>
                </button>
              </div>
            </div>
          </div>

          <div>
            <div className="hero-img-wrap">
              <div className="hero-img main" style={{ backgroundImage: `url(${window.HERO_IMAGES?.main || "https://kamperland.com.pl/wp-content/uploads/2025/05/IMG_20220721_135947-1220x600.jpg"})` }}></div>
            </div>

            <div className="hero-meta" style={{marginTop: 28}}>
              <div className="hero-meta-row">
                <div className="num">01</div>
                <div>
                  <strong>Fiat Ducato McLouis · półintegra</strong>
                  <p>Salon, sypialnia z łóżkiem francuskim, kuchnia, łazienka z osobnym prysznicem i markiza.</p>
                </div>
              </div>
              <div className="hero-meta-row">
                <div className="num">02</div>
                <div>
                  <strong>Od 320 zł / doba</strong>
                  <p>Cena zależna od sezonu. Pełne ubezpieczenie OC/AC/NNW + Assistance Europa w cenie.</p>
                </div>
              </div>
              <div className="hero-meta-row">
                <div className="num">03</div>
                <div>
                  <strong>Mobilny serwis kamperów</strong>
                  <p>Małopolskie, śląskie, świętokrzyskie, podkarpackie. Dojeżdżamy do Ciebie.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <Strip />
    </section>
  );
}

function Strip() {
  // Real travel categories from kamperland.com.pl/podroze/
  const items = [
    "Polska", "Rumunia", "Bułgaria", "Słowacja", "Węgry", "Albania"
  ];
  const all = [...items, ...items, ...items];
  return (
    <div className="strip">
      <div className="strip-track">
        {all.map((it, i) => (
          <span key={i} className="strip-item">
            <em>{it}</em>
            <span className="sep"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

window.Hero = Hero;