/* global React */
const { useState: useStateH, useEffect: useEffectH } = React;

/* ============================================================
   HERO A — Full-bleed cinematic (default Explora signature)
   ============================================================ */
function HeroA({ ctaCopy = "Reserve Your Place", ctaColor = "#D49B73" }) {
  return (
    <section className="hero hero-a">
      <div className="hero-a__media">
        <div className="photo photo--img hero-a__photo kenburns" data-tag="Torres del Paine · Cuernos at dawn">
          <img src="images/cuernos-dawn.jpg" alt="Cuernos del Paine at dawn" />
        </div>
        <div className="hero-a__overlay" />
      </div>
      <div className="hero-a__content container">
        <div className="hero-a__eyebrow">
          <span className="eyebrow">Explora · Patagonia</span>
          <span className="hero-a__rule" />
          <span className="eyebrow">2026 season</span>
        </div>
        <h1 className="serif hero-a__title">
          Patagonia,<br />
          on its own terms.
        </h1>
        <p className="hero-a__lede">
          Five lodges. The largest network of explorations in the region.
          One uncompromising way of being here.
        </p>
        <div className="hero-a__cta-row">
          <a href="#inquiry" className="btn" style={{ background: ctaColor, color: "#fff" }}>
            {ctaCopy} <Icon.Arrow size={12} />
          </a>
          <button className="hero-a__play">
            <span className="hero-a__play-icon"><Icon.Play size={14} /></span>
            <span>Watch the film · 1:42</span>
          </button>
        </div>
        <div className="hero-a__meta">
          <div className="hero-a__meta-item">
            <div className="serif hero-a__meta-num">5</div>
            <div className="eyebrow">Lodges in Patagonia</div>
          </div>
          <div className="hero-a__meta-item">
            <div className="serif hero-a__meta-num">115+</div>
            <div className="eyebrow">Guided explorations</div>
          </div>
          <div className="hero-a__meta-item">
            <div className="serif hero-a__meta-num">31 yrs</div>
            <div className="eyebrow">In the wild South</div>
          </div>
        </div>
      </div>
      <div className="hero-a__scroll">
        <span className="eyebrow">Scroll</span>
        <Icon.ArrowDown size={12} />
      </div>
    </section>);

}

/* ============================================================
   HERO B — Editorial split (image left, copy + form right)
   ============================================================ */
