// Ranger — landing components (nature × liquid glass)
const { useEffect, useRef, useState, useCallback, useMemo } = React;
const RangerGlobe = window.RangerGlobe;

// ---------- Reveal hook ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal, .reveal-word');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          const delay = e.target.dataset.delay || '0s';
          e.target.style.animationDelay = delay;
          e.target.classList.add('reveal-arm');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Nav ----------
const LANGS = [
  { code: 'en', flag: '🇬🇧', label: 'EN' },
  { code: 'fr', flag: '🇫🇷', label: 'FR' },
  { code: 'es', flag: '🇪🇸', label: 'ES' }
];

function Nav({ lang, setLang }) {
  const n = window.COPY.nav;
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="wordmark" aria-label="Ranger home">
          <span className="wordmark-main">Ranger</span>
          <span className="wordmark-sub">by Austral · 2026</span>
        </a>
        <div className="nav-links">
          <a href="#how">{n.how}</a>
          <a href="#wildlands">{n.wildlands}</a>
          <a href="#engagement">{n.engagement}</a>
          <a href="#austral">{n.austral}</a>
          <a href="#faq">{n.faq}</a>
        </div>
        <div className="lang-switch" role="group" aria-label="Language">
          {LANGS.map(l => (
            <button
              key={l.code}
              className={'lang-chip ' + (lang === l.code ? 'active' : '')}
              onClick={() => setLang(l.code)}
              aria-pressed={lang === l.code}>
              <span className="lang-flag" aria-hidden="true">{l.flag}</span>
              <span className="lang-label">{l.label}</span>
            </button>
          ))}
        </div>
        <a className="btn btn-primary" href={window.COPY.cta.url} target="_blank" rel="noopener">
          {n.join} <span className="arrow">→</span>
        </a>
      </div>
    </nav>);
}

// ---------- Hero ----------
function Hero() {
  const c = window.COPY.hero;
  return (
    <section className="hero" id="top" data-screen-label="00 Hero" style={{ padding: "clamp(120px, 18vh, 220px) 24px 0px" }}>
      <div className="hero-earth-bg" aria-hidden="true" />
      <div className="hero-sky-accents">
        <div className="blob b1" />
        <div className="blob b2" />
      </div>

      <div className="hero-inner">
        <h1 className="display hero-title">
          <span className="hero-line">{c.titleStart}<span className="accent italic">{c.titleAccent}</span></span>
          <span className="hero-line" style={{ fontSize: '0.85em' }}>{c.titleSecond}</span>
        </h1>
        <p className="hero-lede reveal" data-delay="0.5s">{c.lede}</p>
        <div className="hero-ctas reveal" data-delay="0.6s">
          <a className="btn btn-primary" href={window.COPY.cta.url} target="_blank" rel="noopener">
            {c.cta} <span className="arrow">→</span>
          </a>
          <a className="btn btn-ghost" href="#how">{c.howItWorks}</a>
        </div>
      </div>

      <div className="hero-stores reveal" data-delay="0.7s">
        <a href={window.COPY.cta.url} target="_blank" rel="noopener" aria-label="Download on the App Store">
          <img src="assets/download-on-the-app-store-apple-logo.svg" alt="Download on the App Store" className="hero-store-badge" />
        </a>
        <a href={window.COPY.cta.url} target="_blank" rel="noopener" aria-label="Get it on Google Play">
          <img src="assets/google-play-badge-logo.svg" alt="Get it on Google Play" className="hero-store-badge" />
        </a>
      </div>
    </section>);
}

// ---------- 01 — The state of the world ----------
function Problem() {
  const c = window.COPY.problem;
  return (
    <section className="section-pad section-problem" id="problem" data-screen-label="01 The state of the world">
      <div className="tache tache-blue" style={{ width: 900, height: 900, top: -300, right: -250, opacity: 0.95, filter: 'blur(10px)' }} aria-hidden="true" />
      <div className="tache tache-blue" style={{ width: 700, height: 700, top: "36%", left: "-12%" }} aria-hidden="true" />
      <div className="tache tache-mineral" style={{ width: 1200, height: 1200, bottom: -480, left: -300 }} aria-hidden="true" />
      <div className="container">
        <div className="problem-narrative">
          <div className="eyebrow reveal" style={{ justifyContent: 'center', display: 'inline-flex' }}>{c.eyebrow}</div>
          <h2 className="display display-l reveal">{c.title}</h2>
          <p className="lede reveal" data-delay="0.1s" style={{ margin: '0 auto', maxWidth: '52ch' }}>{c.body}</p>
          <span className="problem-bridge reveal" data-delay="0.2s">{c.bridge}</span>
        </div>

        <div className="pain-grid">
          {c.pains.map((p, i) => {
            const tones = ['tone-blue', 'tone-mineral', 'tone-sun'];
            return (
            <div className={`pain-card ${tones[i % 3]} reveal`} data-delay={(0.1 * i + 0.2).toFixed(2) + 's'} key={p.k}>
              <span className="pain-arrow">→</span>
              <h3 className="pain-word">{p.k}</h3>
              <p className="pain-desc">{p.d}</p>
            </div>
          );})}
        </div>

        <p className="problem-closing reveal" data-delay="0.6s">{c.closing}</p>
      </div>
    </section>);
}

