// SQSEO marketing, Blog index (pre-launch "field notes" state)
(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;

// Topics in the pipeline. Shown as a preview of what's coming, not as live posts.
const TOPICS = [
  { icon: "search", tag: "Keyword research", t: "How to read a longtail map", d: "Turning a single seed into a clustered content plan with clear buyer intent." },
  { icon: "sparkles", tag: "GEO", t: "Getting cited in AI Overviews", d: "Structuring pages so assistants quote you, not just rank you." },
  { icon: "radar", tag: "AI search", t: "Prompt-level discovery, explained", d: "Finding the questions people actually ask ChatGPT and Perplexity about your niche." },
  { icon: "target", tag: "Strategy", t: "Competitor gap analysis that converts", d: "Spotting the buyer-intent searches your rivals never targeted." },
  { icon: "file-text", tag: "Workflow", t: "From clusters to briefs in an afternoon", d: "A repeatable pipeline from keyword map to publish-ready outline." },
  { icon: "store", tag: "Ecommerce", t: "Longtail SEO for Shopify stores", d: "Product, collection, and question keywords that drive qualified traffic." },
];

function Blog() {
  return (
    <div>
      <PageHeader pill="Field notes" pillIcon="pen-line"
        title="The SQSEO blog."
        gray="Longtail and GEO playbooks, launching soon."
        sub="Practical writing on longtail keyword research, AI-search visibility, and turning hidden demand into content that ranks and gets cited.">
        <Button variant="primary" size="lg" leadingIcon="sparkles" onClick={()=>{window.location.href="https://app.sqseo.com/register";}}>Try the free keyword tool</Button>
      </PageHeader>

      <SectionWrap>
        <SectionHead pill="In the pipeline" pillIcon="list" title="What we're writing about." sub="A preview of the playbooks landing here first." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="lt-src-grid">
          {TOPICS.map((p,i)=>(
            <div key={i} style={{ display: "block", padding: 22, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <IconTile name={p.icon} size={36} />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em", textTransform: "uppercase", color: "var(--text-faint)" }}>{p.tag}</span>
              </div>
              <div style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{p.t}</div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 6 }}>{p.d}</div>
            </div>
          ))}
        </div>
      </SectionWrap>

      <SectionWrap tone="muted" 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="mail" size={44} />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)" }}>Want the first posts?</div>
            <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55, marginTop: 4 }}>The blog is launching soon. In the meantime, the core keyword tool is free forever.</div>
          </div>
          <Button variant="primary" leadingIcon="arrow-right" onClick={()=>{window.location.href="https://app.sqseo.com/register";}}>Start researching</Button>
        </div>
      </SectionWrap>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Blog = Blog;
})();