function HeroB({ ctaCopy = "Get the 2026 Offer", ctaColor = "#D49B73" }) {
  const [submitted, setSubmitted] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [errorMsg, setErrorMsg] = React.useState("");
  return (
    <section className="hero hero-b">
      <div className="hero-b__media">
        <div className="photo photo--img hero-b__photo">
          <img src="images/hero-tdp-feature.jpg" alt="Explora Torres del Paine" />
        </div>
      </div>
      <div className="hero-b__panel">
        <div className="hero-b__inner">
          <div className="hero-b__topbar" style={{ fontWeight: "100" }}>
            <span className="serif hero-b__logo">
</span>
            <span className="eyebrow"></span>
          </div>
          <h1 className="serif hero-b__title" style={{ textWrap: "balance" }}>Patagonia Starts Here.

          </h1>
          <p className="hero-b__lede">Explore Patagonia seamlessly across Chile and Argentina, with bespoke explorations from our lodges led by our own guides.


          </p>
          {submitted ? (
            <div className="hero-b__success">
              <div className="hero-b__success-check"><Icon.Check size={18} /></div>
              <div className="hero-b__success-body">
                <p className="hero-b__success-title">Thank you. You're on the list.</p>
                <p className="hero-b__success-text">We'll be in touch with news, journeys and seasonal offers from Patagonia. In the meantime, explore our 5 lodges below.</p>
                <a href="#lodges" className="hero-b__success-cta">View lodges <Icon.Arrow size={11} /></a>
              </div>
            </div>
          ) : (
          <form className="hero-b__form" onSubmit={async (e) => {e.preventDefault();
            const data = Object.fromEntries(new FormData(e.currentTarget).entries());
            setSubmitting(true);
            setErrorMsg("");
            try {
              const res = await fetch("https://formspree.io/f/mrejzayv", {
                method: "POST",
                headers: { "Accept": "application/json", "Content-Type": "application/json" },
                body: JSON.stringify({ ...data, _subject: "Patagonia newsletter signup — " + (data.email || "unknown"), _source: "Patagonia Landing — Hero email" })
              });
              if (!res.ok) {
                const body = await res.json().catch(() => ({}));
                throw new Error(body.error || "Submission failed (" + res.status + ")");
              }
            } catch (err) {
              console.error("Formspree submission failed:", err);
              setSubmitting(false);
              setErrorMsg("Something went wrong. Please try again.");
              return;
            }
            try {
              if (window.om && typeof window.om.trigger === "function") {
                window.om.trigger("ExploraHeroEmailSubmit", data);
              }
              document.dispatchEvent(new CustomEvent("om.Conversion", { detail: data }));
              if (window.dataLayer) window.dataLayer.push({ event: "hero_email_submit", ...data });
              if (typeof window.gtag === "function") {
                window.gtag("event", "form_submit", {
                  form_name: "newsletter_signup",
                  form_location: "hero",
                  email: data.email
                });
              }
            } catch (err) {console.warn("OM tracking failed:", err);}
            setSubmitting(false);
            setSubmitted(true);
          }}>
            <div className="hero-b__field">
              <input aria-label="Your email address" placeholder="Your email address" type="email" name="email" required disabled={submitting} />
              <button className="btn" disabled={submitting} style={{ background: "rgb(186, 163, 79)", color: "#fff", opacity: submitting ? 0.6 : 1, cursor: submitting ? "wait" : undefined }}>
                {submitting ? "Sending\u2026" : <>{ctaCopy} <Icon.Arrow size={12} /></>}
              </button>
            </div>
            <div className="hero-b__finep">
              <Icon.Check size={10} /> <span style={{ backgroundColor: "rgb(51, 51, 51)" }}>By submitting, you agree to receive communications from Explora. We will never share your details.</span>
            </div>
            {errorMsg && (
              <p role="alert" style={{ marginTop: 10, color: "#f4b8a8", fontSize: 12, fontFamily: '"Objektiv MK1", "Inter", sans-serif' }}>
                {errorMsg}
              </p>
            )}
          </form>
          )}
          <div className="hero-b__trust">
            <div className="hero-b__trust-stars" style={{ color: "#fff" }}>
              <Icon.Star size={11} /><Icon.Star size={11} /><Icon.Star size={11} /><Icon.Star size={11} /><Icon.Star size={11} />
            </div>
            <span className="hero-b__trust-text">
              <strong>4.7 / 5</strong> · 1,600+ guests · <span className="objektiv" style={{ letterSpacing: "0.04em" }}>Tripadvisor</span> · Explora Torres del Paine
            </span>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HERO C — Centered headline + offer card overlay
   ============================================================ */
function HeroC({ ctaCopy = "Claim Your Offer", ctaColor = "#D49B73" }) {
  return (
    <section className="hero hero-c">
      <div className="hero-c__media">
        <div className="photo photo--img hero-c__photo kenburns" data-tag="Torres del Paine · The towers at first light">
          <img src="images/cuernos-dawn.jpg" alt="Torres del Paine at first light" />
        </div>
        <div className="hero-c__overlay" />
      </div>
      <div className="hero-c__content container">
        <div className="hero-c__center">
          <div className="hero-c__crest">
            <svg viewBox="0 0 80 80" width="56" height="56">
              <circle cx="40" cy="40" r="36" fill="none" stroke="#fff" strokeWidth="0.6" />
              <circle cx="40" cy="40" r="30" fill="none" stroke="#fff" strokeWidth="0.4" opacity="0.6" />
              <text x="40" y="34" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontSize="8" fill="#fff" fontStyle="italic">Patagonia</text>
              <text x="40" y="46" textAnchor="middle" fontFamily="Inter, sans-serif" fontSize="4.5" letterSpacing="2" fill="#fff">EST · 1993</text>
              <line x1="22" y1="40" x2="32" y2="40" stroke="#fff" strokeWidth="0.4" />
              <line x1="48" y1="40" x2="58" y2="40" stroke="#fff" strokeWidth="0.4" />
            </svg>
          </div>
          <div className="eyebrow hero-c__eyebrow">A campaign for the 2026 season</div>
          <h1 className="serif hero-c__title">
            Patagonia is not<br /> a destination.<br /> <em>It's a return.</em>
          </h1>
          <p className="hero-c__lede">
            Join us at the world's largest network of lodges in Patagonia — built for those who measure travel
            in horizons, not in hours.
          </p>
        </div>

        <div className="hero-c__offer">
          <div className="hero-c__offer-side">
            <div className="eyebrow" style={{ color: ctaColor }}>Limited · 2026 release</div>
            <div className="serif hero-c__offer-title">Reserve before June 30</div>
          </div>
          <div className="hero-c__offer-perks">
            <div className="hero-c__perk"><Icon.Check size={12} /> Complimentary 4th night</div>
            <div className="hero-c__perk"><Icon.Check size={12} /> Private airport transfers</div>
            <div className="hero-c__perk"><Icon.Check size={12} /> Personalized proposal in 24h</div>
          </div>
          <a href="#inquiry" className="btn hero-c__offer-btn" style={{ background: ctaColor, color: "#fff" }}>
            {ctaCopy} <Icon.Arrow size={12} />
          </a>
        </div>
      </div>
    </section>);

}

Object.assign(window, { HeroA, HeroB, HeroC });