// sections.jsx — Observatory v2 page sections. Exports: ObservatorySite

function obsScrollTo(id) {
  const el = document.getElementById(id);
  if (!el) return;
  const top = el.getBoundingClientRect().top + window.scrollY - 76;
  window.scrollTo({ top, behavior: "smooth" });
}

function ObservatorySite({ lang, setLang, tweaks }) {
  const t = STRINGS[lang];
  const [chatOpen, setChatOpen] = React.useState(false);
  const vp = useViewport();

  const isDusk = tweaks.theme !== "claro";
  const C = {
    bg: isDusk ? "linear-gradient(178deg, #dfe7f5 0%, #eef2fa 30%, #fafbfd 64%)" : "#fafbfd",
    text: "#0e1726", dim: isDusk ? "#46587a" : "#5b6b80", faint: "#93a1b3",
    line: isDusk ? "#d7e0f0" : "#e4e9f0", ink: "#33415c", navy: "#0a0f1c",
    navBg: isDusk ? "rgba(233,239,249,0.8)" : "rgba(250,251,253,0.85)",
    ghostBg: isDusk ? "rgba(255,255,255,0.7)" : "#fff",
    ghostBorder: isDusk ? "#c3d0e8" : "#e4e9f0",
    cardShadow: isDusk ? "0 8px 30px rgba(30,58,138,0.06)" : "0 1px 3px rgba(14,23,38,0.04)",
    con: isDusk ? { stroke: "#5a76ab", star: "#1e3a8a", glow: "rgba(96,165,250,0.4)" } : { stroke: "#aab8cc", star: "#33415c", glow: null },
    accent: tweaks.accent,
    isDusk,
  };
  const sans = "-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif";
  const mono = "'JetBrains Mono', ui-monospace, 'SF Mono', monospace";
  const btnBg = tweaks.buttonStyle === "accent" ? C.accent : "#0e1726";
  const padX = vp.mobile ? 22 : 48;
  const secPad = vp.mobile ? 72 : 110;
  const cardGrid = "repeat(auto-fit, minmax(min(100%, 250px), 1fr))";

  const s = {
    page: { background: C.bg, color: C.text, fontFamily: sans, minHeight: "100vh" },
    wrap: { maxWidth: 980, margin: "0 auto", padding: `0 ${padX}px` },
    label: { fontFamily: mono, fontSize: 12, letterSpacing: "0.22em", color: C.accent, textTransform: "uppercase", textAlign: "center", marginBottom: 16 },
    h2: { fontSize: "clamp(27px, 6.4vw, 38px)", fontWeight: 700, letterSpacing: "-0.022em", margin: "0 0 14px 0", textAlign: "center" },
    subCenter: { fontSize: "clamp(15.5px, 4vw, 17px)", lineHeight: 1.65, color: C.dim, textAlign: "center", maxWidth: 560, margin: "0 auto" },
    card: { background: "#fff", border: `1px solid ${C.line}`, borderRadius: 16, padding: 28, boxShadow: C.cardShadow },
    tag: { fontFamily: mono, fontSize: 11.5, color: C.dim, background: "#eef2f7", borderRadius: 999, padding: "5px 13px" },
    section: { padding: `${secPad}px 0 0 0` },
    navLink: { background: "none", border: "none", fontSize: 14, color: C.dim, cursor: "pointer", fontFamily: sans, padding: 0 }
  };

  const Tag = ({ children }) => <span style={s.tag}>{children}</span>;

  return (
    <div style={{ ...s.page, "--obs-accent": C.accent, position: "relative" }}>
      {C.isDusk && (
        <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 950, pointerEvents: "none" }}>
          <Starfield count={70} color="#9fb2d4" seed={71} twinkle={true} opacity={0.8}></Starfield>
        </div>
      )}
      {/* ── NAV (sticky) ── */}
      <div style={{ position: "sticky", top: 0, zIndex: 50, background: C.navBg, backdropFilter: "blur(12px)", WebkitBackdropFilter: "blur(12px)", borderBottom: `1px solid ${C.line}` }}>
        <nav style={{ ...s.wrap, display: "flex", alignItems: "center", justifyContent: "space-between", padding: `16px ${padX}px` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer" }} onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}>
            <LupusConstellation size={22} stroke={C.ink} strokeWidth={6} lineOpacity={0.8} starColor={C.text}></LupusConstellation>
            <span style={{ fontSize: 15, fontWeight: 600, letterSpacing: "-0.01em" }}>canislupus.dev</span>
          </div>
          {!vp.compact &&
          <div style={{ display: "flex", gap: 28 }}>
            <button className="obs-nav-link" style={s.navLink} onClick={() => obsScrollTo("featured")}>{t.nav.projects}</button>
            <button className="obs-nav-link" style={s.navLink} onClick={() => obsScrollTo("stack")}>{t.nav.stack}</button>
            <button className="obs-nav-link" style={s.navLink} onClick={() => obsScrollTo("education")}>{t.nav.education}</button>
            <button className="obs-nav-link" style={s.navLink} onClick={() => obsScrollTo("contact")}>{t.nav.contact}</button>
          </div>
          }
          <div style={{ fontFamily: mono, fontSize: 12, display: "flex", background: "#eef2f7", borderRadius: 999, padding: 3 }}>
            {["pt", "en"].map((l) =>
            <button
              key={l}
              onClick={() => setLang(l)}
              style={{
                padding: "4px 12px", border: "none", cursor: "pointer", fontFamily: mono, fontSize: 12, borderRadius: 999,
                background: lang === l ? "#fff" : "transparent",
                color: lang === l ? C.text : C.faint,
                boxShadow: lang === l ? "0 1px 2px rgba(14,23,38,0.1)" : "none"
              }}>
              {l.toUpperCase()}</button>
            )}
          </div>
        </nav>
      </div>

      <div style={{ ...s.wrap, position: "relative", zIndex: 1 }}>
        {/* ── HERO ── */}
        <header style={{ textAlign: "center", padding: `${vp.mobile ? 56 : 92}px 0 20px 0` }}>
          <div style={{ display: "flex", justifyContent: "center", marginBottom: vp.mobile ? 30 : 38 }}>
            <LupusConstellation size={vp.mobile ? 138 : 185} stroke={C.con.stroke} strokeWidth={1.1} lineOpacity={0.7} starColor={C.con.star} glowColor={C.con.glow} twinkle={true}></LupusConstellation>
          </div>
          <div style={{ fontFamily: mono, fontSize: vp.mobile ? 11 : 13, color: C.accent, letterSpacing: "0.22em", marginBottom: 20 }}>{t.hero.kicker}</div>
          <h1 style={{ fontSize: "clamp(33px, 8.8vw, 62px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.06, margin: "0 auto", maxWidth: 760 }}>
            {t.hero.title}
          </h1>
          <p style={{ ...s.subCenter, fontSize: "clamp(16px, 4.6vw, 20px)", maxWidth: 540, marginTop: 26 }}>{t.hero.sub}</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap", marginTop: 36 }}>
            <a
              className="obs-btn-ghost"
              href={SITE_LINKS.linkedin} target="_blank" rel="noreferrer"
              style={{ color: C.text, fontSize: 15, fontWeight: 500, padding: "12px 26px", borderRadius: 12, border: `1px solid ${C.ghostBorder}`, background: C.ghostBg, textDecoration: "none" }}>
              {t.hero.btnLinkedin} ↗</a>
            <a
              className="obs-btn-ghost"
              href={SITE_LINKS.github} target="_blank" rel="noreferrer"
              style={{ color: C.text, fontSize: 15, fontWeight: 500, padding: "12px 26px", borderRadius: 12, border: `1px solid ${C.ghostBorder}`, background: C.ghostBg, textDecoration: "none" }}>
              {t.hero.btnGithub} ↗</a>
          </div>
        </header>

        {/* ── FEATURED: LUPUS ── */}
        <section id="featured" style={s.section}>
          <div style={s.label}>{t.featured.label}</div>
          <h2 style={s.h2}>Lupus</h2>
          <p style={s.subCenter}>{t.featured.sub}</p>
          <div style={{ background: "linear-gradient(165deg, rgba(37,99,235,0.055), rgba(37,99,235,0.015))", border: `1px solid ${C.line}`, borderRadius: 24, marginTop: 44, padding: vp.mobile ? "28px 22px" : "50px 54px", position: "relative", overflow: "hidden", color: C.text }}>
            <div style={{ display: "grid", gridTemplateColumns: vp.compact ? "1fr" : "1fr 1.1fr", gap: vp.compact ? 30 : 48, alignItems: "center", position: "relative" }}>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                  <span style={{ fontFamily: mono, fontSize: 12, color: C.accent, letterSpacing: "0.2em" }}>{t.featured.role}</span>
                  <span style={{ fontFamily: mono, fontSize: 10.5, color: C.dim, border: `1px solid ${C.line}`, background: "#fff", borderRadius: 999, padding: "3px 10px" }}>{t.featured.version}</span>
                </div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: C.dim, margin: 0 }}>{t.featured.desc}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 24 }}>
                  {["LangGraph", "FAISS", "BM25", "CrossEncoder", "FastAPI"].map((tg) =>
                  <span key={tg} style={{ fontFamily: mono, fontSize: 11.5, color: C.dim, border: `1px solid ${C.line}`, background: "#fff", borderRadius: 999, padding: "4px 12px" }}>{tg}</span>
                  )}
                </div>
                <a href={SITE_LINKS.lupus} target="_blank" rel="noreferrer" style={{ display: "inline-block", marginTop: 28, color: C.accent, fontFamily: mono, fontSize: 13, textDecoration: "none", borderBottom: `1px solid ${C.accent}55`, paddingBottom: 2 }}>
                  {t.featured.cta} ↗
                </a>
              </div>
              <div style={{ background: "#0a0f1c", border: "1px solid rgba(147,197,253,0.18)", borderRadius: 12, fontFamily: mono, fontSize: vp.mobile ? 11.5 : 13, lineHeight: 1.9, padding: vp.mobile ? "18px 16px" : "22px 24px", color: "#8b9bb4", boxShadow: "0 18px 44px rgba(14,23,38,0.18)", overflowX: "auto" }}>
                <div style={{ whiteSpace: "nowrap" }}><span style={{ color: "#60a5fa" }}>❯</span> <span style={{ color: "#e8edf6" }}>{t.featured.term.cmd}</span></div>
                <div style={{ color: "#5a6a85" }}>▸ {t.featured.term.status}</div>
                <div style={{ marginTop: 8 }}><span style={{ color: "#7dd3a8" }}>✓</span> <span style={{ color: "#c7d2e0" }}>{t.featured.term.answer}</span></div>
              </div>
            </div>
          </div>
          <p style={{ textAlign: "center", fontSize: 12.5, color: C.faint, maxWidth: 560, margin: "18px auto 0 auto", lineHeight: 1.6 }}>{t.featured.fineprint}</p>
        </section>

        {/* ── OTHER PROJECTS ── */}
        <section id="projects" style={s.section}>
          <div style={s.label}>{t.projects.label}</div>
          <h2 style={s.h2}>{t.projects.title}</h2>
          <p style={s.subCenter}>{t.projects.sub}</p>
          <div style={{ display: "grid", gridTemplateColumns: cardGrid, gap: 20, marginTop: 44 }}>
            {t.projects.items.map((p, i) =>
            <div key={i} style={{ ...s.card, padding: 26, display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10 }}>
                  <h3 style={{ fontSize: 18.5, fontWeight: 600, letterSpacing: "-0.01em", margin: 0 }}>{p.name}</h3>
                  <span style={{ fontFamily: mono, fontSize: 9.5, color: p.status === "done" ? "#15803d" : "#b07d2c", letterSpacing: "0.1em", whiteSpace: "nowrap" }}>● {p.status === "done" ? t.projects.statusDone : t.projects.statusWip}</span>
                </div>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: C.dim, margin: "12px 0 16px 0", flexGrow: 1 }}>{p.desc}</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 7, marginBottom: 18 }}>{p.tags.map((tg) => <Tag key={tg}>{tg}</Tag>)}</div>
                <a href={p.link} target="_blank" rel="noreferrer" style={{ fontSize: 13.5, fontWeight: 500, color: C.accent, textDecoration: "none" }}>
                  {t.projects.viewGithub} ↗
                </a>
              </div>
            )}
            {/* ghost card */}
            <a href={SITE_LINKS.github} target="_blank" rel="noreferrer" style={{ border: `1.5px dashed ${C.line}`, borderRadius: 16, padding: 26, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", textDecoration: "none", gap: 8 }}>
              <span style={{ fontSize: 26, color: C.faint, lineHeight: 1 }}>＋</span>
              <span style={{ fontSize: 15.5, fontWeight: 600, color: C.text }}>{t.projects.moreTitle}</span>
              <span style={{ fontSize: 13.5, color: C.dim, lineHeight: 1.5 }}>{t.projects.moreDesc}</span>
              <span style={{ fontSize: 13.5, fontWeight: 500, color: C.accent, marginTop: 6 }}>{t.projects.moreCta} ↗</span>
            </a>
          </div>
        </section>

        {/* ── STACK ── */}
        <section id="stack" style={s.section}>
          <div style={s.label}>{t.stack.label}</div>
          <h2 style={s.h2}>{t.stack.title}</h2>
          <p style={s.subCenter}>{t.stack.sub}</p>
          <div style={{ marginTop: 44 }}>
            {tweaks.stackStyle === "constelação" ?
            <StackConstellation t={t} C={C}></StackConstellation> :
            <StackLogos t={t} C={C}></StackLogos>}
          </div>
        </section>

        {/* ── EDUCATION ── */}
        <section id="education" style={s.section}>
          <div style={s.label}>{t.education.label}</div>
          <h2 style={s.h2}>{t.education.title}</h2>
          <div style={{ display: "grid", gridTemplateColumns: cardGrid, gap: 20, marginTop: 44 }}>
            {t.education.items.map((e, i) =>
            <div key={i} style={{ ...s.card, display: "flex", flexDirection: "column", gap: 6 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                  <span style={{ fontFamily: mono, fontSize: 11.5, color: C.accent, letterSpacing: "0.12em" }}>✦ {e.badge}</span>
                  <span style={{ fontFamily: mono, fontSize: 11.5, color: C.faint }}>{e.period}</span>
                </div>
                <div style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 6 }}>{e.degree}</div>
                <div style={{ fontSize: 14.5, color: C.dim }}>{e.school}</div>
              </div>
            )}
          </div>
        </section>

        {/* ── CERTIFICATIONS ── */}
        <section id="certs" style={s.section}>
          <div style={s.label}>{t.certs.label}</div>
          <h2 style={s.h2}>{t.certs.title}</h2>
          <div style={{ display: "grid", gridTemplateColumns: cardGrid, gap: 20, marginTop: 44 }}>
            {t.certs.items.map((c, i) =>
            <div key={i} style={{ ...s.card, display: "flex", flexDirection: "column", gap: 6 }}>
                <span style={{ fontFamily: mono, fontSize: 10.5, color: c.status === "done" ? "#15803d" : "#b07d2c", letterSpacing: "0.12em" }}>● {c.status === "done" ? t.certs.statusDone : t.certs.statusWip}</span>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em", marginTop: 6 }}>{c.name}</div>
                <div style={{ fontSize: 14, color: C.dim }}>{c.org}</div>
              </div>
            )}
          </div>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "baseline", flexWrap: "wrap", gap: 10, marginTop: 26 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: C.dim }}>{t.certs.extraLabel}:</span>
            {t.certs.extra.map((x, i) =>
            <span key={i} style={{ fontFamily: mono, fontSize: 12, color: C.faint, background: "#eef2f7", borderRadius: 999, padding: "4px 12px" }}>{x}</span>
            )}
          </div>
        </section>

        {/* ── WOLF TEASER ── */}
        <section style={s.section}>
          <div style={{ ...s.card, display: "flex", flexDirection: vp.mobile ? "column" : "row", alignItems: vp.mobile ? "flex-start" : "center", justifyContent: "space-between", gap: vp.mobile ? 20 : 32, padding: vp.mobile ? "26px 22px" : "34px 38px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 22 }}>
              <LupusConstellation size={52} stroke={C.ink} strokeWidth={2.5} starColor={C.text}></LupusConstellation>
              <div>
                <div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: 10 }}>
                  <span style={{ fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em" }}>{t.wolf.teaserTitle}</span>
                  <span style={{ fontFamily: mono, fontSize: 9.5, color: "#b07d2c", background: "#fdf4e3", border: "1px solid #ecd9a8", borderRadius: 999, padding: "2px 9px", letterSpacing: "0.12em" }}>{t.wolf.teaserBadge}</span>
                </div>
                <div style={{ fontSize: 14.5, color: C.dim, marginTop: 4 }}>{t.wolf.teaserDesc}</div>
              </div>
            </div>
            <button
              onClick={() => setChatOpen(true)}
              style={{ background: btnBg, color: "#fff", fontSize: 14, fontWeight: 500, padding: "12px 22px", borderRadius: 11, border: "none", cursor: "pointer", whiteSpace: "nowrap", fontFamily: sans, width: vp.mobile ? "100%" : "auto" }}>
              {t.wolf.teaserCta}</button>
          </div>
        </section>

        {/* ── FOOTER ── */}
        <footer id="contact" style={{ borderTop: `1px solid ${C.line}`, marginTop: 110, padding: "36px 0 44px 0", display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ fontSize: 13.5, color: C.faint }}>{t.footer.rights}</div>
          <div style={{ display: "flex", gap: vp.mobile ? 18 : 26, flexWrap: "wrap", fontSize: 14 }}>
            <a href={SITE_LINKS.github} target="_blank" rel="noreferrer" style={{ color: C.dim, textDecoration: "none" }}>GitHub ↗</a>
            <a href={SITE_LINKS.linkedin} target="_blank" rel="noreferrer" style={{ color: C.dim, textDecoration: "none" }}>LinkedIn ↗</a>
            <a href={SITE_LINKS.email} style={{ color: C.dim, textDecoration: "none" }}>{SITE_LINKS.emailText}</a>
          </div>
        </footer>
      </div>

      <WolfChat t={t} lang={lang} C={C} open={chatOpen} setOpen={setChatOpen}></WolfChat>
    </div>);

}

Object.assign(window, { ObservatorySite });