// ---------- 02 — How Ranger works ----------
function HowItWorks() {
  const c = window.COPY.how;
  return (
    <section className="section-pad section-how" id="how" data-screen-label="02 How Ranger works">
      <div className="tache tache-mineral" style={{ width: 1200, height: 1200, top: -480, left: -300 }} aria-hidden="true" />
      <div className="tache tache-sun" style={{ width: 800, height: 800, top: "30%", right: "-14%" }} aria-hidden="true" />
      <div className="tache tache-sun-pale" style={{ width: 600, height: 600, top: "55%", left: "35%" }} aria-hidden="true" />
      <div className="tache tache-blue" style={{ width: 1100, height: 1100, bottom: -380, right: -240 }} aria-hidden="true" />
      <div className="container">
        <div className="how-header">
          <div className="eyebrow reveal" style={{ justifyContent: 'center', display: 'inline-flex' }}>{c.eyebrow}</div>
          <h2 className="display display-l reveal" style={{ margin: '18px auto 0', maxWidth: '32ch', whiteSpace: 'pre-line' }}>{c.title}</h2>
          <p className="lede reveal" data-delay="0.1s">{c.intro}</p>
        </div>

        <div className="how-stage">
          <div className="how-pillars">
            {c.pillars.map((p, i) => (
              <div className="how-pillar reveal" data-delay={(0.05 * i).toFixed(2) + 's'} key={p.n}>
                <div className="how-pillar-num">{p.n}</div>
                <div>
                  <h3 className="how-pillar-title">{p.t}</h3>
                  <span className="how-pillar-tag">{p.tag}</span>
                  <p className="how-pillar-desc">{p.d}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="how-phone-col reveal" data-delay="0.15s">
            <div className="phone" aria-hidden="true">
              <div className="phone-screen">
                <div className="phone-status">
                  <span>9:41</span>
                  <span>· · ·</span>
                </div>
                <div className="phone-launch">
                  <div className="phone-launch-mark" />
                  <div className="phone-launch-name">Ranger</div>
                  <div className="phone-launch-sub">by Austral</div>
                </div>
                <div className="phone-foot">— launching soon —</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ---------- 03 — Wildlands ----------
function Wildlands() {
  const [active, setActive] = useState(0);
  const wildlands = window.WILDLANDS;
  const current = wildlands[active];
  const c = window.COPY.wildlands;

  const cameraTarget = useMemo(() => ({
    lat: current.coords.lat,
    lng: current.coords.lng,
    zoom: 0.82
  }), [active]);

  return (
    <section className="wildlands-section section-wildlands" id="wildlands" data-screen-label="03 Wildlands">
      <div className="tache tache-blue" style={{ width: 1100, height: 1100, top: -380, right: -240 }} aria-hidden="true" />
      <div className="tache tache-blue-deep" style={{ width: 900, height: 900, top: "30%", left: "5%" }} aria-hidden="true" />
      <div className="tache tache-mineral" style={{ width: 700, height: 700, top: "50%", right: "-8%" }} aria-hidden="true" />
      <div className="tache tache-mineral" style={{ width: 1200, height: 1200, bottom: -480, left: -300 }} aria-hidden="true" />
      <div className="container">
        <div className="wildlands-header reveal">
          <div className="eyebrow" style={{ marginBottom: 18, justifyContent: 'center', display: 'inline-flex' }}>{c.eyebrow}</div>
          <h2 className="display display-l" style={{ margin: '0 auto', maxWidth: '20ch' }}>
            {c.titleStart}<span className="accent italic">{c.titleAccent}</span>{c.titleEnd}
          </h2>
          <p className="lede" style={{ margin: '22px auto 0', maxWidth: '60ch' }}>{c.intro}</p>
        </div>

        <div className="wild-stage">
          <div className="wild-globe-col reveal">
            <div className="wild-globe-wrap">
              <div className="wild-globe-glow" />
              <RangerGlobe
                size={560}
                autoRotate={false}
                cameraTarget={cameraTarget}
                onPinClick={(id) => {
                  const i = wildlands.findIndex((w) => w.id === id);
                  if (i >= 0) setActive(i);
                }} />
            </div>
          </div>

          <div className="wild-card-col">
            <div className="wild-pill-row" role="tablist" aria-label="Wildlands">
              {wildlands.map((w, i) => (
                <button
                  key={w.id}
                  className={"wild-pill " + (i === active ? 'active' : '')}
                  onClick={() => setActive(i)}
                  role="tab"
                  aria-selected={i === active}>
                  {w.name}
                </button>
              ))}
            </div>

            <div className="wild-card reveal" key={current.id} style={{ '--wild-tone': current.tone }}>
              <div className="wild-card-ph" style={current.image ? { backgroundImage: `url(${current.image})` } : null}>
                <span className="wild-card-label">{current.label}</span>
              </div>
              <div className="wild-card-body">
                <div className="type">
                  <span>{current.type}</span>
                  <span>·</span>
                  <span>{current.region}</span>
                  <span>·</span>
                  <span className="coord">{current.hex}</span>
                </div>
                <h3>{current.name}</h3>
                <p style={{ margin: '10px 0 0', lineHeight: 1.55 }}>{current.desc}</p>
                <div style={{ marginTop: 26, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  {wildlands.map((w, i) => (
                    <button
                      key={w.id}
                      onClick={() => setActive(i)}
                      aria-label={`Show ${w.name}`}
                      style={{
                        width: 36, height: 4,
                        background: i === active ? 'var(--accent)' : 'rgba(255,255,255,0.18)',
                        border: 0, borderRadius: 2, cursor: 'pointer',
                        transition: 'background .3s'
                      }} />
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// ---------- 04 — A new kind of engagement ----------
function Engagement() {
  const c = window.COPY.engagement;
  return (
    <section className="section-pad section-engagement" id="engagement" data-screen-label="04 A new kind of engagement">
      <div className="tache tache-mineral" style={{ width: 1200, height: 1200, top: -480, left: -300 }} aria-hidden="true" />
      <div className="tache tache-mineral-deep" style={{ width: 800, height: 800, top: "35%", right: "-10%" }} aria-hidden="true" />
      <div className="tache tache-sun" style={{ width: 1300, height: 1300, bottom: -520, left: "50%", transform: "translateX(-50%)" }} aria-hidden="true" />
      <div className="container">
        <div className="engagement-header">
          <div className="eyebrow reveal" style={{ justifyContent: 'center', display: 'inline-flex' }}>{c.eyebrow}</div>
          <h2 className="display display-l reveal" style={{ margin: '18px auto 0', maxWidth: '22ch' }}>{c.title}</h2>
          <p className="lede reveal" data-delay="0.1s">{c.intro}</p>
        </div>

        <div className="contrast-list">
          {c.contrasts.map((co, i) => {
            const tones = ['tone-blue', 'tone-mineral', 'tone-sun'];
            return (
            <div className={`contrast-row ${tones[i % 3]} reveal`} data-delay={(0.05 * i).toFixed(2) + 's'} key={co.n}>
              <div className="contrast-num">{co.n}</div>
              <div className="contrast-side faded">
                <h4 className="contrast-word">{c.mostPlatforms}</h4>
                <div className="contrast-vs">{co.echo} · {c.statusQuo}</div>
                <p className="contrast-desc">{co.echoDesc}</p>
              </div>
              <div className="contrast-side live">
                <h4 className="contrast-word">{co.word}</h4>
                <div className="contrast-vs">{co.vs}</div>
                <p className="contrast-desc">{co.d}</p>
              </div>
            </div>
          );})}
        </div>
      </div>
    </section>);
}

// ---------- 05 — Built by Austral ----------
function Austral() {
  const c = window.COPY.austral;
  return (
    <section className="section-pad section-austral austral-split" id="austral" data-screen-label="05 Austral">
      <div className="tache tache-sun" style={{ width: 1300, height: 1300, top: -520, left: "50%", transform: "translateX(-50%)" }} aria-hidden="true" />
      <div className="tache tache-mineral-deep" style={{ width: 1200, height: 1200, bottom: -480, left: -300 }} aria-hidden="true" />

      {/* Right-zone image — clipped along the diagonal (above the line) */}
      <div className="austral-image" aria-hidden="true">
        <img src="ranger/austral-savanna.jpg" alt="" />
        <div className="austral-image-tint"></div>
      </div>

      {/* Quote overlaid on the image (upper-right zone) */}
      <div className="austral-quote reveal" data-delay="0.15s">
        <p className="austral-quote-text">{c.quote}</p>
        <span className="austral-quote-attr">{c.quoteAttr}</span>
      </div>

      <div className="container austral-container">
        <div className="austral-content">
          <div className="eyebrow reveal" style={{ marginBottom: 28 }}>{c.eyebrow}</div>

          <div className="austral-logo-row reveal">
            <div className="austral-mark" aria-hidden="true" />
            <div className="austral-wordmark">
              <span className="name">Austral</span>
              <span className="sub">{c.sub}</span>
            </div>
          </div>

          <h2 className="display display-l reveal" style={{ margin: '0 0 28px', maxWidth: '22ch' }}>{c.title}</h2>

          <div className="austral-body reveal">
            <p>{c.body1}</p>
            <p>{c.body2}</p>
            <p>{c.body3}</p>
          </div>
        </div>

        <div className="austral-trust reveal" data-delay="0.2s">
          {c.trust.map((t) => (
            <span className="austral-trust-item" key={t}>{t}</span>
          ))}
        </div>
      </div>
    </section>);
}

// ---------- 06 — FAQ (kept structure, content updated via data) ----------
function Faq() {
  const c = window.COPY.faq;
  const [open, setOpen] = useState(0);
  return (
    <section className="section-pad section-faq" id="faq" data-screen-label="06 FAQ">
      <div className="tache tache-mineral-deep" style={{ width: 1200, height: 1200, top: -480, left: -300 }} aria-hidden="true" />
      <div className="tache tache-blue" style={{ width: 700, height: 700, bottom: "-10%", right: "-10%" }} aria-hidden="true" />
      <div className="container">
        <div className="problem-grid" style={{ marginBottom: 48 }}>
          <div className="eyebrow reveal">{c.eyebrow}</div>
          <h2 className="display display-l reveal" style={{ margin: 0 }}>{c.title}</h2>
        </div>
        <div>
          {c.items.map((it, i) => (
            <div className="faq-item reveal" key={i} data-open={open === i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="faq-plus" aria-hidden />
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 800 : 0 }}>
                <div className="faq-a-inner" style={{ whiteSpace: 'pre-line' }}>{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>);
}

// ---------- 07 — Final CTA (kept) ----------
function FinalCta() {
  const c = window.COPY.cta;
  return (
    <section className="section-pad-s" data-screen-label="07 Be first">
      <div className="container">
        <div className="final-cta reveal">
          <h2 className="display display-xl" style={{ margin: '0 auto 24px', maxWidth: '14ch' }}>{c.title}</h2>
          <p className="lede">{c.lede}</p>
          <a className="btn btn-primary" href={c.url} target="_blank" rel="noopener">{c.button}</a>
          <div className="meta">{c.meta}</div>
        </div>
      </div>
    </section>);
}

// ---------- Footer ----------
function Footer() {
  const c = window.COPY.footer;
  return (
    <footer className="footer">
      <div className="container footer-row">
        <div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 18, color: 'var(--ink)', fontStyle: 'italic', marginBottom: 6 }}>Ranger</div>
          <div>{c.line}</div>
          <div style={{ marginTop: 6, opacity: 0.6, fontSize: 12 }}>{c.copy}</div>
        </div>
        <div className="footer-links">
          {c.legal.map((l, i) => <a key={i} href="#">{l}</a>)}
        </div>
      </div>
    </footer>);
}

// ---------- App ----------
function App() {
  useReveal();
  const [lang, setLang] = useState('en');

  // Switch global COPY/WILDLANDS refs based on language. Keyed wrapper below
  // forces the section components to remount and pick up the new globals.
  window.COPY = window.COPY_BY_LANG[lang];
  window.WILDLANDS = window.WILDLANDS_BY_LANG[lang];

  useEffect(() => {
    document.body.dataset.bg = 'ivory';
    document.body.dataset.accent = 'sun';
    document.body.dataset.motion = 'on';
  }, []);

  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} />
      <div key={lang}>
        <Hero />
        <Problem />
        <HowItWorks />
        <Wildlands />
        <Engagement />
        <Austral />
        <Faq />
        <FinalCta />
        <Footer />
      </div>
    </>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);