// Page sections — Pillars, Expedition cards, Itinerary, Experts, Awards, FAQ, Final CTA, Header, Footer.

function Header({ onCTA }) {
  return (
    <header className="lp-header">
      <a className="lp-header__mark" href="https://www.explora.com/" target="_blank" rel="noopener" aria-label="Explora — open homepage in a new tab">
        <img src="ds/assets/logo-explora-black.png" alt="Explora" className="lp-header__logo" />
      </a>
      <nav className="lp-header__nav">
        <a href="#expeditions">Expeditions</a>
        <a href="#itinerary">SAMPLE ITINERARIES</a>
        <a href="#experts">OUR TEAM</a>
        <a href="#faq">FAQS</a>
      </nav>
      <div className="lp-header__right">
        <a className="lp-header__phone" href="tel:+18665662092">Call us <strong>+1 (866) 566-2092</strong></a>
        <button className="lp-cta-dark" onClick={onCTA}>Request Information</button>
      </div>
    </header>);

}

function Pillars() {
  return (
    <section className="lp-pillars" data-screen-label="pillars">
      <div className="lp-pillars__head">
        <div className="lp-eyebrow">What defines an Explora Expedition</div>
        <h2 className="lp-section__title">Four principles. 33 years exploring destinations.</h2>
      </div>
      <div className="lp-pillars__grid">
        {window.PILLARS.map((p) =>
        <div className="lp-pillar" key={p.n}>
            <div className="lp-pillar__num">{p.n}</div>
            <h3 className="lp-pillar__title">{p.title}</h3>
            {p.lede ? <p className="lp-pillar__lede">{p.lede}</p> : null}
            <p className="lp-pillar__desc">{p.desc}</p>
          </div>
        )}
      </div>
    </section>);

}

function ExpeditionCard({ exp, idx, onSelect }) {
  const reverse = idx % 2 === 1;
  const [showDates, setShowDates] = React.useState(false);
  return (
    <article className={"lp-expedition" + (reverse ? " lp-expedition--reverse" : "")}
    data-screen-label={"expedition-" + exp.id}>
      <div className="lp-expedition__photo photo" data-place={exp.place} style={exp.photoStyle}>
        <span className="lp-expedition__num">{exp.badge || exp.region}</span>
      </div>
      <div className="lp-expedition__body">
        <div className="lp-expedition__region">{exp.region}</div>
        <h3 className="lp-expedition__name">{exp.namePrefix ? <React.Fragment><em style={{ fontFamily: "Arial" }}>{exp.namePrefix}</em> {exp.name}</React.Fragment> : exp.name}</h3>
        <p className="lp-expedition__desc">{exp.desc}</p>
        <div className="lp-expedition__meta">
          <div className="lp-expedition__meta-item"><strong>{exp.duration}</strong>All-Inclusive</div>
          <div className="lp-expedition__meta-item"><strong>from {exp.fromPrice}</strong>Per person, double occupancy</div>
          <div className="lp-expedition__meta-item"><strong>{exp.departures}</strong>Up to 8 travelers</div>
        </div>
        <dl className="lp-expedition__details">
          <div className="lp-expedition__detail"><dt>Departure</dt><dd>{exp.departureCity}</dd></div>
          <div className="lp-expedition__detail"><dt>Accommodation</dt><dd>{exp.accommodation}</dd></div>
          <div className="lp-expedition__detail"><dt>Physical level</dt><dd>{exp.physicalLevel}</dd></div>
        </dl>
        {exp.allDepartures &&
        <div className={"lp-departures" + (showDates ? " is-open" : "")}>
            <button className="lp-departures__toggle" onClick={() => setShowDates(!showDates)}>
              <span>{showDates ? "Hide departures" : "View all departures"}</span>
              <span className="lp-departures__chev">{showDates ? "−" : "+"}</span>
            </button>
            {!showDates && <span className="lp-departures__aside">Private expeditions available</span>}
            {showDates &&
          <ul className="lp-departures__list">
                {exp.allDepartures.map((d) =>
            <li key={d.range} className="lp-departures__row">
                    <span className="lp-departures__date">{d.range}</span>
                    <span className={"lp-departures__status lp-departures__status--" + d.status.toLowerCase().replace(/\s/g, "-")}>{d.status}</span>
                    <span className="lp-departures__price">{d.price}</span>
                  </li>
            )}
              </ul>
          }
          </div>
        }
        <div className="lp-expedition__cta-row">
          <button className="lp-cta-secondary" onClick={() => onSelect(exp)}>Request this Expedition</button>
          <a href={"#itinerary-" + exp.id} className="lp-link" onClick={(e) => {
            e.preventDefault();
            window.dispatchEvent(new CustomEvent("itinerary:select", { detail: exp.id }));
            document.getElementById("itinerary").scrollIntoView({ behavior: "smooth", block: "start" });
          }}>See sample itinerary →</a>
        </div>
      </div>
    </article>);

}

