// GovBid AI · Shared chrome (Nav, TrustBar, Footer) and diagrams
// Loaded as Babel JSX. Components attached to window.

const NAV_LINKS = [
  { href: 'index.html', label: 'Home' },
  { href: 'features.html', label: 'Features' },
  { href: 'pricing.html', label: 'Pricing' },
  { href: 'about.html', label: 'About' },
  { href: 'security.html', label: 'Security' },
];

function GBNav({ active }) {
  return (
    <nav className="gb-nav">
      <div className="gb-nav-inner">
        <a href="index.html" className="gb-mark">
          <span className="gb-mark-dot"></span>
          GovBid<em>·ai</em>
        </a>
        <div className="gb-nav-links">
          {NAV_LINKS.map(l => (
            <a key={l.href} href={l.href} className={active === l.href ? 'active' : ''}>
              {l.label}
            </a>
          ))}
        </div>
        <div className="gb-nav-spacer"></div>
        <div className="gb-nav-cta">
          <a href="terminal/today.html" style={{ color: 'var(--ink-soft)', fontWeight: 500, fontFamily: 'var(--serif)', fontStyle: 'italic' }}>See the terminal →</a>
          <a href="https://app.trygovbidai.com/login" style={{ color: 'var(--ink-soft)', fontWeight: 500 }}>Sign in</a>
          <a href="https://app.trygovbidai.com/signup?plan=pro" className="btn btn-amber btn-arrow">Start free trial</a>
        </div>
      </div>
    </nav>
  );
}function TrustBar() {
  return (
    <div className="trust-bar">
      <div className="trust-bar-inner">
        <div className="trust-item">
          <span className="trust-item-label">UEI</span>
          <span className="trust-item-value">PR9KWJPM4JU9</span>
        </div>
        <div className="trust-divider"></div>
        <div className="trust-item">
          <span className="trust-item-label">CAGE</span>
          <span className="trust-item-value">91CE1</span>
        </div>
        <div className="trust-divider"></div>
        <div className="trust-item">
          <span className="trust-item-label">NYC MBE</span>
          <span className="trust-item-value">MWCERT2022-353</span>
        </div>
        <div className="trust-divider"></div>
        <div className="trust-item">
          <span className="trust-item-label">NAICS</span>
          <span className="trust-item-value">541512 · 541511 · 541519 · 518210 · 611420</span>
        </div>
        <div className="trust-divider"></div>
        <div className="trust-item">
          <span className="trust-item-label">Live Customers</span>
          <span className="trust-item-value">NYC · Since 2024</span>
        </div>
      </div>
    </div>
  );
}

