type PricingSectionProps = {
  mailboxes: number;
  onMailboxesChange: (mailboxes: number) => void;
};

export default function PricingSection({ mailboxes, onMailboxesChange }: PricingSectionProps) {
  return (
      <section className="content-section pricing-detail" id="pricing-detail" aria-labelledby="pricing-title">
        <div className="section-heading">
          <p className="eyebrow">Simple mailbox pricing</p>
          <h2 id="pricing-title">$5 per inbox per month, scoped before you switch.</h2>
        </div>

        <div className="pricing-builder" data-mailboxes={mailboxes}>
          <div className="pricing-control-panel">
            <div>
              <span className="panel-label">Mailbox count</span>
              <div className="mailbox-options" role="group" aria-label="Estimated mailbox count">
                {[10, 25, 50].map((mailboxCount) => (
                  <button
                    className={mailboxes === mailboxCount ? "is-active" : ""}
                    type="button"
                    data-mailboxes={mailboxCount}
                    aria-pressed={mailboxes === mailboxCount}
                    onClick={() => onMailboxesChange(mailboxCount)}
                    key={mailboxCount}
                  >
                    {mailboxCount}
                  </button>
                ))}
              </div>
            </div>

            <div className="price-estimate">
              <span className="panel-label">Estimated base hosting</span>
              <p><span className="plan-total">${mailboxes * 5}</span><span>/ month</span></p>
              <small>For teams of 10+ mailboxes.</small>
            </div>

            <div className="offer-banner">
              <span className="offer-banner-icon" aria-hidden="true">&#9733;</span>
              Free migration &amp; setup for teams that switch by June&nbsp;30,&nbsp;2026.
            </div>

            <p className="price-subtext">$5 per mailbox / month. Free migration if you switch by June 30, 2026. Final scope confirmed in your assessment.</p>

            <a className="button button-primary" href="#assessment">Get a mailbox count quote</a>
          </div>

          <div className="pricing-included-panel">
            <span className="panel-label">What&rsquo;s included</span>
            <ul className="included-feature-list">
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                25 GB mailbox
              </li>
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                Custom domain email
              </li>
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                SPF, DKIM, DMARC configured
              </li>
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                Migration from current provider
              </li>
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                Outlook, iPhone, iPad setup
              </li>
              <li>
                <span className="included-check" aria-hidden="true">&#10003;</span>
                Local Corpus Christi support
              </li>
            </ul>
          </div>
        </div>
      </section>
  );
}