// Nivk.com Insights — public landing, in the nivk.com brand (dark navy + violet).
// Self-contained: uses the nivk palette inline + Lucide icons + the BrandOrb
// canvas. Does not depend on the (light) SQSEO marketing components.
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const { Icon } = window.LongtailIQDesignSystem_ae8f12;

const C = {
  bg: "#0b0b12", navy: "linear-gradient(135deg,#0f0f1a 0%,#1a1a2e 50%,#16213e 100%)",
  violet: "#8b5cf6", violetDeep: "#7c3aed", violetLight: "#a78bfa", violetPale: "#c4b5fd",
  cyan: "#06b6d4", grad: "linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%)",
  card: "rgba(139,92,246,0.06)", cardBorder: "rgba(139,92,246,0.18)",
  white: "#f8fafc", light: "#e2e8f0", body: "#aab2c0", muted: "#94a3b8", faint: "#6b7280",
  disp: "'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif",
  sans: "'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif",
};
const APP = "/app/login.html";

function PrimaryBtn({ href, children, large }) {
  return <a href={href} className="fx-sheen" style={{ display: "inline-flex", alignItems: "center", gap: 8, background: C.grad, color: "#fff",
    fontFamily: C.sans, fontWeight: 600, fontSize: large ? 16 : 14.5, padding: large ? "15px 30px" : "11px 22px", borderRadius: 10,
    textDecoration: "none", boxShadow: "0 8px 30px rgba(124,58,237,0.35)", position: "relative", overflow: "hidden" }}>{children}</a>;
}
function GhostBtn({ href, children }) {
  return <a href={href} style={{ display: "inline-flex", alignItems: "center", gap: 7, border: "1px solid " + C.cardBorder, color: C.light,
    fontFamily: C.sans, fontWeight: 600, fontSize: 14.5, padding: "10px 20px", borderRadius: 10, textDecoration: "none", background: "rgba(255,255,255,0.02)" }}>{children}</a>;
}
const Eyebrow = ({ children }) => (
  <div style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "6px 13px", borderRadius: 999, background: "rgba(139,92,246,0.1)", border: "1px solid " + C.cardBorder,
    fontFamily: C.disp, fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", color: C.violetLight }}>
    <span style={{ width: 6, height: 6, borderRadius: 999, background: C.cyan, boxShadow: "0 0 8px " + C.cyan }} />{children}</div>
);

