// Pricing section — 3 tiers: Grower (free), Pulse ($29.99), Pro ($249).

function Pricing({ onJoin }) {
  const tiers = [
    {
      id: 'grower',
      name: 'Grower',
      tag: 'For sellers',
      price: 'Free',
      priceSub: 'forever for first 1,000 farms',
      pitch: 'Sell on data. Never below market.',
      cta: 'Start free',
      featured: false,
      features: [
        'Unlimited stock listings',
        'Live regional spot price for your hay',
        'Receive firm offers from verified buyers',
        'Load history & payment tracking',
        'Mobile app',
      ],
    },
    {
      id: 'pulse',
      name: 'Pulse',
      tag: 'For small buyers',
      price: '$29.99',
      priceSub: 'per month',
      pitch: 'See the whole market. Buy small lots with confidence.',
      cta: 'Start with Pulse',
      featured: false,
      features: [
        'Live spot prices · all grades & regions',
        'Regional demand heatmap',
        '5 verified-load matches / month',
        '7-day price forecast',
        'Watchlist + email alerts (3 items)',
        'Mobile app',
      ],
    },
    {
      id: 'pro',
      name: 'Pro',
      tag: 'For dairies, feedlots, working buyers',
      price: '$249',
      priceSub: 'per month',
      pitch: 'The full terminal. Match, hedge, and lock supply.',
      cta: 'Start Pro trial',
      featured: true,
      features: [
        'Everything in Pulse, plus:',
        'Unlimited verified-load matching',
        'Freight-adjusted landed cost',
        'Lab data: Equi-Analytical, Dairyland, Cumberland',
        'Forward contracts up to 90 days',
        'Drought + weather supply signals',
        'Priority broker-free matching',
      ],
    },
  ];

  return (
    <>
      <style>{`
        .pricing { max-width: var(--container); margin: 0 auto;
          padding: clamp(64px, 8vw, 110px) var(--pad-x); }
        .pricing-hd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
          margin-bottom: 56px; }
        .pricing-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px;
          color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; }
        .pricing-title { font-size: clamp(34px, 4.5vw, 56px); line-height: 1.04; letter-spacing: -0.025em;
          font-weight: 600; margin: 4px 0 0; max-width: 18ch; text-wrap: balance; }
        .pricing-title .serif { color: var(--amber); }
        .pricing-sub { font-size: 16px; color: var(--ink-2); max-width: 540px; margin-top: 14px; line-height: 1.5; }
        .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
          align-items: stretch; }
        @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
        .ptier { background: #fbf8ee; border: 1px solid var(--line); border-radius: var(--r-lg);
          padding: 32px 28px 28px; display: flex; flex-direction: column; position: relative; }
        .ptier.featured {
          background: var(--ink); color: var(--paper);
          border-color: var(--ink);
          transform: translateY(-8px);
          box-shadow: 0 18px 60px rgba(45,33,16,0.18);
        }
        @media (max-width: 900px) { .ptier.featured { transform: none; } }
        .ptier-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
          letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
        .ptier.featured .ptier-tag { color: var(--amber-2); }
        .ptier-name { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 6px 0 0; }
        .ptier-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; }
        .ptier-price { font-family: 'JetBrains Mono', monospace; font-size: 44px; font-weight: 600;
          letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
        .ptier-price-sub { font-size: 12.5px; color: var(--ink-3);
          font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em; }
        .ptier.featured .ptier-price-sub { color: rgba(245,241,230,0.6); }
        .ptier-pitch { font-size: 14.5px; color: var(--ink-2); margin: 14px 0 0; line-height: 1.5;
          min-height: 44px; }
        .ptier.featured .ptier-pitch { color: rgba(245,241,230,0.78); }
        .ptier-cta { margin-top: 22px; height: 44px; border-radius: 8px; border: 0;
          font-size: 14px; font-weight: 600; font-family: inherit;
          background: var(--ink); color: var(--paper); }
        .ptier-cta:hover { background: var(--amber); }
        .ptier.featured .ptier-cta { background: var(--amber); color: var(--ink); }
        .ptier.featured .ptier-cta:hover { background: var(--amber-2); }
        .ptier-feat-hd { font-family: 'JetBrains Mono', monospace; font-size: 10px;
          letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3);
          margin: 26px 0 12px; padding-top: 22px; border-top: 1px dashed var(--line); }
        .ptier.featured .ptier-feat-hd { color: rgba(245,241,230,0.5); border-top-color: rgba(245,241,230,0.18); }
        .ptier-feat { display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none; }
        .ptier-feat li { font-size: 14px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start;
          line-height: 1.4; }
        .ptier.featured .ptier-feat li { color: rgba(245,241,230,0.86); }
        .ptier-feat li .check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
          border-radius: 50%; background: var(--amber-soft); color: var(--amber);
          display: grid; place-items: center; font-size: 10px; font-weight: 700; }
        .ptier.featured .ptier-feat li .check { background: rgba(232,144,32,0.22); color: var(--amber-2); }
        .ptier-badge {
          position: absolute; top: -12px; right: 22px;
          font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600;
          letter-spacing: 0.1em; text-transform: uppercase;
          background: var(--amber); color: var(--ink);
          padding: 5px 10px; border-radius: 999px;
        }
        .pricing-foot { text-align: center; margin-top: 40px;
          font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
          color: var(--ink-3); letter-spacing: 0.04em; }
        .pricing-foot a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
      `}</style>
      <section className="pricing" id="pricing">
        <div className="pricing-hd">
          <div className="pricing-eyebrow">/ pricing</div>
          <h2 className="pricing-title">Free for the farm.<br/><span className="serif">Pay for the edge.</span></h2>
          <p className="pricing-sub">Sellers list free, forever. Buyers pick the tier that fits — start with Pulse, scale to Pro when you're moving real volume.</p>
        </div>
        <div className="pricing-grid">
          {tiers.map((t) => (
            <div key={t.id} className={'ptier ' + (t.featured ? 'featured' : '')}>
              {t.featured && <span className="ptier-badge">Most popular</span>}
              <div className="ptier-tag">{t.tag}</div>
              <div className="ptier-name">{t.name}</div>
              <div className="ptier-price-row">
                <span className="ptier-price">{t.price}</span>
                <span className="ptier-price-sub">{t.priceSub}</span>
              </div>
              <div className="ptier-pitch">{t.pitch}</div>
              <button className="ptier-cta" onClick={onJoin}>{t.cta}</button>
              <div className="ptier-feat-hd">What's included</div>
              <ul className="ptier-feat">
                {t.features.map((f, i) => (
                  <li key={i}><span className="check">✓</span><span>{f}</span></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="pricing-foot">
          NEED MULTI-USER, API, OR EXPORT VOLUMES? <a href="#" onClick={(e) => { e.preventDefault(); onJoin(); }}>TALK TO SALES →</a>
        </div>
      </section>
    </>
  );
}

window.Pricing = Pricing;