Sign Language and Visual Language Support

// Plain Language Alert with Visual Icon Identifiers
import React from "react";
import { AlertCircle, PhoneCall, MessageSquare } from "lucide-react";

export function PlainLanguageEmergencyAlert({ isTamil }) {
  return (
    <div className="rounded-md border-l-4 border-red-500 bg-red-50/50 dark:bg-red-950/10 p-5 space-y-4">
      <div className="flex gap-3">
        <AlertCircle className="size-5 text-red-500 shrink-0 mt-0.5" />
        <div className="space-y-1">
          <h4 className="text-sm font-bold text-red-900 dark:text-red-300">
            {isTamil ? "அபாய எச்சரிக்கை: அவசர உதவித் தேவை" : "Emergency Help Available"}
          </h4>
          <p className="text-xs leading-relaxed text-muted-foreground">
            {isTamil 
              ? "புயல் எச்சரிக்கை விடுக்கப்பட்டுள்ளது. உங்கள் பகுதியில் உள்ள பாதுகாப்பு மையத்திற்கு செல்லவும்." 
              : "Cyclone alert active. Move immediately to your local municipal shelter center."}
          </p>
        </div>
      </div>
      
      {/* Alternate non-auditory contact pathways */}
      <div className="grid gap-2 sm:grid-cols-2 pt-2 border-t border-red-200/50">
        <a href="sms:+919876543210" className="inline-flex items-center gap-2 rounded-md bg-card border border-border px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
          <MessageSquare className="size-3.5 text-primary" />
          <span>{isTamil ? "எஸ்.எம்.எஸ் மூலம் தொடர்பு கொள்ள (SMS)" : "Text emergency desk"}</span>
        </a>
        <a href="https://relay.gov.in" className="inline-flex items-center gap-2 rounded-md bg-card border border-border px-3 py-2 text-xs font-semibold text-foreground hover:bg-muted">
          <PhoneCall className="size-3.5 text-primary" />
          <span>{isTamil ? "காணொளி மொழிபெயர்ப்பாளர் (Video Relay)" : "Connect visual interpreter"}</span>
        </a>
      </div>
    </div>
  );
}