// SQSEO marketing, About page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button, Avatar } = 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 }) {
  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: 880, margin: "0 auto", padding: "84px 24px 72px", textAlign: "center" }}>
        <div style={{ marginBottom: 22 }}><PillLabel icon={pillIcon}>{pill}</PillLabel></div>
        <h1 style={{ fontSize: "clamp(2.1rem,1.5rem+2vw,3.1rem)", fontWeight: 600, letterSpacing: "-0.03em", 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>}
      </div>
    </header>
  );
}

const PRINCIPLES = [
  { icon: "unlock", t: "Free where it matters", d: "Core keyword and longtail discovery is free forever, no credit card, no seat limits, no trial countdown. We only charge for depth: historical trends, monitoring, and team workspaces." },
  { icon: "sparkles", t: "Built for modern search", d: "People ask full questions, compare options, and search AI assistants. We map demand across Google, AI Overviews, Reddit, YouTube and more, not just a flat list of head terms." },
  { icon: "gem", t: "Expensive-feeling, never hypey", d: "An interface that respects your time and your intelligence. Clean data, honest numbers, and no growth-hack theatrics. Just the searches your competitors missed." },
];

const FREE = ["Unlimited seed keywords", "Hundreds of longtails per seed", "Intent & cluster grouping", "8 search surfaces", "CSV export"];
const PRO = ["Historical demand trends", "AI-visibility tracking", "Competitor monitoring", "Scheduled reports & API", "Team workspaces"];

const TEAM = [
  { name: "Maya Ellison", role: "Co-founder, Product", tone: "accent" },
  { name: "Daniel Roth", role: "Co-founder, Engineering", tone: "ink" },
  { name: "Priya Nair", role: "Search & GEO research", tone: "blue" },
  { name: "Tomás Vega", role: "Design", tone: "ink" },
];

const ROLES = [
  { t: "Senior Product Engineer", loc: "Remote · Full-time" },
  { t: "Search Data Scientist (GEO)", loc: "Remote · Full-time" },
  { t: "Growth Designer", loc: "Remote · Contract" },
];

function Wrap({ children, style, id }) { return <section id={id} style={{ maxWidth: 1080, margin: "0 auto", padding: "76px 24px", ...style }}>{children}</section>; }

