// SQSEO marketing, shared page scaffolding (headers, eyebrows, section wrap)
// Exposes reusable building blocks on window.LTQM so secondary pages
// (About, Contact, Careers, Pricing, API, Help) all share one visual system.
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = DS;

function PillLabel({ icon, children }) {
  return <span className="lt-pill-label"><Icon name={icon} size={14} style={{ color: "var(--text-muted)" }} />{children}</span>;
}

function PageHeader({ pill, pillIcon, title, gray, sub, children, maxWidth = 880 }) {
  return (
    <header style={{ position: "relative", overflow: "hidden", background: "var(--grad-mesh)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div className="fx-dotgrid" style={{ position: "absolute", inset: 0, opacity: 0.7, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth, margin: "0 auto", padding: "84px 24px 68px", textAlign: "center" }}>
        {pill && <div style={{ marginBottom: 22 }}><PillLabel icon={pillIcon}>{pill}</PillLabel></div>}
        <h1 className="lt-display" style={{ fontSize: "clamp(2.1rem,1.5rem+2vw,3.1rem)", fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.05, color: "var(--ink-900)", margin: 0 }}>
          {title}{gray && <><br/><span style={{ color: "var(--ink-400)" }}>{gray}</span></>}
        </h1>
        {sub && <p style={{ fontSize: 17, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 22, maxWidth: 600, marginLeft: "auto", marginRight: "auto" }}>{sub}</p>}
        {children && <div style={{ marginTop: 28 }}>{children}</div>}
      </div>
    </header>
  );
}

function SectionWrap({ children, style, id, tone }) {
  const band = tone === "muted"
    ? { borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)" }
    : tone === "muted-top"
    ? { borderTop: "1px solid var(--border-subtle)", background: "var(--ink-50)" }
    : {};
  return (
    <div id={id} style={band}>
      <section style={{ maxWidth: 1080, margin: "0 auto", padding: "72px 24px", ...style }}>{children}</section>
    </div>
  );
}

function SectionHead({ pill, pillIcon, title, gray, sub, align = "center" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 640 : "none", margin: align === "center" ? "0 auto 44px" : "0 0 36px" }}>
      {pill && <div style={{ marginBottom: 18 }}><PillLabel icon={pillIcon}>{pill}</PillLabel></div>}
      <h2 className="lt-display" style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.022em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
        {title}{gray && <><br/><span style={{ color: "var(--ink-400)" }}>{gray}</span></>}
      </h2>
      {sub && <p style={{ fontSize: 16, color: "var(--text-muted)", marginTop: 14, lineHeight: 1.55 }}>{sub}</p>}
    </div>
  );
}

// A small framed icon tile used across feature cards
function IconTile({ name, size = 38, inverse }) {
  return (
    <span style={{ display: "inline-grid", placeItems: "center", width: size, height: size, borderRadius: 9,
      background: inverse ? "rgba(255,255,255,0.08)" : "var(--ink-50)",
      border: "1px solid " + (inverse ? "rgba(255,255,255,0.14)" : "var(--border-subtle)"),
      color: inverse ? "#fff" : "var(--text-strong)" }}>
      <Icon name={name} size={Math.round(size*0.46)} strokeWidth={1.8} />
    </span>
  );
}

window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { PillLabel, PageHeader, SectionWrap, SectionHead, IconTile });
})();