// SQSEO 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: "Free", price: "$0", cadence: "forever", tag: "The core tool",
    blurb: "Everything you need to map longtail demand from a single seed.",
    cta: "Generate keywords free", ctaVariant: "secondary", href: "https://app.sqseo.com/register",
    feats: ["Unlimited seed keywords", "Hundreds of longtails per seed", "8 search surfaces", "Intent & cluster grouping", "CSV export", "Community support"],
  },
  {
    name: "Pro", price: "$29", cadence: "per month, billed yearly", tag: "Most popular", featured: true,
    blurb: "Add the depth: real volumes, AI-visibility, and competitor monitoring.",
    cta: "Start Pro", ctaVariant: "primary", href: "/contact",
    feats: ["Everything in Free", "Real Google Ads search volumes", "Historical demand trends", "AI-visibility tracking", "Competitor monitoring", "Priority support"],
  },
  {
    name: "Team", price: "$99", cadence: "per month, billed yearly", tag: "For agencies",
    blurb: "Shared workspaces, API access, and seats for the whole team.",
    cta: "Talk to sales", ctaVariant: "secondary", href: "/contact",
    feats: ["Everything in Pro", "5 team seats included", "Shared saved lists", "API access", "SSO & roles", "Dedicated onboarding"],
  },
];

const COMPARE = [
  ["Seed keywords", "Unlimited", "Unlimited", "Unlimited"],
  ["Longtails per seed", "Hundreds", "Hundreds", "Hundreds"],
  ["Search surfaces", "8", "8", "8"],
  ["Intent & cluster grouping", true, true, true],
  ["CSV export", true, true, true],
  ["Historical demand trends", false, true, true],
  ["AI-visibility tracking", false, true, true],
  ["Competitor monitoring", false, true, true],
  ["Scheduled reports", false, true, true],
  ["API access", false, false, true],
  ["Team seats", "-", "1", "5+"],
  ["Support", "Community", "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="Free where it matters."
        gray="Pro only when you need depth."
        sub="The core keyword and longtail tool is free forever. Upgrade only for history, monitoring, and team workflows." />

      <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)" }} />No credit card for Free</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={13} style={{ color: "var(--viz-green)" }} />Cancel anytime</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." />
        <div style={{ border: "1px solid var(--border-subtle)", borderRadius: 16, overflow: "hidden", background: "var(--paper)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr 1fr 1fr", background: "var(--ink-50)", borderBottom: "1px solid var(--border-subtle)" }}>
            <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" }}>
              <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>
      </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 free plan really free forever?", "Yes. Seed keywords, longtail generation across all 8 surfaces, intent clustering, and CSV export stay free with no time limit and no credit card."],
            ["What exactly is behind Pro?", "Depth, not the core tool: historical demand trends, AI-visibility tracking, competitor monitoring, and scheduled reports."],
            ["Can I switch plans later?", "Anytime. Upgrade for a busy research sprint and downgrade when you're done, your saved lists stay put."],
            ["Do you offer annual billing?", "Pro and Team prices shown are billed yearly. Monthly billing is available at a small premium."],
          ].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;
})();