// LoreMaster landing — main app
const { useState, useEffect, useRef, useMemo } = React;

// ── Inline icons for features / footer ──────────────────────
const Icon = {
  Network: () =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="3" />
      <circle cx="5" cy="6" r="2" />
      <circle cx="19" cy="6" r="2" />
      <circle cx="5" cy="18" r="2" />
      <circle cx="19" cy="18" r="2" />
      <path d="M6.5 7.2L9.7 10.8M17.5 7.2L14.3 10.8M6.5 16.8L9.7 13.2M17.5 16.8L14.3 13.2" />
    </svg>,

  Import: () =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4" />
      <path d="M12 3v12" />
      <path d="M7 9l5-5 5 5" />
    </svg>,

  Sparkle: () =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2l1.7 6.6L20 10l-6.3 1.4L12 18l-1.7-6.6L4 10l6.3-1.4z" />
      <circle cx="20" cy="5" r="1.2" />
      <circle cx="5" cy="19" r="1" />
    </svg>,

  Chat: () =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 12c0 4.4-4 8-9 8-1.4 0-2.8-.3-4-.8L3 21l1.5-4.4C3.5 15.2 3 13.6 3 12c0-4.4 4-8 9-8s9 3.6 9 8z" />
      <circle cx="9" cy="12" r="1" fill="currentColor" />
      <circle cx="12" cy="12" r="1" fill="currentColor" />
      <circle cx="15" cy="12" r="1" fill="currentColor" />
    </svg>,

  Mail: () =>
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" style={{ opacity: 0.6 }}>
      <rect x="2.5" y="4.5" width="19" height="15" rx="3" />
      <path d="M3 7l9 7 9-7" />
    </svg>,

  Arrow: () =>
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14" />
      <path d="M13 5l7 7-7 7" />
    </svg>,

  Check: () =>
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12.5l5 5 9-11" />
    </svg>

};

const FEATURE_ICONS = [Icon.Network, Icon.Import, Icon.Sparkle, Icon.Chat];

