// SQSEO marketing, social proof (honest by design).
// SQSEO is a new product, so we do NOT fabricate testimonials or traction metrics
// (house rule). This section shows only verifiable proof:
//   - a CaseStudyWall driven by REAL data (window.LTQ_PROOF). Empty by default → an
//     honest "reserved for real results" state instead of invented quotes. When real,
//     attributable case studies/quotes exist, drop them into window.LTQ_PROOF and the
//     BLG-style metric/quote marquee lights up automatically.
//   - three trust points anyone can verify today (GSC-grounded, transparent estimates,
//     free core).
// Built on the shared motion helpers (LTQFX: Reveal, RevealGroup, Marquee).
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12 || !window.LTQM || !window.LTQM.RevealGroup){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon, Button } = DS;
const M = window.LTQM;

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

// Verifiable, true differentiators (no invented numbers, no attributed quotes).
// Built at render time so it localizes.
function trustData(t) {
  return [
    { icon: "radar", t: t("trust.1.t"), d: t("trust.1.d") },
    { icon: "scale", t: t("trust.2.t"), d: t("trust.2.d") },
    { icon: "gift", t: t("trust.3.t"), d: t("trust.3.d") },
  ];
}

function TrustCard({ icon, t, d }) {
  return (
    <div style={{ height: "100%", padding: 22, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-lg)", background: "var(--surface-card)", boxShadow: "var(--shadow-sm)" }}>
      <span style={{ display: "grid", placeItems: "center", width: 40, height: 40, borderRadius: 11, background: "var(--accent-50)", color: "var(--accent-600)", marginBottom: 14 }}>
        <Icon name={icon} size={19} strokeWidth={1.8} />
      </span>
      <div style={{ fontSize: 16, fontWeight: 700, color: "var(--text-strong)", marginBottom: 6, letterSpacing: "-0.01em" }}>{t}</div>
      <p style={{ fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.6 }}>{d}</p>
    </div>
  );
}

// A real case-study / testimonial card (only ever rendered from real data).
function ProofCard({ item }) {
  const accent = "var(--accent-600)";
  return (
    <div style={{ flex: "none", width: 330, padding: 20, border: "1px solid var(--border-subtle)", borderRadius: "var(--r-lg)", background: "var(--paper)", boxShadow: "var(--shadow-sm)" }}>
      {item.metric && (
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 10 }}>
          <span className="lt-num" style={{ fontFamily: "var(--font-mono)", fontSize: 26, fontWeight: 700, color: accent }}>{item.metric}</span>
          {item.metricLabel && <span style={{ fontSize: 12.5, color: "var(--text-faint)" }}>{item.metricLabel}</span>}
        </div>
      )}
      {item.quote && <p style={{ fontSize: 14, color: "var(--text-strong)", lineHeight: 1.5, fontWeight: 500 }}>“{item.quote}”</p>}
      {(item.name || item.role) && (
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 14 }}>
          <span style={{ width: 30, height: 30, borderRadius: 999, background: "var(--ink-100)", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700, color: "var(--text-muted)" }}>{(item.name || "?")[0]}</span>
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--text-strong)" }}>{item.name}</div>
            <div style={{ fontSize: 11.5, color: "var(--text-faint)" }}>{item.role}</div>
          </div>
        </div>
      )}
    </div>
  );
}

// Real data lives on window.LTQ_PROOF (array). Empty → honest reserved state.
function CaseStudyWall({ items }) {
  const t = window.LTQM.t;
  const data = items || (typeof window !== "undefined" && window.LTQ_PROOF) || [];
  if (data.length) {
    const row = [...data, ...data];
    return (
      <M.Marquee speed={Math.max(22, data.length * 6)} gap={16} className="lt-reveal">
        {row.map((it, i) => <ProofCard key={i} item={it} />)}
      </M.Marquee>
    );
  }
  // Honest empty state — we reserve this space for real, attributable results.
  return (
    <div className="lt-reveal" style={{ maxWidth: 620, margin: "0 auto", textAlign: "center", padding: "34px 28px", border: "1px dashed var(--border-strong)", borderRadius: "var(--r-2xl)", background: "var(--surface-card)" }}>
      <span style={{ display: "inline-grid", placeItems: "center", width: 52, height: 52, borderRadius: 16, background: "var(--accent-50)", color: "var(--accent-600)", marginBottom: 14 }}>
        <Icon name="sprout" size={24} strokeWidth={1.7} />
      </span>
      <h3 style={{ fontFamily: "var(--font-display)", fontSize: 21, fontWeight: 700, letterSpacing: "-0.02em", color: "var(--text-strong)" }}>{t("proof.empty.title")}</h3>
      <p style={{ fontSize: 14.5, color: "var(--text-muted)", lineHeight: 1.6, margin: "10px auto 18px", maxWidth: 480 }}>
        {t("proof.empty.body")}
      </p>
      <Button variant="primary" size="lg" className="fx-sheen" trailingIcon="arrow-right" onClick={()=>{window.location.href="/app/register.html";}}>{t("proof.empty.cta")}</Button>
      <div style={{ marginTop: 14, fontSize: 12, color: "var(--text-faint)", display: "inline-flex", alignItems: "center", gap: 6 }}>
        <Icon name="shield-check" size={13} style={{ color: "var(--viz-green)" }} /> {t("proof.empty.note")}
      </div>
    </div>
  );
}

function SocialProof() {
  const t = M.t;
  const TRUST = trustData(t);
  return (
    <div style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--ink-50)", padding: "76px 0", overflow: "hidden" }}>
      <div style={{ textAlign: "center", maxWidth: 680, margin: "0 auto 40px", padding: "0 24px" }}>
        <div style={{ marginBottom: 18 }}><PillLabel icon="badge-check">{t("proof.pill")}</PillLabel></div>
        <h2 className="lt-reveal lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.6rem)", fontWeight: 700, letterSpacing: "-0.025em", color: "var(--ink-900)", lineHeight: 1.08 }}>
          {t("proof.title")}<br/><span style={{ color: "var(--ink-400)" }}>{t("proof.title_gray")}</span>
        </h2>
        <p className="lt-reveal" style={{ fontSize: 16, color: "var(--text-muted)", marginTop: 14, lineHeight: 1.6, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
          {t("proof.sub")}
        </p>
      </div>
      <div style={{ maxWidth: 1080, margin: "0 auto 44px", padding: "0 24px" }}>
        <M.RevealGroup stagger={110} style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }} className="lt-proof-grid" childStyle={{ height: "100%" }}>
          {TRUST.map((c, i) => <TrustCard key={i} {...c} />)}
        </M.RevealGroup>
      </div>
      <CaseStudyWall />
    </div>
  );
}

window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { SocialProof, CaseStudyWall });
})();