// altriks-ui.jsx — shared primitives + content constants for the Altriks landing page.
// Content sourced from the content kit (incoming-PO / order-entry framing); brand is the REAL Altriks brand.
// Exported to window at the bottom so sibling babel scripts can use them.

const { useState, useEffect, useRef } = React;

// ── module-level motion guards (shared by Reveal / CountUp / DesignPartnerForm) ──
const __prefersReduce =
  typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;

// One shared IntersectionObserver for every <Reveal> on the page.
let __revealIO = null;
function __getRevealIO() {
  if (__revealIO || typeof IntersectionObserver === "undefined") return __revealIO;
  __revealIO = new IntersectionObserver(
    (entries, obs) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("is-in");
          obs.unobserve(e.target);
        }
      });
    },
    { rootMargin: "0px 0px -10% 0px", threshold: 0.12 }
  );
  return __revealIO;
}

/* ---------- Brand mark (the REAL Altriks swoosh — inlined, brand-fixed) ----------
   White sail on a #465FFF rounded square. Hardcoded fills so the mark stays correct
   even when the Tweaks panel switches the accent to Teal/Ink+gold. No clipPath (the
   id would collide across the 4+ instances on the page). */
function Logo({ light = false, size = 30 }) {
  const ink = light ? "#FFFFFF" : "var(--ink)";
  const onClick = (e) => {
    const p = window.location.pathname;
    if (p === "/" || p === "" || p.endsWith("/index.html")) {
      e.preventDefault();
      const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
      window.scrollTo({ top: 0, behavior: reduce ? "auto" : "smooth" });
    }
  };
  return (
    <a href="/" onClick={onClick} className="alt-logo-link alt-logo" aria-label="Altriks — home" style={{ display: "flex", alignItems: "center", gap: 11 }}>
      <svg width={size} height={size} viewBox="0 0 32 32" fill="none" role="img" aria-label="Altriks">
        <rect width="32" height="32" rx="7" fill="#465FFF" />
        <path d="M3 24.9658C3.89462 24.1228 4.69978 23.3367 5.53849 22.5962C8.48631 19.883 11.8333 17.6573 15.4576 16C16.5431 15.4326 17.7385 15.1175 18.9579 15.0772C20.7548 15.1797 22.4512 15.9546 23.7217 17.2532C24.211 17.7289 24.6669 18.239 25.086 18.7797C26.3049 20.3633 27.5015 21.9696 28.6981 23.5646C28.7875 23.6785 28.8658 23.8038 29 24.0089C28.3514 23.6899 27.8146 23.3823 27.2443 23.1316C24.2788 21.9017 21.0804 21.3645 17.8843 21.5595C13.3289 21.7892 8.84287 22.7902 4.61032 24.5215L3.24602 25C3.24602 25 3.17892 24.9886 3 24.9658Z" fill="#fff" />
        <path d="M22.4693 13.3114C18.2422 12.8557 14.6413 14.3025 11.1411 16.4557C9.0999 17.7585 7.20601 19.2867 5.49377 21.0127C5.45495 21.0548 5.40824 21.0886 5.35638 21.1121C5.30452 21.1356 5.24857 21.1483 5.19183 21.1494C5.29248 20.8987 5.39312 20.6481 5.50495 20.4089C6.95495 17.0507 8.99801 13.9924 11.5325 11.3861C12.2992 10.506 13.3443 9.92727 14.4862 9.75038C15.6281 9.57349 16.7948 9.8096 17.7837 10.4177C19.3381 11.2494 20.8142 12.2177 22.3239 13.1291C22.3686 13.1747 22.391 13.2202 22.4693 13.3114Z" fill="#fff" />
        <path d="M5.99699 16.7177C5.99699 16.1937 6.07527 15.6696 6.14237 15.157C6.37522 13.2084 6.90731 11.3093 7.71914 9.52911C7.92353 8.99385 8.28141 8.5337 8.74615 8.20858C9.2109 7.88346 9.76097 7.70844 10.3247 7.70633C11.72 7.78014 13.1073 7.9668 14.4736 8.26456C10.2912 9.7 8.03226 13.0608 5.99699 16.7177Z" fill="#fff" />
        <path d="M5.90512 11.4248C5.63982 10.2857 5.52043 9.14924 5.86798 8.03163C5.94224 7.85339 6.05089 7.69195 6.18756 7.55678C6.32423 7.42161 6.48617 7.31544 6.6639 7.24447C7.21271 7.077 7.78339 6.99458 8.35655 6.99999C6.92124 8.14984 6.35349 9.74029 5.90512 11.4248Z" fill="#fff" />
      </svg>
      <span className="alt-wordmark" style={{ color: ink }}>Altriks</span>
    </a>
  );
}

