// LongtailIQ marketing, showcase sections (orbit, stats, testimonials, FAQ)
(function init(){
if(!window.LongtailIQDesignSystem_ae8f12){return setTimeout(init,30);}
const React = window.React;
const DS = window.LongtailIQDesignSystem_ae8f12;
const { Icon } = 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>;
}

// ---- Sparkle field (twinkling 4-point stars) ----
function Sparkles({ count = 26, color = "var(--ink-300)" }) {
  const items = React.useMemo(() => Array.from({ length: count }, () => ({
    l: Math.random()*100, t: Math.random()*100, s: 5 + Math.random()*8,
    d: (1.8 + Math.random()*2.8).toFixed(2), delay: (Math.random()*3.5).toFixed(2),
  })), [count]);
  return (
    <div style={{ position: "absolute", inset: 0, pointerEvents: "none", color }}>
      {items.map((p,i)=>(
        <span key={i} className="fx-sparkle" style={{ left: p.l+"%", top: p.t+"%", width: p.s, height: p.s, animationDuration: p.d+"s", animationDelay: p.delay+"s" }} />
      ))}
    </div>
  );
}

// ---- Orbiting platforms around a seed ----
function Orbit() {
  const ring1 = [["globe",0],["sparkles",120],["message-circle",240]];
  const ring2 = [["sparkle",0],["monitor-play",72],["shopping-bag",144],["map-pin",216],["compass",288]];
  const Node = ({ icon }) => (
    <span className="fx-orbit-counter" style={{ display: "grid", placeItems: "center", width: 44, height: 44, borderRadius: 12,
      background: "var(--paper)", border: "1px solid var(--border-subtle)", boxShadow: "var(--shadow-sm)", color: "var(--text-strong)" }}>
      <Icon name={icon} size={19} strokeWidth={1.8} />
    </span>
  );
  return (
    <div style={{ position: "relative", width: 360, height: 360, margin: "0 auto" }}>
      <div className="fx-orbit-ring" style={{ width: 200, height: 200 }} />
      <div className="fx-orbit-ring" style={{ width: 330, height: 330 }} />
      {/* center seed */}
      <div className="fx-float" style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)", display: "grid", placeItems: "center",
        width: 88, height: 88, borderRadius: 22, background: "var(--ink-900)", color: "#fff", boxShadow: "var(--shadow-lg)", zIndex: 2 }}>
        <Icon name="search" size={30} strokeWidth={1.8} />
        <span style={{ position: "absolute", bottom: -26, fontSize: 11.5, color: "var(--text-muted)", fontWeight: 600, whiteSpace: "nowrap" }}>{window.LTQM.t("orbit.seed_label")}</span>
      </div>
      {/* ring 1 */}
      <div className="fx-orbit-spin" style={{ width: 200, height: 200, animationDuration: "26s" }}>
        {ring1.map(([ic,deg],i)=>(
          <span key={i} style={{ transform: `translate(-50%,-50%) rotate(${deg}deg) translateY(-100px) rotate(-${deg}deg)` }}><Node icon={ic} /></span>
        ))}
      </div>
      {/* ring 2 (reverse) */}
      <div className="fx-orbit-spin" style={{ width: 330, height: 330, animationDuration: "40s", animationDirection: "reverse" }}>
        {ring2.map(([ic,deg],i)=>(
          <span key={i} style={{ transform: `translate(-50%,-50%) rotate(${deg}deg) translateY(-165px) rotate(-${deg}deg)` }}><Node icon={ic} /></span>
        ))}
      </div>
    </div>
  );
}

