E-Mail-Webseite-Marketing/components/AssessmentSection.tsx

import type { FormEventHandler } from "react";

type AssessmentSectionProps = {
  formErrors: { name: string; email: string };
  formStatus: string;
  onAssessmentSubmit: FormEventHandler<HTMLFormElement>;
};

export default function AssessmentSection({ formErrors, formStatus, onAssessmentSubmit }: AssessmentSectionProps) {
  return (
      <section className="content-section assessment-section" id="assessment" aria-labelledby="assessment-title">
        <div className="assessment-bg" aria-hidden="true"></div>
        <div className="assessment-layout">
          <div className="assessment-form-card">
            <div className="assessment-form-head">
              <div>
                <p>Bay Area Email Services</p>
                <h3>Request an assessment</h3>
              </div>
              <span className="form-head-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                  <path d="M22 17a2 2 0 0 1-2 2H6.8a2 2 0 0 0-1.4.6l-2.2 2.2A.7.7 0 0 1 2 21.3V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2Z"></path>
                </svg>
              </span>
            </div>

            <form className="assessment-form" noValidate onSubmit={onAssessmentSubmit}>
              <div className="form-row">
                <label htmlFor="name">Your name <span>*</span></label>
                <input id="name" name="name" type="text" autoComplete="name" placeholder="Jane Doe" required />
                <p className="field-error" id="name-error">{formErrors.name}</p>
              </div>
              <div className="form-row">
                <label htmlFor="email">Business email <span>*</span></label>
                <input id="email" name="email" type="email" autoComplete="email" placeholder="you@company.com" required />
                <p className="field-error" id="email-error">{formErrors.email}</p>
              </div>
              <div className="form-row split-form-row">
                <div>
                  <label htmlFor="mailboxes">Mailboxes</label>
                  <input id="mailboxes" name="mailboxes" type="number" min="1" inputMode="numeric" placeholder="12" />
                </div>
                <div>
                  <label htmlFor="provider">Current provider</label>
                  <select id="provider" name="provider">
                    <option value="">Select one</option>
                    <option>Gmail or Google Workspace</option>
                    <option>Microsoft 365</option>
                    <option>Yahoo</option>
                    <option>Shared hosting email</option>
                    <option>Old or unknown provider</option>
                  </select>
                </div>
              </div>
              <div className="form-row">
                <label htmlFor="message">What should we review?</label>
                <textarea id="message" name="message" rows={4} placeholder="Domain, mailbox count, migration timing, device setup..."></textarea>
              </div>
              <button className="button button-primary button-large" type="submit">
                Request email assessment
                <span aria-hidden="true">→</span>
              </button>
              <p className="form-status" role="status" aria-live="polite">{formStatus}</p>
            </form>
          </div>

          <div className="assessment-copy">
            <p className="eyebrow">Start here</p>
            <h2 id="assessment-title">Let’s review your email setup.</h2>
            <p>
              Tell us about your domain, mailbox count, current provider, and support needs. We will reply with clear next steps for hosting, DNS, migration, and device setup.
            </p>

            <div className="assessment-highlights" aria-label="Assessment includes">
              <article>
                <span aria-hidden="true">
                  <svg viewBox="0 0 24 24"><path d="M12 6v6h4"></path><circle cx="12" cy="12" r="10"></circle></svg>
                </span>
                <div>
                  <strong>Quick response</strong>
                  <p>Most requests receive a reply within one business day.</p>
                </div>
              </article>
              <article>
                <span aria-hidden="true">
                  <svg viewBox="0 0 24 24"><circle cx="6" cy="19" r="3"></circle><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"></path><circle cx="18" cy="5" r="3"></circle></svg>
                </span>
                <div>
                  <strong>Clear next steps</strong>
                  <p>We outline DNS, migration, mailbox, and device requirements before work starts.</p>
                </div>
              </article>
            </div>

            <div className="direct-contact-card">
              <span className="contact-avatar" aria-hidden="true">
                <svg viewBox="0 0 40 32">
                  <path d="M3 5.5h34v21H3z"></path>
                  <path d="m4.5 7 15.5 11.5L35.5 7"></path>
                  <path d="m4.5 25 11.2-9.2"></path>
                  <path d="m35.5 25-11.2-9.2"></path>
                </svg>
              </span>
              <div>
                <p>Prefer to talk?</p>
                <strong>Local Corpus Christi support</strong>
              </div>
              <a href="tel:+13617658400">Call (361) 765-8400</a>
            </div>
          </div>
        </div>
      </section>
  );
}