E-Mail-Webseite-Marketing/components/PricingSection.tsx

export type Plan = "hosting" | "managed";

type PricingSectionProps = {
  activePlan: Plan;
  mailboxes: number;
  pricingSummaries: Record<Plan, string>;
  onPlanChange: (plan: Plan) => void;
  onMailboxesChange: (mailboxes: number) => void;
};

export default function PricingSection({ activePlan, mailboxes, pricingSummaries, onPlanChange, 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>
          <p>
            Pick a mailbox count and plan focus. The base mailbox price is transparent; setup, migration, support scope, minimums, taxes, and add-ons are confirmed during the assessment.
          </p>
        </div>

        <div className="pricing-builder" data-plan={activePlan} data-mailboxes={mailboxes}>
          <div className="pricing-control-panel">
            <div>
              <span className="panel-label">Plan focus</span>
              <div className="pricing-segmented" data-active={activePlan} role="group" aria-label="Plan focus">
                <button
                  className={activePlan === "hosting" ? "is-active" : ""}
                  type="button"
                  data-plan="hosting"
                  aria-pressed={activePlan === "hosting"}
                  onClick={() => onPlanChange("hosting")}
                >
                  Hosting
                </button>
                <button
                  className={activePlan === "managed" ? "is-active" : ""}
                  type="button"
                  data-plan="managed"
                  aria-pressed={activePlan === "managed"}
                  onClick={() => onPlanChange("managed")}
                >
                  Managed setup
                </button>
              </div>
            </div>

            <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>Based on <strong className="selected-mailboxes">{mailboxes}</strong> inboxes at $5 each.</small>
            </div>

            <p className="plan-summary">
              {pricingSummaries[activePlan]}
            </p>

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

          <div className="pricing-comparison-panel">
            <div className="comparison-head">
              <div>
                <span className="panel-label">What changes by scope</span>
                <h3>Hosting first, managed help when the migration needs it.</h3>
              </div>
              <span className="status-pill">Operational plan</span>
            </div>

            <div className="plan-feature-grid" role="table" aria-label="Plan feature comparison">
              <div className="plan-feature-row table-head" role="row">
                <span role="columnheader">Feature</span>
                <span role="columnheader">Hosting</span>
                <span role="columnheader">Managed setup</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">25 GB mailbox</span>
                <span role="cell">Included</span>
                <span role="cell">Included</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">Custom domain email</span>
                <span role="cell">Included</span>
                <span role="cell">Included</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">SPF, DKIM, DMARC check</span>
                <span role="cell">Configured</span>
                <span role="cell">Configured + validated</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">Migration from current provider</span>
                <span role="cell">Scoped</span>
                <span role="cell">Planned with handoff</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">Outlook, iPhone, iPad setup</span>
                <span role="cell">Guided</span>
                <span role="cell">Checked before handoff</span>
              </div>
              <div className="plan-feature-row" role="row">
                <span role="cell">Local support</span>
                <span role="cell">Available</span>
                <span role="cell">Priority during rollout</span>
              </div>
            </div>

            <p className="pricing-note">
              No inbox placement guarantees, no zero-downtime promise. The assessment confirms DNS access, provider constraints, migration timing, and device needs before work starts.
            </p>
          </div>
        </div>
      </section>
  );
}