/* global React */
const { useState, useEffect, useRef } = React;

/* ============ Inline icon set ============ */
const Icon = {
  Arrow: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" style={{ width: "0px", height: "0px" }}>
      <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="square" />
    </svg>,

  ArrowDown: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 5v14M5 13l7 7 7-7" strokeLinecap="square" />
    </svg>,

  Play: ({ size = 18 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M6 4l14 8-14 8V4z" />
    </svg>,

  Plus: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M12 5v14M5 12h14" strokeLinecap="square" />
    </svg>,

  Minus: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M5 12h14" strokeLinecap="square" />
    </svg>,

  Pin: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={{ fill: "rgb(102, 102, 102)" }}>
      <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2A2.2 2.2 0 1 1 12 6.8a2.2 2.2 0 0 1 0 4.4z" style={{ fill: "rgb(102, 102, 102)" }} />
    </svg>,

  Star: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l3 7 7 .6-5.3 4.7 1.6 7.1L12 17.7 5.7 21.4l1.6-7.1L2 9.6 9 9z" />
    </svg>,

  Check: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8">
      <path d="M5 12l5 5 9-11" strokeLinecap="square" strokeLinejoin="miter" />
    </svg>,

  Globe: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="12" cy="12" r="9" />
      <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
    </svg>

};

/* ============ Top nav ============ */
function TopNav({ darkBg = true }) {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <header className="nav-explora">
      <div className="nav-explora__top">
        <div className="nav-explora__top-inner" style={{ alignItems: "center", justifyContent: "flex-end" }}>
          <div className="nav-explora__top-links nav-explora__top-links--right">
            <a href="https://www.explora.com/explora-contact/" target="_blank" rel="noopener">Contact us</a>
            <a href="https://www.explora.com/press-page/" target="_blank" rel="noopener">Press</a>
            <a href="tel:+56223952800" className="nav-explora__top-cta" style={{ borderWidth: "0px" }}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" /></svg>
              +1-833-991-9206
            </a>
          </div>
        </div>
      </div>
      <div className="nav-explora__main">
        <div className="nav-explora__main-inner" style={{ padding: "14px 32px 40px" }}>
          <button
            className="nav-explora__hamburger"
            aria-label="Open menu"
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(!menuOpen)}
            type="button">
            <span></span>
            <span></span>
            <span></span>
          </button>
          <div className="nav-explora__logo">
            <a href="https://www.explora.com/" aria-label="Explora — Home" onClick={() => {if (typeof window.gtag === "function") window.gtag("event", "cta_click", { cta_name: "logo", cta_location: "top_nav" });}}>
              <img src="images/explora-logo-trimmed.png" alt="Explora" />
            </a>
          </div>
          <nav className={"nav-explora__links " + (menuOpen ? "is-open" : "")}>
            <a href="https://www.explora.com/destinations/" target="_blank" rel="noopener">Lodges</a>
            <a href="https://www.explora.com/explora-expeditions/" target="_blank" rel="noopener">Expeditions</a>
            <a href="https://www.explora.com/explora-conservation-reserves/" target="_blank" rel="noopener" style={{ lineHeight: "1.4" }}>Conservation Reserves</a>
            <a href="https://www.explora.com/offer/" target="_blank" rel="noopener">Offers</a>
            <a href="https://www.explora.com/explora-travels/" target="_blank" rel="noopener">Philosophy</a>
          </nav>
          <a href="https://reservations.explora.com/ibe/paso1?language=EN" target="_blank" rel="noopener" className="nav-explora__reserve">
            <span className="nav-explora__reserve-text">Check availability</span> <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>
        </div>
      </div>
    </header>);

}

