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>
  );
}