function GBFooter() {
  return (
    <footer className="gb-footer">
      <div className="container-wide">
        <div>
          <div className="gb-footer-mark">GovBid<em>·ai</em></div>
          <p className="gb-footer-blurb">
            We don't write the bid for you. We write the first 80%, so you spend your time formatting winning.
          </p>
          <div className="gb-footer-meta">
            3 E Evergreen Road, Suite 101 · PMB 1058<br />
            New City, NY 10956<br />
            <strong>(646) 671-3399</strong><br />
            hello@trygovbidai.com
          </div>
        </div>
        <div>
          <h4>Product</h4>
          <ul>
            <li><a href="features.html">Features</a></li>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="features.html#01">SAM.gov match scoring</a></li>
            <li><a href="features.html#02">Section L drafting</a></li>
            <li><a href="features.html#03">SF-330 autofill</a></li>
            <li><a href="features.html#04">Win-probability scoring</a></li>
            <li><a href="features.html#05">Red-team mode</a></li>
            <li><a href="terminal/today.html">Terminal preview</a></li>
            <li><a href="https://app.trygovbidai.com/integrations">Integrations</a></li>
          </ul>
        </div>
        <div>
          <h4>Compare</h4>
          <ul>
            <li><a href="https://app.trygovbidai.com/alternatives">All alternatives</a></li>
            <li><a href="https://app.trygovbidai.com/vs-govwin">vs. GovWin</a></li>
            <li><a href="https://app.trygovbidai.com/vs-bidsync">vs. BidSync</a></li>
            <li><a href="https://app.trygovbidai.com/vs-fedmine">vs. Fedmine</a></li>
            <li><a href="https://app.trygovbidai.com/alternatives">vs. Hiring a writer</a></li>
            <li><a href="https://app.trygovbidai.com/alternatives">vs. ChatGPT</a></li>
            <li><a href="https://app.trygovbidai.com/glossary">GovCon glossary</a></li>
          </ul>
        </div>
        <div>
          <h4>Company</h4>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="security.html">Security</a></li>
            <li><a href="brand-collateral.html">Brand kit</a></li>
            <li><a href="https://app.trygovbidai.com/case-studies">Customer stories</a></li>
            <li><a href="https://app.trygovbidai.com/careers">Careers</a></li>
            <li><a href="https://app.trygovbidai.com/changelog">Changelog</a></li>
            <li><a href="https://app.trygovbidai.com/contact">Contact</a></li>
            <li><a href="https://app.trygovbidai.com/status">System status</a></li>
          </ul>
        </div>
        <div>
          <h4>Resources</h4>
          <ul>
            <li><a href="https://app.trygovbidai.com/blog">Blog</a></li>
            <li><a href="https://app.trygovbidai.com/help">Help center</a></li>
            <li><a href="https://app.trygovbidai.com/glossary">Glossary</a></li>
            <li><a href="brand-collateral.html#capability">Capability statement</a></li>
            <li><a href="https://app.trygovbidai.com/compliance">Compliance</a></li>
            <li><a href="https://app.trygovbidai.com/agency">For agencies</a></li>
            <li><a href="https://app.trygovbidai.com/affiliates">Affiliate program</a></li>
          </ul>
        </div>
      </div>
      <div className="gb-footer-bottom">
        <div>© 2026 IT Custom Solution LLC. All rights reserved.</div>
        <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="https://app.trygovbidai.com/privacy">Privacy</a>
          <a href="https://app.trygovbidai.com/terms">Terms</a>
          <a href="https://app.trygovbidai.com/dpa">DPA</a>
          <a href="https://app.trygovbidai.com/cookies">Cookies</a>
          <a href="https://app.trygovbidai.com/accessibility">Accessibility</a>
          <a href="mailto:security@trygovbidai.com">Security disclosure</a>
          <span className="itc-mark">
            <span className="itc-mark-dot">ITC</span>
            A product of IT Custom Solution
          </span>
        </div>
      </div>
    </footer>
  );
}

/* =========================================================
   DIAGRAMS · hand-drawn editorial style
   ========================================================= */

