First commit

components/ContinuitySection.tsx

@@ -0,0 +1,95 @@
+export type FeatureKey = "buffering" | "sending" | "standby" | "local";
+
+export type ContinuityFeature = {
+  title: string;
+  copy: string;
+  proof: string[];
+};
+
+type ContinuitySectionProps = {
+  activeFeature: FeatureKey;
+  activeFeatureDetails: ContinuityFeature;
+  onFeatureChange: (feature: FeatureKey) => void;
+};
+
+export default function ContinuitySection({ activeFeature, activeFeatureDetails, onFeatureChange }: ContinuitySectionProps) {
+  return (
+      <section className="content-section continuity-section" id="continuity" aria-labelledby="continuity-title">
+        <div className="section-heading narrow">
+          <p className="eyebrow">Continuity</p>
+          <h2 id="continuity-title">Designed for continuity, explained in plain English.</h2>
+          <p>
+            The platform uses AWS services including Amazon S3 and Amazon SES, plus standby infrastructure and local management.
+          </p>
+        </div>
+        <div className="feature-showcase" data-active-feature={activeFeature}>
+          <div className="feature-tabs" role="tablist" aria-label="Continuity capabilities">
+            <button
+              className={activeFeature === "buffering" ? "is-active" : ""}
+              type="button"
+              role="tab"
+              aria-selected={activeFeature === "buffering"}
+              data-feature="buffering"
+              onClick={() => onFeatureChange("buffering")}
+            >
+              <span>01</span>
+              <strong>Inbound buffering</strong>
+              <small>Hold mail before delivery when systems need attention.</small>
+            </button>
+            <button
+              className={activeFeature === "sending" ? "is-active" : ""}
+              type="button"
+              role="tab"
+              aria-selected={activeFeature === "sending"}
+              data-feature="sending"
+              onClick={() => onFeatureChange("sending")}
+            >
+              <span>02</span>
+              <strong>Outbound sending</strong>
+              <small>Use an authenticated sending path through Amazon SES.</small>
+            </button>
+            <button
+              className={activeFeature === "standby" ? "is-active" : ""}
+              type="button"
+              role="tab"
+              aria-selected={activeFeature === "standby"}
+              data-feature="standby"
+              onClick={() => onFeatureChange("standby")}
+            >
+              <span>03</span>
+              <strong>Standby failover</strong>
+              <small>Keep a standby environment visible in the continuity plan.</small>
+            </button>
+            <button
+              className={activeFeature === "local" ? "is-active" : ""}
+              type="button"
+              role="tab"
+              aria-selected={activeFeature === "local"}
+              data-feature="local"
+              onClick={() => onFeatureChange("local")}
+            >
+              <span>04</span>
+              <strong>Local management</strong>
+              <small>Keep DNS, devices, mailbox changes, and support together.</small>
+            </button>
+          </div>
+
+          <div className="feature-panel" role="tabpanel" aria-live="polite">
+            <div className="feature-panel-top">
+              <span className="panel-label">Selected capability</span>
+              <span className="status-pill">Operational</span>
+            </div>
+            <h3 className="feature-panel-title">{activeFeatureDetails.title}</h3>
+            <p className="feature-panel-copy">
+              {activeFeatureDetails.copy}
+            </p>
+            <ul className="feature-proof-list">
+              {activeFeatureDetails.proof.map((proof) => (
+                <li key={proof}>{proof}</li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </section>
+  );
+}