function OrbitSection() {
  const t = window.LTQM.t;
  return (
    <div style={{ position: "relative", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--ink-50)", overflow: "hidden" }}>
      <Sparkles count={30} />
      <section style={{ position: "relative", maxWidth: 1080, margin: "0 auto", padding: "76px 24px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }} className="lt-orbit-grid">
        <div>
          <div style={{ marginBottom: 18 }}><PillLabel icon="radar">{t("orbit.pill")}</PillLabel></div>
          <h2 className="lt-reveal lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.6rem)", fontWeight: 600, letterSpacing: "-0.025em", color: "var(--ink-900)", lineHeight: 1.08 }}>
            {t("orbit.title")}<br/><span style={{ color: "var(--ink-400)" }}>{t("orbit.title_gray")}</span>
          </h2>
          <p className="lt-reveal" style={{ fontSize: 16, color: "var(--text-muted)", marginTop: 14, lineHeight: 1.6, maxWidth: 420 }}>
            {t("orbit.sub")}
          </p>
          <div className="lt-reveal" style={{ display: "flex", gap: 22, marginTop: 26 }}>
            {[["6",t("orbit.stat.1")],["~400",t("orbit.stat.2")],["8",t("orbit.stat.3")]].map((s,i)=>(
              <div key={i}>
                <div className="lt-num" style={{ fontFamily: "var(--font-mono)", fontSize: 24, fontWeight: 600, color: "var(--text-strong)" }}>{s[0]}</div>
                <div style={{ fontSize: 12, color: "var(--text-faint)" }}>{s[1]}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="lt-reveal"><Orbit /></div>
      </section>
    </div>
  );
}

// ---- Stats band with odometer count-up ----
function StatNum({ value, suffix, prefix }) {
  const ref = React.useRef(null);
  const [run, setRun] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((e)=>{ if(e[0].isIntersecting){ setRun(true); io.disconnect(); } }, { threshold: 0.4 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const v = M.useCountUp ? M.useCountUp(run ? value : 0, 1100, [run]) : value;
  const shown = (run ? Math.round(v) : value).toLocaleString();
  return <span ref={ref} className="lt-num" style={{ fontFamily: "var(--font-mono)", fontWeight: 600 }}>{prefix||''}{shown}{suffix||''}</span>;
}

function Stats() {
  const t = window.LTQM.t;
  // Honest, derivable product facts only — no invented traction metrics.
  const stats = [
    { v: 400, suffix: "", l: t("stats.1") },
    { v: 6, suffix: "", l: t("stats.2") },
    { v: 4, suffix: "", l: t("stats.3") },
    { v: 0, prefix: "$", suffix: "", l: t("stats.4") },
  ];
  return (
    <div style={{ position: "relative", overflow: "hidden", background: "var(--paper)" }}>
      <section style={{ maxWidth: 1080, margin: "0 auto", padding: "60px 24px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20 }} className="lt-stats-grid">
          {stats.map((s,i)=>(
            <div key={i} className="lt-reveal" style={{ textAlign: "center", padding: "0 8px", borderLeft: i? "1px solid var(--border-subtle)":"none" }}>
              <div style={{ fontSize: "clamp(1.8rem,1.2rem+1.6vw,2.6rem)", color: "var(--ink-900)", letterSpacing: "-0.03em", lineHeight: 1 }}>
                <StatNum value={s.v} suffix={s.suffix} prefix={s.prefix} />
              </div>
              <div style={{ fontSize: 13, color: "var(--text-muted)", marginTop: 10 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// NOTE: the old testimonials marquee used fabricated quotes + invented names, which
// violates our no-fake-data rule. It has been removed and replaced by the honest,
// data-driven social-proof section in marketing/SocialProof.jsx (LTQM.SocialProof).

// ---- FAQ accordion ----
// The FAQ copy is mirrored by the static FAQPage JSON-LD in each page <head>
// (localized by the M8 build). Keep the two in sync when editing.
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border-subtle)" }}>
      <button onClick={onToggle} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, width: "100%",
        padding: "20px 4px", border: "none", background: "transparent", cursor: "pointer", textAlign: "left",
        fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600, color: "var(--text-strong)", letterSpacing: "-0.01em" }}>
        {q}
        <span style={{ flex: "none", width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", border: "1px solid var(--border-subtle)", color: "var(--text-muted)", transition: "transform 0.3s var(--ease-out), background 0.2s", transform: open?"rotate(45deg)":"none", background: open?"var(--ink-50)":"transparent" }}>
          <Icon name="plus" size={15} />
        </span>
      </button>
      <div className={"fx-acc" + (open?" open":"")}>
        <div><p style={{ padding: "0 4px 22px", fontSize: 14.5, color: "var(--text-muted)", lineHeight: 1.6, maxWidth: 640 }}>{a}</p></div>
      </div>
    </div>
  );
}
function FAQ() {
  const t = window.LTQM.t;
  const [open, setOpen] = React.useState(0);
  const FAQS = [
    [t("faq.1.q"), t("faq.1.a")],
    [t("faq.2.q"), t("faq.2.a")],
    [t("faq.3.q"), t("faq.3.a")],
    [t("faq.4.q"), t("faq.4.a")],
    [t("faq.5.q"), t("faq.5.a")],
  ];
  return (
    <section style={{ maxWidth: 760, margin: "0 auto", padding: "76px 24px" }}>
      <div style={{ textAlign: "center", marginBottom: 36 }}>
        <div style={{ marginBottom: 18 }}><PillLabel icon="help-circle">{t("faq.pill")}</PillLabel></div>
        <h2 className="lt-reveal lt-display" style={{ fontSize: "clamp(1.9rem,1.4rem+1.6vw,2.6rem)", fontWeight: 600, letterSpacing: "-0.025em", color: "var(--ink-900)", lineHeight: 1.08 }}>{t("faq.title")}</h2>
      </div>
      <div className="lt-reveal">
        {FAQS.map(([q,a],i)=><FAQItem key={i} q={q} a={a} open={open===i} onToggle={()=>setOpen(open===i?-1:i)} />)}
      </div>
    </section>
  );
}

window.LTQM = window.LTQM || {};
Object.assign(window.LTQM, { OrbitSection, Stats, FAQ, Sparkles });
})();