// ============================================
// Reliq — Landing page
// ============================================

// ── GitHub destination ────────────────────────────────────────────────────────
// Set to null to use the internal #/github-action page (current default).
// Set to a URL string to open an external repo/marketplace page in a new tab.
// Examples:
//   "https://github.com/reliq-dev/reliq"
//   "https://github.com/marketplace/actions/reliq-scan"
const RELIQ_GITHUB_URL = null;

// ── Demo video configuration ───────────────────────────────────────────────────
// Set provider to switch video source. Only one source is active at a time.
//
//   provider: "placeholder"   → shows a "coming soon" panel (default)
//             "youtube"       → YouTube iframe embed
//             "vimeo"         → Vimeo iframe embed
//             "self-hosted"   → HTML5 <video> element
//
// Examples:
//   provider: "youtube",    youtubeId: "dQw4w9WgXcQ"
//   provider: "vimeo",      vimeoId:   "123456789"
//   provider: "self-hosted",selfHostedUrl: "/videos/reliq-demo.mp4", posterUrl: "/assets/demo-poster.jpg"
const DEMO_VIDEO = {
  provider:       "placeholder", // "placeholder" | "youtube" | "vimeo" | "self-hosted"
  youtubeId:      "",            // YouTube video ID
  vimeoId:        "",            // Vimeo video ID
  selfHostedUrl:  "",            // path or URL to an .mp4 file
  posterUrl:      "",            // optional poster image for self-hosted video
};

// ── Analytics ─────────────────────────────────────────────────────────────────
// Replace with real analytics (Segment, PostHog, Mixpanel, etc.) when ready.
// Events fired: clicked_watch_demo · opened_demo_video · closed_demo_video
//               clicked_demo_run_first_scan · clicked_demo_github_action
const trackEvent = (event, props = {}) => {
  // window.analytics?.track(event, props);
};

