export default function DeliverabilitySection() {
  return (
      <section className="content-section deliverability-section" id="deliverability" aria-labelledby="deliverability-title">
        <div className="deliverability-panel">
          <div className="deliverability-bg" aria-hidden="true"></div>
          <div className="deliverability-head">
            <div>
              <p className="eyebrow">Deliverability foundation</p>
              <h2 id="deliverability-title">Authenticate your domain before mail starts moving.</h2>
            </div>
            <p>
              Receiving mail systems look for SPF, DKIM, and DMARC before they decide how much they trust your messages.
              We configure and check those records before migration work begins.
            </p>
          </div>

          <div className="deliverability-card-grid" aria-label="Email authentication records">
            <article className="deliverability-card">
              <div className="record-visual record-visual-spf" aria-hidden="true">
                <div className="record-code">
                  <span>TXT</span>
                  <code>v=spf1 include:mail.bes.host -all</code>
                </div>
                <div className="record-route">
                  <span>Domain</span>
                  <i></i>
                  <span>Allowed sender</span>
                </div>
              </div>
              <div>
                <h3>SPF</h3>
                <p>Defines which servers are allowed to send email for your domain.</p>
              </div>
            </article>

            <article className="deliverability-card">
              <div className="record-visual record-visual-dkim" aria-hidden="true">
                <div className="signature-card">
                  <span>DKIM signature</span>
                  <strong>key verified</strong>
                </div>
                <div className="key-row">
                  <span></span>
                  <span></span>
                  <span></span>
                </div>
              </div>
              <div>
                <h3>DKIM</h3>
                <p>Adds a signed key to outgoing messages so receiving systems can verify they were not altered.</p>
              </div>
            </article>

            <article className="deliverability-card">
              <div className="record-visual record-visual-dmarc" aria-hidden="true">
                <div className="policy-meter">
                  <span>none</span>
                  <span>quarantine</span>
                  <span>reject</span>
                </div>
                <div className="report-line">
                  <span>Policy</span>
                  <strong>aligned</strong>
                </div>
              </div>
              <div>
                <h3>DMARC</h3>
                <p>Sets the policy for suspicious mail and gives you a clearer path for domain protection.</p>
              </div>
            </article>
          </div>
        </div>
      </section>
  );
}