// app.jsx — NOCODE landing components. No dashes (em, en, hyphen-as-punctuation).

const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#7A4DE5",
  "paper": "#F2EEE5",
  "density": "regular",
  "displaySerif": false
}/*EDITMODE-END*/;

function Scribble({ variant = 0 }){
  const paths = [
    "M2 14 C 80 4, 180 22, 280 10 S 480 22, 560 12 S 740 6, 820 16",
    "M4 12 C 90 22, 200 4, 300 18 S 500 6, 600 14 S 780 22, 820 10",
  ];
  return (
    <svg className="scribble" viewBox="0 0 820 22" preserveAspectRatio="none" aria-hidden="true">
      <path d={paths[variant % paths.length]} />
    </svg>
  );
}

function Tick(){
  return (
    <svg className="tick" viewBox="0 0 22 22" aria-hidden="true">
      <path d="M3 11.5 L 9 17 L 19 5" />
    </svg>
  );
}

function LangSwitcher({ lang, setLang, codes }){
  return (
    <div className="lang" role="group" aria-label="Language">
      {codes.map((c) => (
        <button key={c} className={lang === c ? "on" : ""} onClick={() => setLang(c)}>
          {c.toUpperCase()}
        </button>
      ))}
    </div>
  );
}

function LangSelect({ lang, setLang, codes }){
  return (
    <select
      className="lang-mobile"
      value={lang}
      onChange={(e) => setLang(e.target.value)}
      aria-label="Language"
      style={{
        fontFamily: "JetBrains Mono", fontSize: 11, letterSpacing: ".08em",
        textTransform: "uppercase", color: "var(--ink)", background: "transparent",
        border: "1px solid var(--rule)", borderRadius: 999, padding: "8px 10px",
      }}
    >
      {codes.map((c) => <option key={c} value={c}>{c.toUpperCase()}</option>)}
    </select>
  );
}

function Nav({ t, lang, setLang, codes }){
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getUTCHours()).padStart(2,"0");
      const mm = String(d.getUTCMinutes()).padStart(2,"0");
      setTime(`${hh}:${mm} ${t.nav.time}`);
    };
    tick();
    const id = setInterval(tick, 30_000);
    return () => clearInterval(id);
  }, [t.nav.time]);

  return (
    <nav className="nav">
      <div className="mark">
        <span className="dot" />
        <span>NOCODE</span>
        <span className="mark-sub">{t.nav.est}</span>
      </div>
      <div className="nav-meta">
        <span>{t.nav.location}</span>
        <span><b>{time}</b></span>
        <span>{t.nav.booking}</span>
      </div>
      <LangSwitcher lang={lang} setLang={setLang} codes={codes} />
      <LangSelect lang={lang} setLang={setLang} codes={codes} />
      <div className="nav-cta">
        <a href="#cta" className="pill">{t.nav.cta}</a>
      </div>
    </nav>
  );
}

function Hero({ t }){
  return (
    <section className="hero">
      <div className="eyebrow">
        <span className="num">●</span>
        <span>{t.hero.eyebrow}</span>
      </div>

      <div className="hero-grid">
        <h1 className="h1">
          <span className="stack struck"><span className="word">{t.hero.w1}<Scribble variant={0} /></span></span>
          <span className="stack struck"><span className="word">{t.hero.w2}<Scribble variant={1} /></span></span>
          <span className="stack"><span className="italic">{t.hero.w3}</span></span>
        </h1>

        <aside className="hero-aside">
          <p>{t.hero.aside}</p>
          <span className="from">
            {t.hero.sister}&nbsp;
            <a href="https://webflow.lt" target="_blank" rel="noreferrer">webflow.lt</a>
          </span>
        </aside>
      </div>

      <div className="hero-foot">
        <div className="stat"><em>{t.hero.stat1n}</em> <span>{t.hero.stat1l}</span></div>
        <div className="stat"><em>{t.hero.stat2n}</em> <span>{t.hero.stat2l}</span></div>
        <div className="stat"><em>{t.hero.stat3n}</em> {t.hero.stat3l} <span>{t.hero.stat3note}</span></div>
      </div>
    </section>
  );
}

function NotEshops({ t }){
  return (
    <div className="noteshops">
      <div className="shell row" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
        <span>
          <b>{t.eshops.hello}</b> {t.eshops.body}
        </span>
        <a href="https://webflow.lt" target="_blank" rel="noreferrer">{t.eshops.link} ↗</a>
      </div>
    </div>
  );
}

function Marquee({ t }){
  const items = t.marquee;
  const row = (
    <>
      {items.map((label, i) => (
        <React.Fragment key={i}>
          <span>{label}</span>
          <span className="dot" />
        </React.Fragment>
      ))}
      <span className="mono">{t.marqueeNote}</span>
      <span className="dot" />
    </>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {row}{row}
      </div>
    </div>
  );
}