// ── DemoModal — proper video-player pop-up ────────────────────────────────────
const DemoModal = ({ go, onClose }) => {
  // useFocusTrap: auto-focuses first focusable element (close button) and
  // traps Tab within the modal. Restores focus to the trigger on close.
  const trapRef  = (window.useFocusTrap || (() => React.useRef(null)))(true);
  const iframeRef = React.useRef(null);
  const videoRef  = React.useRef(null);

  // Close on Escape
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Lock body scroll while open
  React.useEffect(() => {
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => { document.body.style.overflow = prev; };
  }, []);

  // Stop playback when modal closes / unmounts
  React.useEffect(() => {
    return () => {
      // Self-hosted: pause directly
      if (videoRef.current) videoRef.current.pause();
      // iframe (YouTube/Vimeo): wipe src to kill audio immediately before DOM removal
      if (iframeRef.current) iframeRef.current.src = "";
    };
  }, []);

  // ── Resolve active video source from DEMO_VIDEO config ───────────────────
  const { provider, youtubeId, vimeoId, selfHostedUrl, posterUrl } = DEMO_VIDEO;

  const iframeSrc = (() => {
    if (provider === "youtube" && youtubeId)
      return `https://www.youtube.com/embed/${youtubeId}?autoplay=1&mute=1&rel=0&modestbranding=1&enablejsapi=1`;
    if (provider === "vimeo" && vimeoId)
      return `https://player.vimeo.com/video/${vimeoId}?autoplay=1&muted=1&title=0&byline=0&portrait=0`;
    return null;
  })();

  const isEmbed       = !!iframeSrc;
  const isSelfHosted  = provider === "self-hosted" && !!selfHostedUrl;
  const isPlaceholder = !isEmbed && !isSelfHosted;

  return (
    /* ── Backdrop — click outside closes ── */
    <div
      onClick={onClose}
      style={{
        position:"fixed", inset:0, zIndex:9000,
        background:"rgba(0,0,0,0.62)",
        backdropFilter:"blur(6px)", WebkitBackdropFilter:"blur(6px)",
        display:"flex", alignItems:"center", justifyContent:"center",
        padding:"20px",
      }}
    >
      {/* ── Modal shell ── */}
      <div
        ref={trapRef}
        role="dialog"
        aria-modal="true"
        aria-labelledby="demo-video-title"
        onClick={e => e.stopPropagation()}
        style={{
          background:"var(--bg-1)", border:"1px solid var(--line-2)",
          borderRadius:18, width:"100%", maxWidth:800,
          boxShadow:"0 40px 100px rgba(0,0,0,0.5)",
          overflow:"hidden",
        }}
      >

        {/* ── Header row ── */}
        <div style={{
          display:"flex", alignItems:"center", justifyContent:"space-between",
          padding:"16px 18px",
          borderBottom:"1px solid var(--line-1)",
        }}>
          <h2 id="demo-video-title" style={{
            fontFamily:"var(--font-display)", fontSize:15, fontWeight:600,
            letterSpacing:"-0.01em", margin:0, color:"var(--fg-0)",
          }}>
            Reliq 90-second demo
          </h2>
          <button
            onClick={onClose}
            aria-label="Close demo video"
            style={{
              background:"none", border:"1px solid var(--line-2)", borderRadius:8,
              cursor:"pointer", color:"var(--fg-2)", padding:"5px 7px",
              display:"flex", alignItems:"center", justifyContent:"center",
              flexShrink:0, transition:"border-color .12s, color .12s",
            }}
            onMouseEnter={e => { e.currentTarget.style.color="var(--fg-0)"; e.currentTarget.style.borderColor="var(--line-3)"; }}
            onMouseLeave={e => { e.currentTarget.style.color="var(--fg-2)"; e.currentTarget.style.borderColor="var(--line-2)"; }}
          >
            <Icon name="x" size={15} />
          </button>
        </div>

        {/* ── 16 : 9 video area ── */}
        <div style={{
          position:"relative", width:"100%", aspectRatio:"16/9",
          background:"#000",
          borderBottom:"1px solid var(--line-1)",
        }}>

          {/* YouTube or Vimeo iframe */}
          {isEmbed && (
            <iframe
              ref={iframeRef}
              src={iframeSrc}
              title="Reliq 90-second demo"
              width="100%" height="100%"
              style={{ display:"block", border:"none", position:"absolute", inset:0 }}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
              allowFullScreen
            />
          )}

          {/* Self-hosted HTML5 video */}
          {isSelfHosted && (
            <video
              ref={videoRef}
              controls
              playsInline
              autoPlay
              muted
              poster={posterUrl || undefined}
              style={{ width:"100%", height:"100%", display:"block", objectFit:"contain", position:"absolute", inset:0 }}
            >
              <source src={selfHostedUrl} type="video/mp4" />
              Your browser does not support HTML5 video.
            </video>
          )}

          {/* Placeholder — no video configured yet */}
          {isPlaceholder && (
            <div style={{
              position:"absolute", inset:0,
              display:"flex", flexDirection:"column",
              alignItems:"center", justifyContent:"center",
              gap:16, padding:"32px 24px",
            }}>
              {/* Play circle */}
              <div style={{
                width:64, height:64, borderRadius:"50%",
                background:"rgba(255,255,255,0.07)",
                border:"1px solid rgba(255,255,255,0.14)",
                display:"flex", alignItems:"center", justifyContent:"center",
              }}>
                <Icon name="play" size={26} style={{ color:"rgba(255,255,255,0.45)", marginLeft:4 }} />
              </div>
              <div style={{
                fontFamily:"var(--font-display)", fontSize:17, fontWeight:600,
                color:"rgba(255,255,255,0.72)", textAlign:"center",
              }}>
                Reliq 90-second demo coming soon
              </div>
              <div style={{
                fontSize:13.5, color:"rgba(255,255,255,0.38)",
                textAlign:"center", maxWidth:320, lineHeight:1.7,
              }}>
                See how Reliq scans a build, flags store-policy risk, and turns findings into a fix plan — in under two minutes.
              </div>
            </div>
          )}

        </div>

        {/* ── CTAs ── */}
        <div style={{
          display:"flex", gap:10, flexWrap:"wrap",
          padding:"14px 18px 18px",
        }}>
          <button
            className="btn btn-primary"
            onClick={() => {
              trackEvent("clicked_demo_run_first_scan");
              onClose();
              go("/free-scan");
            }}
            style={{ flex:"1 1 auto", justifyContent:"center" }}
          >
            Run your first scan <Icon name="arrow-right" size={13} />
          </button>
          <button
            className="btn btn-ghost"
            onClick={() => {
              trackEvent("clicked_demo_github_action");
              onClose();
              go("/github-action");
            }}
            style={{ flex:"1 1 auto", justifyContent:"center" }}
          >
            <Icon name="git-branch" size={13} /> View GitHub Action
          </button>
        </div>

      </div>
    </div>
  );
};