/* ---------- App icon set (for the product mock + pipeline) ---------- */
function AppIcon({ name, size = 18 }) {
  const p = { fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const g = {
    building: <g {...p}><rect x="4" y="3" width="9" height="14"/><path d="M13 7h3v10H4M6.5 6h2M6.5 9h2M6.5 12h2"/></g>,
    company: <g {...p}><rect x="5" y="3" width="10" height="14" rx="1"/><path d="M8 6h1M11 6h1M8 9h1M11 9h1M8 12h4v5"/></g>,
    dashboard: <g {...p}><path d="M10 10V3a7 7 0 107 7h-7z"/><path d="M10 3a7 7 0 017 7"/></g>,
    file: <g {...p}><path d="M6 3h5l4 4v10H6z"/><path d="M11 3v4h4M8 11h6M8 14h4"/></g>,
    database: <g {...p}><ellipse cx="10" cy="5" rx="6" ry="2.3"/><path d="M4 5v10c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3V5M4 10c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3"/></g>,
    code: <g {...p}><path d="M7 6l-4 4 4 4M13 6l4 4-4 4"/></g>,
    key: <g {...p}><circle cx="7" cy="13" r="3"/><path d="M9 11l7-7M14 6l2 2M12 8l1.5 1.5"/></g>,
    webhook: <g {...p}><circle cx="7" cy="6" r="2.4"/><circle cx="14" cy="13" r="2.4"/><circle cx="5" cy="14" r="2.4"/><path d="M8.6 7.4l3.5 4M11.7 13H7.4"/></g>,
    braces: <g {...p}><path d="M8 4c-2 0-2 2-2 3s0 3-2 3c2 0 2 2 2 3s0 3 2 3M12 4c2 0 2 2 2 3s0 3 2 3c-2 0-2 2-2 3s0 3-2 3"/></g>,
    plug: <g {...p}><path d="M7 3v4M13 3v4M5 7h10v2a5 5 0 01-10 0V7zM10 14v3"/></g>,
    shield: <g {...p}><path d="M10 3l6 2v5c0 4-2.7 6.3-6 7-3.3-.7-6-3-6-7V5l6-2z"/></g>,
    card: <g {...p}><rect x="3" y="5" width="14" height="10" rx="1.5"/><path d="M3 8.5h14M6 12h3"/></g>,
    users: <g {...p}><circle cx="8" cy="7" r="2.6"/><path d="M3.5 16c0-2.5 2-4 4.5-4s4.5 1.5 4.5 4"/><path d="M14 6.5a2.4 2.4 0 010 4.6M14.5 16c0-1.6-.6-3-1.6-3.6"/></g>,
    chat: <g {...p}><path d="M4 5h12v8H8l-3 3v-3H4z"/></g>,
    ticket: <g {...p}><rect x="3" y="6" width="14" height="8" rx="1.5"/><path d="M7 6v8"/></g>,
    book: <g {...p}><path d="M5 4h7a2 2 0 012 2v10H7a2 2 0 00-2 2V4z"/><path d="M5 4a2 2 0 00-2 2v10a2 2 0 012-2"/></g>,
    menu: <g {...p}><path d="M4 6h12M4 10h12M4 14h8"/></g>,
    box: <g {...p}><path d="M10 3l6 3.3v7.4L10 17l-6-3.3V6.3L10 3z"/><path d="M4 6.3l6 3.3 6-3.3M10 9.6V17"/></g>,
    search: <g {...p}><circle cx="9" cy="9" r="5"/><path d="M13 13l3 3"/></g>,
    calendar: <g {...p}><rect x="3" y="4" width="14" height="13" rx="1.5"/><path d="M3 8h14M7 3v3M13 3v3"/></g>,
    filter: <g {...p}><path d="M3 5h14l-5.5 6.5V16l-3 1.5v-6L3 5z"/></g>,
    reset: <g {...p}><path d="M5 10a5 5 0 105-5 5 5 0 00-3.8 1.8M5 4v2.8h2.8"/></g>,
    chevron: <g {...p}><path d="M6 8l4 4 4-4"/></g>,
    close: <g {...p}><path d="M5 5l10 10M15 5L5 15"/></g>,
    rowcheck: <g {...p}><rect x="3.5" y="3.5" width="13" height="13" rx="2.5"/><path d="M6.5 10l2.4 2.4L13.5 7.6"/></g>,
    mail: <g {...p}><rect x="3" y="4.5" width="14" height="11" rx="1.6"/><path d="M3.5 5.5l6.5 5 6.5-5"/></g>,
    clip: <g {...p}><path d="M14 7.5l-6 6a2.5 2.5 0 01-3.5-3.5l6.5-6.3a1.6 1.6 0 012.3 2.3l-6.4 6.2"/></g>,
  };
  return <svg width={size} height={size} viewBox="0 0 20 20" aria-hidden="true">{g[name] || null}</svg>;
}

/* ---------- Orders product mock (recreated from the real app) ----------
   revealFirstRow=false collapses the highlighted (KGB) row so HeroPipeline can "land" it. */
function POAppMock({ revealFirstRow = true }) {
  const nav = [
    { icon: "building", label: "Companies" },
    { icon: "company", label: "Company" },
    { icon: "dashboard", label: "Dashboard" },
    { icon: "file", label: "Data", badge: "2", groupActive: true, children: [
      { icon: "file", label: "Orders", active: true },
      { icon: "database", label: "Master Data" },
    ] },
    { icon: "code", label: "Developer", badge: "3", children: [
      { icon: "key", label: "API Keys" },
      { icon: "webhook", label: "Webhooks" },
      { icon: "braces", label: "Swagger" },
    ] },
    { icon: "plug", label: "Integration", badge: "0" },
    { icon: "shield", label: "Administration", badge: "2", children: [
      { icon: "card", label: "Billing" },
      { icon: "users", label: "Users" },
    ] },
    { icon: "chat", label: "Support", badge: "2", children: [
      { icon: "ticket", label: "Tickets" },
      { icon: "book", label: "Knowledgebase" },
    ] },
  ];
  const rows = [
    { po: "KGB-2026-0214-991", date: "2026-06-01", amt: "$11,385.00", bill: "Kyoto Garden — Greenhouse 3", ship: "Kyoto Garden — Greenhouse 3", odate: "May 14, 2026", hi: true },
    { po: "LUM-2026-0529-252", date: "2026-06-01", amt: "$12,485.00", bill: "The Palace Theatre", ship: "The Palace Theatre", odate: "May 29, 2026", hi: false },
  ];
  return (
    <div className="aox">
      <aside className="aox__side">
        <div className="aox__brand"><Logo size={24} /></div>
        <nav className="aox__nav">
          {nav.map((item) => (
            <div key={item.label}>
              <div className={`aox__item ${item.groupActive ? "aox__item--active" : ""}`}>
                <span className="aox__ico"><AppIcon name={item.icon} /></span>
                <span className="aox__label">{item.label}</span>
                {item.badge && <span className="aox__badge">{item.badge}</span>}
                {item.children && <span className="aox__chev"><AppIcon name="chevron" size={14} /></span>}
              </div>
              {item.children && (
                <div className="aox__sub">
                  {item.children.map((c) => (
                    <div key={c.label} className={`aox__subitem ${c.active ? "is-active" : ""}`}>
                      <span className="aox__ico"><AppIcon name={c.icon} size={16} /></span>
                      <span>{c.label}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="aox__user">
          <div className="aox__avatar">EA</div>
          <div className="aox__userinfo">
            <div className="aox__username">Eaiguide Admin</div>
            <div className="aox__userrole">Altriks <span className="aox__roletag">SuperAdmin</span></div>
          </div>
          <span className="aox__chev"><AppIcon name="chevron" size={14} /></span>
        </div>
        <div className="aox__logout"><AppIcon name="reset" size={16} /> Logout</div>
      </aside>

      <main className="aox__main">
        <header className="aox__head">
          <button className="aox__menubtn" tabIndex={-1}><AppIcon name="menu" /></button>
          <span className="aox__headicon"><AppIcon name="box" size={20} /></span>
          <div>
            <div className="aox__title">Orders</div>
            <div className="aox__subtitle">View and manage purchase orders</div>
          </div>
          <div className="aox__viewing">Viewing: Altriks <AppIcon name="close" size={13} /></div>
        </header>

        <div className="aox__tabs">
          <span className="aox__tab is-active">Processed</span>
          <span className="aox__tab">Received</span>
        </div>

        <div className="aox__filters">
          <div className="aox__field aox__field--grow">
            <label>Search</label>
            <div className="aox__input"><AppIcon name="search" size={16} /><span className="aox__ph">Search by PO number…</span></div>
          </div>
          <div className="aox__field">
            <label>Status</label>
            <div className="aox__input aox__select">All Statuses <AppIcon name="chevron" size={14} /></div>
          </div>
          <div className="aox__field">
            <label>From</label>
            <div className="aox__input"><span className="aox__ph">Select date</span><AppIcon name="calendar" size={15} /></div>
          </div>
          <div className="aox__field">
            <label>To</label>
            <div className="aox__input"><span className="aox__ph">Select date</span><AppIcon name="calendar" size={15} /></div>
          </div>
          <button className="aox__apply" tabIndex={-1}><AppIcon name="filter" size={15} /> Apply</button>
          <button className="aox__clear" tabIndex={-1}><AppIcon name="reset" size={15} /> Clear</button>
        </div>

        <div className="aox__table">
          <div className="aox__trow aox__trow--head">
            <span>PO Number</span><span>Date</span><span>Status</span><span>Order Amount</span>
            <span>Bill To</span><span>Ship To</span><span>Order Date</span><span>Actions</span>
          </div>
          {rows.map((r) => (
            <div className={`aox__trow ${r.hi ? "is-hi" : ""} ${(r.hi && !revealFirstRow) ? "aox__trow--landing" : ""}`} key={r.po}>
              <span className="aox__po">{r.po}</span>
              <span>{r.date}</span>
              <span><span className="aox__pill">Received</span></span>
              <span className="aox__amt">{r.amt}</span>
              <span className="aox__ellip">{r.bill}</span>
              <span className="aox__ellip">{r.ship}</span>
              <span>{r.odate}</span>
              <span className="aox__actions">
                <span className="aox__act"><AppIcon name="file" size={15} /></span>
                <span className="aox__act"><AppIcon name="code" size={15} /></span>
                <span className="aox__act aox__act--blue"><AppIcon name="rowcheck" size={15} /></span>
              </span>
            </div>
          ))}
          <div className="aox__foot">
            <span>Showing 1 - 2 of 2 orders</span>
            <div className="aox__pager">
              <span className="aox__pg is-off">‹ Previous</span>
              <span className="aox__pg is-cur">1</span>
              <span className="aox__pg is-off">Next ›</span>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

/* ---------- Buttons ---------- */
function Button({ children, variant = "primary", size = "md", onClick, href = "#", type, disabled }) {
  const cls = `alt-btn alt-btn--${variant} alt-btn--${size}`;
  if (type === "submit") {
    return <button type="submit" className={cls} onClick={onClick} disabled={disabled}>{children}</button>;
  }
  return (
    <a className={cls} href={href} onClick={onClick}>
      {children}
    </a>
  );
}

function Arrow() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ marginLeft: 2 }} aria-hidden="true">
      <path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
function DownArrow() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" style={{ marginLeft: 2 }} aria-hidden="true">
      <path d="M8 3v9M4 7.5l4 4 4-4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

/* ---------- Browser frame for product mocks ---------- */
function BrowserFrame({ children, url = "app.altriks.com", style, live = false }) {
  return (
    <div className="alt-browser" style={style}>
      <div className="alt-browser__bar">
        <span className="alt-dot" style={{ background: "#FF5F57" }}></span>
        <span className="alt-dot" style={{ background: "#FEBC2E" }}></span>
        <span className="alt-dot" style={{ background: "#28C840" }}></span>
        <div className="alt-browser__url">
          {live && <span className="alt-live" style={{ marginRight: 8 }}></span>}
          {url}
        </div>
      </div>
      <div className="alt-browser__body">{children}</div>
    </div>
  );
}

/* ---------- Reveal: real IntersectionObserver scroll-in ----------
   Progressive enhancement — the hiding class (.alt-reveal => opacity:0) is only added
   when JS will actually observe + reveal. Under reduced-motion or no-IO we never add it,
   so content can never get stuck invisible (the original stub's fear). */
function Reveal({ children, delay = 0, as = "div", className = "", style = {} }) {
  const Tag = as;
  const ref = useRef(null);
  const animate = !__prefersReduce && typeof IntersectionObserver !== "undefined";
  useEffect(() => {
    if (!animate) return;
    const el = ref.current;
    if (!el) return;
    const io = __getRevealIO();
    if (!io) { el.classList.add("is-in"); return; }
    io.observe(el);
    return () => io.unobserve(el);
  }, [animate]);
  const cls = (animate ? "alt-reveal " : "") + className;
  return (
    <Tag ref={ref} className={cls} style={{ ...style, transitionDelay: delay ? `${delay}ms` : undefined }}>
      {children}
    </Tag>
  );
}

/* ---------- CountUp: animate a numeric stat when it scrolls into view ----------
   Parses a leading number (handles "<", "%", decimals); non-numeric ("Hours") stays static. */
function CountUp({ text, dur = 1400 }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const m = /^([<]?)\s*(\d+(?:\.\d+)?)(.*)$/.exec(text);
    if (!m || __prefersReduce || typeof IntersectionObserver === "undefined") { el.textContent = text; return; }
    const pre = m[1], numStr = m[2], suf = m[3];
    const target = parseFloat(numStr), dec = (numStr.split(".")[1] || "").length;
    el.textContent = pre + "0" + suf;
    const io = new IntersectionObserver(([e]) => {
      if (!e.isIntersecting) return;
      io.unobserve(el);
      const t0 = performance.now();
      const stepFn = (t) => {
        const k = Math.min(1, (t - t0) / dur), eased = 1 - Math.pow(1 - k, 3);
        el.textContent = pre + (target * eased).toFixed(dec) + suf;
        if (k < 1) requestAnimationFrame(stepFn);
      };
      requestAnimationFrame(stepFn);
    }, { threshold: 0.6 });
    io.observe(el);
    return () => io.disconnect();
  }, [text]);
  return <span ref={ref}>{text}</span>;
}

/* ---------- DesignPartnerForm: the page's one conversion action ----------
   Front-end only — validates, shows loading + success, and fires an `alt_lead`
   CustomEvent + console.log so analytics can attach later. */
const __FREE_MAIL = /@(gmail|googlemail|yahoo|ymail|hotmail|outlook|live|msn|icloud|me|aol|proton|protonmail|pm|gmx|mail|zoho|yandex|qq)\.[a-z.]+$/i;
const __EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
function DesignPartnerForm({ variant = "hero", buttonLabel = "Apply to become a design partner", onDone }) {
  const [email, setEmail] = useState("");
  const [company, setCompany] = useState("");
  const [phase, setPhase] = useState("idle"); // idle | loading | done | error
  const [err, setErr] = useState("");
  const timer = useRef(0);
  const showCompany = variant !== "compact";

  useEffect(() => () => clearTimeout(timer.current), []);

  const submit = (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!v) { setErr("Enter your work email."); setPhase("error"); return; }
    if (!__EMAIL_RE.test(v)) { setErr("That email doesn’t look right."); setPhase("error"); return; }
    if (__FREE_MAIL.test(v)) { setErr("Please use your work email so we can tailor the demo."); setPhase("error"); return; }
    setErr("");
    setPhase("loading");
    timer.current = setTimeout(() => {
      setPhase("done");
      const detail = { email: v, company: company.trim(), surface: variant };
      try { window.dispatchEvent(new CustomEvent("alt_lead", { detail })); } catch (_) {}
      console.log("[alt_lead]", detail);
      if (onDone) onDone();
    }, 900);
  };

  if (phase === "done") {
    return (
      <div className={`alt-cf__success alt-cf__success--${variant}`} role="status" aria-live="polite">
        <span className="alt-cf__check" aria-hidden="true">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 12.5l4.2 4.2L19 7.2" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </span>
        <div>
          <b>You’re on the design-partner list.</b>
          <span>We’ll email <i>{email.trim()}</i> within one business day to book your live PO run.</span>
        </div>
      </div>
    );
  }

  return (
    <form className={`alt-capture-form alt-capture-form--${variant}`} onSubmit={submit} noValidate>
      <div className="alt-cf__row">
        <input
          className="alt-cf__input" type="email" name="email" autoComplete="email"
          aria-label="Work email" placeholder="you@company.com"
          value={email} onChange={(e) => { setEmail(e.target.value); if (phase === "error") { setPhase("idle"); setErr(""); } }}
        />
        {showCompany && (
          <input
            className="alt-cf__input alt-cf__input--co" type="text" name="company" autoComplete="organization"
            aria-label="Company (optional)" placeholder="Company (optional)"
            value={company} onChange={(e) => setCompany(e.target.value)}
          />
        )}
        <Button type="submit" variant="primary" size="lg" onClick={() => {}} disabled={phase === "loading"}>
          {phase === "loading" ? <span className="alt-cf__spinner" aria-label="Submitting" /> : buttonLabel}
        </Button>
      </div>
      {err
        ? <p className="alt-cf__err" role="alert">{err}</p>
        : <p className="alt-cf__micro">Bring a real PO — we’ll run it live on a 30-min call. No commitment, no card.</p>}
    </form>
  );
}

/* ---------- Reveal: pass-through alias kept for any external callers (unused) ---------- */

/* ---------- Content constants ---------- */
const PROOF = [
  { value: "90%", label: "Touchless processing — our target" },
  { value: "<15 sec", label: "From inbox to ERP-ready" },
  { value: "4 data points", label: "Matched per line: customer, site, product, quote" },
  { value: "Hours", label: "Of CSR time given back, every day" },
];

const PROOF_LOGOS = ["Northwind", "Atlas", "Vertex", "Bluepeak", "Meridian", "Halcyon"]; // intentionally unrendered

const STEPS = [
  { n: "1", k: "Capture", d: "However your POs arrive — email, PDF, or API — Altriks picks them up automatically. No new portal, no change to how your customers order.", state: "PO KGB-2026-0214-991 received · email" },
  { n: "2", k: "Extract", d: "Altriks reads the document the way a person would — header, ship-to, every line, quantity, and price — and structures it in seconds.", state: "14 line items · 99% confidence" },
  { n: "3", k: "Match & Review", d: "Every order is matched against your master data — customer, ship-to site, product, and agreed quote. Clean orders pass through untouched; only true exceptions — an unknown part, or a price that doesn't match the quote — reach the review queue.", state: "13 matched · 1 exception flagged" },
  { n: "4", k: "Deliver", d: "A validated, ERP-ready order lands in your system over API or webhook — with a full, auditable trail of every change.", state: "Delivered via webhook · 0 keystrokes" },
];

const FEATURES = [
  { k: "AI document extraction", d: "Reads any PO layout — typed or scanned — with no templates to build or maintain. Captures the header, ship-to, and every line, down to per-line delivery schedules." },
  { k: "Customer, site & product matching", d: "Resolves every order against your master data — customer, ship-to site, and each product line — so orders land clean and complete." },
  { k: "Quote validation", d: "Checks every line against the agreed quote and flags any price or quantity that doesn't match — before it reaches your ERP." },
  { k: "ERP-ready delivery", d: "Delivers structured orders over REST API and webhooks — built to drop into your stack." },
  { k: "Full audit trail", d: "Logs every status change and edit — attributed, timestamped, immutable. SOC 2-aligned." },
  { k: "Multi-tenant by design", d: "Every account's data is scoped by tenant on every read and write — isolation enforced from day one." },
];

const INTEGRATIONS = ["NetSuite", "SAP", "Microsoft Dynamics", "Oracle", "QuickBooks", "Sage", "Acumatica", "Epicor"];

const SECURITY = [
  "Tenant-isolated data — encrypted in transit and at rest",
  "Immutable audit log on every order create, edit, and status change",
  "Built to SOC 2 standards",
  "Least-privilege access and scoped API credentials throughout",
];

Object.assign(window, {
  Logo, Button, Arrow, DownArrow, BrowserFrame, POAppMock, AppIcon, Reveal, CountUp, DesignPartnerForm,
  PROOF, PROOF_LOGOS, STEPS, FEATURES, INTEGRATIONS, SECURITY,
});