/* @jsx React.createElement */

function Architecture() {
  const rows = [
    { name: "tam",        slash: "",          desc: "Builds and maintains the addressable account universe. Pulls firmographic sources, expands beyond any single dataset, scores accounts as they enter, keeps the universe fresh.", output: "TAM Map", cadence: "quarterly + alerts" },
    { name: "signal",     slash: "",          desc: "Detects buying signals across three buckets — Expansion, New Sheriff, Leaky Bucket — plus customer-specific custom signals. Scores and routes by intensity.",                output: "Signal Intelligence", cadence: "daily, weekdays" },
    { name: "enrichment", slash: "cascade",   desc: "Runs Cascade — probabilistic routing across 15+ data sources with AI-driven fallback, optimized for cost per successful resolution.",                          output: "Cascade Report", cadence: "first business day / month" },
    { name: "delivery",   slash: "",          desc: "Inbox warmup, deliverability monitoring, placement modeling. Ensures sends from your sequencer land in the primary inbox.",                                                output: "Delivery Report", cadence: "monthly + anomaly alerts" },
  ];
  return (
    <section id="product">
      <div className="wrap">
        <div className="eyebrow"><span className="num">02</span> <span className="am">·</span> the four systems</div>
        <div className="section-head">
          <h2>Four systems.<br/>Always on.<br/><span className="am">Non-optional.</span></h2>
          <p className="blurb">Not modules. Not add-ons. The four systems ship together because outbound infrastructure isn&rsquo;t composable &mdash; it&rsquo;s integrated. Cascade runs inside Enrichment; the rest run alongside.</p>
        </div>
        <div className="arch">
          {rows.map(r => (
            <div className="arch-row" key={r.name}>
              <div className="name">{r.name}{r.slash && (<><span className="am">/</span>{r.slash}</>)}</div>
              <div className="desc">{r.desc}</div>
              <div className="output">output<span className="v">{r.output}</span><span style={{fontFamily:'var(--font-mono)',fontSize:11,color:'#6E6B66',letterSpacing:'0.06em',display:'block',marginTop:4}}>{r.cadence}</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Comparison() {
  return (
    <section>
      <div className="wrap">
        <div className="eyebrow"><span className="num">03</span> <span className="am">·</span> the math</div>
        <div className="section-head">
          <h2>Don&rsquo;t hire,<br/><span className="am">deploy.</span></h2>
          <p className="blurb">A GTM Engineer costs $180K/year and takes 45 days to be useful. An in-house modern stack runs $210K and 90+ days. GTM OS is shipped infrastructure: live in 14 days, included Cascade, included Delivery.</p>
        </div>
        <table className="cmp-table">
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>In-house orchestration</th>
              <th>GTM Engineer</th>
              <th className="am">GTM OS</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>Time to live</td><td>90+ days</td><td>45 days</td><td className="am">14 days</td></tr>
            <tr><td>Annual cost</td><td>$210K</td><td>$180K</td><td className="am">$72K</td></tr>
            <tr><td>Enrichment cost / record</td><td>$0.18</td><td>$0.14</td><td className="am">$0.03</td></tr>
            <tr><td>Coverage hit rate</td><td>52%</td><td>61%</td><td className="am">68%</td></tr>
            <tr><td>Cascade architecture</td><td>—</td><td>—</td><td className="am">included</td></tr>
            <tr><td>Inbox placement monitoring</td><td>—</td><td>partial</td><td className="am">included</td></tr>
          </tbody>
        </table>
      </div>
    </section>
  );
}

function Cadence() {
  const data = window.YEAR_2026;
  const grid = data.grid;
  const monthFirstWeek = data.monthFirstWeek;
  const MONTH_NAMES = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];
  const WEEKDAY_NAMES = ["mon","tue","wed","thu","fri"];

  // Counts for the legend
  const flat = grid.flat();
  const counts = {
    signal:   flat.filter(c => c.type === 'signal').length,
    cascade:  flat.filter(c => c.markers.includes('cascade')).length,
    tam:      flat.filter(c => c.markers.includes('tam')).length,
    anomaly:  flat.filter(c => c.markers.includes('anomaly')).length,
  };

  return (
    <section id="cadence" className="year-view">
      <div className="wrap">
        <div className="eyebrow"><span className="num">04</span> <span className="am">·</span> rhythm</div>
        <div className="section-head">
          <h2>One year.<br/>The channel never goes silent<br/><span className="am">on a working day.</span></h2>
          <p className="blurb">Signal Intelligence runs Monday&ndash;Friday. Cascade Report posts on the first business day of each month. TAM Map posts on the first business day of each quarter. Delivery Report runs monthly &mdash; and louder when an anomaly fires. Below: the 2026 channel, every weekday accounted for.</p>
        </div>

        {/* The calendar */}
        <div className="yv-frame">
          <div className="yv-meta">
            <span className="yv-meta-yr">2026</span>
            <span className="yv-meta-sep">/</span>
            <span className="yv-meta-ch">#gtmos</span>
            <span className="yv-meta-spacer" />
            <span className="yv-meta-rt">53 weeks &middot; {counts.signal} posts &middot; weekends and US holidays excluded</span>
          </div>

          <div className="yv-grid-wrap">
            {/* month axis along the top */}
            <div className="yv-months" style={{gridTemplateColumns: `28px repeat(${grid.length}, 1fr)`}}>
              <div className="yv-corner" />
              {grid.map((_, wi) => {
                const monthLabel = Object.entries(monthFirstWeek).find(([m, w]) => w === wi);
                return (
                  <div key={wi} className="yv-month-cell">
                    {monthLabel ? <span className="yv-month-label">{MONTH_NAMES[monthLabel[0]]}</span> : null}
                  </div>
                );
              })}
            </div>

            {/* 5 weekday rows */}
            {[0,1,2,3,4].map(wd => (
              <div key={wd} className="yv-row" style={{gridTemplateColumns: `28px repeat(${grid.length}, 1fr)`}}>
                <div className="yv-wd-label">{WEEKDAY_NAMES[wd]}</div>
                {grid.map((week, wi) => {
                  const cell = week[wd];
                  const cls = ["yv-cell"];
                  if (cell.type === 'signal') cls.push('signal');
                  if (cell.holiday) cls.push('holiday');
                  if (!cell.inYear) cls.push('out');
                  if (cell.markers.includes('cascade')) cls.push('cascade');
                  if (cell.markers.includes('tam'))     cls.push('tam');
                  if (cell.markers.includes('anomaly')) cls.push('anomaly');
                  return <div key={wi} className={cls.join(' ')} title={cell.date} />;
                })}
              </div>
            ))}
          </div>

          <div className="yv-legend">
            <div className="yv-leg-item">
              <span className="yv-swatch signal" />
              <span className="yv-leg-text"><strong>signal<span className="am">/</span>intelligence</strong> &mdash; {counts.signal} days</span>
            </div>
            <div className="yv-leg-item">
              <span className="yv-swatch cascade-marker" />
              <span className="yv-leg-text"><strong>cascade<span className="am">/</span>report</strong> &mdash; 12&times;/yr</span>
            </div>
            <div className="yv-leg-item">
              <span className="yv-swatch tam-marker" />
              <span className="yv-leg-text"><strong>tam<span className="am">/</span>map</strong> &mdash; 4&times;/yr</span>
            </div>
            <div className="yv-leg-item">
              <span className="yv-swatch anomaly-marker" />
              <span className="yv-leg-text"><strong>delivery<span className="am">/</span>report</strong> &mdash; monthly <span className="am">&middot;</span> anomalies when they fire</span>
            </div>
            <div className="yv-leg-item">
              <span className="yv-swatch empty" />
              <span className="yv-leg-text">weekend / US holiday</span>
            </div>
          </div>

          <div className="yv-stamp">DAILY <span className="am">&middot;</span> FOREVER</div>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  return (
    <section id="pricing">
      <div className="wrap">
        <div className="eyebrow"><span className="num">05</span> <span className="am">·</span> pricing</div>
        <div className="section-head">
          <h2>Three tiers.<br/>Annual contracts.<br/><span className="am">No procurement theater.</span></h2>
          <p className="blurb">All tiers include all four systems. The difference is universe size, signal volume, and enrichment cap. Plugs into Outreach, Salesloft, and HubSpot at every tier.</p>
        </div>
        <div className="price-grid">
          <div className="price">
            <div className="tier">deploy</div>
            <div><div className="num">$36K</div><div className="per">/ year &middot; up to 10K accounts</div></div>
            <ul>
              <li>All four systems</li>
              <li>Standard signal buckets</li>
              <li>15K enrichments / month</li>
              <li>15K sends / month</li>
              <li>4 standard integrations</li>
              <li>Setup included &middot; 14 days to live</li>
            </ul>
            <a href={window.DEPLOY_CTA_HREF} className="btn-secondary">Provision your back end</a>
          </div>
          <div className="price featured">
            <div className="tier">scale &middot; recommended</div>
            <div><div className="num">$72K</div><div className="per">/ year &middot; up to 35K accounts</div></div>
            <ul>
              <li>All four systems</li>
              <li className="signal-line"><span className="lead">2 custom signals</span><span className="qual">&mdash; built to your ICP</span></li>
              <li>60K enrichments / month</li>
              <li>50K sends / month</li>
              <li>4 standard integrations</li>
              <li>Setup included &middot; 14 days to live</li>
            </ul>
            <a href={window.DEPLOY_CTA_HREF} className="btn-primary">Get #gtmos in your Slack</a>
          </div>
          <div className="price">
            <div className="tier">operate</div>
            <div><div className="num">$144K</div><div className="per">/ year &middot; up to 100K accounts</div></div>
            <ul>
              <li>All four systems</li>
              <li className="signal-line"><span className="lead">4 custom signals</span><span className="qual">&mdash; built to your ICP</span></li>
              <li>150K enrichments / month</li>
              <li>150K sends / month</li>
              <li>4 standard integrations</li>
              <li>Dedicated onboarding engineer</li>
              <li>Priority support SLA</li>
            </ul>
            <a href={window.DEPLOY_CTA_HREF} className="btn-secondary">Start your 14-day deployment</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="wrap foot-inner">
        <div className="mark">gtm<span className="am">/</span>os <span style={{margin:'0 8px',color:'#3a3a44'}}>·</span> v1.0 / april 2026 <span style={{margin:'0 8px',color:'#3a3a44'}}>·</span> gtmos.run</div>
        <div className="links">
          <a href="docs.html">spec</a>
          <a href="docs.html#enrichment">cascade</a>
          <a href="careers.html">careers</a>
          <a href="status.html">status</a>
        </div>
      </div>
    </footer>
  );
}

window.Architecture = Architecture;
window.Comparison = Comparison;
window.Cadence = Cadence;
window.Pricing = Pricing;
window.Footer = Footer;