// Nivk.com Insights marketing, Help Center 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, IconTile } = window.LTQM;

const CATEGORIES = [
  { icon: "rocket", t: "Getting started", n: 8, d: "Logging in, reading your dashboard, and connecting Search Console." },
  { icon: "line-chart", t: "Performance & rankings", n: 12, d: "Clicks, impressions, CTR, average position, and what each one means." },
  { icon: "sparkles", t: "AI search & GEO", n: 9, d: "AI Overviews, AI-search visibility, and protecting your clicks." },
  { icon: "file-bar-chart", t: "Reports & exports", n: 7, d: "Shareable reports, scheduled emails, and CSV exports." },
  { icon: "globe", t: "Domains & sites", n: 6, d: "Switching between your domains and per-site reporting." },
  { icon: "life-buoy", t: "Troubleshooting", n: 5, d: "No data yet, Search Console access, and login issues." },
];

const POPULAR = [
  "How do I read my content performance?",
  "Which searches am I already winning, and where do the numbers come from?",
  "How do I connect Google Search Console?",
  "How do I create and schedule a report?",
  "How do I export my data to CSV?",
  "How do I switch between my domains?",
];

function Help() {
  const [q, setQ] = React.useState("");
  const searchRef = React.useRef(null);
  // The "/" hint focuses search (unless already typing in a field).
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "/" && !/^(input|textarea|select)$/i.test((e.target.tagName||""))) { e.preventDefault(); searchRef.current && searchRef.current.focus(); } };
    document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey);
  }, []);
  const t = q.trim().toLowerCase();
  // Every help topic routes to Contact (a managed service — a person answers),
  // carrying the question as context so the form/inbox knows what was asked.
  const ask = (subject) => "/contact?q=" + encodeURIComponent(subject);
  const cats = CATEGORIES.filter((c) => !t || (c.t + " " + c.d).toLowerCase().includes(t));
  const pop = POPULAR.filter((x) => !t || x.toLowerCase().includes(t));
  return (
    <div>
      <PageHeader pill="Help center" pillIcon="life-buoy"
        title="Answers, fast."
        gray="Guides, how-tos, and FAQs."
        sub="Everything about reading your dashboard and getting the most out of Nivk.com Insights.">
        <div style={{ maxWidth: 520, margin: "0 auto", display: "flex", alignItems: "center", gap: 10, height: 50, padding: "0 16px", background: "var(--paper)", border: "1px solid var(--border-strong)", borderRadius: 12, boxShadow: "var(--shadow-sm)" }}>
          <Icon name="search" size={18} style={{ color: "var(--text-faint)" }} />
          <input ref={searchRef} value={q} onChange={(e)=>setQ(e.target.value)} placeholder="Search help articles…" style={{ flex: 1, border: "none", outline: "none", background: "transparent", fontFamily: "var(--font-sans)", fontSize: 14.5, color: "var(--text-strong)" }} />
          <kbd style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)", background: "var(--ink-50)", border: "1px solid var(--border-subtle)", borderRadius: 6, padding: "2px 7px" }}>/</kbd>
        </div>
      </PageHeader>

      {/* Categories */}
      <SectionWrap>
        <SectionHead pill="Browse" pillIcon="layout-grid" title="Find your way around." />
        {cats.length === 0 && pop.length === 0
          ? <div style={{ textAlign: "center", padding: "30px 16px", color: "var(--text-muted)", fontSize: 14 }}>No matches for “{q}”. <a href={ask(q)} style={{ color: "var(--accent-600)", fontWeight: 600 }}>Ask us instead →</a></div>
          : <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="lt-src-grid">
          {cats.map((c,i)=>(
            <a key={i} href={ask(c.t)} style={{ display: "block", padding: 22, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)", transition: "border-color var(--dur-base), transform var(--dur-base)" }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--ink-200)";e.currentTarget.style.transform="translateY(-2px)";}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--border-subtle)";e.currentTarget.style.transform="none";}}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <IconTile name={c.icon} size={36} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-faint)" }}>{c.n} articles</span>
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{c.t}</div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 6 }}>{c.d}</div>
            </a>
          ))}
        </div>}
      </SectionWrap>

      {/* Popular articles */}
      {pop.length > 0 && <SectionWrap tone="muted" style={{ maxWidth: 820 }}>
        <SectionHead pill="Popular" pillIcon="flame" title="Most-read questions." />
        <div style={{ borderRadius: 16, border: "1px solid var(--border-subtle)", background: "var(--paper)", overflow: "hidden" }}>
          {pop.map((qq,i)=>(
            <a key={i} href={ask(qq)} style={{ display: "flex", alignItems: "center", gap: 14, padding: "17px 20px", borderBottom: i<pop.length-1 ? "1px solid var(--border-subtle)" : "none", transition: "background var(--dur-fast)" }}
              onMouseEnter={e=>e.currentTarget.style.background="var(--ink-50)"} onMouseLeave={e=>e.currentTarget.style.background="transparent"}>
              <Icon name="file-text" size={16} style={{ color: "var(--text-faint)", flex: "none" }} />
              <span style={{ flex: 1, fontSize: 14, color: "var(--text-body)" }}>{qq}</span>
              <Icon name="arrow-up-right" size={15} style={{ color: "var(--text-faint)", flex: "none" }} />
            </a>
          ))}
        </div>
      </SectionWrap>}

      {/* Still stuck */}
      <SectionWrap style={{ maxWidth: 820 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 20, padding: "26px 28px", borderRadius: 18, border: "1px solid var(--border-subtle)", background: "var(--paper)", flexWrap: "wrap" }}>
          <IconTile name="message-circle" size={44} />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)" }}>Still stuck?</div>
            <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 4 }}>A real person replies within one business day, no ticket maze.</div>
          </div>
          <Button variant="primary" leadingIcon="send" onClick={()=>{window.location.href="/contact";}}>Contact support</Button>
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Help = Help;
})();