// LongtailIQ marketing, closing CTA + footer (Peec-style dark)
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = DS;

function DarkBtn({ primary, icon, children, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button onClick={onClick} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ display: "inline-flex", alignItems: "center", gap: 8, height: 48, padding: "0 22px", borderRadius: 10, cursor: "pointer",
        fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 500, border: "1px solid",
        background: primary ? "#fff" : (hover ? "rgba(255,255,255,0.08)" : "transparent"),
        color: primary ? "#0E0E11" : "#fff", borderColor: primary ? "#fff" : "rgba(255,255,255,0.2)",
        transition: "background var(--dur-fast)" }} className={primary ? "fx-sheen" : ""}>
      {icon && <Icon name={icon} size={17} />}{children}
    </button>
  );
}

function CTA() {
  return (
    <section style={{ maxWidth: 1080, margin: "0 auto", padding: "40px 24px 84px" }}>
      <div className="fx-glow-wrap" style={{ borderRadius: 24 }}>
        <div className="fx-glow-rot" />
        <div className="fx-glow-inner" style={{ position: "relative", overflow: "hidden", borderRadius: 23, background: "var(--grad-ink)", color: "#fff", padding: "72px 40px", textAlign: "center" }}>
        {window.LTQM.Meteors && <window.LTQM.Meteors count={16} />}
        <div style={{ position: "relative", zIndex: 2 }}>
        <h2 className="lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.75rem)", fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.06, maxWidth: 640, margin: "0 auto", color: "#fff" }}>
          Start with one keyword.<br/><span style={{ color: "rgba(255,255,255,0.45)" }}>Leave with your next 100 content ideas.</span>
        </h2>
        <p style={{ fontSize: 16, color: "rgba(255,255,255,0.6)", marginTop: 18 }}>Free forever for basic research. No credit card required.</p>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 30 }}>
          <DarkBtn icon="play" onClick={()=>{window.location.href="/#demo";}}>View demo</DarkBtn>
          <DarkBtn primary icon="sparkles" onClick={()=>{window.location.href="https://app.sqseo.com/register";}}>Generate free longtails</DarkBtn>
        </div>
        </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: "Product", l: [["Free Keyword Tool","https://app.sqseo.com/register"],["GEO Queries","/#how"],["AI Search Discovery","https://app.sqseo.com/register"],["Competitor Gaps","https://app.sqseo.com/register"],["Content Briefs","https://app.sqseo.com/register"]] },
    { h: "Use cases", l: [["SEO teams","/#sources"],["Agencies","/#sources"],["Shopify stores","/#sources"],["Founders","/#sources"],["Niche site builders","/#sources"]] },
    { h: "Resources", l: [["Examples","/#demo"],["Pricing","/pricing"],["Blog","/blog"],["Help center","/help"],["API","/api"]] },
    { h: "Company", l: [["About","/about"],["Careers","/careers"],["Privacy","/privacy"],["Terms","/terms"],["Contact","/contact"]] },
  ];
  return (
    <footer style={{ background: "#0A0A0C", color: "#fff" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "56px 24px 36px", display: "grid", gridTemplateColumns: "1.4fr repeat(4, 1fr)", gap: 32 }} className="lt-footer-grid">
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 14 }}>
            <img src="assets/logo-mark.svg" width="26" height="26" alt="SQSEO" style={{ borderRadius: 7 }} />
            <span style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-0.02em", color: "#fff" }}>SQ<span style={{ color: "rgba(255,255,255,0.5)" }}>SEO</span></span>
          </div>
          <p style={{ fontSize: 13, color: "rgba(255,255,255,0.45)", lineHeight: 1.55, maxWidth: 240 }}>Find the longtail searches your competitors ignore. Free keyword & AI-search intelligence for modern search.</p>
        </div>
        {cols.map((c,i)=>(
          <div key={i}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "rgba(255,255,255,0.85)", marginBottom: 14 }}>{c.h}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {c.l.map(([label, href]) => <a key={label} href={href} style={{ fontSize: 13, color: "rgba(255,255,255,0.5)" }}
                onMouseEnter={e=>e.currentTarget.style.color="#fff"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.5)"}>{label}</a>)}
            </div>
          </div>
        ))}
      </div>
      <div style={{ maxWidth: 1200, margin: "0 auto", padding: "20px 24px", borderTop: "1px solid rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 12.5, color: "rgba(255,255,255,0.35)" }}>© 2026 SQSEO · sqseo.com</span>
        <div style={{ display: "flex", gap: 16 }}>
          {[["X","https://x.com/sqseo"],["LinkedIn","https://www.linkedin.com/company/sqseo"],["YouTube","https://www.youtube.com/@sqseo"]].map(([s,url]) =>
            <a key={s} href={url} target="_blank" rel="noopener noreferrer nofollow" aria-label={"SQSEO on "+s} style={{ fontSize: 12.5, fontWeight: 500, color: "rgba(255,255,255,0.45)" }}
            onMouseEnter={e=>e.currentTarget.style.color="#fff"} onMouseLeave={e=>e.currentTarget.style.color="rgba(255,255,255,0.45)"}>{s}</a>)}
        </div>
      </div>
    </footer>
  );
}
window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { CTA, Footer });
})();