// ── Hook: scroll parallax ─────────────────────────────────
function useScroll() {
  const [y, setY] = useState(0);
  useEffect(() => {
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setY(window.scrollY);
        raf = null;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return y;
}

// ── NAV ───────────────────────────────────────────────────
function Nav({ lang, setLang, copy }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#top">
          <span className="nav-logo-mark">
            <svg width="26" height="26" viewBox="0 0 150 150" fill="none">
              {/* App-Icon from Figma /components/AppIcon — exact paths with proper transforms & gradients */}
              <defs>
                <linearGradient id="bowGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#808080" />
                  <stop offset="100%" stopColor="#BDBDBD" />
                </linearGradient>
                <linearGradient id="featherGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#E9E9E9" />
                  <stop offset="100%" stopColor="#A9A9A9" />
                </linearGradient>
              </defs>
              <g transform="translate(13, 3.664)">
                {/* Bow (Vector-2.svg) — darker gradient, behind */}
                <g transform="matrix(0.994,-0.108,0.108,0.994,-4.155,47.266)">
                  <path d="M 70.328 8.626 L 64.146 14.804 C 56.902 10.685 48.824 8.25 40.752 8.25 C 20.736 8.25 8.242 22.393 8.242 41.301 C 8.242 63.154 24.436 88.253 57.397 94.005 C 59.992 94.509 61.302 96.117 61.302 98.209 C 61.302 100.757 59.229 102.474 56.145 102.042 C 27.679 98.963 0 73.608 0 41.532 C 0 17.998 16.049 0 41.238 0 C 51.201 0 61.366 3.147 70.328 8.626 Z M 99.38 56.208 C 99.38 73.31 87.604 85.008 70.663 85.008 C 59.574 85.008 47.566 79.982 38.533 71.748 L 47.404 67.956 C 54.195 73.658 62.569 77.292 70.399 77.292 C 81.858 77.292 91.306 69.146 91.306 56.152 C 91.306 47.986 88.395 39.849 83.516 32.686 L 89.621 26.591 C 95.689 35.18 99.38 45.349 99.38 56.208 Z" fill="url(#bowGrad)" fillRule="nonzero" />
                </g>
                {/* Feathered arrow (Vector.svg) — lighter gradient, on top */}
                <g transform="matrix(0.994,-0.108,0.108,0.994,44.427,8.590)">
                  <path d="M 0.258 79.746 C 12.189 59.67 20.971 50.105 39.972 35.286 C 42.12 33.598 39.305 30.641 37.16 32.293 C 29.64 38.153 29.728 36.034 23.177 42.842 C 23.718 26.643 26.557 21.505 45.386 11.548 C 46.39 10.818 47.993 11.162 48.589 12.2 L 52.766 18.561 L 58.696 6.352 C 58.94 5.808 59.371 5.419 59.951 5.206 C 70.577 1.433 78.931 0.07 79.277 0.03 C 80.74 -0.21 82.138 1.019 81.83 2.361 C 82.3 4.173 74.093 53.831 30.56 51.748 C 29.249 51.685 27.907 51.575 26.531 51.416 C 17.983 60.721 10.43 70.895 4.067 81.642 C 3.507 82.587 2.226 82.926 1.19 82.463 C 1.167 82.453 1.145 82.443 1.123 82.432 C 0.085 81.919 -0.305 80.714 0.258 79.746 Z" fill="url(#featherGrad)" fillRule="nonzero" />
                </g>
              </g>
            </svg>
          </span>
          <span>LoreMaster</span>
        </a>
        <nav className="nav-links">
          <a href="#features">{copy.nav.features}</a>
          <a href="#showcase">{copy.nav.showcase}</a>
          <a href="#faq">{copy.nav.faq}</a>
        </nav>
        <div className="nav-spacer"></div>
        <div className="lang-select">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <circle cx="12" cy="12" r="9" />
            <path d="M3 12h18" />
            <path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
          </svg>
          <select value={lang} onChange={(e) => setLang(e.target.value)}>
            <option value="en">EN</option>
            <option value="ru">RU</option>
          </select>
        </div>
        <a href="#waitlist" className="btn btn-primary nav-cta">{copy.nav.cta}</a>
      </div>
    </header>);

}

// ── HERO ──────────────────────────────────────────────────
function Hero({ lang, copy, scrollY, parallaxK }) {
  const p = parallaxK;
  const castleY = Math.min(scrollY * 0.4 * p, 400);
  const orbY1 = scrollY * 0.2 * p;
  const orbY2 = scrollY * 0.35 * p;
  const copyY = scrollY * -0.05 * p;
  const stageOffset = scrollY * 0.07 * p;

  return (
    <section className="hero" id="top">
      <div className="hero-bg-castle" style={{ transform: `translate3d(0, ${castleY}px, 0) scale(${1.04 + scrollY * 0.0002})` }}></div>
      <div className="hero-bg-castle-soft"></div>
      <div className="hero-bg-tint"></div>
      <div className="hero-vignette"></div>
      <div className="hero-grain"></div>
      <div className="hero-orbs">
        <div className="orb orb-1" style={{ transform: `translate3d(${scrollY * -0.04 * p}px, ${orbY1}px, 0)` }}></div>
        <div className="orb orb-2" style={{ transform: `translate3d(${scrollY * 0.03 * p}px, ${orbY2}px, 0)` }}></div>
      </div>

      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy" style={{ transform: `translate3d(0, ${copyY}px, 0)` }}>
            <div className="eyebrow">
              <span className="dot"></span>
              <span>{copy.hero.badge}</span>
            </div>
            <h1 className="hero-title">
              <span className="display">{copy.hero.titleA}</span>
              <span className="strong">{copy.hero.titleB}</span>
            </h1>
            <p className="hero-sub">{copy.hero.sub}</p>
            <div className="hero-ctas">
              <a href="#waitlist" className="btn btn-primary btn-large">
                {copy.hero.ctaPrimary}
                <Icon.Arrow />
              </a>
              <a href="#showcase" className="btn btn-secondary btn-large">
                {copy.hero.ctaSecondary}
              </a>
            </div>
            <div className="hero-social-proof">
              <div className="avatar-stack">
                <div className="avatar" style={{ backgroundImage: "url(assets/portrait-wizard.png)" }}></div>
                <div className="avatar" style={{ backgroundImage: "url(assets/portrait-dwarf.png)" }}></div>
                <div className="avatar" style={{ backgroundImage: "url(assets/world-2.png)" }}></div>
                <div className="avatar" style={{ backgroundImage: "url(assets/world-3.png)" }}></div>
              </div>
              <span>{copy.hero.proof}</span>
            </div>
          </div>

          <div style={{ transform: `translate3d(0, ${-stageOffset}px, 0)`, transformStyle: "preserve-3d", transition: "none" }}>
            <window.WorldGen lang={lang} parallaxK={parallaxK} />
          </div>
        </div>
      </div>

      <div className="scroll-hint">
        <span>{copy.hero.scroll}</span>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 5v14M5 12l7 7 7-7" />
        </svg>
      </div>
    </section>);

}

// ── FEATURES ──────────────────────────────────────────────
function Features({ copy }) {
  return (
    <section className="features" id="features">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span><span>{copy.features.eyebrow}</span></div>
          <h2 className="h-sans">
            {copy.features.titleA}{" "}
            <span className="em" style={{ fontStyle: "italic", fontWeight: 500, color: "var(--fg-60)" }}>{copy.features.titleB}</span>
          </h2>
          <p>{copy.features.sub}</p>
        </div>

        <div className="feature-grid" style={{ gridTemplateColumns: "repeat(2, 1fr)" }}>
          {copy.features.cards.map((c, i) => {
            const I = FEATURE_ICONS[i];
            return (
              <div className="feature-card" key={i}>
                <div className="icon-box"><I /></div>
                <h3 className="h-sans">{c.t}</h3>
                <p>{c.d}</p>
              </div>);

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

}

// ── SHOWCASE — sticky scene panel (slide content only, no iPhone), driven by scroll
function ShowcasePanel({ step, copy }) {
  if (step === 0) {
    const w = copy.iphone.worlds;
    return (
      <div className="sp-worlds">
        <div className="sp-world-card">
          <div className="row">
            <div className="cover" style={{ backgroundImage: "url(assets/world-thumb.png)" }} />
            <div className="meta">
              <div className="name-row">
                <span className="name">{w[0].name}</span>
                <span className="badge-new">NEW</span>
              </div>
            </div>
          </div>
          <div className="desc">{w[0].desc}</div>
          <div className="tags">
            {w[0].tags.map(([e, t], j) => (
              <span className="tag" key={j}><span className="e">{e}</span>{t}</span>
            ))}
          </div>
        </div>
        <div className="sp-world-card alt">
          <div className="row">
            <div className="cover" style={{ background: "linear-gradient(135deg,#c98d8d,#a87171)" }} />
            <div className="meta">
              <div className="name-row"><span className="name">{w[1].name}</span></div>
            </div>
          </div>
          <div className="desc">{w[1].desc}</div>
          <div className="tags">
            {w[1].tags.map(([e, t], j) => (
              <span className="tag" key={j}><span className="e">{e}</span>{t}</span>
            ))}
          </div>
        </div>
      </div>
    );
  }
  if (step === 1) {
    const r = copy.iphone.region;
    return (
      <div className="sp-region">
        <div className="region-card">
          <div className="top">
            <div className="cover" />
            <div>
              <div className="nm">{r.name}</div>
              <div className="rg">{r.kind}</div>
            </div>
          </div>
          <div className="fields">
            <div className="field"><span className="k">{r.labels.government}</span><span className="v"><span className="em">{r.government.icon}</span>{r.government.value}</span></div>
            <div className="field"><span className="k">{r.labels.population}</span><span className="v"><span className="em">{r.population.icon}</span>{r.population.value}<span className="stepper"><button>−</button><button>+</button></span></span></div>
            <div className="field"><span className="k">{r.labels.capital}</span><span className="v violet"><span className="em">{r.capital.icon}</span>{r.capital.value}</span></div>
          </div>
        </div>
        <div className="chat-bubble" style={{ marginTop: 28 }}>{r.bubble}</div>
      </div>
    );
  }
  if (step === 2) {
    const a = copy.iphone.ai;
    return (
      <div className="sp-ai">
        <div className="ai-msg-user">{a.userMsg}</div>
        <div className="ai-result">
          <div className="lead">{a.leadPre}<span className="chip">{a.leadChip}</span></div>
          <div className="ready">{a.ready}</div>
          <div className="diff">
            {a.diff.map((d, i) => (
              <div className="diff-row" key={i}>
                <span>{d.k}:</span>
                <span className="val">{d.v}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="ai-compose">
          <span>{a.composing}</span>
          <span className="caret"></span>
          <div className="send-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 4l8 8h-5v8h-6v-8H4z"/></svg>
          </div>
        </div>
      </div>
    );
  }
  const r = copy.iphone.rp;
  return (
    <div className="sp-rp">
      <div className="quest-bubble">
        <span className="scroll">📜</span>
        <span className="label">{r.quest.label}</span>
        <span className="title">{r.quest.title}</span>
      </div>
      <div className="rp-portrait p1" style={{ backgroundImage: "url(assets/portrait-wizard.png)" }} />
      <div className="rp-portrait p2" style={{ backgroundImage: "url(assets/portrait-redhead.png)" }} />
      <div className="rp-portrait p3" style={{ backgroundImage: "url(assets/portrait-dwarf.png)" }} />
      <div className="rp-dialogue">{r.dialogue}</div>
    </div>
  );
}

// ── SHOWCASE — compact 4-up horizontal step cards
function Showcase({ copy }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) e.target.classList.add("in");
      });
    }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    ref.current.querySelectorAll(".sc-step").forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <section className="showcase" id="showcase" ref={ref}>
      <div className="container">
        <div className="sc-head">
          <div className="eyebrow"><span className="dot"></span><span>{copy.showcase.eyebrow}</span></div>
          <h2 className="h-sans">
            {copy.showcase.titleA}
            <span style={{ fontStyle: "italic", fontWeight: 500, color: "var(--fg-60)" }}>
              {copy.showcase.titleEm}
            </span>
          </h2>
        </div>

        <div className="sc-rail">
          <div className="sc-line"></div>
          {copy.showcase.steps.map((s, i) => (
            <div
              className="sc-step"
              key={i}
              style={{ animationDelay: `${i * 80}ms` }}
            >
              <div className="sc-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── HOW IT WORKS ──────────────────────────────────────────
function HowItWorks({ copy }) {
  return (
    <section className="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span><span>{copy.how.eyebrow}</span></div>
          <h2 className="h-sans">
            {copy.how.titleA}
            <span style={{ fontStyle: "italic", fontWeight: 500, color: "var(--fg-60)" }}>{copy.how.titleEm}</span>
          </h2>
        </div>
        <div className="how-grid">
          {copy.how.steps.map((s, i) =>
          <div className="how-card" key={i}>
              <div className="step-no">{["01", "02", "03"][i]}</div>
              <h4 className="h-sans">{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ── WAITLIST FORM ─────────────────────────────────────────
function Waitlist({ copy }) {
  const [submitted, setSubmitted] = useState(false);
  const L = copy.waitlist.labels;

  function handleSubmit(e) {
    e.preventDefault();
    setSubmitted(true);
  }

  return (
    <section className="waitlist" id="waitlist">
      <div className="container">
        <div className="waitlist-card">
          <div className="waitlist-grid">
            <div className="waitlist-copy">
              <div className="eyebrow"><span className="dot"></span><span>{copy.waitlist.eyebrow}</span></div>
              <h2>
                {copy.waitlist.titleA}
                <span className="em" style={{ color: "var(--fg-60)", fontStyle: "italic", fontWeight: 500 }}>{copy.waitlist.titleEm}</span>
              </h2>
              <p>{copy.waitlist.sub}</p>
              <div className="waitlist-stats">
                {copy.waitlist.statsLabel.map((l, i) =>
                <div className="stat-block" key={i}>
                    <div className="n">{copy.waitlist.statsValue[i]}</div>
                    <div className="l">{l}</div>
                  </div>
                )}
              </div>
            </div>

            {!submitted ?
            <form className="waitlist-form" onSubmit={handleSubmit}>
                <div className="form-row full">
                  <div>
                    <label className="form-label">{L.email}</label>
                    <label className="input">
                      <span className="icon"><Icon.Mail /></span>
                      <input type="email" required placeholder={L.emailPh} />
                    </label>
                  </div>
                </div>

                <div className="form-row">
                  <div>
                    <label className="form-label">{L.role}</label>
                    <div className="select-shell">
                      <select required defaultValue="">
                        {L.roleOpts.map((o, i) =>
                      <option key={i} value={i === 0 ? "" : o} disabled={i === 0}>{o}</option>
                      )}
                      </select>
                    </div>
                  </div>
                  <div>
                    <label className="form-label">{L.platform}</label>
                    <div className="select-shell">
                      <select required defaultValue="">
                        {L.platformOpts.map((o, i) =>
                      <option key={i} value={i === 0 ? "" : o} disabled={i === 0}>{o}</option>
                      )}
                      </select>
                    </div>
                  </div>
                </div>

                <div className="form-row full">
                  <div>
                    <label className="form-label">{L.source}</label>
                    <div className="select-shell">
                      <select defaultValue="">
                        {L.sourceOpts.map((o, i) =>
                      <option key={i} value={i === 0 ? "" : o} disabled={i === 0}>{o}</option>
                      )}
                      </select>
                    </div>
                  </div>
                </div>

                <label className="checkbox" style={{ marginTop: 8 }}>
                  <input type="checkbox" required />
                  <span className="box"></span>
                  <span>
                    {L.agree}<a href="terms.html">{L.terms}</a>{L.and}<a href="privacy.html">{L.privacy}</a>{L.agreeEnd}
                  </span>
                </label>

                <button type="submit" className="btn btn-primary btn-large" style={{ marginTop: 12, width: "100%" }}>
                  {L.submit}
                  <Icon.Arrow />
                </button>
              </form> :

            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div className="form-success show" style={{
                background: "var(--glass-strong)",
                border: "1px solid var(--fg-18)",
                padding: 40,
                borderRadius: "var(--r-l)",
                display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 18
              }}>
                <div className="check" style={{ width: 44, height: 44 }}><Icon.Check /></div>
                  <div style={{ fontSize: 28, fontWeight: 600, color: "var(--fg)", letterSpacing: "-0.02em" }}>
                    {copy.waitlist.success.title}
                  </div>
                  <div style={{ color: "var(--fg-60)", fontSize: 15, lineHeight: 1.6 }}>
                    {copy.waitlist.success.body}
                  </div>
                </div>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

}

// ── NEWSLETTER STRIP ──────────────────────────────────────
function Newsletter({ copy }) {
  const [done, setDone] = useState(false);
  return (
    <section className="newsletter">
      <div className="container">
        <div className="news-card">
          <div className="copy">
            <span className="label">{copy.newsletter.label}</span>
            <p>{copy.newsletter.body}</p>
          </div>
          {!done ?
          <form className="news-form" onSubmit={(e) => {e.preventDefault();setDone(true);}}>
              <label className="input">
                <span className="icon"><Icon.Mail /></span>
                <input type="email" required placeholder={copy.newsletter.ph} />
              </label>
              <button type="submit" className="btn btn-primary">{copy.newsletter.cta}</button>
            </form> :

          <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--accent-violet)", fontWeight: 500 }}>
              <Icon.Check /> {copy.waitlist.success.title}
            </div>
          }
        </div>
      </div>
    </section>);

}

// ── FAQ ───────────────────────────────────────────────────
function FAQ({ copy }) {
  return (
    <section className="faq" id="faq">
      <div className="container">
        <div className="faq-grid">
          <aside className="faq-aside">
            <div className="eyebrow"><span className="dot"></span><span>{copy.faq.eyebrow}</span></div>
            <h2 style={{ marginTop: 16 }}>
              {copy.faq.titleA}
              <span className="em" style={{ color: "var(--fg-60)", fontStyle: "italic", fontWeight: 500 }}>{copy.faq.titleEm}</span>
            </h2>
            <p>{copy.faq.sub}</p>
            <a href="#" className="ask">{copy.faq.ask}</a>
          </aside>
          <div className="faq-list">
            {copy.faq.items.map((it, i) =>
            <details className="faq-item" key={i} open={i === 0}>
                <summary>
                  <span>{it.q}</span>
                  <span className="plus"></span>
                </summary>
                <div className="answer">{it.a}</div>
              </details>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ── FOOTER ────────────────────────────────────────────────
function Footer({ copy }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="mark">
              <span className="nav-logo-mark">
                <svg width="26" height="26" viewBox="0 0 150 150" fill="none">
                  <defs>
                    <linearGradient id="bowGradF" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#808080" />
                      <stop offset="100%" stopColor="#BDBDBD" />
                    </linearGradient>
                    <linearGradient id="featherGradF" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0%" stopColor="#E9E9E9" />
                      <stop offset="100%" stopColor="#A9A9A9" />
                    </linearGradient>
                  </defs>
                  <g transform="translate(13, 3.664)">
                    <g transform="matrix(0.994,-0.108,0.108,0.994,-4.155,47.266)">
                      <path d="M 70.328 8.626 L 64.146 14.804 C 56.902 10.685 48.824 8.25 40.752 8.25 C 20.736 8.25 8.242 22.393 8.242 41.301 C 8.242 63.154 24.436 88.253 57.397 94.005 C 59.992 94.509 61.302 96.117 61.302 98.209 C 61.302 100.757 59.229 102.474 56.145 102.042 C 27.679 98.963 0 73.608 0 41.532 C 0 17.998 16.049 0 41.238 0 C 51.201 0 61.366 3.147 70.328 8.626 Z M 99.38 56.208 C 99.38 73.31 87.604 85.008 70.663 85.008 C 59.574 85.008 47.566 79.982 38.533 71.748 L 47.404 67.956 C 54.195 73.658 62.569 77.292 70.399 77.292 C 81.858 77.292 91.306 69.146 91.306 56.152 C 91.306 47.986 88.395 39.849 83.516 32.686 L 89.621 26.591 C 95.689 35.18 99.38 45.349 99.38 56.208 Z" fill="url(#bowGradF)" fillRule="nonzero" />
                    </g>
                    <g transform="matrix(0.994,-0.108,0.108,0.994,44.427,8.590)">
                      <path d="M 0.258 79.746 C 12.189 59.67 20.971 50.105 39.972 35.286 C 42.12 33.598 39.305 30.641 37.16 32.293 C 29.64 38.153 29.728 36.034 23.177 42.842 C 23.718 26.643 26.557 21.505 45.386 11.548 C 46.39 10.818 47.993 11.162 48.589 12.2 L 52.766 18.561 L 58.696 6.352 C 58.94 5.808 59.371 5.419 59.951 5.206 C 70.577 1.433 78.931 0.07 79.277 0.03 C 80.74 -0.21 82.138 1.019 81.83 2.361 C 82.3 4.173 74.093 53.831 30.56 51.748 C 29.249 51.685 27.907 51.575 26.531 51.416 C 17.983 60.721 10.43 70.895 4.067 81.642 C 3.507 82.587 2.226 82.926 1.19 82.463 C 1.167 82.453 1.145 82.443 1.123 82.432 C 0.085 81.919 -0.305 80.714 0.258 79.746 Z" fill="url(#featherGradF)" fillRule="nonzero" />
                    </g>
                  </g>
                </svg>
              </span>
              LoreMaster
            </div>
            <div className="tag">{copy.footer.tag}</div>
          </div>
          {copy.footer.cols.map((col, i) =>
          <div className="footer-col" key={i}>
              <h5>{copy.footer.colsTitles[i]}</h5>
              {col.map(([label, href], j) =>
            <a href={href} key={j}>{label}</a>
            )}
            </div>
          )}
        </div>
        <div className="footer-bottom">
          <span>{copy.footer.copy}</span>
          <div className="footer-legal">
            <a href="terms.html">{copy.footer.legal[0]}</a>
            <a href="privacy.html">{copy.footer.legal[1]}</a>
          </div>
        </div>
      </div>
    </footer>);

}

// ── Tweaks defaults ───────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "parallax": 100
} /*EDITMODE-END*/;

// ── ROOT ──────────────────────────────────────────────────
function App() {
  const [lang, setLang] = useState(() => {
    const saved = localStorage.getItem("lm.lang");
    if (saved) return saved;
    return (navigator.language || "").toLowerCase().startsWith("ru") ? "ru" : "en";
  });

  useEffect(() => {localStorage.setItem("lm.lang", lang);}, [lang]);
  useEffect(() => {document.documentElement.lang = lang;}, [lang]);

  const copy = window.COPY[lang];
  const scrollY = useScroll();
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const parallaxK = tweaks.parallax / 100;

  return (
    <>
      <div className="grain"></div>
      <Nav lang={lang} setLang={setLang} copy={copy} />
      <Hero lang={lang} copy={copy} scrollY={scrollY} parallaxK={parallaxK} />
      <Features copy={copy} />
      <Showcase copy={copy} />
      <Waitlist copy={copy} />
      <Newsletter copy={copy} />
      <FAQ copy={copy} />
      <Footer copy={copy} />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label={lang === "ru" ? "Параллакс" : "Parallax"} />
        <window.TweakSlider
          label={lang === "ru" ? "Сила эффекта" : "Strength"}
          value={tweaks.parallax}
          onChange={(v) => setTweak("parallax", v)}
          min={0} max={200} step={5}
          unit="%" />
        
      </window.TweaksPanel>
    </>);

}

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