// LongtailIQ marketing, closing CTA + footer (Peec-style dark)
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = DS;

function DarkBtn({ primary, icon, children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 48, padding: "0 22px", borderRadius: 10, cursor: "pointer",
        fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500, border: "1px solid",
        background: primary ? "#fff" : (hover ? "rgba(255,255,255,0.08)" : "transparent"),
        color: primary ? "#0E0E11" : "#fff", borderColor: primary ? "#fff" : "rgba(255,255,255,0.2)",
        transition: "background var(--dur-fast)" }} className={primary ? "fx-sheen" : ""}>
      {icon && <Icon name={icon} size={17} />}{children}
    </button>
  );
}

function CTA() {
  return (
    <section style={{ maxWidth: 1080, margin: "0 auto", padding: "40px 24px 84px" }}>
      <div className="fx-glow-wrap" style={{ borderRadius: 24 }}>
        <div className="fx-glow-rot" />
        <div className="fx-glow-inner" style={{ position: "relative", overflow: "hidden", borderRadius: 23, background: "var(--grad-ink)", color: "#fff", padding: "72px 40px", textAlign: "center" }}>
        {window.LTQM.Meteors && <window.LTQM.Meteors count={16} />}
        <div style={{ position: "relative", zIndex: 2 }}>
        <h2 className="lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.75rem)", fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.06, maxWidth: 640, margin: "0 auto", color: "#fff" }}>
          Your blog, working hard.<br/><span style={{ color: "rgba(255,255,255,0.45)" }}>See exactly how, in real time.</span>
        </h2>
        <p style={{ fontSize: 16, color: "rgba(255,255,255,0.6)", marginTop: 18 }}>Live performance for every post we publish for you. Updated continuously.</p>
        {/* flexWrap: on phones the pair stacks instead of clipping the primary CTA */}
        <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
          <DarkBtn icon="play" onClick={()=>{window.location.href="/app/login.html";}}>See a live demo</DarkBtn>
          <DarkBtn primary icon="arrow-right" onClick={()=>{window.location.href="/app/login.html";}}>Open dashboard</DarkBtn>
        </div>
        </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: "Dashboard", l: [["Overview","/app/login.html"],["Blog Posts","/app/login.html"],["Search Queries","/app/login.html"],["Topics","/app/login.html"],["Reports","/app/login.html"]] },
    { h: "What you see", l: [["Clicks & impressions","/#features"],["Average position","/#features"],["Rising posts","/#features"],["Topic performance","/#features"],["AI search visibility","/#features"]] },
    { h: "Resources", l: [["Live demo","/app/login.html"],["How it works","/#how"],["Help center","/help"],["Contact","/contact"],["About Nivk.com","/about"]] },
    { h: "Company", l: [["About","/about"],["Careers","/careers"],["Privacy","/privacy"],["Terms","/terms"],["Contact","/contact"]] },
  ];
  return (
    <footer style={{ background: "#0A0A0C", color: "#fff" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 24px 36px", display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 32 }} className="lt-footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
            <img src="assets/logo-mark.svg" width="26" height="26" alt="Nivk.com Insights" style={{ borderRadius: 7 }} />
            <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff" }}>Nivk.com <span style={{ color: "rgba(255,255,255,0.5)" }}>Insights</span></span>
          </div>
          <p style={{ fontSize: 13, color: "rgba(255,255,255,0.45)", lineHeight: 1.55, maxWidth: 240 }}>See exactly how your content is performing. Live blog analytics from Nivk.com, straight from Google Search Console.</p>
        </div>
        {cols.map((c,i)=>(
          <div key={i}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "rgba(255,255,255,0.85)", marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {c.l.map(([label, href]) => <a key={label} href={href} style={{ fontSize: 13, color: "rgba(255,255,255,0.5)" }}
                onMouseEnter={e=>e.currentTarget.style.color="#fff"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.5)"}>{label}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 24px", borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.35)" }}>© 2026 Nivk.com Insights · data.nivk.com</span>
        <div style={{ display: "flex", gap: 16 }}>
          {[["X","https://nivk.com"],["LinkedIn","https://nivk.com"],["YouTube","https://nivk.com"]].map(([s,url]) =>
            <a key={s} href={url} target="_blank" rel="noopener noreferrer nofollow" aria-label={"Nivk.com Insights on "+s} style={{ fontSize: 12.5, fontWeight: 500, color: "rgba(255,255,255,0.45)" }}
            onMouseEnter={e=>e.currentTarget.style.color="#fff"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.45)"}>{s}</a>)}
        </div>
      </div>
    </footer>
  );
}
window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { CTA, Footer });
})();