function Expeditions({ onSelect }) {
  return (
    <section className="lp-expeditions" id="expeditions" data-screen-label="expeditions">
      <div className="lp-section" style={{ paddingBottom: 0 }}>
        <div className="lp-section__head">
          <div>
            <h2 className="lp-section__title">FOUR EXPEDITIONS. 
THREE DESTINATIONS.
</h2>
          </div>
          <p className="lp-section__lead">Each Expedition is available on a limited number of dates. We recommend planning ahead to secure your place.</p>
        </div>
      </div>
      {window.EXPEDITIONS.map((exp, i) => <ExpeditionCard key={exp.id} exp={exp} idx={i} onSelect={onSelect} />)}
    </section>);

}

function renderItinName(name) {
  if (typeof name === "string" && name.slice(0, 4).toLowerCase() === "new ") {
    return <React.Fragment><em>New</em> {name.slice(4)}</React.Fragment>;
  }
  return name;
}

function Itinerary() {
  const [active, setActive] = React.useState("iceland");
  React.useEffect(() => {
    const h = (e) => setActive(e.detail);
    window.addEventListener("itinerary:select", h);
    return () => window.removeEventListener("itinerary:select", h);
  }, []);
  const it = window.ITINERARIES[active];
  return (
    <section className="lp-itinerary" id="itinerary" data-screen-label="itinerary">
      <div className="lp-itinerary__inner">
        <div className="lp-itinerary__side">
          <div className="lp-eyebrow">Featured Expedition</div>
          <h2 className="lp-section__title">{renderItinName(it.name)}</h2>
          <p className="lp-section__lead" style={{ marginTop: 24 }}>
            A closer look at one of our Expeditions: a multi-day journey designed to adapt to terrain, weather, and the pace of the group. Every Expedition flexes to conditions on the ground. This is one route as it has run.
          </p>
          <div className="lp-itinerary__select">
            {["iceland", "iceland-winter", "peru", "fuego"].filter((id) => window.ITINERARIES[id]).map((id) =>
            <button key={id} className={active === id ? "is-active" : ""} onClick={() => setActive(id)}>
                {renderItinName(window.ITINERARIES[id].name)}
              </button>
            )}
          </div>
        </div>
        <div className="lp-itinerary__days" id={"itinerary-" + active}>
          {it.days.map((d) =>
          <div className="lp-day" key={d.n}>
              <div className="lp-day__num">day<strong>{String(d.n).padStart(2, "0")}</strong></div>
              <div>
                <h4 className="lp-day__title">{d.title}</h4>
                <p className="lp-day__desc">{d.desc}</p>
                <div className="lp-day__tags">{d.tags.map((t) => <span key={t}>{t}</span>)}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Experts() {
  return (
    <section className="lp-experts" data-screen-label="experts">
      <div className="lp-section">
        <div className="lp-section__head" id="experts">
          <div>
            <div className="lp-eyebrow">the team in the field</div>
            <h2 className="lp-section__title">You walk with people who know this ground.</h2>
          </div>
          <p className="lp-section__lead">From route design and field logistics to guiding, safety, and daily rhythm, each expedition is supported by people who understand both the terrain and the traveler experience.</p>
        </div>
        <div className="lp-experts__grid">
          {window.EXPERTS.map((e) =>
          <div key={e.name}>
              <div className="lp-expert__photo photo" data-place={e.place} style={e.photo}></div>
              <h4 className="lp-expert__name">{e.name}</h4>
              <p className="lp-expert__role">{e.role}</p>
              <p className="lp-expert__bio">{e.bio}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Awards() {
  return (
    <section className="lp-awards" data-screen-label="awards">
      <div className="lp-awards__inner">
        <div className="lp-awards__head">
          <div className="lp-eyebrow lp-eyebrow--light">In the Press</div>
          <p className="lp-awards__statement">
            Recognized as the <em>world's leading expedition company</em> — seven years running.
          </p>
          <div className="lp-awards__rule" aria-hidden="true"></div>
        </div>
        <div className="lp-awards__row">
          {window.AWARDS.map((a, i) =>
          <div className="lp-award" key={a.title}>
              <div className="lp-award__years">{a.years}</div>
              <div className="lp-award__note">{a.note}</div>
              <div className="lp-award__org">{a.org}</div>
              <h4 className="lp-award__title">{a.title}</h4>
              <div className="lp-award__index">№ {String(i + 1).padStart(2, "0")}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="lp-faq" id="faq" data-screen-label="faq">
      <div className="lp-section lp-section--narrow">
        <div className="lp-section__head">
          <div>
            <div className="lp-eyebrow">before you ask</div>
            <h2 className="lp-section__title">Common questions.</h2>
          </div>
          <p className="lp-section__lead">If you have something not answered here, write it in your inquiry. A specialist will respond personally.</p>
        </div>
        <div className="lp-faq__list">
          {window.FAQS.map((f, i) =>
          <div key={f.q} className={"lp-faq__item" + (open === i ? " is-open" : "")}>
              <button className="lp-faq__btn" onClick={() => setOpen(open === i ? -1 : i)}>
                <span className="lp-faq__q">{f.q}</span>
                <span className="lp-faq__icon"></span>
              </button>
              <div className="lp-faq__answer"><div className="lp-faq__answer-inner" style={{ whiteSpace: "pre-line" }}>{f.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function FinalCTA({ onCTA }) {
  return (
    <section className="lp-final" data-screen-label="final-cta">
      <div className="lp-final__photo photo" data-place="patagonia, last light" style={{ backgroundColor: "#1a1a1a" }}></div>
      <div className="lp-final__inner">
        <div className="lp-eyebrow lp-eyebrow--light" style={{ justifyContent: "center", display: "inline-flex" }}>New 2027 departures</div>
        <h2 className="lp-final__headline">The territory is waiting. Find the expedition that fits you.</h2>
        <p className="lp-final__sub">Our team will help you compare destinations, physical level, and availability — so you can choose the Expedition that is right for you.</p>
        <div className="lp-final__row">
          <button className="lp-cta-on-dark" onClick={onCTA}>Request Information</button>
          <a href="tel:+18665662092" className="lp-link lp-link--light">or call +1 (866) 566-2092</a>
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="lp-footer">
      <div className="lp-footer__grid">
        <div className="lp-footer__about">
          <p className="lp-footer__lede">Discover an award-winning collection of lodges and expeditions in iconic destinations.</p>
          <div className="lp-footer__follow-label">FOLLOW OUR JOURNEY</div>
          <p className="lp-footer__tagline"><em>Wonder, wherever we are.</em></p>
          <div className="lp-footer__social">
            <a href="https://instagram.com/exploratravel" target="_blank" rel="noopener" aria-label="Instagram">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" /></svg>
              <span>INSTAGRAM</span>
            </a>
            <a href="https://www.facebook.com/exploraexperiences" target="_blank" rel="noopener" aria-label="Facebook">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M13.5 21v-8h2.7l.4-3.2h-3.1V7.7c0-.9.26-1.55 1.57-1.55H16.7V3.25c-.29-.04-1.29-.13-2.46-.13-2.43 0-4.1 1.49-4.1 4.22V9.8H7.4V13h2.74v8h3.36z" /></svg>
              <span>FACEBOOK</span>
            </a>
            <a href="https://www.youtube.com/exploratravel" target="_blank" rel="noopener" aria-label="YouTube">
              <svg width="18" height="14" viewBox="0 0 24 18" fill="currentColor"><path d="M23 3.2a3 3 0 0 0-2.1-2.1C19 .6 12 .6 12 .6s-7 0-8.9.5A3 3 0 0 0 1 3.2C.5 5.1.5 9 .5 9s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 12.6V5.4L15.8 9l-6.2 3.6z" /></svg>
              <span>YOUTUBE</span>
            </a>
            <a href="https://www.linkedin.com/company/explora/" target="_blank" rel="noopener" aria-label="LinkedIn">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3V9zm6 0h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.5c0-1.3-.02-3-1.83-3-1.83 0-2.12 1.43-2.12 2.9V21h-4V9z" /></svg>
              <span>LINKEDIN</span>
            </a>
          </div>
        </div>
        <div className="lp-footer__col">
          <h5>DESTINATIONS</h5>
          <a href="https://www.explora.com/patagonia-travel-argentina-chile/" target="_blank" rel="noopener">Patagonia</a>
          <a href="https://www.explora.com/atacama-desert/" target="_blank" rel="noopener">Atacama Desert</a>
          <a href="https://www.explora.com/easter-island-travel/" target="_blank" rel="noopener">Easter Island</a>
          <a href="https://www.explora.com/sacred-valley-peru/" target="_blank" rel="noopener">Sacred Valley</a>
          <a href="https://www.explora.com/lodge/atacama-uyuni-crossing/" target="_blank" rel="noopener">Bolivia</a>
        </div>
        <div className="lp-footer__col">
          <h5>EXPEDITIONS</h5>
          <a href="https://www.explora.com/iceland-expedition-overview/" target="_blank" rel="noopener">Iceland</a>
          <a href="https://www.explora.com/travel-tierra-del-fuego/" target="_blank" rel="noopener">Tierra del Fuego</a>
          <a href="https://www.explora.com/sacred-mountain-expedition-overview/" target="_blank" rel="noopener">Sacred Mountains</a>
        </div>
        <div className="lp-footer__col">
          <h5>ABOUT</h5>
          <a href="https://www.explora.com/explora-travels/" target="_blank" rel="noopener">Our Philosophy</a>
          <a href="https://www.explora.com/explora-south-america/" target="_blank" rel="noopener">Sustainability</a>
          <a href="https://www.explora.com/work-with-us/" target="_blank" rel="noopener">Work with Us</a>
          <a href="https://www.explora.com/blog/" target="_blank" rel="noopener">Press / Newsroom</a>
          <a href="https://www.explora.com/explora-contact/" target="_blank" rel="noopener">Contact</a>
        </div>
        <div className="lp-footer__col">
          <h5>RESERVATIONS</h5>
          <a href="tel:+18665662092">USA +1 (866) 566 2092</a>
          <a href="tel:+56223952800">Chile +56 2 2395 2800</a>
          <a href="mailto:reserve@explora.com">reserve@explora.com</a>
        </div>
      </div>
      <div className="lp-footer__rule"></div>
      <div className="lp-footer__bot">
        <div className="lp-footer__meta">© 2026 Explora.</div>
        <div className="lp-footer__legal">
          <a href="https://www.explora.com/terms-and-conditions/" target="_blank" rel="noopener">Terms</a>
          <a href="https://www.explora.com/privacy-policy/" target="_blank" rel="noopener">Privacy</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, Pillars, Expeditions, Itinerary, Experts, Awards, FAQ, FinalCTA, Footer });