// Nivk.com Insights marketing, Pricing page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12 || !window.LTQM || !window.LTQM.PageHeader){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button } = DS;
const { PageHeader, SectionWrap, SectionHead, PillLabel } = window.LTQM;

const TIERS = [
  {
    name: "Demo", price: "Free", cadence: "explore it now", tag: "See it live",
    blurb: "Open the live demo dashboard and see exactly what your content reporting looks like.",
    cta: "Open the demo", ctaVariant: "secondary", href: "/app/login.html",
    feats: ["Live Search Console performance", "Clicks, impressions, CTR & rankings", "Blog posts, queries & topics", "Search presence & GEO overview", "CSV exports"],
  },
  {
    name: "Managed", price: "Custom", cadence: "your content, reported & acted on", tag: "Most popular", featured: true,
    blurb: "We publish, you watch it perform: live reporting plus the moves to grow it, from your strategist.",
    cta: "Talk to us", ctaVariant: "primary", href: "/contact",
    feats: ["Everything in Demo", "13-month history & trends", "Answer-opportunity tracking", "Data-backed recommendations", "Branded + scheduled reports", "Email alerts on every change"],
  },
  {
    name: "Agency", price: "Custom", cadence: "multi-site & multi-brand", tag: "For agencies",
    blurb: "Multiple domains and brands, each tracked separately, with a dedicated strategist.",
    cta: "Talk to sales", ctaVariant: "secondary", href: "/contact",
    feats: ["Everything in Managed", "Unlimited domains per client", "Per-site dashboards & reports", "Team logins & shared notes", "Priority onboarding", "Dedicated strategist"],
  },
];

const COMPARE = [
  ["Live Search Console data", true, true, true],
  ["Clicks, impressions, CTR & rankings", true, true, true],
  ["Blog posts, queries & topics", true, true, true],
  ["CSV exports", true, true, true],
  ["History & demand trends", "Overview", "13 months", "13 months"],
  ["Search presence & GEO tracking", "Overview", true, true],
  ["Data-backed recommendations", false, true, true],
  ["Branded & scheduled reports", false, true, true],
  ["Email alerts", false, true, true],
  ["Domains per client", "1", "1", "Unlimited"],
  ["Dedicated strategist", false, true, true],
  ["Support", "Demo", "Priority", "Dedicated"],
];

function Cell({ v }) {
  if (v === true) return <Icon name="check" size={16} style={{ color: "var(--viz-green)" }} />;
  if (v === false) return <Icon name="minus" size={16} style={{ color: "var(--text-faint)" }} />;
  return <span style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--text-body)" }}>{v}</span>;
}

function TierCard({ t }) {
  const inv = t.featured;
  return (
    <div style={{ display: "flex", flexDirection: "column", padding: 26, borderRadius: 18,
      border: "1px solid " + (inv ? "var(--ink-900)" : "var(--border-subtle)"),
      background: inv ? "var(--ink-900)" : "var(--paper)", color: inv ? "#fff" : "inherit",
      boxShadow: inv ? "var(--shadow-lg)" : "none", position: "relative" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <span style={{ fontSize: 15, fontWeight: 600, color: inv ? "#fff" : "var(--text-strong)" }}>{t.name}</span>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.02em",
          color: inv ? "rgba(255,255,255,0.7)" : "var(--text-muted)",
          border: "1px solid " + (inv ? "rgba(255,255,255,0.22)" : "var(--border-subtle)"),
          borderRadius: 999, padding: "3px 10px", whiteSpace: "nowrap" }}>{t.tag}</span>
      </div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
        <span style={{ fontFamily: "var(--font-mono)", fontSize: 34, fontWeight: 600, letterSpacing: "-0.02em", color: inv ? "#fff" : "var(--ink-900)" }}>{t.price}</span>
      </div>
      <div style={{ fontSize: 12.5, color: inv ? "rgba(255,255,255,0.55)" : "var(--text-faint)", marginBottom: 16 }}>{t.cadence}</div>
      <p style={{ fontSize: 13.5, lineHeight: 1.55, color: inv ? "rgba(255,255,255,0.78)" : "var(--text-muted)", marginBottom: 20, minHeight: 42 }}>{t.blurb}</p>
      {inv
        ? <button onClick={()=>{window.location.href=t.href;}} className="fx-sheen" style={{ height: 44, borderRadius: 10, border: "none", cursor: "pointer", background: "#fff", color: "var(--ink-900)", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, marginBottom: 22 }}>{t.cta}</button>
        : <Button variant={t.ctaVariant} block onClick={()=>{window.location.href=t.href;}} style={{ marginBottom: 22 }}>{t.cta}</Button>}
      <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
        {t.feats.map((f,i)=>(
          <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 9, fontSize: 13, color: inv ? "rgba(255,255,255,0.82)" : "var(--text-body)" }}>
            <Icon name="check" size={15} style={{ color: inv ? "#fff" : "var(--viz-green)", flex: "none", marginTop: 1 }} />{f}
          </div>
        ))}
      </div>
    </div>
  );
}

