// SQSEO marketing, Contact page
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button, Input, Select } = 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 64px", 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: 580, marginLeft: "auto", marginRight: "auto" }}>{sub}</p>}
      </div>
    </header>
  );
}

function Field({ label, hint, children }) {
  return (
    <label style={{ display: "block" }}>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 7 }}>
        <span style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap" }}>{label}</span>
        {hint && <span style={{ fontSize: 11.5, color: "var(--text-faint)", whiteSpace: "nowrap" }}>{hint}</span>}
      </div>
      {children}
    </label>
  );
}

const CHANNELS = [
  { icon: "life-buoy", t: "Support", d: "Stuck on a result or an export? We answer within a day.", link: "support@sqseo.com" },
  { icon: "gem", t: "Pro & sales", d: "Workspaces, API access, and team plans for agencies.", link: "sales@sqseo.com" },
  { icon: "newspaper", t: "Press & partnerships", d: "Data stories, integrations, and co-marketing.", link: "press@sqseo.com" },
];

function ContactForm() {
  const [sent, setSent] = React.useState(false);
  const taStyle = {
    width: "100%", minHeight: 120, resize: "vertical", boxSizing: "border-box",
    fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.55, color: "var(--text-strong)",
    background: "var(--paper)", border: "1px solid var(--border-strong)", borderRadius: 10,
    padding: "11px 13px", outline: "none", transition: "border-color var(--dur-fast), box-shadow var(--dur-fast)",
  };
  if (sent) {
    return (
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", minHeight: 420, padding: 32, borderRadius: 18, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
        <span style={{ display: "inline-grid", placeItems: "center", width: 52, height: 52, borderRadius: 999, background: "var(--ink-50)", border: "1px solid var(--border-subtle)", color: "var(--viz-green)", marginBottom: 18 }}><Icon name="check" size={24} /></span>
        <div style={{ fontSize: 18, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>Message sent</div>
        <p style={{ fontSize: 14, color: "var(--text-muted)", lineHeight: 1.6, marginTop: 8, maxWidth: 320 }}>Thanks, we’ll get back to you within one business day. In the meantime, the core tool is free to use.</p>
        <div style={{ marginTop: 22, display: "flex", gap: 10 }}>
          <Button variant="secondary" leadingIcon="arrow-left" onClick={()=>setSent(false)}>Send another</Button>
          <Button variant="primary" leadingIcon="sparkles" onClick={()=>{window.location.href="https://app.sqseo.com/register";}}>Open the app</Button>
        </div>
      </div>
    );
  }
  return (
    <form onSubmit={(e)=>{e.preventDefault();setSent(true);}}
      style={{ padding: 26, borderRadius: 18, border: "1px solid var(--border-subtle)", background: "var(--paper)", boxShadow: "var(--shadow-sm)", display: "flex", flexDirection: "column", gap: 16 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }} className="lt-feat-grid">
        <Field label="Name"><Input placeholder="Jordan Lee" /></Field>
        <Field label="Work email"><Input leadingIcon="mail" placeholder="you@company.com" /></Field>
      </div>
      <Field label="What’s this about?"><Select leadingIcon="tag" options={["Product question","Pro & sales","Press & partnerships","Careers","Something else"]} /></Field>
      <Field label="Message" hint="Tell us what you’re trying to find">
        <textarea style={taStyle} placeholder="We’re a Shopify store trying to map buyer-intent longtails for our new collection…"
          onFocus={e=>{e.currentTarget.style.borderColor="var(--accent-500)";e.currentTarget.style.boxShadow="0 0 0 4px var(--accent-100)";}}
          onBlur={e=>{e.currentTarget.style.borderColor="var(--border-strong)";e.currentTarget.style.boxShadow="none";}} />
      </Field>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
        <span style={{ fontSize: 12, color: "var(--text-faint)", display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="lock" size={13} />We never share your email.</span>
        <Button variant="primary" leadingIcon="send" type="submit">Send message</Button>
      </div>
    </form>
  );
}

function Contact() {
  return (
    <div>
      <PageHeader pill="Contact" pillIcon="message-circle"
        title="Talk to us."
        gray="We read every message."
        sub="Questions about results, Pro plans, or a partnership, send a note and a real person replies." />

      <section style={{ maxWidth: 1080, margin: "0 auto", padding: "56px 24px 80px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.25fr 0.9fr", gap: 28, alignItems: "start" }} className="lt-feat-grid">
          <ContactForm />

          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {CHANNELS.map((c,i)=>(
              <div key={i} style={{ padding: 20, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--paper)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 11, marginBottom: 10 }}>
                  <span style={{ display: "inline-grid", placeItems: "center", width: 34, height: 34, borderRadius: 9, background: "var(--ink-50)", border: "1px solid var(--border-subtle)", color: "var(--text-strong)" }}><Icon name={c.icon} size={16} strokeWidth={1.8} /></span>
                  <span style={{ fontSize: 14.5, fontWeight: 600, color: "var(--text-strong)", whiteSpace: "nowrap" }}>{c.t}</span>
                </div>
                <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.55, marginBottom: 10 }}>{c.d}</div>
                <a href={"mailto:" + c.link} style={{ fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--ink-900)", display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <Icon name="at-sign" size={13} style={{ color: "var(--accent-500)" }} />{c.link}
                </a>
              </div>
            ))}

            <div style={{ padding: 20, borderRadius: 14, border: "1px solid var(--border-subtle)", background: "var(--ink-50)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <Icon name="clock" size={15} style={{ color: "var(--text-muted)" }} />
                <span style={{ fontSize: 13.5, fontWeight: 600, color: "var(--text-strong)" }}>Response time</span>
              </div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", lineHeight: 1.55 }}>We reply within one business day. The core keyword tool is always free, no ticket required.</div>
              <div style={{ display: "flex", gap: 14, marginTop: 14 }}>
                {[["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: "var(--text-muted)" }}
                    onMouseEnter={e=>e.currentTarget.style.color="var(--ink-900)"} onMouseLeave={e=>e.currentTarget.style.color="var(--text-muted)"}>{s}</a>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.LTQM = window.LTQM || {};
window.LTQM.Contact = Contact;
})();