// SQSEO 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: "Your first seed, reading results, and the basics of the dashboard." },
  { icon: "search", t: "Keyword research", n: 12, d: "Seeds, surfaces, filters, intent tags, and clustering explained." },
  { icon: "sparkles", t: "AI search & GEO", n: 9, d: "AI Overviews, prompt-level queries, and tracking your visibility." },
  { icon: "download", t: "Exports & API", n: 7, d: "CSV exports, Google Sheets, and pulling data via the API." },
  { icon: "credit-card", t: "Account & billing", n: 10, d: "Plans, upgrades, invoices, seats, and workspace settings." },
  { icon: "life-buoy", t: "Troubleshooting", n: 6, d: "Empty results, slow generation, and login issues." },
];

const POPULAR = [
  "How do I turn one seed keyword into a longtail map?",
  "What do the Demand and Opportunity scores mean?",
  "Which search surfaces does SQSEO cover?",
  "How is AI-visibility tracking calculated?",
  "How do I export a list to CSV or Google Sheets?",
  "What's included free vs. on Pro?",
];

function Help() {
  return (
    <div>
      <PageHeader pill="Help center" pillIcon="life-buoy"
        title="Answers, fast."
        gray="Guides, how-tos, and FAQs."
        sub="Everything about turning seeds into longtail maps, and getting the most out of SQSEO.">
        <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 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." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="lt-src-grid">
          {CATEGORIES.map((c,i)=>(
            <a key={i} href="#" 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 */}
      <SectionWrap tone="muted" style={{ maxWidth: 820 }}>
        <SectionHead pill="Popular" pillIcon="flame" title="Most-read articles." />
        <div style={{ borderRadius: 16, border: "1px solid var(--border-subtle)", background: "var(--paper)", overflow: "hidden" }}>
          {POPULAR.map((q,i)=>(
            <a key={i} href="#" style={{ display: "flex", alignItems: "center", gap: 14, padding: "17px 20px", borderBottom: i<POPULAR.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)" }}>{q}</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;
})();