export default function HeroSection() {
  return (
      <section id="top" className="hero-section" aria-labelledby="hero-title">
        <div className="hero-grid">
          <div className="hero-copy">
            <p className="eyebrow">Corpus Christi business email hosting</p>
            <h1 id="hero-title">Business Email Hosting in Corpus Christi</h1>
            <p className="hero-lede">
              Infrastructure and support from a local team that understands how business gets done.
            </p>

            <ul className="trust-list" aria-label="Core trust points">
              <li>
                <span className="check-icon" aria-hidden="true"></span>
                AWS-built architecture
              </li>
              <li>
                <span className="chart-icon" aria-hidden="true"></span>
                Configured to improve deliverability
              </li>
              <li>
                <span className="people-icon" aria-hidden="true"></span>
                Real people. Local support.
              </li>
            </ul>

            <div className="hero-actions">
              <a className="button button-primary button-large" href="#assessment">
                Book a 20-minute email assessment
                <span aria-hidden="true">&rarr;</span>
              </a>
              <a className="call-inline" href="tel:+13617658400">Call (361) 765-8400</a>
            </div>
          </div>

          <section id="infrastructure" className="architecture-panel" aria-labelledby="architecture-title">
            <h2 id="architecture-title" className="sr-only">Mail flow designed for continuity</h2>
            <img
              className="architecture-image architecture-image-dark"
              src="/assets/mail-flow-panel.png"
              alt="Mail flow diagram showing inbound email, Amazon S3 buffering, mailbox delivery, Amazon SES outbound sending, standby infrastructure, and operational system status."
             />
            <img
              className="architecture-image architecture-image-light"
              src="/assets/mail-flow-panel-light.png"
              alt=""
              aria-hidden="true"
             />
            <p className="sr-only">
              Inbound messages are collected from the internet, remote mail servers, and other providers, buffered and processed through Amazon S3, delivered to mailboxes, sent outbound through Amazon SES, and supported by standby infrastructure.
            </p>
          </section>
        </div>

        <div className="module-grid" aria-label="Service highlights">
          <article className="module-card" id="services">
            <div className="module-title">
              <h2>DNS authentication</h2>
              <span className="shield-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path><path d="m9 12 2 2 4-5"></path></svg>
              </span>
            </div>
            <p>We configure and validate the records that help protect your domain.</p>
            <ul className="check-stack">
              <li>SPF</li>
              <li>DKIM</li>
              <li>DMARC</li>
            </ul>
            <a href="#deliverability">Learn more about email security</a>
          </article>

          <article className="module-card" id="migration">
            <span className="module-icon migration-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M4 7h10"></path><path d="M4 17h10"></path><path d="m14 3 4 4-4 4"></path><path d="m14 13 4 4-4 4"></path><path d="M18 7h2"></path><path d="M18 17h2"></path></svg>
            </span>
            <h2>Local migration help</h2>
            <ol className="process-steps">
              <li>
                <span>1</span>
                <strong>Discover</strong>
                <p>We learn your setup, volume, and needs.</p>
              </li>
              <li>
                <span>2</span>
                <strong>Plan</strong>
                <p>We design the migration and share the plan.</p>
              </li>
              <li>
                <span>3</span>
                <strong>Migrate</strong>
                <p>We move mail, users, and settings.</p>
              </li>
              <li>
                <span>4</span>
                <strong>Validate</strong>
                <p>We test, verify, and hand it over.</p>
              </li>
            </ol>
            <a href="#migration-detail">See the full migration checklist</a>
          </article>

          <article className="module-card price-card" id="pricing">
            <span className="module-icon hosting-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M4 6.5h16v11H4z"></path><path d="m5 8 7 5 7-5"></path><path d="M8 21h8"></path><path d="M12 17.5V21"></path></svg>
            </span>
            <h2>AWS-backed email</h2>
            <p className="price"><span>$5</span> / inbox / month</p>
            <p className="included">25 GB mailbox included.</p>
            <ul className="check-stack compact">
              <li>Business email on your domain</li>
              <li>AWS-backed infrastructure</li>
              <li>Web, mobile, and desktop access</li>
              <li>Local support from real people</li>
            </ul>
            <a className="button button-primary" href="#assessment">Book a 20-minute email assessment</a>
          </article>

          <article className="module-card compare-card">
            <h2>Compare Plans</h2>
            <div className="compare-table" role="table" aria-label="Business email plan comparison">
              <div role="row" className="table-head">
                <span role="columnheader">Feature</span>
                <span role="columnheader">BES Basic</span>
                <span role="columnheader">BES Pro</span>
                <span role="columnheader">Other Providers</span>
              </div>
              <div role="row">
                <span role="cell">Business email</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">✓</span>
              </div>
              <div role="row">
                <span role="cell">Custom domain</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">✓</span>
              </div>
              <div role="row">
                <span role="cell">AWS infrastructure</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
              </div>
              <div role="row">
                <span role="cell">Local support</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
              </div>
              <div role="row">
                <span role="cell">Transparent pricing</span><span role="cell">✓</span><span role="cell">✓</span><span role="cell">Varies</span>
              </div>
            </div>
            <a href="#pricing-detail">View full plan details</a>
          </article>
        </div>

        <section className="local-strip" aria-labelledby="local-title">
          <div>
            <h2 id="local-title">Local Support. Real People.</h2>
            <p>Corpus Christi support for setup, migration, DNS, and day-to-day email questions.</p>
          </div>
          <ul>
            <li>
              <span className="building-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M4 21V7l8-4 8 4v14"></path><path d="M9 21v-7h6v7"></path><path d="M8 9h.1M12 9h.1M16 9h.1"></path></svg>
              </span>
              <strong>Corpus Christi team</strong>
            </li>
            <li>
              <span className="headset-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M4 13a8 8 0 0 1 16 0"></path><path d="M4 13v4a2 2 0 0 0 2 2h2v-8H6a2 2 0 0 0-2 2Z"></path><path d="M20 13v4a2 2 0 0 1-2 2h-2v-8h2a2 2 0 0 1 2 2Z"></path><path d="M16 19a4 4 0 0 1-4 2"></path></svg>
              </span>
              <strong>U.S.-based support</strong>
            </li>
            <li>
              <span className="clock-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
              </span>
              <strong>Business-hour response</strong>
            </li>
            <li>
              <span className="people-outline-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"></path><circle cx="9.5" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.8"></path><path d="M16 3.3a4 4 0 0 1 0 7.4"></path></svg>
              </span>
              <strong>Small business focused</strong>
            </li>
            <li>
              <span className="shield-outline-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"></path><path d="m9 12 2 2 4-5"></path></svg>
              </span>
              <strong>Bay Area IT family</strong>
            </li>
          </ul>
        </section>
      </section>
  );
}