const LiveDemo = () => {
  const lines = [
    { t: "$", text: "reliq scan ./build/app-release.apk --store=play,app", cls: "q" },
    { t: ">", text: "Extracting AAB bundle...", tag: "1.2s" },
    { t: ">", text: "Decompiling AndroidManifest.xml...", tag: "0.8s" },
    { t: "✓", text: "manifest:cleartext_traffic", cls: "check", tag: "PASS" },
    { t: "!", text: "permissions:READ_CONTACTS without justification", cls: "warn", tag: "WARN" },
    { t: "✕", text: "security:debuggable=true detected in release build", cls: "crit", tag: "CRITICAL" },
    { t: ">", text: "Running AI policy review (Claude Sonnet 4.5)...", tag: "2.1s" },
    { t: "!", text: "metadata:keyword stuffing — 'best free top app'", cls: "warn", tag: "WARN" },
    { t: "✓", text: "privacy:NSPrivacyAccessedAPI declared", cls: "check", tag: "PASS" },
    { t: "✓", text: "tracker_sdk_audit: 3 trackers found and declared", cls: "check", tag: "PASS" },
    { t: "✓", text: "compliance:privacy + terms + deletion present", cls: "check", tag: "PASS" },
    { t: "!", text: "vendor:no public status or refund policy found", cls: "warn", tag: "WARN" },
    { t: ">", text: "Resolving Reliq Trust Score...", tag: "0.4s" },
  ];
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    if (count >= lines.length) return;
    const t = setTimeout(() => setCount(c => c + 1), 380);
    return () => clearTimeout(t);
  }, [count]);
  React.useEffect(() => {
    if (count >= lines.length) {
      const t = setTimeout(() => setCount(0), 4000);
      return () => clearTimeout(t);
    }
  }, [count]);
  return (
    <div className="demo-wrap">
      <div className="demo-frame">
        <div className="topdot">
          <span className="d"></span><span className="d"></span><span className="d"></span>
          <span className="title">~ / scan-pipeline / verdict.log</span>
          <span style={{marginLeft:"auto", display:"flex", gap:6, alignItems:"center", fontFamily:"var(--font-mono)", fontSize:11, color:"var(--fg-2)"}}>
            <span className="live-dot"></span> LIVE
          </span>
        </div>
        <div className="demo-body">
          {lines.slice(0, count).map((l, i) => (
            <div key={i} className="line fade-up">
              <span style={{width:14, display:"inline-block", color:l.cls === "check" ? "var(--teal)" : l.cls === "warn" ? "var(--amber)" : l.cls === "crit" ? "var(--red)" : "var(--fg-3)"}}>{l.t}</span>
              <span className={l.cls || ""}>{l.text}</span>
              {l.tag && <span className="tag">{l.tag}</span>}
            </div>
          ))}
          {count < lines.length && (
            <div className="line">
              <span style={{width:14, display:"inline-block", color:"var(--fg-3)"}}>{">"}</span>
              <span style={{color:"var(--fg-2)"}}>working<span className="cursor">_</span></span>
            </div>
          )}
          {count >= lines.length && (
            <div style={{marginTop:18, padding:"14px 16px", border:"1px solid rgba(245,158,11,0.3)", background:"var(--amber-bg)", borderRadius:10}}>
              <div style={{fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.14em", textTransform:"uppercase", color:"var(--amber)", marginBottom:4}}>RELIQ TRUST SCORE</div>
              <div style={{fontFamily:"var(--font-display)", fontSize:18, fontWeight:600}}>64 / 100 — Needs Work</div>
              <div style={{color:"var(--fg-2)", fontSize:12.5, marginTop:6}}>1 critical · 3 warnings · Store + trust diagnostics · Re-scan after fix to verify.</div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// ── Trust-platform sample data (display-only, mirrors real product shapes) ──────
const scoreColor = (s) => s >= 75 ? "var(--teal)" : s >= 60 ? "var(--amber)" : "var(--red)";

const TRUST_PILLARS = [
  { k: "Release",    s: 80, e: "Shippable — HTTPS, reachability, status." },
  { k: "Security",   s: 90, e: "HSTS, CSP, clickjacking protection." },
  { k: "Agent",      s: 72, e: "llms.txt, reliq.json — agent-readable." },
  { k: "API",        s: 78, e: "OpenAPI, auth, errors, versioning." },
  { k: "Docs",       s: 82, e: "Guides, reference, examples, nav." },
  { k: "Vendor",     s: 60, e: "Identity, pricing, support, status." },
  { k: "MCP",        s: 57, e: "Tool schemas, scopes, risk detection." },
  { k: "Compliance", s: 64, e: "Privacy, terms, GDPR, deletion." },
];

const REGISTRY_SAMPLES = [
  { name: "Helio Cloud", kind: "Company", score: 90, grade: "Excellent",  slug: "helio-cloud" },
  { name: "Beta API",    kind: "API",     score: 88, grade: "Good",       slug: "beta-api" },
  { name: "Acme",        kind: "Website", score: 72, grade: "Needs Work", slug: "acme-com" },
];

const LandingBadge = ({ label }) => (
  <span style={{
    fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 600, letterSpacing: "0.04em",
    padding: "5px 11px", borderRadius: 6, color: "var(--teal)", background: "var(--teal-bg)",
    border: "1px solid rgba(0,212,170,0.25)", textTransform: "uppercase",
  }}>{label}</span>
);

const Landing = ({ go }) => {
  const [authed, setAuthed] = React.useState(() =>
    window.reliqAuth ? window.reliqAuth.isAuthed() : false
  );
  React.useEffect(() => {
    const onAuth = (e) => setAuthed(!!e.detail);
    window.addEventListener("reliq-auth-change", onAuth);
    return () => window.removeEventListener("reliq-auth-change", onAuth);
  }, []);

  // ── Demo modal ────────────────────────────────────────────────────────────────
  const watchDemoRef = React.useRef(null);
  const [demoOpen, setDemoOpen] = React.useState(false);

  const openDemo = () => {
    trackEvent("clicked_watch_demo");
    trackEvent("opened_demo_video");
    setDemoOpen(true);
  };
  const closeDemo = () => {
    trackEvent("closed_demo_video");
    setDemoOpen(false);
    setTimeout(() => watchDemoRef.current?.focus(), 50);
  };

  // ── Smooth-scroll to a section by id ─────────────────────────────────────────
  const scrollToSection = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  // ── Pricing trial flow ────────────────────────────────────────────────────────
  // Stores selected plan in localStorage, then routes to signup with URL params
  // so signup.jsx can display plan-specific copy without extra round-trips.
  const startTrial = (plan) => {
    try {
      localStorage.setItem("reliq_trial_plan",   plan);
      localStorage.setItem("reliq_trial_source", "pricing");
    } catch (_) {}
    go("signup?plan=" + plan + "&trial=7d&source=pricing");
  };

  const goToContactSales = () => {
    go("contact-sales?plan=team");
  };

  // ── Active nav section (scroll-position tracking) ─────────────────────────────
  const [activeSection, setActiveSection] = React.useState("");
  React.useEffect(() => {
    const ids = ["how-it-works", "features", "registry", "pricing"];
    const update = () => {
      const top = window.scrollY + 106; // nav height 90 + 16 buffer
      let cur = "";
      ids.forEach(id => {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= top) cur = id;
      });
      setActiveSection(cur);
    };
    window.addEventListener("scroll", update, { passive: true });
    update();
    return () => window.removeEventListener("scroll", update);
  }, []);

  // ── Pending scroll set by cross-page nav ──────────────────────────────────────
  React.useEffect(() => {
    try {
      const target = sessionStorage.getItem("reliq_scroll_to");
      if (target) {
        sessionStorage.removeItem("reliq_scroll_to");
        const el = document.getElementById(target);
        if (el) setTimeout(() => el.scrollIntoView({ behavior: "smooth", block: "start" }), 80);
      }
    } catch (_) {}
  }, []);

  const steps = [
    { ic: "upload",  n: "01", h: "Upload",
      d: "Drop in an APK, AAB, or IPA — or point Reliq at a website, API, or MCP server." },
    { ic: "cpu",     n: "02", h: "Analyze",
      d: "Store-policy and trust diagnostics run in parallel — 100+ signals across eight pillars." },
    { ic: "eye",     n: "03", h: "Review",
      d: "One Trust Score, a clear verdict, and the exact issues to fix — each with a policy link." },
    { ic: "refresh", n: "04", h: "Fix",
      d: "Copy the fixes, export the report, publish a public profile, and re-scan to verify." },
  ];

  // Diagnostics breadth — the eight website trust pillars (mobile store diagnostics
  // are shown in the terminal + workflow above).
  const features = [
    { ic: "bolt",         n: "01", h: "Release Readiness",
      d: "HTTPS, reachability, response status, and metadata — is it actually shippable?" },
    { ic: "lock",         n: "02", h: "Security",
      d: "HTTP security headers that protect users — HSTS, CSP, and clickjacking protection." },
    { ic: "sparkles",     n: "03", h: "Agent Readiness",
      d: "llms.txt and /.well-known/reliq.json — can AI agents understand and use you?" },
    { ic: "code",         n: "04", h: "API Readiness",
      d: "OpenAPI spec, auth, error codes, examples, and versioning for clean integration." },
    { ic: "book",         n: "05", h: "Documentation",
      d: "Getting-started, reference, examples, and navigation — complete and usable." },
    { ic: "shield",       n: "06", h: "Vendor Trust",
      d: "Company identity, pricing, support, security, status, and refund clarity." },
    { ic: "cpu",          n: "07", h: "MCP Security",
      d: "MCP tool schemas, auth, and scopes — plus dangerous-tool and injection risk." },
    { ic: "check-circle", n: "08", h: "Compliance Readiness",
      d: "Privacy, terms, cookies, retention, deletion, GDPR, CCPA, and AI-usage disclosure." },
  ];
  return (
    <div className="landing">
      {demoOpen && <DemoModal go={go} onClose={closeDemo} />}
      <div className="landing-nav">
        <div className="landing-nav-inner">
          <div className="brand" style={{padding:0, border:0, margin:0, cursor:"pointer"}} onClick={() => go("/")}>
            <img className="brand-logo brand-logo-light" src="assets/reliq-logo-dark.png" alt="Reliq" />
            <img className="brand-logo brand-logo-dark"  src="assets/reliq-logo-light.png" alt="Reliq" />
          </div>
          <div className="links">
            <a style={{cursor:"pointer", color: activeSection === "features" ? "var(--fg-0)" : undefined}}
               onClick={() => scrollToSection("features")}>Features</a>
            <a style={{cursor:"pointer", color: activeSection === "how-it-works" ? "var(--fg-0)" : undefined}}
               onClick={() => scrollToSection("how-it-works")}>How it works</a>
            <a style={{cursor:"pointer", color: activeSection === "registry" ? "var(--fg-0)" : undefined}}
               onClick={() => scrollToSection("registry")}>Registry</a>
            <a style={{cursor:"pointer", color: activeSection === "pricing" ? "var(--fg-0)" : undefined}}
               onClick={() => scrollToSection("pricing")}>Pricing</a>
            <a style={{cursor:"pointer"}} onClick={() => go("/registry")}>Browse</a>
            <a style={{cursor:"pointer"}} onClick={() => go("/docs")}>Docs</a>
          </div>
          <div className="right">
            <ThemeToggle />
            {authed ? (
              <button className="btn btn-ghost btn-sm" onClick={() => go("/dashboard")}>
                Open dashboard
              </button>
            ) : (
              <button className="btn btn-ghost btn-sm" onClick={() => go("/signin")}>
                Sign in
              </button>
            )}
            <button className="btn btn-primary btn-sm" onClick={() => go(authed ? "/scan/new" : "/free-scan")}>
              {authed ? "New scan" : "Start scanning"} <Icon name="arrow-right" size={13} />
            </button>
          </div>
        </div>
      </div>

      {/* Hero */}
      <section className="hero">
        <div className="hero-bg"></div>
        <div className="hero-grid"></div>
        <div className="pill">
          <span className="live-dot"></span>
          <span>Store review + a complete Software Trust Score</span>
        </div>
        <h1>
          Catch what reviewers<br/>
          and AI <span className="accent">find first.</span>
        </h1>
        <p className="tag">
          Reliq analyzes mobile apps and developer products, producing one Trust Score with
          actionable diagnostics — before users, reviewers, or AI agents ever see your software.
        </p>
        <div className="cta-row">
          <button className="btn btn-primary btn-lg" onClick={() => go("/free-scan")}>
            Scan your app <Icon name="arrow-right" size={14} />
          </button>
          <button
            className="btn btn-lg"
            ref={watchDemoRef}
            onClick={openDemo}
            aria-label="Watch a 90-second Reliq demo"
          >
            <Icon name="play" size={12} /> Watch demo
          </button>
        </div>
        <div className="cta-sub">No credit card · 3 free scans · Mobile + Web + AI</div>
      </section>

      <div className="trust-bar">
        <div className="item"><div className="num">2,400+</div><div className="lbl">Developers</div></div>
        <div className="item"><div className="num">94%</div><div className="lbl">First-pass rate</div></div>
        <div className="item"><div className="num">8</div><div className="lbl">Trust pillars</div></div>
        <div className="item"><div className="num">100+</div><div className="lbl">Signals checked</div></div>
        <div className="item"><div className="num">&lt; 3 min</div><div className="lbl">Avg scan time</div></div>
      </div>

      {/* Live demo */}
      <section className="section" id="how">
        <div className="section-eyebrow">Live preview</div>
        <h2>A diagnostic, not a review.</h2>
        <p className="lead">
          Drop in your build or a URL. Reliq runs release, security, API, AI-readiness, compliance,
          and vendor diagnostics in parallel — then resolves them into one Reliq Trust Score. Every
          finding has a fix, a snippet, and a policy link.
        </p>
        <LiveDemo />
      </section>

      {/* How it works */}
      <section className="section" id="how-it-works" style={{paddingTop:0}}>
        <div className="section-eyebrow">How it works</div>
        <h2>From upload to fix plan<br/>in minutes.</h2>
        <p className="lead">
          Upload an APK, AAB, or IPA — or point Reliq at a website, API, or MCP server. It checks
          100+ signals and returns the exact issues to fix.
        </p>
        <div className="steps-grid">
          {steps.map(s => (
            <div className="feature-card" key={s.n}>
              <div className="ic"><Icon name={s.ic} size={18} /></div>
              <span className="count">{s.n}</span>
              <h3>{s.h}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Diagnostics */}
      <section className="section" id="features" style={{paddingTop:0}}>
        <div className="section-eyebrow">What gets checked</div>
        <h2>100+ signals.<br/>Eight Trust Pillars.</h2>
        <p className="lead">
          Store-review diagnostics for mobile — permissions, SDKs, manifests, AI policy, and listing.
          Eight trust pillars for websites, APIs, and AI products. One score across all of it.
        </p>
        <div className="feature-grid">
          {features.map(f => (
            <div className="feature-card" key={f.n}>
              <div className="ic"><Icon name={f.ic} size={18} /></div>
              <span className="count">{f.n}</span>
              <h3>{f.h}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* The Reliq Trust Score */}
      <section className="section" id="trust-score" style={{paddingTop:0}}>
        <div className="section-eyebrow">The Reliq Trust Score</div>
        <h2>Every scan becomes<br/>one Trust Score.</h2>
        <p className="lead">
          Eight pillars resolve into a single number and grade — readable by a human in a glance,
          and by an AI agent over the API.
        </p>
        <div style={{maxWidth:780, margin:"40px auto 0", background:"var(--bg-2)", border:"1px solid var(--line-1)", borderRadius:16, padding:"26px 26px 28px"}}>
          <div style={{display:"flex", alignItems:"center", justifyContent:"space-between", gap:16, flexWrap:"wrap", marginBottom:22}}>
            <div>
              <div style={{fontFamily:"var(--font-display)", fontSize:17, fontWeight:600, color:"var(--fg-0)"}}>Acme</div>
              <div className="mono" style={{fontSize:11.5, color:"var(--fg-3)"}}>Website · reliq.dev/registry/acme-com</div>
            </div>
            <div style={{textAlign:"right"}}>
              <div style={{fontFamily:"var(--font-display)", fontSize:46, fontWeight:700, lineHeight:1, color:"var(--amber)"}}>73</div>
              <div className="mono" style={{fontSize:12, color:"var(--fg-2)", marginTop:2}}>Needs Work</div>
            </div>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(auto-fill,minmax(168px,1fr))", gap:10}}>
            {TRUST_PILLARS.map(p => (
              <div key={p.k} style={{background:"var(--bg-1)", border:"1px solid var(--line-2)", borderRadius:10, padding:"12px 13px"}}>
                <div style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom:7}}>
                  <span style={{fontSize:12.5, color:"var(--fg-1)", fontWeight:500}}>{p.k}</span>
                  <span className="mono" style={{fontSize:15, fontWeight:700, color:scoreColor(p.s)}}>{p.s}</span>
                </div>
                <div style={{height:4, borderRadius:2, background:"var(--bg-3)", overflow:"hidden"}}>
                  <div style={{height:"100%", width:p.s + "%", background:scoreColor(p.s)}} />
                </div>
                <div style={{fontSize:10.5, color:"var(--fg-3)", marginTop:8, lineHeight:1.4}}>{p.e}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Public Trust Registry */}
      <section className="section" id="registry" style={{paddingTop:0}}>
        <div className="section-eyebrow">Public Trust Registry</div>
        <h2>Publish it. Share it.<br/>Get discovered.</h2>
        <p className="lead">
          Turn a scan into a public Trust Profile with a canonical URL — indexable by search engines
          and readable by AI agents through machine-readable JSON, JSON-LD, and the Discovery API.
        </p>
        <div className="feature-grid">
          {REGISTRY_SAMPLES.map(r => (
            <div className="feature-card" key={r.slug} style={{cursor:"pointer"}} onClick={() => go("/registry/" + r.slug)}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-start", gap:12}}>
                <div>
                  <h3 style={{margin:"0 0 2px"}}>{r.name}</h3>
                  <span className="mono" style={{fontSize:10.5, color:"var(--fg-3)"}}>{r.kind} · /registry/{r.slug}</span>
                </div>
                <div style={{textAlign:"right", flexShrink:0}}>
                  <div style={{fontFamily:"var(--font-display)", fontSize:26, fontWeight:700, lineHeight:1, color:scoreColor(r.score)}}>{r.score}</div>
                  <div className="mono" style={{fontSize:10, color:"var(--fg-3)"}}>{r.grade}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div style={{textAlign:"center", marginTop:26}}>
          <button className="btn" onClick={() => go("/registry")}>Browse the registry <Icon name="arrow-right" size={13} /></button>
        </div>
      </section>

      {/* Trust Badges */}
      <section className="section" id="badges" style={{paddingTop:0}}>
        <div className="section-eyebrow">Trust Badges</div>
        <h2>Prove it anywhere.</h2>
        <p className="lead">
          Embed live badges on your website, docs, GitHub, or API pages. They reflect your current
          score and update as it changes.
        </p>
        <div style={{display:"flex", gap:10, justifyContent:"center", flexWrap:"wrap", margin:"30px 0 20px"}}>
          <LandingBadge label="Trust Ready" />
          <LandingBadge label="Agent Ready" />
          <LandingBadge label="Integration Ready" />
        </div>
        <div className="demo-wrap">
          <div className="demo-frame">
            <div className="topdot">
              <span className="d"></span><span className="d"></span><span className="d"></span>
              <span className="title">README.md</span>
            </div>
            <div className="demo-body" style={{fontSize:12.5, lineHeight:1.7}}>
              <div style={{color:"var(--fg-2)"}}>[![Reliq Trust Ready](https://api.reliq.dev/v1/registry/acme-com/badge/trust-ready.svg)](https://reliq.dev/registry/acme-com)</div>
            </div>
          </div>
        </div>
      </section>

      {/* Continuous Monitoring */}
      <section className="section" id="monitoring" style={{paddingTop:0}}>
        <div className="section-eyebrow">Continuous Monitoring</div>
        <h2>Trust isn’t<br/>a one-time check.</h2>
        <p className="lead">
          Reliq re-checks on a schedule and tracks every change — so a regression never goes unnoticed.
        </p>
        <div className="feature-grid">
          <div className="feature-card"><div className="ic"><Icon name="activity" size={18} /></div><span className="count">01</span><h3>Trust History</h3><p>Point-in-time snapshots of every pillar, kept over time.</p></div>
          <div className="feature-card"><div className="ic"><Icon name="bolt" size={18} /></div><span className="count">02</span><h3>Score Movement</h3><p>30- and 90-day trend and direction — up, down, or flat.</p></div>
          <div className="feature-card"><div className="ic"><Icon name="alert" size={18} /></div><span className="count">03</span><h3>Change Detection</h3><p>Alerts on score drops, badges lost, or new critical findings.</p></div>
        </div>
      </section>

      {/* MCP & AI */}
      <section className="section" id="mcp" style={{paddingTop:0}}>
        <div className="section-eyebrow">MCP &amp; AI</div>
        <h2>Build software<br/>AI can trust.</h2>
        <p className="lead">
          Claude, Cursor, and your own agents verify readiness directly — through the Reliq MCP server,
          the public Trust API, and a GitHub Action for CI.
        </p>
        <div className="feature-grid">
          <div className="feature-card"><div className="ic"><Icon name="cpu" size={18} /></div><span className="count">01</span><h3>MCP Server</h3><p>Agents call <code>reliq_check_agent_readiness</code> and friends over JSON-RPC.</p></div>
          <div className="feature-card"><div className="ic"><Icon name="code" size={18} /></div><span className="count">02</span><h3>Public Trust API</h3><p>Discover, filter, and read trust profiles as agent-readable JSON.</p></div>
          <div className="feature-card"><div className="ic"><Icon name="github" size={18} /></div><span className="count">03</span><h3>GitHub Action</h3><p>Gate merges and releases on a passing Trust Score in CI.</p></div>
        </div>
        <div style={{textAlign:"center", marginTop:26}}>
          <button className="btn" onClick={() => go("/trust-api")}>Read the Trust API docs <Icon name="arrow-right" size={13} /></button>
        </div>
      </section>

      {/* Pricing */}
      <section className="section" id="pricing" style={{paddingTop:0}}>
        <div className="section-eyebrow">Pricing</div>
        <h2>One score. Every surface.</h2>
        <p className="lead">
          Start with store review. Grow into the full trust platform — registry, monitoring, badges,
          API, and MCP — without switching tools.
        </p>
        <div className="pricing-grid">
          <div className="price-card">
            <h3>Starter</h3>
            <div className="sub">For indie devs and first products.</div>
            <div className="price">$29<span className="unit">/mo</span></div>
            <ul>
              <li><Icon name="check" size={14} className="ck" /> 25 scans · mobile + website</li>
              <li><Icon name="check" size={14} className="ck" /> Reliq Trust Score · 8 pillars</li>
              <li><Icon name="check" size={14} className="ck" /> Publish to the Trust Registry</li>
              <li><Icon name="check" size={14} className="ck" /> Trust Badges + monitoring</li>
              <li><Icon name="check" size={14} className="ck" /> PDF + shareable reports</li>
            </ul>
            <button
              className="btn"
              onClick={() => startTrial("starter")}
              aria-label="Start 7-day Starter trial"
            >
              Start free trial
            </button>
          </div>
          <div className="price-card feat">
            <span className="ribbon">Most popular</span>
            <h3>Pro</h3>
            <div className="sub">For developers shipping continuously.</div>
            <div className="price">$79<span className="unit">/mo</span></div>
            <ul>
              <li><Icon name="check" size={14} className="ck" /> 100 scans per month</li>
              <li><Icon name="check" size={14} className="ck" /> Public Trust API + API keys</li>
              <li><Icon name="check" size={14} className="ck" /> GitHub Action for CI/CD</li>
              <li><Icon name="check" size={14} className="ck" /> Webhook notifications</li>
              <li><Icon name="check" size={14} className="ck" /> Everything in Starter</li>
            </ul>
            <button
              className="btn btn-primary"
              onClick={() => startTrial("pro")}
              aria-label="Start 7-day Pro trial"
            >
              Start free trial
            </button>
          </div>
          <div className="price-card">
            <h3>Team</h3>
            <div className="sub">For teams, platforms, and enterprise.</div>
            <div className="price">$199<span className="unit">/mo</span></div>
            <ul>
              <li><Icon name="check" size={14} className="ck" /> 500 scans · unlimited projects</li>
              <li><Icon name="check" size={14} className="ck" /> MCP server access</li>
              <li><Icon name="check" size={14} className="ck" /> SSO · roles · audit logs</li>
              <li><Icon name="check" size={14} className="ck" /> Priority support · SLA</li>
              <li><Icon name="check" size={14} className="ck" /> Everything in Pro</li>
            </ul>
            <button
              className="btn"
              onClick={goToContactSales}
              aria-label="Talk to sales about Team and Enterprise plans"
            >
              Talk to sales
            </button>
          </div>
        </div>
      </section>

      <section className="cta-section">
        <h2>Build software<br/>the world can trust.</h2>
        <p>Catch what reviewers — and AI — will find, before they do.</p>
        <div className="cta-row" style={{display:"flex", alignItems:"center", justifyContent:"center", gap:14, flexWrap:"wrap"}}>
          <button className="btn btn-primary btn-lg" onClick={() => go("/free-scan")}>
            Scan your app <Icon name="arrow-right" size={14} />
          </button>
          <button
            className="btn btn-lg"
            onClick={() => go("/registry")}
            aria-label="Browse the Reliq Trust Registry"
          >
            <Icon name="globe" size={14} /> Browse the registry
          </button>
        </div>
      </section>

      <div className="footer-bar">
        <div>© Reliq 2026 · The software trust platform.</div>
        <div style={{display:"flex", gap:18, flexWrap:"wrap"}}>
          <a style={{cursor:"pointer"}} onClick={() => go("/registry")}>Registry</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/trust-api")}>Trust API</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/privacy")}>Privacy</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/terms")}>Terms</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/security")}>Security</a>
          <a style={{cursor:"pointer"}} onClick={() => go("/status")}>Status</a>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Landing });