'use client';

import { useId } from 'react';

/**
 * A2P 10DLC-compliant privacy + SMS consent checkbox. Use on any form that collects phone numbers.
 * Same copy and markup used across contact and job application forms.
 */
export function PrivacyCheckbox() {
  const id = useId();
  return (
    <div className="flex items-start gap-3">
      <input
        type="checkbox"
        id={id}
        name="privacy"
        required
        aria-label="Agree to Privacy Policy, Terms of Service, and SMS consent"
        className="mt-1 w-4 h-4 shrink-0 border-secondary rounded focus:ring-focus-ring"
      />
      <label htmlFor={id} className="font-body text-sm text-tertiary">
        By checking this box, you agree to our{' '}
        <a
          href="/privacy-policy"
          className="underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
        >
          Privacy Policy
        </a>
        {' '}
        and{' '}
        <a
          href="/terms-of-service"
          className="underline outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
        >
          Terms of Service
        </a>
        . You consent to receive text messages from our team and our automated systems (e.g., question follow-ups, updates, responses to ads) at the number provided. Message frequency varies. Message and data rates may apply. Reply HELP for help, STOP to opt out. *
      </label>
    </div>
  );
}
