/* @jsx React.createElement */
const { useState: useStateMk } = React;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="mark">gtm<span className="am">/</span>os</div>
        <div className="links">
          <a href="#product">product</a><span className="sep">/</span>
          <a href="#pricing">pricing</a><span className="sep">/</span>
          <a href="docs.html">docs</a><span className="sep">/</span>
          <a href="status.html">status</a>
        </div>
        <div className="actions">
          <a href="docs.html" className="btn-ghost">read the spec <span className="am">&rarr;</span></a>
          <a href={window.DEPLOY_CTA_HREF} className="btn-primary">Get #gtmos in your Slack</a>
        </div>
      </div>
    </nav>
  );
}

/* Wraps a GTM post in faux-Slack chrome so a marketing-page reader instantly
   reads it as "this is what arrives in your Slack" — not a generic dark card. */
function SlackChrome({ children, channel = "gtmos", ts = "06:00" }) {
  return (
    <div className="slack-chrome">
      <div className="sc-titlebar">
        <span className="sc-dots">
          <span className="d r" /><span className="d y" /><span className="d g" />
        </span>
        <span className="sc-channel"><span className="hash">#</span>{channel}</span>
        <span className="sc-spacer" />
        <span className="sc-meta">acme &middot; revops</span>
      </div>
      <div className="sc-body">
        <div className="sc-post">
          <div className="sc-avatar"><span>/</span></div>
          <div className="sc-content">
            <div className="sc-meta-row">
              <span className="who">GTM OS</span>
              <span className="app">app</span>
              <span className="ts">{ts}</span>
            </div>
            {children}
          </div>
        </div>
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero hero-split">
      <div className="wrap hero-grid">
        <div className="hero-left">
          <div className="eyebrow"><span className="num">v1.0</span> <span className="am">/</span> april 2026 <span className="am">/</span> infrastructure</div>
          <h1>Your outbound back end,<br/><span className="am">operated.</span></h1>
          <p className="sub">Four always-on systems &mdash; TAM, Signal, Enrichment, Delivery &mdash; running behind your CRM and your sequencer. Live in 14 days. Posts to one Slack channel.</p>
          <div className="ctas">
            <a href={window.DEPLOY_CTA_HREF} className="btn-primary">Get #gtmos in your Slack</a>
            <a href={window.DEPLOY_CTA_HREF} className="btn-secondary">Review the architecture</a>
          </div>
          <div className="hero-stats">
            <div className="hs">
              <div className="n">14</div>
              <div className="c">days to live. Signed Tuesday, first signal Friday-after-next.</div>
            </div>
            <div className="hs">
              <div className="n">250</div>
              <div className="c">posts per year per customer. Daily, in #gtmos.</div>
            </div>
            <div className="hs">
              <div className="n am">15.6&times;</div>
              <div className="c">cost ratio versus a single-source enrichment stack.</div>
            </div>
          </div>
        </div>
        <div className="hero-right">
          <div className="hero-right-meta">
            <span className="dot live" />
            <span>posted to #gtmos &middot; today &middot; 06:00 PT</span>
          </div>
          <SlackChrome>
            <SignalIntelligence />
          </SlackChrome>
          <div className="hero-right-foot">
            One of <strong>four post types</strong>. <span className="muted">No dashboard. No queries. No customization.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* The Product section — the most important new section. Tabbed display of the
   four canonical post types. The product IS the post; this is what a prospect
   sees instead of a fake dashboard. */
function Product() {
  const [active, setActive] = useStateMk("signal");
  const tabs = [
    { id: "signal",   label: "signal",   slash: "intelligence", freq: "daily, weekdays",       comp: SignalIntelligence },
    { id: "cascade",  label: "cascade",  slash: "report",       freq: "first business day / month", comp: CascadeReport },
    { id: "tam",      label: "tam",      slash: "map",          freq: "first business day / quarter", comp: TamMap },
    { id: "delivery", label: "delivery", slash: "report",       freq: "monthly + anomaly alerts", comp: DeliveryReport },
  ];
  const current = tabs.find(t => t.id === active);
  const Comp = current.comp;
  return (
    <section id="product" className="product">
      <div className="wrap">
        <div className="eyebrow"><span className="num">01</span> <span className="am">·</span> the product</div>
        <div className="section-head">
          <h2>The product is<br/>a Slack post.<br/><span className="am">That&rsquo;s the whole UI.</span></h2>
          <p className="blurb">Every customer gets one channel: <strong>#gtmos</strong>. We post into it. Four post types, ~250 posts a year, fixed format. No dashboard to log into. No queries to write. No knobs to turn.</p>
        </div>

        <div className="post-tabs" role="tablist">
          {tabs.map(t => (
            <button
              key={t.id}
              role="tab"
              aria-selected={active === t.id}
              className={"post-tab" + (active === t.id ? " active" : "")}
              onClick={() => setActive(t.id)}
            >
              <span className="lbl">{t.label}<span className="am">/</span>{t.slash}</span>
              <span className="freq">{t.freq}</span>
            </button>
          ))}
        </div>

        <div className="post-stage">
          <SlackChrome>
            <Comp />
          </SlackChrome>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Product = Product;
window.SlackChrome = SlackChrome;