function Nav() {
  return (
    <nav style={{ position: "sticky", top: 0, zIndex: 50, backdropFilter: "blur(12px)", background: "rgba(11,11,18,0.7)", borderBottom: "1px solid rgba(139,92,246,0.12)" }}>
      <div style={{ maxWidth: 1140, margin: "0 auto", padding: "14px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
          <span style={{ width: 32, height: 32, borderRadius: 9, background: C.grad, display: "grid", placeItems: "center", color: "#fff", fontFamily: C.disp, fontWeight: 800, fontSize: 17 }}>N</span>
          <span style={{ fontFamily: C.disp, fontSize: 17, fontWeight: 700, color: C.white }}>Nivk.com <span style={{ color: C.violetLight }}>Insights</span></span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a className="lt-navlinks" href="#features" style={{ color: C.muted, textDecoration: "none", fontSize: 14, fontWeight: 500, fontFamily: C.sans }}>Features</a>
          <a className="lt-navlinks" href="#how" style={{ color: C.muted, textDecoration: "none", fontSize: 14, fontWeight: 500, fontFamily: C.sans, marginRight: 6 }}>How it works</a>
          <GhostBtn href={APP}>Sign in</GhostBtn>
          <PrimaryBtn href={APP}>Open dashboard <Icon name="arrow-right" size={16} /></PrimaryBtn>
        </div>
      </div>
    </nav>
  );
}

// A small product preview card (the "dashboard glimpse").
function PreviewCard() {
  const spark = [10,14,12,18,17,23,21,27,26,31,30,36];
  const w = 300, h = 70, max = Math.max(...spark), min = Math.min(...spark);
  const pts = spark.map((v,i) => [ (i/(spark.length-1))*w, h - ((v-min)/(max-min))*(h-10) - 4 ]);
  const line = pts.map((p,i)=>(i?"L":"M")+p[0].toFixed(1)+" "+p[1].toFixed(1)).join(" ");
  const area = line + ` L ${w} ${h} L 0 ${h} Z`;
  const kpi = (label, val, delta) => (
    <div style={{ flex: 1, padding: "12px 13px", background: "rgba(139,92,246,0.07)", border: "1px solid " + C.cardBorder, borderRadius: 12 }}>
      <div style={{ fontSize: 10.5, color: C.muted, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }}>{label}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginTop: 4 }}>
        <span style={{ fontFamily: C.disp, fontSize: 21, fontWeight: 700, color: C.white }}>{val}</span>
        {delta && <span style={{ fontSize: 11.5, fontWeight: 700, color: "#34d399", fontFamily: C.sans }}>{delta}</span>}
      </div>
    </div>
  );
  return (
    <div className="fx-float" style={{ width: "100%", maxWidth: 440, background: "rgba(20,20,31,0.9)", border: "1px solid " + C.cardBorder, borderRadius: 18,
      padding: 18, boxShadow: "0 30px 80px rgba(0,0,0,0.5)" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
          <span style={{ width: 26, height: 26, borderRadius: 7, background: C.grad, display: "grid", placeItems: "center", color: "#fff", fontFamily: C.disp, fontWeight: 700, fontSize: 12 }}>A</span>
          <span style={{ fontSize: 13.5, fontWeight: 700, color: C.white, fontFamily: C.sans }}>Acme Hair Co.</span>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 11, fontWeight: 600, color: "#34d399", background: "rgba(52,211,153,0.12)", borderRadius: 999, padding: "3px 9px" }}>
          <span style={{ width: 5, height: 5, borderRadius: 999, background: "#34d399" }} />Live</span>
      </div>
      <div style={{ display: "flex", gap: 9, marginBottom: 14 }}>
        {kpi("Clicks · 28d", "24.1k", "+16%")}{kpi("Impressions", "421k")}{kpi("AI visibility", "72")}
      </div>
      <div style={{ fontSize: 11, color: C.muted, fontWeight: 600, marginBottom: 6, fontFamily: C.sans }}>Clicks over time</div>
      <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: "block" }} preserveAspectRatio="none">
        <defs><linearGradient id="nlg" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stopColor={C.violet} stopOpacity="0.5"/><stop offset="100%" stopColor={C.violet} stopOpacity="0"/></linearGradient></defs>
        <path d={area} fill="url(#nlg)" />
        <path d={line} fill="none" stroke={C.violet} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

function Hero() {
  const Orb = window.LTQ && window.LTQ.BrandOrb;
  return (
    <header style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 80% at 80% -10%, rgba(139,92,246,0.18) 0%, rgba(0,0,0,0) 55%), radial-gradient(80% 60% at 0% 10%, rgba(6,182,212,0.10) 0%, rgba(0,0,0,0) 50%)", pointerEvents: "none" }} />
      {/* drifting aurora orbs */}
      <div className="nl-orb-a" style={{ position: "absolute", top: "-15%", right: "8%", width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(139,92,246,0.30), transparent 65%)", filter: "blur(50px)", pointerEvents: "none" }} />
      <div className="nl-orb-b" style={{ position: "absolute", bottom: "-25%", left: "-5%", width: 380, height: 380, borderRadius: "50%", background: "radial-gradient(circle, rgba(6,182,212,0.20), transparent 65%)", filter: "blur(55px)", pointerEvents: "none" }} />
      {/* meteors */}
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
        {[[18, 0, 5.5], [42, 1.8, 6.5], [70, 3.2, 5], [88, 0.8, 7]].map((m, i) => (
          <span key={i} className="fx-meteor" style={{ left: m[0] + "%", animationDelay: m[1] + "s", animationDuration: m[2] + "s" }} />
        ))}
      </div>
      <div style={{ position: "relative", maxWidth: 1140, margin: "0 auto", padding: "70px 24px 80px", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }} className="lt-hero-grid">
        <div>
          <Eyebrow>Live from Google Search Console</Eyebrow>
          <h1 style={{ fontFamily: C.disp, fontSize: 50, lineHeight: 1.06, fontWeight: 700, letterSpacing: "-0.02em", margin: "20px 0 0 0", color: C.white }}>
            See exactly how your<br/><span className="nl-shimmer">content is performing</span>
          </h1>
          <p style={{ fontFamily: C.sans, fontSize: 17.5, lineHeight: 1.6, color: C.body, margin: "20px 0 0 0", maxWidth: 500 }}>
            Your live blog-performance dashboard. Clicks, impressions, rankings, rising topics and AI-search visibility, pulled straight from Search Console and updated continuously.
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 30, flexWrap: "wrap" }}>
            <PrimaryBtn href={APP} large>Open your dashboard <Icon name="arrow-right" size={18} /></PrimaryBtn>
            <a href="#features" style={{ display: "inline-flex", alignItems: "center", gap: 7, color: C.light, textDecoration: "none", fontSize: 15, fontWeight: 600, fontFamily: C.sans, padding: "13px 8px" }}>
              <Icon name="play-circle" size={18} style={{ color: C.violetLight }} /> See what's inside</a>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 28, color: C.faint, fontSize: 13, fontFamily: C.sans, flexWrap: "wrap" }}>
            {["Updated hourly","Per-client private","No setup for you"].map((t) => (
              <span key={t} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={14} style={{ color: "#34d399" }} />{t}</span>
            ))}
          </div>
        </div>
        <div style={{ position: "relative", display: "grid", placeItems: "center" }}>
          {Orb && <div style={{ position: "absolute", top: -30, right: -10, opacity: 0.5 }}><Orb size={150} /></div>}
          <PreviewCard />
        </div>
      </div>
    </header>
  );
}