function Manifesto({ t }){
  return (
    <section className="manifesto shell">
      <div className="section-tag">{t.manifesto.tag}</div>
      <p className="lede">
        {t.manifesto.lede1}<em>{t.manifesto.em1}</em>{t.manifesto.lede2}<em>{t.manifesto.em2}</em>{t.manifesto.lede3}<em>{t.manifesto.em3}</em>{t.manifesto.lede4}
        <span className="undertag">{t.manifesto.under}</span>
      </p>
    </section>
  );
}

function Handle({ t }){
  const [lit, setLit] = useState(() => new Set());
  const ref = useRef(null);

  useEffect(() => {
    setLit(new Set());
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting){
          const idx = Number(e.target.dataset.idx);
          setTimeout(() => setLit((s) => { const n = new Set(s); n.add(idx); return n; }), idx * 80);
        }
      });
    }, { threshold: 0.25 });
    const items = ref.current?.querySelectorAll(".handle-item") || [];
    items.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [t]);

  return (
    <section className="handle shell" ref={ref}>
      <div className="handle-head">
        <div className="section-tag">{t.handle.tag}</div>
        <h2>
          {t.handle.h1}<em>{t.handle.em1}</em>{t.handle.h2}<em>{t.handle.em2}</em>{t.handle.h3}
        </h2>
      </div>

      <div className="handle-grid">
        {t.handle.items.map((it, i) => (
          <div key={i} data-idx={i} className={"handle-item" + (lit.has(i) ? " lit" : "")}>
            <span className="num">0{i+1}</span>
            <div className="row">
              <Tick />
              <h3>{it[0]}</h3>
            </div>
            <p>{it[1]}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Process({ t }){
  const [active, setActive] = useState(0);
  useEffect(() => {
    let i = 0;
    setActive(0);
    const id = setInterval(() => {
      i = (i + 1) % t.process.steps.length;
      setActive(i);
    }, 1700);
    return () => clearInterval(id);
  }, [t.process.steps.length]);

  return (
    <section className="process shell">
      <div className="process-head">
        <div className="section-tag">{t.process.tag}</div>
        <div>
          <h2>{t.process.h1}<em>{t.process.em1}</em>{t.process.h2}<em>{t.process.em2}</em>{t.process.h3}</h2>
          <p style={{ fontSize: 16, color: "var(--ink-soft)", maxWidth: "44ch", marginTop: 18, textWrap: "pretty" }}>{t.process.sub}</p>
        </div>
      </div>

      <div className="timeline">
        {t.process.steps.map((s, i) => (
          <div key={i} className={"step" + (i === active ? " active" : "")}>
            <span className="day">{s[0]}</span>
            <span className="pin" />
            <h4>{s[1]}</h4>
            <p>{s[2]}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function Testi({ t }){
  const fmtLabel = { wa: "WhatsApp", imsg: "iMessage", sms: "SMS", email: "Email" };
  const fmtBadge = { wa: "\u25CF", imsg: "\u25CF", sms: "\u25CF", email: "@" };
  const initials = (name) => name.split(/\s+/).map(w => w[0]).slice(0,2).join("").toUpperCase();
  return (
    <section className="testi shell">
      <div className="testi-head">
        <div className="section-tag">{t.testi.tag}</div>
        <div>
          <h2>{t.testi.h1}<em>{t.testi.em1}</em>{t.testi.h2}</h2>
          <p className="sub" style={{ marginTop: 18 }}>{t.testi.sub}</p>
        </div>
      </div>

      <div className="msgs">
        {t.testi.quotes.map((q, i) => (
          <article key={i} className={`msg ${q.fmt}`}>
            <header className="msg-hd">
              <div className="ttl">
                <span className="badge">{q.fmt === "email" ? "@" : initials(q.who)[0]}</span>
                <span className="who"><b>{q.who}</b> <small>{q.sub}</small></span>
              </div>
              <span className="t">{fmtLabel[q.fmt]} · {q.t}</span>
            </header>
            <div className="msg-bd">
              {q.fmt === "email" ? (
                <>
                  <div className="from"><b>From:</b> {q.who.toLowerCase().replace(/\.$/,"").replace(/\s+/g,".")}@gmail.com</div>
                  <div className="subj">{q.subj}</div>
                  <div className="body">{q.body}</div>
                </>
              ) : (
                q.msgs.map((m, j) => <div key={j} className="bubble in">{m}</div>)
              )}
            </div>
            <footer className="msg-foot">
              <span>{q.fmt === "email" ? "\u2709 Inbox" : q.fmt === "sms" ? "✉ SMS" : "✓✓ Read"}</span>
              <span>{q.t}</span>
            </footer>
          </article>
        ))}
      </div>

      <div className="testi-strip">
        {t.testi.strip.map((s, i) => (
          <React.Fragment key={i}>
            <span><span className="num"><em>{s[0]}</em></span> &nbsp; {s[1]}</span>
            {i < t.testi.strip.length - 1 ? <span style={{ color: "var(--ink-faint)" }}>///</span> : null}
          </React.Fragment>
        ))}
      </div>
    </section>
  );
}

function CTA({ t }){
  return (
    <section className="cta shell" id="cta">
      <div className="tag">{t.cta.tag}</div>
      <h2>{t.cta.h1}<em>{t.cta.em1}</em>{t.cta.h2}</h2>
      <p className="sub">{t.cta.sub}</p>
      <a className="mailto" href={`mailto:${t.cta.email}`}>
        {t.cta.email} <span className="arr">→</span>
      </a>
      <div className="alt">{t.cta.alt}</div>
    </section>
  );
}

function Foot({ t }){
  return (
    <>
      <footer className="foot shell">
        <div className="brand">
          <div className="big">NOCODE<em>.</em></div>
          <div className="by">
            {t.foot.by1}<a href="https://webflow.lt" target="_blank" rel="noreferrer">webflow.lt</a>{t.foot.by2}
          </div>
        </div>
        <div>
          <h5>{t.foot.studio}</h5>
          <ul>
            <li><a href="#cta">{t.foot.sayHello}</a></li>
            <li><a href="mailto:hello@nocode.lt">hello@nocode.lt</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.foot.sister}</h5>
          <ul>
            <li><a className="accent" href="https://webflow.lt" target="_blank" rel="noreferrer">webflow.lt ↗</a></li>
            <li><a href="https://webflow.lt" target="_blank" rel="noreferrer">{t.foot.theirWork}</a></li>
            <li><a href="https://webflow.lt" target="_blank" rel="noreferrer">{t.foot.aboutGroup}</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.foot.elsewhere}</h5>
          <ul>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">LinkedIn</a></li>
            <li><a href="#">Are.na</a></li>
          </ul>
        </div>
      </footer>
      <div className="copyline shell">
        <span>{t.foot.copy}</span>
        <span>{t.foot.loc}</span>
      </div>
    </>
  );
}

function TweaksUI({ tw, setTweak }){
  return (
    <TweaksPanel>
      <TweakSection label="Look" />
      <TweakColor label="Accent" value={tw.accent}
        options={["#7A4DE5","#E5341F","#1F6FE5","#0E8F4A","#F2B600"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakColor label="Paper" value={tw.paper}
        options={["#F2EEE5","#F6F4EE","#EAE5D6","#14110D"]}
        onChange={(v) => setTweak("paper", v)} />
      <TweakRadio label="Density" value={tw.density}
        options={["compact","regular","airy"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakToggle label="Serif display" value={tw.displaySerif}
        onChange={(v) => setTweak("displaySerif", v)} />
    </TweaksPanel>
  );
}

function App(){
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const codes = Object.keys(window.I18N);
  const [lang, setLang] = useState(() => {
    const stored = localStorage.getItem("nocode_lang");
    if (stored && codes.includes(stored)) return stored;
    const nav = (navigator.language || "en").slice(0,2).toLowerCase();
    return codes.includes(nav) ? nav : "en";
  });
  useEffect(() => { localStorage.setItem("nocode_lang", lang); document.documentElement.lang = lang; }, [lang]);
  const t = window.I18N[lang];

  useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty("--accent", tw.accent);
    const isDark = ["#14110D","#1a1614"].includes(tw.paper);
    r.setProperty("--paper", tw.paper);
    r.setProperty("--paper-deep", isDark ? "#1d1916" : "#E9E4D6");
    r.setProperty("--ink", isDark ? "#F2EEE5" : "#14110D");
    r.setProperty("--ink-soft", isDark ? "rgba(242,238,229,.72)" : "#4A463E");
    r.setProperty("--ink-faint", isDark ? "rgba(242,238,229,.45)" : "rgba(20,17,13,.45)");
    r.setProperty("--rule", isDark ? "rgba(242,238,229,.16)" : "rgba(20,17,13,.18)");
    r.setProperty("--rule-soft", isDark ? "rgba(242,238,229,.08)" : "rgba(20,17,13,.10)");
    document.body.dataset.density = tw.density;
    if (!tw.displaySerif){
      r.setProperty("--display-family", "'Geist', ui-sans-serif");
      r.setProperty("--display-italic", "normal");
      r.setProperty("--display-weight", "600");
    } else {
      r.setProperty("--display-family", "'Instrument Serif', serif");
      r.setProperty("--display-italic", "italic");
      r.setProperty("--display-weight", "400");
    }
  }, [tw]);

  return (
    <div>
      <div className="shell"><Nav t={t} lang={lang} setLang={setLang} codes={codes} /></div>
      <div className="shell"><Hero t={t} /></div>
      <NotEshops t={t} />
      <Marquee t={t} />
      <Manifesto t={t} />
      <Handle t={t} />
      <Process t={t} />
      <Testi t={t} />
      <CTA t={t} />
      <Foot t={t} />
      <TweaksUI tw={tw} setTweak={setTweak} />
    </div>
  );
}

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