/* ============ Sticky inquiry bar ============ */
function StickyBar({ visible, onCta }) {
  return (
    <div className={"sticky-bar " + (visible ? "is-visible" : "")}>
      <div className="sticky-bar__inner">
        <div className="sticky-bar__msg">
          <span className="eyebrow" style={{ color: "#666666" }}>
</span>
          <span className="serif sticky-bar__title" style={{ fontFamily: "\"Objektiv MK1\"", fontSize: "15px" }}>Explore Patagonia with our network of lodges.</span>
        </div>
        <div className="sticky-bar__actions">
          <a href="#lodges" className="btn btn-outline-dark sticky-bar__btn-secondary" onClick={() => {if (typeof window.gtag === "function") window.gtag("event", "cta_click", { cta_name: "view_lodges", cta_location: "sticky_bar" });}}>View Lodges</a>
          <a href="https://reservations.explora.com/ibe/paso1?language=EN" target="_blank" rel="noopener" className="btn btn-primary" style={{ backgroundColor: "rgb(255, 255, 255)", color: "rgb(0, 0, 0)", textDecoration: "none" }} onClick={() => {if (typeof window.gtag === "function") window.gtag("event", "cta_click", { cta_name: "book_now", cta_location: "sticky_bar" });}}>BOOK NOW</a>
        </div>
      </div>
    </div>);
}

/* ============ Press / awards strip ============ */
function PressStrip() {
  const ribbon = (label1, label2) =>
  <svg viewBox="0 0 120 80" width="140" height="80" preserveAspectRatio="xMidYMid meet">
      <g fill="none" stroke="#333" strokeWidth="0.8">
        <circle cx="60" cy="36" r="22" />
        <circle cx="60" cy="36" r="17" />
        <path d="M44 50 L36 72 L48 64 L52 72 L60 56" strokeLinejoin="round" strokeLinecap="round" />
        <path d="M76 50 L84 72 L72 64 L68 72 L60 56" strokeLinejoin="round" strokeLinecap="round" />
      </g>
      <text x="60" y="34" textAnchor="middle" fontFamily="serif" fontSize="6" fill="#333" letterSpacing="1.5">{label1}</text>
      <text x="60" y="42" textAnchor="middle" fontFamily="serif" fontSize="6" fill="#333" letterSpacing="1.5">{label2}</text>
    </svg>;

  const awards = [
  {
    logo: ribbon("WORLD", "TRAVEL"),
    name: "WORLD TRAVEL AWARDS",
    title: "World's Leading Expedition Company",
    year: "7 consecutive years · 2019–2025"
  },
  {
    logo: ribbon("CONDÉ", "NAST"),
    name: "CONDÉ NAST TRAVELER",
    title: "Readers Choice Awards",
    year: "2023 · 2024 · 2025"
  },
  {
    logo: ribbon("TRAVEL", "LEISURE"),
    name: "TRAVEL + LEISURE",
    title: "World's Best Awards",
    year: "2023 · 2024 · 2025"
  }];

  return (
    <section className="press press--editorial" style={{ backgroundColor: "rgb(244, 244, 244)" }}>
      <div className="container press__inner">
        <div className="press__head" style={{ textAlign: "center", maxWidth: "720px", marginLeft: "auto", marginRight: "auto" }}>
          <div className="eyebrow" style={{ color: "rgb(102, 102, 102)", fontSize: "13px", letterSpacing: "0.32em", marginBottom: "16px" }}>Recognition</div>
          <h2 className="serif press__title" style={{ color: "rgb(26, 26, 26)" }}>Celebrated by Travelers, Year After Year.</h2>
          <p className="press__lede" style={{ fontFamily: "\"Objektiv MK1\"", fontStyle: "normal", fontSize: "17px", color: "rgb(51, 51, 51)", margin: "20px auto 0", maxWidth: "60ch" }}>
            For over three decades, Explora has been recognized by the publications and institutions that define luxury travel — a quiet record of craft, conservation, and the art of slow exploration.
          </p>
        </div>
        <div className="press__awards-grid">
          {awards.map((a, i) =>
          <div key={i} className="press__award-card">
              <div className="press__award-logo">{a.logo}</div>
              <div className="press__award-name">{a.name}</div>
              <div className="serif press__award-quote">{a.title}</div>
              <div className="press__award-year">{a.year}</div>
            </div>
          )}
        </div>
      </div>
    </section>);}

