// Amenities + Location sections — uses new book images

const AmenitiesSection = () => {
  const a = CONTENT.amenities;
  return (
    <section className="section amenities" id="amenities" data-screen-label="04 Áreas comuns">
      <div className="container">
        <Reveal>
          <div className="am-header">
            <div>
              <span className="eyebrow">{a.eyebrow}</span>
              <h2 className="h2 am-headline">{a.headline}</h2>
            </div>
            <p className="lede am-lede">{a.lede}</p>
          </div>
        </Reveal>

        <div className="am-grid">
          {a.items.map((item, i) => (
            <Reveal key={item.title} delay={i * 70}>
              <article className="am-card">
                <div className="am-photo">
                  <img
                    src={CONTENT.images[item.img]}
                    alt={`${item.title} · ${item.subtitle}`}
                    loading="lazy"
                    decoding="async"
                  />
                </div>
                <div className="am-body">
                  <span className="am-num mono">{String(i + 1).padStart(2, "0")}</span>
                  <h3 className="am-title">{item.title}</h3>
                  <p className="am-sub">{item.subtitle}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const LocationSection = () => {
  const l = CONTENT.locationSection;
  return (
    <section className="section section-tight location" id="localizacao" data-screen-label="06 Localização">
      <div className="container">
        <Reveal>
          <div className="loc-header">
            <div>
              <span className="eyebrow">{l.eyebrow}</span>
              <h2 className="h2 loc-headline">{l.headline}</h2>
            </div>
            <p className="lede loc-lede">{l.lede}</p>
          </div>
        </Reveal>

        <div className="loc-frame loc-frame-single">
          <Reveal>
            <div className="loc-distances">
              <span className="eyebrow gold">Distâncias</span>
              <ul className="loc-list">
                {l.distances.map(d => (
                  <li key={d.label}>
                    <span className="loc-label">{d.label}</span>
                    <span className="loc-dist mono">{d.dist}</span>
                  </li>
                ))}
              </ul>
              <button
                className="btn btn-primary loc-cta"
                onClick={() => { track("inline_cta_click", { location: "location" }); scrollToId("lead-form-final"); }}
              >
                Solicitar visita ao stand
                <Icon name="arrowR" size={14} />
              </button>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { AmenitiesSection, LocationSection });