function Pricing() {
  return (
    <div>
      <PageHeader pill="Pricing" pillIcon="scale"
        title="See the dashboard free."
        gray="Reporting that fits your engagement."
        sub="The live dashboard is free to explore. Reporting and the strategy to grow your content are part of your Nivk.com engagement, talk to us for a plan that fits." />

      <SectionWrap style={{ paddingTop: 52 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 16, alignItems: "stretch" }} className="lt-feat-grid">
          {TIERS.map((t,i)=><TierCard key={i} t={t} />)}
        </div>
        <div style={{ textAlign: "center", marginTop: 22, fontSize: 12.5, color: "var(--text-faint)", display: "flex", justifyContent: "center", gap: 18, flexWrap: "wrap" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={13} style={{ color: "var(--viz-green)" }} />Free demo, no signup</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={13} style={{ color: "var(--viz-green)" }} />Straight from Search Console</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={13} style={{ color: "var(--viz-green)" }} />CSV export on every plan</span>
        </div>
      </SectionWrap>

      {/* Comparison table */}
      <SectionWrap tone="muted">
        <SectionHead pill="Compare plans" pillIcon="table-2" title="Everything, side by side." />
        {/* Phones: the 4-col grid scrolls inside its own card (feature names were
            wrapping 4+ lines in an ~85px column); desktop fits and never scrolls. */}
        <div style={{ border: "1px solid var(--border-subtle)", borderRadius: 16, overflow: "hidden", background: "var(--paper)" }}>
          <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", background: "var(--ink-50)", borderBottom: "1px solid var(--border-subtle)", minWidth: 560 }}>
            <div style={{ padding: "14px 18px", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-faint)" }}>Feature</div>
            {["Free","Pro","Team"].map((h,i)=>(
              <div key={i} style={{ padding: "14px 18px", fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)", textAlign: "center", background: i===1 ? "var(--paper)" : "transparent" }}>{h}</div>
            ))}
          </div>
          {COMPARE.map((row,i)=>(
            <div key={i} style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", borderBottom: i<COMPARE.length-1 ? "1px solid var(--border-subtle)" : "none", minWidth: 560 }}>
              <div style={{ padding: "13px 18px", fontSize: 13, color: "var(--text-body)" }}>{row[0]}</div>
              {[1,2,3].map(c=>(
                <div key={c} style={{ padding: "13px 18px", display: "grid", placeItems: "center", background: c===2 ? "var(--ink-50)" : "transparent" }}><Cell v={row[c]} /></div>
              ))}
            </div>
          ))}
          </div>
        </div>
      </SectionWrap>

      {/* Pricing FAQ */}
      <SectionWrap style={{ maxWidth: 760 }}>
        <SectionHead pill="Questions" pillIcon="help-circle" title="Pricing, plainly." />
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            ["Is the demo really free?", "Yes. Open the live demo dashboard any time, no signup and no credit card, to see exactly how your content reporting would look."],
            ["What's behind a Managed plan?", "We publish content for you and report on it: live Search Console performance, search-presence tracking, data-backed recommendations, and branded scheduled reports, with a strategist turning the data into your next posts."],
            ["Can I track more than one site?", "Yes. The Agency tier tracks unlimited domains per client, each with its own dashboard, reports and alerts, switchable from the top bar."],
            ["How is pricing set?", "Reporting is part of your Nivk.com content engagement, so it depends on scope. Talk to us and we'll put together a plan that fits."],
          ].map(([q,a],i)=>(
            <div key={i} style={{ padding: "18px 20px", borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--text-strong)", marginBottom: 6 }}>{q}</div>
              <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6 }}>{a}</div>
            </div>
          ))}
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Pricing = Pricing;
})();