// StartPaths — the whole price list, on the homepage.
//
// All six tiers rather than a summary: the wedge against demo-gated
// competitors is that a visitor can see what this costs without asking anyone,
// and that only works if the numbers are actually on the page they land on.
// /pricing/ holds the envelope sizer, the capability rows and the mechanics;
// this is the same ladder in one glance, and every card links there.
//
// Rendered straight from data/pricingPlans.js so the homepage cannot drift
// from the pricing table. Each plan carries a `short` line written for this
// width — `who` is the full-table copy and is far too long for a 165px card.
//
// eyebrow/heading/ctaArrow are optional so the landing page can speak in its
// own register (sentence case, Apple chevron) without forking the component or
// changing how it reads on /product/proof-not-probability/.
function StartPaths({ eyebrow, heading, ctaArrow = '→' } = {}) {
  const { React } = window;
  const plans = window.PricingPlans || [];
  if (!plans.length) return null;

  return (
    <section className="startpaths-section" data-screen-label="Pricing — all six tiers">
      <div className="startpaths-inner">
        <p className="startpaths-eyebrow">{eyebrow || 'pricing'}</p>
        <h2 className="startpaths-heading">{heading || 'every price, on this page.'}</h2>
        <div className="startpaths-grid startpaths-grid--six">
          {plans.map((p) => (
            <div
              className={`startpath startpath--${p.k} ${p.featured ? 'is-featured' : ''}`}
              key={p.k}
            >
              <div className="startpath-top">
                <h3 className="startpath-name">{p.name}</h3>
                <div className="startpath-price">
                  {p.price}
                  {p.priceNote && <span className="startpath-per"> {p.priceNote}</span>}
                </div>
              </div>
              <p className="startpath-body">{p.short || p.who}</p>
              <a className="startpath-cta" href="/pricing/">
                Details {ctaArrow}
              </a>
            </div>
          ))}
        </div>
        <p className="startpaths-foot">
          <a className="ah-link" href="/pricing/">
            Size your envelope and compare every row<span className="ah-chev">›</span>
          </a>
        </p>
      </div>
    </section>
  );
}

window.StartPaths = StartPaths;