const FEATURES = [
  { icon: "mouse-pointer-click", title: "Exactly what's performing", body: "Every blog post ranked by clicks, impressions, CTR and position, with a per-post drill-down into the queries driving it." },
  { icon: "sparkles", title: "AI-search visibility", body: "A 0-100 score for how visible your content is in AI answers and top rankings, tracked over time as it climbs." },
  { icon: "trending-up", title: "Rising topics & trends", body: "Timeline analytics across today, 7 days, a month, a year, with period-over-period comparison built in." },
  { icon: "bell", title: "Insights in your inbox", body: "Get emailed when a post starts ranking, hits a milestone or your visibility climbs, plus a weekly summary." },
  { icon: "shield-check", title: "Private per client", body: "Each client's Search Console is linked privately and isolated. Your data is yours, end to end." },
  { icon: "file-bar-chart", title: "Reports & exports", body: "Clean reports and one-click CSV exports of posts, queries and topics, ready to share with your team." },
];
function Features() {
  return (
    <section id="features" style={{ maxWidth: 1140, margin: "0 auto", padding: "40px 24px 20px" }}>
      <div style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 38px" }}>
        <Eyebrow>Everything in one place</Eyebrow>
        <h2 style={{ fontFamily: C.disp, fontSize: 34, fontWeight: 700, letterSpacing: "-0.02em", color: C.white, margin: "16px 0 0 0" }}>Your content's performance, made obvious</h2>
        <p style={{ fontFamily: C.sans, fontSize: 16, color: C.body, marginTop: 12, lineHeight: 1.6 }}>No spreadsheets, no guesswork. Sign in and see what's working, what's rising, and what to do next.</p>
      </div>
      <div className="lt-feat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
        {FEATURES.map((f) => (
          <div key={f.title} className="lt-reveal" style={{ background: C.card, border: "1px solid " + C.cardBorder, borderRadius: 16, padding: 24 }}>
            <span style={{ width: 42, height: 42, borderRadius: 11, background: "rgba(139,92,246,0.14)", border: "1px solid " + C.cardBorder, display: "grid", placeItems: "center", marginBottom: 14 }}>
              <Icon name={f.icon} size={20} style={{ color: C.violetLight }} /></span>
            <h3 style={{ fontFamily: C.disp, fontSize: 17, fontWeight: 600, color: C.white, margin: 0 }}>{f.title}</h3>
            <p style={{ fontFamily: C.sans, fontSize: 14, lineHeight: 1.6, color: C.muted, margin: "8px 0 0 0" }}>{f.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

const STEPS = [
  { n: "1", icon: "link", title: "We connect your Search Console", body: "Your team links your property once. Nothing for you to install or configure." },
  { n: "2", icon: "refresh-cw", title: "We pull your data, hourly", body: "Clicks, impressions, rankings and queries sync continuously, always current." },
  { n: "3", icon: "line-chart", title: "You see what's working", body: "Open your dashboard anytime to see performance, AI visibility and what to do next." },
];
function How() {
  return (
    <section id="how" style={{ maxWidth: 1140, margin: "0 auto", padding: "50px 24px" }}>
      <div style={{ textAlign: "center", marginBottom: 36 }}>
        <Eyebrow>How it works</Eyebrow>
        <h2 style={{ fontFamily: C.disp, fontSize: 34, fontWeight: 700, letterSpacing: "-0.02em", color: C.white, margin: "16px 0 0 0" }}>Live in minutes, zero work for you</h2>
      </div>
      <div className="lt-feat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16 }}>
        {STEPS.map((s) => (
          <div key={s.n} className="lt-reveal" style={{ position: "relative", background: C.card, border: "1px solid " + C.cardBorder, borderRadius: 16, padding: 24 }}>
            <span style={{ position: "absolute", top: 20, right: 22, fontFamily: C.disp, fontSize: 38, fontWeight: 700, color: "rgba(139,92,246,0.18)" }}>{s.n}</span>
            <Icon name={s.icon} size={22} style={{ color: C.violetLight }} />
            <h3 style={{ fontFamily: C.disp, fontSize: 17, fontWeight: 600, color: C.white, margin: "14px 0 0 0" }}>{s.title}</h3>
            <p style={{ fontFamily: C.sans, fontSize: 14, lineHeight: 1.6, color: C.muted, margin: "8px 0 0 0" }}>{s.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section style={{ maxWidth: 1140, margin: "0 auto", padding: "30px 24px 70px" }}>
      <div style={{ position: "relative", overflow: "hidden", borderRadius: 24, padding: "54px 40px", textAlign: "center", background: C.navy, border: "1px solid " + C.cardBorder }}>
        <div style={{ position: "absolute", inset: 0, background: "radial-gradient(80% 120% at 50% 0%, rgba(139,92,246,0.25) 0%, rgba(0,0,0,0) 60%)", pointerEvents: "none" }} />
        <div style={{ position: "relative" }}>
          <h2 style={{ fontFamily: C.disp, fontSize: 36, fontWeight: 700, letterSpacing: "-0.02em", color: C.white, margin: 0 }}>See your content's real performance</h2>
          <p style={{ fontFamily: C.sans, fontSize: 16.5, color: C.body, margin: "14px auto 0", maxWidth: 520, lineHeight: 1.6 }}>Sign in to your live dashboard and watch your blog work, in real numbers.</p>
          <div style={{ marginTop: 26, display: "flex", justifyContent: "center" }}><PrimaryBtn href={APP} large>Open your dashboard <Icon name="arrow-right" size={18} /></PrimaryBtn></div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: "1px solid rgba(139,92,246,0.12)" }}>
      <div style={{ maxWidth: 1140, margin: "0 auto", padding: "30px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 26, height: 26, borderRadius: 7, background: C.grad, display: "grid", placeItems: "center", color: "#fff", fontFamily: C.disp, fontWeight: 800, fontSize: 13 }}>N</span>
          <span style={{ fontFamily: C.disp, fontSize: 14.5, fontWeight: 700, color: C.white }}>Nivk.com <span style={{ color: C.violetLight }}>Insights</span></span>
        </div>
        <div style={{ fontFamily: C.sans, fontSize: 13, color: C.faint }}>AI-search visibility for content teams · data.nivk.com</div>
        <a href={APP} style={{ color: C.violetLight, fontFamily: C.sans, fontSize: 13.5, fontWeight: 600, textDecoration: "none" }}>Sign in →</a>
      </div>
    </footer>
  );
}

function NivkLanding() {
  return (
    <div style={{ background: C.bg, minHeight: "100vh", color: C.body }}>
      <style>{`
        .nl-shimmer{ background:linear-gradient(110deg,#fff 18%,#8b5cf6 38%,#06b6d4 52%,#a78bfa 66%,#fff 88%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:nl-shimmer 7s linear infinite; }
        @keyframes nl-shimmer{ to{ background-position:-220% center; } }
        .nl-orb-a{ animation:nl-drift-a 20s ease-in-out infinite; } .nl-orb-b{ animation:nl-drift-b 24s ease-in-out infinite; }
        @keyframes nl-drift-a{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-7%,6%) scale(1.15); } }
        @keyframes nl-drift-b{ 0%,100%{ transform:translate(0,0) scale(1.1); } 50%{ transform:translate(8%,-6%) scale(1); } }
        @media (prefers-reduced-motion: reduce){ .nl-shimmer{ animation:none; background-position:0; } .nl-orb-a,.nl-orb-b{ animation:none; } .fx-meteor{ display:none; } }
      `}</style>
      {window.LTQM && window.LTQM.ScrollProgress && <window.LTQM.ScrollProgress />}
      <Nav /><Hero /><Features /><How /><CTA /><Footer />
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.NivkLanding = NivkLanding;
})();