// Nivk.com Insights marketing, About page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button } = DS;

function PillLabel({ icon, children }) {
  return <span className="lt-pill-label"><Icon name={icon} size={14} style={{ color: "var(--text-muted)" }} />{children}</span>;
}

function PageHeader({ pill, pillIcon, title, gray, sub }) {
  return (
    <header style={{ position: "relative", overflow: "hidden", background: "var(--grad-mesh)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="fx-dotgrid" style={{ position: "absolute", inset: 0, opacity: 0.7, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: 880, margin: "0 auto", padding: "84px 24px 72px", textAlign: "center" }}>
        <div style={{ marginBottom: 22 }}><PillLabel icon={pillIcon}>{pill}</PillLabel></div>
        <h1 style={{ fontSize: "clamp(2.1rem,1.5rem+2vw,3.1rem)", fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1.05, color: "var(--ink-900)", margin: 0 }}>
          {title}{gray && <><br/><span style={{ color: "var(--ink-400)" }}>{gray}</span></>}
        </h1>
        {sub && <p style={{ fontSize: 17, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 22, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{sub}</p>}
      </div>
    </header>
  );
}

const PRINCIPLES = [
  { icon: "line-chart", t: "Your data, made obvious", d: "Every number comes straight from Google Search Console, the source of truth. Clicks, impressions, rankings and trends, with nothing fabricated and nothing to second-guess." },
  { icon: "sparkles", t: "Built for AI search too", d: "Search isn't just ten blue links anymore. We track how visible your content is in AI Overviews and AI assistants, so you can see where the clicks are going, not just where you rank." },
  { icon: "gem", t: "Reporting that drives action", d: "A clean, fast dashboard that respects your time, plus data-backed recommendations that turn the numbers into your next posts and refreshes." },
];

const SEEN = ["Clicks, impressions, CTR & rankings", "Blog posts, search queries & topics", "AI-search (GEO) visibility", "Branded & scheduled reports", "CSV exports"];
const MANAGED = ["13-month history & trends", "Data-backed recommendations", "Email alerts on every change", "Unlimited domains per client", "A strategist turning data into content"];

function Wrap({ children, style, id }) { return <section id={id} style={{ maxWidth: 1080, margin: "0 auto", padding: "76px 24px", ...style }}>{children}</section>; }

function About() {
  return (
    <div>
      <PageHeader pill="About Nivk.com Insights" pillIcon="compass"
        title="See exactly how your"
        gray="content is performing."
        sub="Nivk.com Insights is the live performance dashboard behind Nivk.com. We publish content for our clients, and Insights shows them precisely how it ranks and gets found, straight from Google Search Console." />

      {/* Mission statement */}
      <Wrap style={{ maxWidth: 820, textAlign: "center", paddingBottom: 40 }}>
        <p style={{ fontSize: "clamp(1.4rem,1.1rem+1vw,1.9rem)", fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.35, color: "var(--ink-900)", margin: 0 }}>
          Content marketing only works when you can see what's working.{" "}
          <span style={{ color: "var(--ink-400)" }}>Nivk.com Insights turns your Search Console and AI-search data into a clear picture of what to do next.</span>
        </p>
      </Wrap>

      {/* Principles */}
      <Wrap style={{ paddingTop: 24 }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div style={{ marginBottom: 18 }}><PillLabel icon="list-checks">What we believe</PillLabel></div>
          <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
            Three principles<br/><span style={{ color: "var(--ink-400)" }}>behind everything we ship.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="lt-feat-grid">
          {PRINCIPLES.map((p,i)=>(
            <div key={i} style={{ padding: 24, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <span style={{ display: "inline-grid", placeItems: "center", width: 38, height: 38, borderRadius: 9, background: "var(--ink-50)", border: "1px solid var(--border-subtle)", color: "var(--text-strong)", marginBottom: 16 }}><Icon name={p.icon} size={18} strokeWidth={1.8} /></span>
              <div style={{ fontSize: 15.5, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{p.t}</div>
              <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 8 }}>{p.d}</div>
            </div>
          ))}
        </div>
      </Wrap>

      {/* What you see vs managed */}
      <div style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
        <Wrap>
          <div style={{ textAlign: "center", marginBottom: 44 }}>
            <div style={{ marginBottom: 18 }}><PillLabel icon="scale">What you get</PillLabel></div>
            <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
              The dashboard is free to explore.<br/><span style={{ color: "var(--ink-400)" }}>Managed reporting does the rest.</span>
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 760, margin: "0 auto" }} className="lt-feat-grid">
            <div style={{ padding: 26, borderRadius: 16, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>In the dashboard</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--viz-green)", border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "2px 9px", whiteSpace: "nowrap" }}>free to explore</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {SEEN.map((f,i)=>(<div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "var(--text-body)" }}><Icon name="check" size={15} style={{ color: "var(--viz-green)" }} />{f}</div>))}
              </div>
            </div>
            <div style={{ padding: 26, borderRadius: 16, border: "1px solid var(--ink-900)", background: "var(--ink-900)", color: "#fff" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                <span style={{ fontSize: 15, fontWeight: 600 }}>With managed</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.65)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 999, padding: "2px 9px", whiteSpace: "nowrap" }}>your engagement</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {MANAGED.map((f,i)=>(<div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "rgba(255,255,255,0.82)" }}><Icon name="check" size={15} style={{ color: "#fff" }} />{f}</div>))}
              </div>
            </div>
          </div>
        </Wrap>
      </div>

      {/* Built by Nivk.com */}
      <Wrap style={{ maxWidth: 820, textAlign: "center" }}>
        <div style={{ marginBottom: 18 }}><PillLabel icon="building-2">Behind it</PillLabel></div>
        <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
          Built by Nivk.com.<br/><span style={{ color: "var(--ink-400)" }}>Obsessed with how content gets found.</span>
        </h2>
        <p style={{ fontSize: 15.5, color: "var(--text-muted)", lineHeight: 1.65, marginTop: 22 }}>
          Nivk.com builds and grows content for its clients. We built Insights so every client can see the results in real time, and so our strategists can act on the data instead of guessing. Want it for your site?
        </p>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 26 }}>
          <Button variant="primary" leadingIcon="sparkles" onClick={()=>{window.location.href="/app/login.html";}}>Open the demo</Button>
          <Button variant="secondary" leadingIcon="message-circle" onClick={()=>{window.location.href="/contact";}}>Talk to us</Button>
        </div>
      </Wrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.About = About;
})();