function About() {
  return (
    <div>
      <PageHeader pill="About SQSEO" pillIcon="compass"
        title="We built SQSEO for the searches"
        gray="that never show up in keyword tools."
        sub="Longtail demand is hiding in plain sight, in questions, comparisons, and AI prompts. We turn one seed into the map of it." />

      {/* Mission statement */}
      <Wrap style={{ maxWidth: 820, textAlign: "center", paddingBottom: 40 }}>
        <p style={{ fontSize: "clamp(1.4rem,1.1rem+1vw,1.9rem)", fontWeight: 600, letterSpacing: "-0.02em", lineHeight: 1.35, color: "var(--ink-900)", margin: 0 }}>
          Every business has a long tail of demand it can win, specific, high-intent searches the big tools flatten into a handful of head terms.{" "}
          <span style={{ color: "var(--ink-400)" }}>SQSEO exists to surface that tail, group it by intent, and hand it to you as your next hundred content ideas.</span>
        </p>
      </Wrap>

      {/* Principles */}
      <Wrap style={{ paddingTop: 24 }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div style={{ marginBottom: 18 }}><PillLabel icon="list-checks">What we believe</PillLabel></div>
          <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
            Three principles<br/><span style={{ color: "var(--ink-400)" }}>behind everything we ship.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 14 }} className="lt-feat-grid">
          {PRINCIPLES.map((p,i)=>(
            <div key={i} style={{ padding: 24, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <span style={{ display: "inline-grid", placeItems: "center", width: 38, height: 38, borderRadius: 9, background: "var(--ink-50)", border: "1px solid var(--border-subtle)", color: "var(--text-strong)", marginBottom: 16 }}><Icon name={p.icon} size={18} strokeWidth={1.8} /></span>
              <div style={{ fontSize: 15.5, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>{p.t}</div>
              <div style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 8 }}>{p.d}</div>
            </div>
          ))}
        </div>
      </Wrap>

      {/* Free vs Pro */}
      <div style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
        <Wrap>
          <div style={{ textAlign: "center", marginBottom: 44 }}>
            <div style={{ marginBottom: 18 }}><PillLabel icon="scale">Free vs Pro</PillLabel></div>
            <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
              The core tool is free forever.<br/><span style={{ color: "var(--ink-400)" }}>Pro only adds depth.</span>
            </h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, maxWidth: 760, margin: "0 auto" }} className="lt-feat-grid">
            <div style={{ padding: 26, borderRadius: 16, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>Free</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--viz-green)", border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "2px 9px", whiteSpace: "nowrap" }}>$0 forever</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {FREE.map((f,i)=>(<div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "var(--text-body)" }}><Icon name="check" size={15} style={{ color: "var(--viz-green)" }} />{f}</div>))}
              </div>
            </div>
            <div style={{ padding: 26, borderRadius: 16, border: "1px solid var(--ink-900)", background: "var(--ink-900)", color: "#fff" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 16 }}>
                <span style={{ fontSize: 15, fontWeight: 600 }}>Pro</span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(255,255,255,0.65)", border: "1px solid rgba(255,255,255,0.2)", borderRadius: 999, padding: "2px 9px", whiteSpace: "nowrap" }}>depth features</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {PRO.map((f,i)=>(<div key={i} style={{ display: "flex", alignItems: "center", gap: 9, fontSize: 13.5, color: "rgba(255,255,255,0.82)" }}><Icon name="check" size={15} style={{ color: "#fff" }} />{f}</div>))}
              </div>
            </div>
          </div>
        </Wrap>
      </div>

      {/* Team */}
      <Wrap>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div style={{ marginBottom: 18 }}><PillLabel icon="users">The team</PillLabel></div>
          <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
            A small team<br/><span style={{ color: "var(--ink-400)" }}>obsessed with search.</span>
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }} className="lt-src-grid">
          {TEAM.map((m,i)=>(
            <div key={i} style={{ padding: 22, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)", textAlign: "center" }}>
              <div style={{ display: "flex", justifyContent: "center", marginBottom: 14 }}><Avatar name={m.name} tone={m.tone} size={52} /></div>
              <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--text-strong)" }}>{m.name}</div>
              <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 4 }}>{m.role}</div>
            </div>
          ))}
        </div>
      </Wrap>

      {/* Careers */}
      <div id="careers" style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
        <Wrap style={{ maxWidth: 820 }}>
          <div style={{ textAlign: "center", marginBottom: 40 }}>
            <div style={{ marginBottom: 18 }}><PillLabel icon="briefcase">Careers</PillLabel></div>
            <h2 style={{ fontSize: "clamp(1.8rem,1.3rem+1.5vw,2.4rem)", fontWeight: 600, letterSpacing: "-0.03em", color: "var(--ink-900)", lineHeight: 1.1, margin: 0 }}>
              We’re hiring.<br/><span style={{ color: "var(--ink-400)" }}>Come build the search map.</span>
            </h2>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {ROLES.map((r,i)=>(
              <a key={i} href="/careers" style={{ display: "flex", alignItems: "center", gap: 14, padding: "18px 20px", 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={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: "var(--text-strong)" }}>{r.t}</div>
                  <div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 3 }}>{r.loc}</div>
                </div>
                <Icon name="arrow-right" size={17} style={{ color: "var(--text-faint)" }} />
              </a>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 26, fontSize: 13.5, color: "var(--text-muted)" }}>
            Don’t see your role? <a href="/careers" style={{ color: "var(--ink-900)", fontWeight: 500 }}>See all open roles →</a>
          </div>
        </Wrap>
      </div>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.About = About;
})();