/* NOMAD COACH — app */
const { useState, useEffect, useRef } = React;

const LINKS = window.NC_LINKS;

/* ---- minimal line icons (geometric, restrained) ---- */
function Icon({ name }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "bolt") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...p}><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>
  );
  if (name === "sync") return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...p}><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>
  );
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" {...p}><circle cx="12" cy="12" r="9.2"/><path d="M3 12h18"/><path d="M12 3c2.6 2.4 4 5.6 4 9s-1.4 6.6-4 9c-2.6-2.4-4-5.6-4-9s1.4-6.6 4-9Z"/></svg>
  );
}

function Arrow() {
  return <svg className="arr" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg>;
}

function remain(deadline) {
  const ms = Math.max(0, new Date(deadline).getTime() - Date.now());
  const s = Math.floor(ms / 1000);
  return { done: ms <= 0, d: Math.floor(s / 86400), h: Math.floor((s % 86400) / 3600), m: Math.floor((s % 3600) / 60), s: s % 60 };
}

function Countdown({ deadline, label, units, closed }) {
  const [tk, setTk] = useState(() => remain(deadline));
  useEffect(() => {
    setTk(remain(deadline));
    const id = setInterval(() => setTk(remain(deadline)), 1000);
    return () => clearInterval(id);
  }, [deadline]);
  const pad = (n) => String(n).padStart(2, "0");
  if (tk.done) return <div className="countdown"><span className="cd-closed">{closed}</span></div>;
  const cells = [[tk.d, units.d], [tk.h, units.h], [tk.m, units.m], [tk.s, units.s]];
  return (
    <div className="countdown">
      <span className="cd-label">{label}</span>
      <div className="cd-blocks">
        {cells.map(([v, u], i) => (
          <div className="cd-cell" key={i}>
            <span className="cd-num">{pad(v)}</span>
            <span className="cd-unit">{u}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.16, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---------------- Header ---------------- */
function Header({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 30);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <a className="brand" href="https://coach.nomadx.life/">
        <img src="assets/nomadx-logo.png" alt="NOMADX" />
        <span className="wordmark">NOMAD<span className="wx">X</span>COACH<small><span className="lbd">Learn by Doing</span> <span className="at">@</span> NOMADX</small></span>
      </a>
      <nav className="nav-links">
        <a href="#philosophy">{t.nav.philosophy}</a>
        <a href="#boost">{t.nav.boost}</a>
        <a href="#programs">{t.nav.programs}</a>
      </nav>
      <div className="nav-right">
        <div className="lang">
          <button className={lang === "ko" ? "active" : ""} onClick={() => setLang("ko")}>KO</button>
          <button className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
        </div>
        <a className="nav-cta" href={LINKS.waitlist} target="_blank" rel="noopener">{t.nav.cta}</a>
      </div>
    </header>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ t }) {
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const id = setTimeout(() => setShown(true), 60);
    return () => clearTimeout(id);
  }, []);
  return (
    <section className={"hero" + (shown ? " in" : "")} id="top">
      <div className="hero-glow" />
      <div className="hero-grid" />
      <div className="wrap">
        <span className="hero-tag"><span className="dot" />{t.hero.tag}</span>
        <h1>
          {t.hero.h1.map((line, i) => (
            <span className="line" key={i}>
              <span>{line.map((seg, j) => (
                <span key={j} className={seg.hl ? (seg.hl === "blue" ? "hl blue" : "hl") : ""}>{seg.t}</span>
              ))}</span>
            </span>
          ))}
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-cta-kicker">{t.hero.ctaKicker}</div>
        <div className="hero-actions">
          <a className="btn-glow" href={LINKS.waitlist} target="_blank" rel="noopener">
            {t.hero.cta} <Arrow />
          </a>
          <a className="btn-ghost" href="#programs">{t.hero.ghost}</a>
          <span className="hero-note"><span className="live" />{t.hero.note}</span>
        </div>
      </div>

      <div className="marquee">
        <div className="marquee-track">
          {[0, 1].map((dup) => (
            <React.Fragment key={dup}>
              {t.marquee.map((w, i) => (
                <span className={"marquee-item" + (i % 2 ? " dim" : "")} key={dup + "-" + i}>
                  {w}<span className="sep">✕</span>
                </span>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Philosophy ---------------- */
function Philosophy({ t }) {
  return (
    <section className="section philo" id="philosophy">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">{t.philo.eyebrow}</span>
          <h2>{t.philo.h2}</h2>
          <p>{t.philo.sub}</p>
        </div>
        <div className="philo-grid">
          {t.philo.cells.map((c, i) => (
            <div className="philo-cell reveal" data-d={i + 1} key={i}>
              <span className="philo-num">{c.num}</span>
              <span className="philo-icon"><Icon name={c.icon} /></span>
              <span className="philo-label">{c.label}</span>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Boost Camp ---------------- */
function Boost({ t }) {
  return (
    <section className="section boost" id="boost">
      <div className="boost-glow" />
      <div className="wrap">
        <div className="boost-top">
          <div className="reveal">
            <span className="eyebrow">{t.boost.eyebrow}</span>
            <h2 className="boost-title">{t.boost.title}</h2>
            <div className="boost-name">{t.boost.name}</div>
            <span className="boost-aio">(all in one)</span>
          </div>
          <div className="reveal" data-d="1">
            <p className="boost-desc">{t.boost.desc}</p>
            <div className="boost-chips">
              {t.boost.chips.map((c, i) => (
                <span className="chip" key={i}><span className="tick">✓</span>{c}</span>
              ))}
            </div>
          </div>
        </div>

        <div className="pilot reveal" data-d="1">
          <div>
            <div className="pilot-badges">
              <span className="badge green">{t.boost.pilot.badges[0]}</span>
              <span className="badge free">{t.boost.pilot.badges[1]}</span>
            </div>
            <h3><span className="pilot-kicker">{t.boost.pilot.kicker}</span>{t.boost.pilot.name}</h3>
            <p>{t.boost.pilot.body}</p>
          </div>
          <div className="pilot-cta">
            <Countdown
              deadline={window.NC_CONFIG.pilotStart}
              label={t.boost.pilot.countdownLabel}
              units={t.boost.pilot.units}
              closed={t.boost.pilot.closed}
            />
            <a className="btn-glow" href={LINKS.sprint} target="_blank" rel="noopener">
              {t.boost.pilot.cta} <Arrow />
            </a>
            <span className="pilot-deadline">{t.boost.pilot.deadline}</span>
            <span className="seats">{t.boost.pilot.seats}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Upcoming Programs ---------------- */
function Upcoming({ t }) {
  return (
    <section className="section upcoming" id="programs">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow blue">{t.upcoming.eyebrow}</span>
          <h2>{t.upcoming.h2}</h2>
          <p>{t.upcoming.sub}</p>
        </div>
        <div className="prog-grid">
          {t.upcoming.cards.map((c, i) => (
            <div className="prog-card reveal" data-d={i + 1} key={i}
                 style={{ "--accent": c.accent === "blue" ? "var(--blue)" : "var(--green)" }}>
              <div className="prog-top">
                <span className="prog-kind">{c.kind}</span>
                <span className="prog-soon">COMING SOON</span>
              </div>
              <div className="prog-index">{c.idx}</div>
              <h3>{c.title}</h3>
              <p>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Waitlist band ---------------- */
function Waitlist({ t }) {
  return (
    <section className="section waitlist" id="waitlist">
      <div className="waitlist-glow" />
      <div className="wrap">
        <span className="eyebrow reveal">{t.waitlist.tag}</span>
        <h2 className="reveal" data-d="1">{t.waitlist.h2}</h2>
        <p className="reveal" data-d="1">{t.waitlist.sub}</p>
        <div className="reveal" data-d="2">
          <a className="btn-glow" href={LINKS.waitlist} target="_blank" rel="noopener">
            {t.waitlist.cta} <Arrow />
          </a>
        </div>
        <span className="hero-note reveal" data-d="2"><span className="live" />{t.waitlist.note}</span>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer({ t }) {
  const s = LINKS.social;
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <a className="footer-logo" href={LINKS.nomadx} target="_blank" rel="noopener" aria-label="NOMADX">
              <span className="fx-nomadx">NOMAD<span className="fx-x">X</span></span>
              <span className="fx-words">
                <span className="w-work">WORK</span>
                <span className="w-play">PLAY</span>
                <span className="w-learn">LEARN</span>
                <span className="w-live">LIVE</span>
              </span>
            </a>
            <p style={{ color: "var(--ink-dim)", fontSize: "14.5px", marginTop: "22px", maxWidth: "34ch", lineHeight: 1.6 }}>{t.footer.tagline}</p>
          </div>
          <div className="footer-col">
            <h4>{t.footer.contactTitle}</h4>
            <a className="block" href={"mailto:" + LINKS.email}>{LINKS.email}</a>
            <a className="block" href={LINKS.nomadx} target="_blank" rel="noopener">{t.footer.home} ↗</a>
          </div>
          <div className="footer-col">
            <h4>{t.footer.followTitle}</h4>
            <a className="block" href={s.instagram} target="_blank" rel="noopener noreferrer">Instagram ↗</a>
            <a className="block" href={s.youtube} target="_blank" rel="noopener noreferrer">YouTube ↗</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <span>{t.footer.built}</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------------- App ---------------- */
function App() {
  const [lang, setLang] = useState(() => localStorage.getItem("nc_lang") || "ko");
  const t = window.NC_CONTENT[lang];
  useEffect(() => {
    localStorage.setItem("nc_lang", lang);
    document.body.setAttribute("data-lang", lang);
    document.documentElement.lang = lang;
  }, [lang]);
  useReveal();
  return (
    <>
      <Header lang={lang} setLang={setLang} t={t} />
      <main>
        <Hero t={t} />
        <Philosophy t={t} />
        <Boost t={t} />
        <Upcoming t={t} />
        <Waitlist t={t} />
      </main>
      <Footer t={t} />
    </>
  );
}

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