// University of Science & Strategic Research — landing page app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink-cream"
} /*EDITMODE-END*/;

const PALETTES = {
  "ink-cream": { name: "Ink + Cream", ink: "#0E1B2C", ink2: "#1B2A40", paper: "#F4EFE6", paper2: "#ECE5D6", copper: "oklch(0.66 0.12 55)", copperInk: "oklch(0.42 0.10 55)" },
  "forest-bone": { name: "Forest + Bone", ink: "#152821", ink2: "#1F3A30", paper: "#F1ECE0", paper2: "#E5DECC", copper: "oklch(0.66 0.12 75)", copperInk: "oklch(0.42 0.10 75)" },
  "oxblood": { name: "Oxblood + Stone", ink: "#2A1216", ink2: "#3A1A20", paper: "#EFEAE2", paper2: "#E2DBCB", copper: "oklch(0.66 0.10 30)", copperInk: "oklch(0.42 0.08 30)" },
  "slate": { name: "Slate + Paper", ink: "#1A1F2A", ink2: "#262D3B", paper: "#EFEDE8", paper2: "#E1DED5", copper: "oklch(0.62 0.10 240)", copperInk: "oklch(0.42 0.10 240)" }
};

// ─── Logo glyph component (single mark: crest) ───────────────────────────────
function Logo({ size = 48, color }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ color: color || "currentColor" }}>
      <use href="#logo-crest" />
    </svg>);

}

// ─── Apply palette tokens to :root ───────────────────────────────────────────
function usePaletteEffect(paletteKey) {
  React.useEffect(() => {
    const p = PALETTES[paletteKey] || PALETTES["ink-cream"];
    const r = document.documentElement.style;
    r.setProperty('--ink', p.ink);
    r.setProperty('--ink-2', p.ink2);
    r.setProperty('--paper', p.paper);
    r.setProperty('--paper-2', p.paper2);
    r.setProperty('--copper', p.copper);
    r.setProperty('--copper-ink', p.copperInk);
  }, [paletteKey]);
}

// ─── Main app ────────────────────────────────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  usePaletteEffect(t.palette);

  return (
    <LangProvider>
      <Header />
      <Hero />
      <ResearchSection />
      <AboutSection />
      <JoinUsSection />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Palette" />
        <TweakSelect
          label="Color system"
          value={t.palette}
          options={Object.entries(PALETTES).map(([k, v]) => ({ value: k, label: v.name }))}
          onChange={(v) => setTweak('palette', v)} />
        
      </TweaksPanel>
    </LangProvider>);

}

// ─── Language toggle ────────────────────────────────────────────────────────
function LangToggle() {
  const { lang, setLang } = useLang();
  return (
    <div className="lang-toggle" role="group" aria-label={tt("lang_label", lang)}>
      <button
        type="button"
        className={`lang-opt ${lang === "en" ? "is-active" : ""}`}
        onClick={() => setLang("en")}
        aria-pressed={lang === "en"}>
        EN</button>
      <span className="lang-sep" aria-hidden="true">/</span>
      <button
        type="button"
        className={`lang-opt ${lang === "ru" ? "is-active" : ""}`}
        onClick={() => setLang("ru")}
        aria-pressed={lang === "ru"}>
        RU</button>
    </div>);

}

// Render multi-line "Brand\nName" strings as <br/> separated lines.
function MultilineText({ text }) {
  const parts = String(text).split("\n");
  return parts.map((p, i) =>
  <React.Fragment key={i}>
      {i > 0 && <br />}
      {p}
    </React.Fragment>
  );
}

// ─── Sections ────────────────────────────────────────────────────────────────

function Header() {
  const { lang } = useLang();
  return (
    <header className="site" data-screen-label="Landing">
      <div className="wrap">
        <a className="brand" href="#">
          <span className="logo"><Logo size={46} /></span>
          <span className="wm">
            <span className="name"><MultilineText text={tt("brand_name", lang)} /></span>
            <span className="tag">{tt("brand_tag", lang)}</span>
          </span>
        </a>
        <nav className="primary">
          <a href="#research">{tt("nav_research", lang)}</a>
          <a href="#about-img">{tt("nav_about", lang)}</a>
          <a href="#join">{tt("nav_join", lang)}</a>
          <a href="contact.html">{tt("nav_contact", lang)}</a>
          <LangToggle />
        </nav>
      </div>
    </header>);

}

function Hero() {
  const { lang } = useLang();
  return (
    <section className="hero">
      <div className="wrap">
        <div>
          <div className="eyebrow young-flag">
            <span className="dot" /> {tt("hero_flag", lang)}
          </div>
          <h1 style={{ fontSize: "60px" }}>
            {tt("hero_h1_a", lang)}<br />
            <em>{tt("hero_h1_b", lang)}</em>
            <span aria-hidden="true" style={{ display: "block", height: "0.35em" }} />
            {tt("hero_h1_c", lang)}<br />
            <em>{tt("hero_h1_d", lang)}</em>
          </h1>
          <p className="lede" style={{ borderStyle: "solid", borderWidth: "0px", margin: "28px 0px 0px", width: "640px", maxWidth: "640px" }}>{tt("hero_lede", lang)}</p>
        </div>
        <div>
          <div className="hero-img hero-photo">
            <img src="images/hero-students.png" alt="" />
          </div>
        </div>
      </div>
    </section>);

}