/* ============ Lodges overview ============ */
function LodgesSection() {
  const lodges = [
  {
    name: "Explora Torres del Paine",
    region: "Torres del Paine National Park",
    rooms: "50 rooms · all-inclusive",
    img: "images/lodge-tdp.jpg",
    url: "https://www.explora.com/lodge/torres-del-paine-lodge/"
  },
  {
    name: "Explora Torres del Paine Conservation Reserve",
    region: "Conservation reserve · Patagonia, Chile",
    rooms: "10 rooms · all-inclusive",
    img: "images/lodge-reserve.jpg",
    url: "https://www.explora.com/lodge/torres-del-paine-conservation-reserve/"
  },
  {
    name: "Explora Patagonia National Park",
    region: "Patagonia National Park · Aysén, Chile",
    rooms: "13 rooms · all-inclusive",
    img: "images/lodge-pnp-stone.png",
    url: "https://www.explora.com/lodge/patagonia-national-park/"
  },
  {
    name: "Explora El Chaltén",
    region: "Los Glaciares National Park",
    rooms: "20 rooms · all-inclusive",
    img: "images/lodge-chalten.jpg",
    url: "https://www.explora.com/el-chalten-lodge/"
  },
  {
    name: "Explora El Calafate",
    region: "Lake Argentino & Perito Moreno",
    rooms: "20 rooms · all-inclusive",
    img: "images/lodge-calafate.jpg",
    url: "https://www.explora.com/lodge/el-calafate/"
  }];

  return (
    <section className="lodges" id="lodges" style={{ padding: "30px 0px" }}>
      <div className="container">
        <div className="section-head">
          <div className="eyebrow" style={{ color: "#666666" }}>
</div>
          <h2 className="serif section-head__title">Discover Our Destinations.</h2>
          <p className="section-head__lede">Five remote sanctuaries on both sides of the Andes — connected by 
one philosophy of travel, and unrivaled access to the wildest corners 
of the South.
          </p>
        </div>

        <div className="lodges__grid">
          {lodges.map((l, i) => <article key={i} className="lodge-card">
              <a href={l.url} target="_blank" rel="noopener" className="lodge-card__media photo photo--img" aria-label={l.name} style={{ display: "block", textDecoration: "none" }}>
                <img src={l.img} alt={l.name} />
              </a>
              <div className="lodge-card__body">
                <h3 className="objektiv lodge-card__name">{l.name}</h3>
                <div className="lodge-card__meta">
                  <span><Icon.Pin size={12} /> {l.region}</span>
                  <span>·</span>
                  <span>{l.rooms}</span>
                </div>
                <div className="lodge-card__actions" style={{ color: "rgb(186, 163, 79)" }}>
                  <a href={l.url} target="_blank" rel="noopener" className="link-arrow" style={{ color: "rgb(0, 0, 0)" }}>Discover the destination <Icon.Arrow size={12} /></a>
                </div>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

}

/* ============ Whats included ============ */
function IncludedSection() {
  const items = [
  { title: "All-inclusive dining", desc: "All-inclusive dining inspired by the flavors and traditions of Patagonia, served in atmospheric dining rooms at the heart of the wilderness." },
  { title: "40+ explorations", desc: "Guided treks, horseback rides, navigations and ascents. Choose new routes daily. Select private experiences available upon request." },
  { title: "Expert local guides", desc: "Trained at our own School of Guides, our expert guides bring deep knowledge and passion to every exploration." },
  { title: "Transfers", desc: "Transfers included on pre-established schedules." },
  { title: "Local wines & beverages", desc: "Selected local wines, beers, soft drinks and non-alcoholic beverages included. Premium spirits and reserve wines available à la carte." }];

  return (
    <section className="included">
      <div className="container">
        <div className="section-head section-head--center">
          <div className="eyebrow" style={{ color: "rgb(153, 153, 153)", fontSize: "13px" }}>All-inclusive, end to end</div>
          <h2 className="serif section-head__title">Everything is Part of the Journey.</h2>
          <p className="section-head__lede">One transparent rate covers your stay, dining, daily explorations and guides.


          </p>
        </div>

        <div className="included__grid">
          {items.map((it, i) =>
          <div key={i} className="included__item">
              <div className="included__check"><Icon.Check size={14} /></div>
              <div>
                <div className="serif included__title">{it.title}</div>
                <div className="included__desc">{it.desc}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Icon, TopNav, StickyBar, PressStrip, LodgesSection, IncludedSection });