First commit

components/PricingSection.tsx

@@ -0,0 +1,133 @@
+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>
+  );
+}