function ResearchSection() {
  const { lang } = useLang();
  const directions = DIRECTIONS_I18N[lang] || DIRECTIONS_I18N.en;
  return (
    <section className="block" id="research">
      <div className="wrap">
        <div className="section-head">
          <div>
            <h2>{tt("research_h2_a", lang)} <em style={{ fontStyle: "italic", color: "var(--copper-ink)" }}>{tt("research_h2_b", lang)}</em></h2>
          </div>
          <p className="desc wide">{tt("research_desc", lang)}</p>
        </div>

        <div className="research">
          {directions.map((d, i) => {
            const meta = DIRECTION_META[i];
            return (
              <article key={meta.num} className={`r-card ${meta.span}`}>
                <div className="r-num">{meta.num} · {d.tag}</div>
                <h3>{d.title}</h3>
                <p className="r-sub">{d.sub}</p>
              </article>);

          })}
        </div>
      </div>
    </section>);

}

function AboutSection() {
  const { lang } = useLang();
  return (
    <section className="block" id="about">
      <div className="wrap">
        <div className="about-grid">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div>
              <h2>{tt("about_h2_a", lang)}<br /><em style={{ fontStyle: "italic", color: "var(--copper-ink)" }}>{tt("about_h2_b", lang)}</em></h2>
            </div>
            <p className="desc">{tt("about_desc", lang)}</p>
          </div>
          <div className="about-img hero-img hero-photo" id="about-img">
            <img src="assets/about-researchers.png" alt="" />
          </div>
        </div>
      </div>
    </section>);

}

function JoinUsSection() {
  const { lang } = useLang();
  const roles = ROLES_I18N[lang] || ROLES_I18N.en;
  const applyAria = STRINGS[lang]?.join_apply_aria || STRINGS.en.join_apply_aria;
  return (
    <section className="join" id="join">
      <div className="wrap">
        <div className="join-head">
          <h2>
            {tt("join_h2_a", lang)}<br />{" "}<em style={{ fontStyle: "italic", color: "var(--copper)" }}>{tt("join_h2_b", lang)}</em>
          </h2>
          <p className="join-desc">{tt("join_desc", lang)}</p>
        </div>

        <ul className="roles">
          {roles.map((r, i) =>
          <li className="role" key={i}>
              <a className="role-link" href="contact.html" aria-label={applyAria(r.title)} />
              <div className="role-kind">{String(i + 1).padStart(2, '0')} / {r.kind}</div>
              <div className="role-title">{r.title}</div>
              <div className="role-meta">
                <span>{r.dir}</span>
                <span className="sep">·</span>
                <span>{r.type}</span>
              </div>
              <span className="role-arrow" aria-hidden="true">
                <svg width="14" height="14" viewBox="0 0 10 10"><path d="M2 8 L8 2 M8 2 H4 M8 2 V6" stroke="currentColor" fill="none" strokeWidth="1.2" strokeLinecap="round" /></svg>
              </span>
            </li>
          )}
        </ul>

        <div className="join-cta">
          <div>
            <div className="join-cta-eyebrow">{tt("cta_eyebrow", lang)}</div>
            <div className="join-cta-headline">{tt("cta_headline", lang)}</div>
            <div className="join-cta-sub">{tt("cta_sub", lang)}</div>
          </div>
          <a className="join-cta-btn" href="contact.html">
            {tt("cta_btn", lang)}
            <svg width="14" height="14" viewBox="0 0 10 10"><path d="M2 8 L8 2 M8 2 H4 M8 2 V6" stroke="currentColor" fill="none" strokeWidth="1.4" strokeLinecap="round" /></svg>
          </a>
        </div>
      </div>
    </section>);

}

function Footer() {
  const { lang } = useLang();
  return (
    <footer className="site">
      <div className="wrap">
        <div className="top" style={{ gridTemplateColumns: "1fr" }}>
          <div>
            <div className="mast">
              <Logo size={48} />
              <div>
                <div className="nm"><MultilineText text={tt("brand_name", lang)} /></div>
                <div className="tag">{tt("brand_tag", lang)}</div>
              </div>
            </div>
            <address>
              {tt("footer_addr_l1", lang)}<br />
              {tt("footer_addr_l2", lang)}
            </address>
          </div>
        </div>
        <div className="bottom">
          <div>{tt("footer_copy", lang)}</div>
        </div>
      </div>
    </footer>);

}

// ─── Boot ────────────────────────────────────────────────────────────────────
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);