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>
            <p className="hero-local-trust">
              Local team in downtown Corpus Christi — same neighborhood as you.
            </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>
        </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>
  );
}