// Section L → Past Performance map
function DiagramSectionLMap({ width = 720, height = 380 }) {
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <marker id="ar1" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M0,0 L8,4 L0,8" className="ink-stroke" />
        </marker>
        <marker id="ar2" markerWidth="8" markerHeight="8" refX="6" refY="4" orient="auto">
          <path d="M0,0 L8,4 L0,8" className="ink-stroke-amber" />
        </marker>
      </defs>

      {/* Title strip */}
      <text x="20" y="22" className="annot-label">Fig. 01 · Section L → Past Performance match</text>
      <line x1="20" y1="32" x2={width - 20} y2="32" stroke="var(--rule)" strokeWidth="1" strokeDasharray="2 4" />

      {/* Left column · Section L requirements */}
      <text x="20" y="60" className="annot-label-amber">SOLICITATION · SECTION L</text>

      {[
        { y: 90, code: 'L.3.1', txt: 'Demonstrate prior experience on cloud migrations ≥$2M' },
        { y: 138, code: 'L.3.2', txt: 'Three (3) projects within last five (5) years' },
        { y: 186, code: 'L.4.1', txt: 'Key personnel with active Secret clearance' },
        { y: 234, code: 'L.5.2', txt: 'Quality assurance plan referencing CMMI L3' },
      ].map((row, i) => (
        <g key={i}>
          <rect x="20" y={row.y - 18} width="280" height="36" fill="var(--paper)" stroke="var(--rule)" />
          <text x="30" y={row.y - 4} className="mono" fontSize="10" fill="var(--amber-deep)" fontWeight="600">{row.code}</text>
          <text x="30" y={row.y + 9} fontSize="11" fill="var(--ink-soft)" fontFamily="var(--sans)">{row.txt.slice(0, 42)}</text>
        </g>
      ))}

      {/* Right column · Past performance entries */}
      <text x={width - 280} y="60" className="annot-label-amber">YOUR PAST PERFORMANCE LIBRARY</text>

      {[
        { y: 90, code: 'PP-014', txt: 'DHS S&T cloud lift-and-shift · $3.4M · 2023' },
        { y: 138, code: 'PP-022', txt: 'NAVAIR data warehouse modernization · $5.1M' },
        { y: 186, code: 'PP-007', txt: 'Treasury OCIO container migration · $2.8M' },
        { y: 234, code: 'PP-031', txt: 'CMMI Level 3 appraisal · Apr 2024' },
      ].map((row, i) => (
        <g key={i}>
          <rect x={width - 280} y={row.y - 18} width="280" height="36" fill="var(--paper)" stroke="var(--rule)" />
          <text x={width - 270} y={row.y - 4} className="mono" fontSize="10" fill="var(--amber-deep)" fontWeight="600">{row.code}</text>
          <text x={width - 270} y={row.y + 9} fontSize="11" fill="var(--ink-soft)" fontFamily="var(--sans)">{row.txt.slice(0, 44)}</text>
        </g>
      ))}

      {/* Connecting lines */}
      {[
        { y1: 90, y2: 90 },
        { y1: 138, y2: 90 },
        { y1: 138, y2: 138 },
        { y1: 138, y2: 186 },
        { y1: 186, y2: 234 },
        { y1: 234, y2: 234 },
      ].map((c, i) => (
        <path
          key={i}
          d={`M 300 ${c.y1} C 380 ${c.y1}, ${width - 360} ${c.y2}, ${width - 280} ${c.y2}`}
          className="ink-stroke"
          strokeWidth="0.8"
          opacity="0.55"
        />
      ))}

      {/* Bottom: synthesis arrow */}
      <line x1="160" y1="280" x2="160" y2="320" className="ink-stroke-amber" markerEnd="url(#ar2)" />
      <line x1={width - 160} y1="280" x2={width - 160} y2="320" className="ink-stroke-amber" markerEnd="url(#ar2)" />

      <rect x="100" y="320" width={width - 200} height="44" fill="var(--navy)" />
      <text x={width / 2} y="340" textAnchor="middle" fill="var(--cream)" fontFamily="var(--serif)" fontStyle="italic" fontSize="14">
        Draft narrative for L.3.1 · synthesized from PP-014, PP-022, PP-007
      </text>
      <text x={width / 2} y="356" textAnchor="middle" fill="var(--amber-tint)" className="mono" fontSize="10" letterSpacing="0.1em">
        ~8 MIN · COMPLIANT · CITATIONS PRESERVED
      </text>
    </svg>
  );
}

// SAM.gov pull → win-probability pipeline
function DiagramScoringPipeline({ width = 720, height = 280 }) {
  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
      <defs>
        <marker id="ar3" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto">
          <path d="M0,0 L8,4 L0,8" className="ink-stroke" />
        </marker>
      </defs>

      <text x="20" y="22" className="annot-label">Fig. 02 · How a SAM.gov solicitation becomes a score</text>
      <line x1="20" y1="32" x2={width - 20} y2="32" stroke="var(--rule)" strokeDasharray="2 4" />

      {/* Step boxes */}
      {[
        { x: 30, label: 'PULL', sub: 'SAM.gov + agency forecasts', detail: '~14k active opps' },
        { x: 200, label: 'PARSE', sub: 'Section L/M, NAICS, set-aside', detail: 'OCR + AI extraction' },
        { x: 370, label: 'MATCH', sub: 'Against your firm profile', detail: 'NAICS · clearance · PP' },
        { x: 540, label: 'SCORE', sub: '0-100 win probability', detail: 'Published eval factors' },
      ].map((s, i) => (
        <g key={i}>
          <rect x={s.x} y="70" width="140" height="100" fill="var(--paper)" stroke="var(--navy)" strokeWidth="1.2" />
          <rect x={s.x} y="70" width="140" height="20" fill="var(--navy)" />
          <text x={s.x + 70} y="84" textAnchor="middle" fill="var(--amber-tint)" className="mono" fontSize="10" fontWeight="600" letterSpacing="0.16em">
            {`0${i + 1}  ${s.label}`}
          </text>
          <text x={s.x + 70} y="118" textAnchor="middle" fill="var(--navy)" fontFamily="var(--serif)" fontStyle="italic" fontSize="13">
            {s.sub}
          </text>
          <text x={s.x + 70} y="148" textAnchor="middle" fill="var(--ink-mute)" className="mono" fontSize="9" letterSpacing="0.06em">
            {s.detail}
          </text>
        </g>
      ))}

      {/* Arrows between steps */}
      {[170, 340, 510].map((x, i) => (
        <line key={i} x1={x} y1="120" x2={x + 30} y2="120" className="ink-stroke" markerEnd="url(#ar3)" />
      ))}

      {/* Output: scored opps */}
      <text x={width / 2} y="210" textAnchor="middle" className="annot-label-amber">OUTPUT</text>
      <g transform="translate(60, 220)">
        {[
          { id: 'W56KGY-26-R-0142', score: 92, label: 'STRONG MATCH' },
          { id: 'GS00Q-26-R-0088', score: 81, label: 'WORTH PURSUING' },
          { id: 'N00178-26-R-7001', score: 76, label: 'STRETCH' },
          { id: '47QFCA-26-R-0014', score: 41, label: 'NO-BID' },
        ].map((o, i) => (
          <g key={i} transform={`translate(${i * 150}, 0)`}>
            <rect x="0" y="0" width="140" height="36" fill={i === 3 ? 'var(--cream-3)' : 'var(--paper)'} stroke="var(--rule)" />
            <text x="8" y="14" className="mono" fontSize="9" fill="var(--ink-soft)">{o.id}</text>
            <text x="8" y="28" fontFamily="var(--serif)" fontSize="11" fontWeight="600" fill={i < 3 ? 'var(--navy)' : 'var(--ink-mute)'}>{o.label}</text>
            <text x="132" y="22" textAnchor="end" className="mono" fontSize="14" fontWeight="700" fill={i === 0 ? 'var(--amber-deep)' : 'var(--navy)'}>{o.score}</text>
          </g>
        ))}
      </g>
    </svg>
  );
}

