function Packages({ onOpenModal }) {
  const premierPro = [
    'Professional photography',
    'Austin, San Antonio & Houston MLS',
    'Sign and lockbox',
    'Full digital marketing channels',
    'Social media marketing package',
    'Weekly market reports',
    'Open house rotation',
    'Full team experience',
  ];

  const ultimateAdd = [
    'Premium photography',
    'Priority placement in open house rotation',
    'Showcase upgrade for top search placement',
    'FLEX CASH Buyer Program',
    'Deal of the Week newsletter · 30,000+ subscribers',
  ];

  return (
    <section id="packages" className="section packages">
      <div className="section-inner">
        <div className="section-eyebrow">If you invoke the guarantee</div>
        <h2 className="section-title">
          Your two options<br/>
          <em>when it's time to sell.</em>
        </h2>
        <p className="section-lead">
          If you decide the home isn't right and invoke the Byrne Buyer
          Guarantee, this is what you're choosing between. Both packages are
          exclusive to guarantee holders ... <b style={{color:'var(--ink)',fontWeight:500}}>Premier Pro is included at zero cost</b>,
          Ultimate Showcase is an optional upgrade if you want maximum exposure.
        </p>

        <div className="pkg-grid">
          {/* PREMIER PRO */}
          <article className="pkg pkg-standard">
            <div className="pkg-header">
              <div className="pkg-tag">Included at no cost</div>
              <h3 className="pkg-name">Premier Pro</h3>
              <div className="pkg-price">
                <span className="pkg-price-value">$0</span>
                <span className="pkg-price-suffix">listing fee</span>
              </div>
              <div className="pkg-price-strike">normally 3%</div>
              <p className="pkg-desc">
                The standard package in the Byrne Buyer Guarantee.
              </p>
            </div>
            <ul className="pkg-list">
              {premierPro.map((f, i) => (
                <li key={i}>
                  <span className="pkg-check" aria-hidden="true">✓</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <div className="pkg-foot">
              <p className="pkg-fine">Buyer's agent fee is not included. See FAQ.</p>
            </div>
          </article>

          {/* ULTIMATE SHOWCASE */}
          <article className="pkg pkg-premium">
            <div className="pkg-header">
              <div className="pkg-tag pkg-tag-accent">Optional upgrade</div>
              <h3 className="pkg-name">Ultimate Showcase</h3>
              <div className="pkg-price">
                <span className="pkg-price-value">1.9%</span>
                <span className="pkg-price-suffix">listing fee</span>
              </div>
              <div className="pkg-price-strike">normally 4%</div>
              <p className="pkg-desc">
                Everything in Premier Pro, plus maximum exposure.
              </p>
            </div>
            <ul className="pkg-list">
              <li className="pkg-list-heading">Everything in Premier Pro</li>
              <li className="pkg-plus">Plus</li>
              {ultimateAdd.map((f, i) => (
                <li key={i} className="pkg-list-accent">
                  <span className="pkg-check" aria-hidden="true">✦</span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <div className="pkg-foot">
              <p className="pkg-highlight">
                Showcase listings average <b>~79% more views</b> and go under contract faster.
              </p>
              <p className="pkg-fine">Buyer's agent fee is not included.</p>
            </div>
          </article>
        </div>

        <div className="pkg-cta-row">
          <button className="btn-primary" onClick={onOpenModal}>
            Talk to us about your home →
          </button>
        </div>
      </div>
    </section>
  );
}

window.Packages = Packages;