SMTP Verification vs Real-Time Validation:
The 23ms Secret to 99.9% Accuracy

// Modern Real-Time Email Validation
import { validateEmail } from '@email-check/app';

class EmailValidator {
  constructor(apiKey) {
    this.client = new EmailCheckClient({
      apiKey: apiKey,
      timeout: 5000,
      retries: 3
    });
  }

  async validateEmailRealtime(email, options = {}) {
    const startTime = Date.now();

    try {
      // Single API call with comprehensive validation
      const result = await this.client.validate({
        email: email,
        timeout: options.timeout || 2000,
        includeDetails: true,
        riskAssessment: true,
        typoCorrection: true,
        disposableDetection: true
      });

      const responseTime = Date.now() - startTime;

      return {
        isValid: result.isValid,
        score: result.score,           // 0-100 quality score
        risk: result.riskLevel,        // low/medium/high
        details: {
          syntax: result.syntax,
          domain: result.domain,
          mailbox: result.mailbox,
          disposable: result.isDisposable,
          typoCorrected: result.typoCorrected,
          suggestion: result.suggestion
        },
        responseTime: responseTime,    // typically 15-30ms
        auditId: result.auditId        // for tracking and compliance
      };

    } catch (error) {
      throw new Error(`Validation failed: ${error.message}`);
    }
  }
}

// Usage in React component
import React, { useState } from 'react';

function EmailValidationForm() {
  const [email, setEmail] = useState('');
  const [validation, setValidation] = useState(null);
  const [isValidating, setIsValidating] = useState(false);

  const validator = new EmailValidator(process.env.EMAIL_CHECK_API_KEY);

  const handleEmailChange = async (e) => {
    const newEmail = e.target.value;
    setEmail(newEmail);

    if (newEmail && newEmail.includes('@')) {
      setIsValidating(true);
      setValidation(null);

      try {
        const result = await validator.validateEmailRealtime(newEmail, {
          timeout: 1000  // Fast response for UX
        });

        setValidation(result);

        // Show real-time feedback to user
        if (result.isValid && result.score > 80) {
          // Valid email - proceed
        } else if (result.typoCorrected) {
          // Show typo correction suggestion
          setEmail(result.suggestion);
        } else {
          // Show validation error
        }
      } catch (error) {
        setValidation({ isValid: false, error: error.message });
      } finally {
        setIsValidating(false);
      }
    }
  };

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={handleEmailChange}
        placeholder="Enter your email"
        className={`border px-4 py-2 rounded ${
          validation?.isValid ? 'border-green-500' :
          validation?.isValid === false ? 'border-red-500' :
          'border-gray-300'
        }`}
      />

      {isValidating && <span className="ml-2">Validating...</span>}

      {validation && (
        <div className="mt-2 text-sm">
          {validation.isValid ? (
            <span className="text-green-600">✓ Valid (Score: {validation.score}/100)</span>
          ) : (
            <span className="text-red-600">✗ {validation.error || 'Invalid email'}</span>
          )}
        </div>
      )}
    </div>
  );
}