// Where the 8 minutes go · stacked time bar
function DiagramEightMinutes({ width = 720, height = 200 }) {
  const segments = [
    { w: 12, label: 'Parse Section L', sub: '0:48' },
    { w: 18, label: 'Search past performance', sub: '1:12' },
    { w: 24, label: 'Draft narrative', sub: '1:36' },
    { w: 16, label: 'Tone + voice match', sub: '1:04' },
    { w: 14, label: 'Citations + SF-330 fields', sub: '0:56' },
    { w: 16, label: 'Compliance scrub', sub: '1:04' },
  ];
  const total = segments.reduce((a, s) => a + s.w, 0);
  const barX = 30;
  const barW = width - 60;
  let x = barX;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
      <text x="20" y="22" className="annot-label">Fig. 03 · Where the 8 minutes go</text>
      <line x1="20" y1="32" x2={width - 20} y2="32" stroke="var(--rule)" strokeDasharray="2 4" />

      <text x={barX} y="62" fontFamily="var(--serif)" fontSize="42" fontWeight="500" fill="var(--navy)">
        8:00<tspan className="mono" fontSize="13" fill="var(--ink-mute)" dx="12">MEDIAN, FROM SOLICITATION TO DRAFT</tspan>
      </text>

      {/* Bar */}
      <g>
        {segments.map((s, i) => {
          const segW = (s.w / total) * barW;
          const segX = x;
          x += segW;
          const isAccent = i === 2;
          return (
            <g key={i}>
              <rect x={segX} y="90" width={segW - 1} height="44" fill={isAccent ? 'var(--amber)' : i % 2 === 0 ? 'var(--navy)' : 'var(--navy-2)'} />
              <text x={segX + 8} y="108" fill={isAccent ? 'var(--navy)' : 'var(--cream)'} fontSize="11" fontFamily="var(--sans)" fontWeight="500">
                {s.label}
              </text>
              <text x={segX + 8} y="124" fill={isAccent ? 'var(--navy)' : 'var(--cream-2)'} className="mono" fontSize="10" opacity={isAccent ? 1 : 0.7}>
                {s.sub}
              </text>
            </g>
          );
        })}
      </g>

      {/* Annotation under accent segment */}
      <line x1={barX + (54 / total) * barW + 20} y1="142" x2={barX + (54 / total) * barW + 20} y2="170" className="ink-stroke-amber" />
      <text x={barX + (54 / total) * barW + 28} y="166" className="annot-label-amber">↑ THE PART THAT USED TO TAKE YOU 3 DAYS</text>
    </svg>
  );
}

Object.assign(window, {
  GBNav, TrustBar, GBFooter,
  DiagramSectionLMap, DiagramScoringPipeline, DiagramEightMinutes,
  NAV_LINKS,
});