// Contact mega menu — ported 1:1 from src/components/MegaMenuContact.tsx.
(function () {
  const { useState, useRef } = React;
  const D = window.REA_DATA;
  const SHELL = "absolute left-0 right-0 top-full bg-background border-b border-border shadow-2xl z-50 min-h-[500px] max-h-[85vh] overflow-y-auto";
  const fieldCls = "w-full bg-muted/60 border border-border rounded-sm px-3 py-2.5 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-accent/30 focus:border-accent transition-colors";
  const labelCls = "block text-xs font-semibold tracking-[0.2em] text-foreground/70 uppercase mb-1.5";
  function formatFileSize(bytes) {
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  }

  function MegaMenuContact({ onClose, variant = 'menu' }) {
    const [name, setName] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');
    const [subject, setSubject] = useState(D.subjects[0]);
    const [message, setMessage] = useState('');
    const [file, setFile] = useState(null);
    const [fileError, setFileError] = useState(null);
    const [isDragging, setIsDragging] = useState(false);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSubmitted, setIsSubmitted] = useState(false);
    const fileInputRef = useRef(null);

    const validateAndSetFile = (selected) => {
      setFileError(null);
      if (!selected) { setFile(null); return; }
      const ext = (selected.name.split('.').pop() || '').toLowerCase();
      if (!D.ACCEPTED_EXTENSIONS.includes(ext)) { setFileError(`Format nepermis. Acceptăm: ${D.ACCEPTED_EXTENSIONS.join(', ').toUpperCase()}`); return; }
      if (selected.size > D.MAX_SIZE_MB * 1024 * 1024) { setFileError(`Fișierul depășește ${D.MAX_SIZE_MB}MB.`); return; }
      setFile(selected);
    };
    const handleDrop = (e) => { e.preventDefault(); setIsDragging(false); const dropped = e.dataTransfer.files && e.dataTransfer.files[0]; if (dropped) validateAndSetFile(dropped); };
    const handleSubmit = (e) => { e.preventDefault(); setIsSubmitting(true); setTimeout(() => { setIsSubmitting(false); setIsSubmitted(true); }, 900); };

    return (
      <div className={variant === 'modal' ? 'bg-background' : SHELL}>
        <div className="container mx-auto px-4 py-8">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-6 lg:gap-10">
            <div className="md:col-span-3">
              <h3 className={`font-headings text-xl font-bold text-primary leading-tight mb-5 text-balance ${variant === 'modal' ? 'pr-12' : ''}`}>Cere ofertă sau programează un apel</h3>
              {isSubmitted ? (
                <div className="border border-border rounded-sm p-6 bg-muted/40 flex items-start gap-4">
                  <div className="w-10 h-10 bg-accent/10 rounded-sm flex items-center justify-center flex-shrink-0">
                    <Icon name="check-circle" className="w-5 h-5 text-accent" strokeWidth={2} />
                  </div>
                  <div>
                    <h4 className="font-headings text-base font-bold text-primary mb-1">Cerere trimisă cu succes</h4>
                    <p className="text-sm text-foreground/70 leading-snug">Mulțumim, {name || 'partener'}! Te contactăm în max 24h în zile lucrătoare la datele furnizate.</p>
                  </div>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div>
                    <label htmlFor="mm-contact-name" className={labelCls}>Nume</label>
                    <input id="mm-contact-name" type="text" value={name} onChange={(e) => setName(e.target.value)} required placeholder="Nume și prenume" className={fieldCls} />
                  </div>
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label htmlFor="mm-contact-phone" className={labelCls}>Telefon</label>
                      <input id="mm-contact-phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} required placeholder="+40 7XX XXX XXX" className={fieldCls} />
                    </div>
                    <div>
                      <label htmlFor="mm-contact-email" className={labelCls}>Email</label>
                      <input id="mm-contact-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="nume@companie.ro" className={fieldCls} />
                    </div>
                  </div>
                  <div>
                    <label htmlFor="mm-contact-subject" className={labelCls}>Subiect</label>
                    <div className="relative">
                      <select id="mm-contact-subject" value={subject} onChange={(e) => setSubject(e.target.value)} className={fieldCls + " pr-10 appearance-none"}>
                        {D.subjects.map((s) => <option key={s} value={s}>{s}</option>)}
                      </select>
                      <Icon name="chevron-down" className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none" strokeWidth={2} />
                    </div>
                  </div>
                  <div>
                    <label htmlFor="mm-contact-message" className={labelCls}>Mesaj</label>
                    <textarea id="mm-contact-message" value={message} onChange={(e) => setMessage(e.target.value)} required rows={3} placeholder="Descrie pe scurt cererea: cantități, presiuni, temperaturi, termene…" className={fieldCls + " resize-none"} />
                  </div>
                  <div>
                    <label className={labelCls}>Atașament (opțional)</label>
                    <input ref={fileInputRef} type="file" onChange={(e) => validateAndSetFile(e.target.files && e.target.files[0] || null)} accept=".pdf,.docx,.xlsx,.dwg,.jpg,.jpeg,.png" className="hidden" aria-label="Adaugă fișier" />
                    {!file ? (
                      <div onClick={() => fileInputRef.current && fileInputRef.current.click()}
                        onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }} onDragLeave={() => setIsDragging(false)} onDrop={handleDrop}
                        role="button" tabIndex={0}
                        className={`flex items-center gap-3 px-4 py-3 border-2 border-dashed rounded-sm cursor-pointer transition-colors ${isDragging ? 'border-accent bg-accent/5' : 'border-border bg-muted/30 hover:border-accent/60 hover:bg-muted/50'}`}>
                        <Icon name="paperclip" className="w-4 h-4 text-muted-foreground flex-shrink-0" strokeWidth={2} />
                        <div className="flex-grow min-w-0">
                          <div className="text-sm font-semibold text-foreground/80 leading-tight">Adaugă fișier</div>
                          <div className="text-xs text-muted-foreground mt-0.5">PDF, DOCX, XLSX, DWG, JPG, PNG · max {D.MAX_SIZE_MB}MB</div>
                        </div>
                      </div>
                    ) : (
                      <div className="flex items-center gap-3 px-4 py-3 border border-border bg-muted/40 rounded-sm">
                        <Icon name="paperclip" className="w-4 h-4 text-accent flex-shrink-0" strokeWidth={2} />
                        <div className="flex-grow min-w-0">
                          <div className="text-sm font-semibold text-foreground truncate leading-tight">{file.name}</div>
                          <div className="text-xs text-muted-foreground mt-0.5">{formatFileSize(file.size)}</div>
                        </div>
                        <button type="button" onClick={() => { setFile(null); setFileError(null); if (fileInputRef.current) fileInputRef.current.value = ''; }} className="p-1 text-muted-foreground hover:text-foreground transition-colors flex-shrink-0" aria-label="Elimină fișierul">
                          <Icon name="x" className="w-4 h-4" />
                        </button>
                      </div>
                    )}
                    {fileError && (
                      <div className="flex items-center gap-1.5 mt-2 text-xs text-destructive">
                        <Icon name="alert-circle" className="w-3.5 h-3.5" strokeWidth={2} />
                        {fileError}
                      </div>
                    )}
                  </div>
                  <div>
                    <button type="submit" disabled={isSubmitting} className="inline-flex items-center justify-center gap-2 bg-accent hover:bg-accent/90 disabled:opacity-60 disabled:cursor-not-allowed text-accent-foreground px-6 py-3 rounded-sm font-semibold text-sm transition-colors group">
                      {isSubmitting ? (
                        <>
                          <span className="w-4 h-4 border-2 border-accent-foreground/30 border-t-accent-foreground rounded-full animate-spin" />
                          Se trimite…
                        </>
                      ) : (
                        <>
                          Trimite cererea
                          <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </>
                      )}
                    </button>
                    <p className="text-xs text-muted-foreground mt-3 leading-snug">Răspundem în max 24h în zile lucrătoare · Datele tale rămân la noi · GDPR</p>
                  </div>
                </form>
              )}
            </div>
            <div className="md:col-span-2 flex flex-col">
              <h4 className="font-headings text-base font-bold text-primary leading-tight mb-4">Contactează-ne direct</h4>
              <div className="bg-muted/40 border border-border rounded-sm p-5 space-y-4">
                <a href="tel:+40212323884" className="flex items-start gap-3 group">
                  <Icon name="phone" className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" strokeWidth={2} />
                  <div>
                    <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase">Telefon</div>
                    <div className="text-sm font-semibold text-foreground group-hover:text-accent transition-colors">+40 21 232 38 84</div>
                  </div>
                </a>
                <a href="tel:+40722402902" className="flex items-start gap-3 group">
                  <Icon name="smartphone" className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" strokeWidth={2} />
                  <div>
                    <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase">Mobil</div>
                    <div className="text-sm font-semibold text-foreground group-hover:text-accent transition-colors">+40 722 402 902</div>
                  </div>
                </a>
                <a href="mailto:rea@romenergy.ro" className="flex items-start gap-3 group">
                  <Icon name="mail" className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" strokeWidth={2} />
                  <div className="min-w-0">
                    <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase">Email</div>
                    <div className="text-sm font-semibold text-foreground group-hover:text-accent transition-colors truncate">rea@romenergy.ro</div>
                  </div>
                </a>
                <div className="flex items-start gap-3">
                  <Icon name="map-pin" className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" strokeWidth={2} />
                  <div>
                    <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase">Sediu</div>
                    <div className="text-sm text-foreground/80 leading-snug">Str. Avram Iancu 25<br />Otopeni, Ilfov 075100</div>
                  </div>
                </div>
                <div className="flex items-start gap-3">
                  <Icon name="clock" className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" strokeWidth={2} />
                  <div>
                    <div className="text-xs font-semibold tracking-[0.2em] text-muted-foreground uppercase">Program</div>
                    <div className="text-sm text-foreground/80">Luni–Vineri <span className="font-normal text-foreground">09:00-18:00</span></div>
                  </div>
                </div>
              </div>
              <a href="https://www.google.com/maps/search/?api=1&query=Str.+Avram+Iancu+25,+Otopeni,+Ilfov+075100"
                target="_blank" rel="noreferrer"
                className="group relative block mt-4 flex-grow min-h-[160px] rounded-sm overflow-hidden border border-border">
                <iframe
                  title="Hartă sediu Rom Energy Armstrong — Str. Avram Iancu 25, Otopeni"
                  src="https://www.google.com/maps?q=Str.%20Avram%20Iancu%2025,%20Otopeni,%20Ilfov%20075100&z=14&output=embed"
                  className="absolute inset-0 w-full h-full grayscale-[0.2] pointer-events-none"
                  style={{ border: 0 }} loading="lazy" referrerPolicy="no-referrer-when-downgrade" aria-hidden="true"></iframe>
              </a>
            </div>
          </div>
          <div className="mt-6 pt-4 border-t border-border flex justify-end">
            <a href="../contact/index.html" onClick={onClose}
              className="group inline-flex items-center gap-2 text-sm font-semibold text-accent hover:text-primary transition-colors">
              Vezi pagina completă de Contact
              <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" strokeWidth={2} />
            </a>
          </div>
        </div>
      </div>
    );
  }

  window.MegaMenuContact = MegaMenuContact;
})();