// Homepage ContactSection + Footer — ported 1:1 from source TSX.
(function () {
  const { useState, useRef } = React;
  const D = window.REA_DATA;

  function ContactSection() {
    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 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";
    const formatFileSize = (bytes) => bytes < 1024 ? `${bytes} B` : bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(0)} KB` : `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
    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 (
      <section className="py-16 lg:py-24 bg-background">
        <div className="container mx-auto px-4">
          <div className="grid lg:grid-cols-2 gap-16 items-stretch">
            <div className="flex flex-col">
              <h2 className="font-headings text-3xl md:text-4xl font-bold text-primary mb-6">Spune-ne despre proiectul tău</h2>
              <p className="text-lg text-foreground/70 mb-10 max-w-md">Fie că ai nevoie de un echipament nou, de piese de schimb sau de o revizie tehnică, inginerii noștri sunt pregătiți să te ajute.</p>
              <div className="space-y-8">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-muted rounded-sm flex items-center justify-center flex-shrink-0">
                    <Icon name="phone" className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-bold text-foreground mb-1">Suport Tehnic &amp; Vânzări</h4>
                    <div className="flex flex-col gap-1">
                      <a href="tel:+40212323884" className="text-lg text-accent hover:underline font-semibold">T +40 21 232 38 84</a>
                      <a href="tel:+40722402902" className="text-lg text-accent hover:underline font-semibold">M +40 722 402 902</a>
                    </div>
                    <p className="text-sm text-foreground/70 mt-2">Luni - Vineri, 08:00 - 17:00</p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-muted rounded-sm flex items-center justify-center flex-shrink-0">
                    <Icon name="mail" className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-bold text-foreground mb-1">Email</h4>
                    <a href="mailto:rea@romenergy.ro" className="text-lg text-accent hover:underline font-semibold">rea@romenergy.ro</a>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-muted rounded-sm flex items-center justify-center flex-shrink-0">
                    <Icon name="map-pin" className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h4 className="font-bold text-foreground mb-1">Sediu central</h4>
                    <p className="text-foreground/70">Str. Avram Iancu 25, Otopeni<br />Ilfov, 075100, România</p>
                  </div>
                </div>
              </div>
              <a href="https://maps.google.com/maps?q=Strada+Avram+Iancu+25,+Otopeni,+Ilfov" target="_blank" rel="noopener noreferrer"
                className="group relative block mt-8 flex-grow basis-0 min-h-[160px] rounded-sm overflow-hidden border border-border shadow-sm bg-muted/40">
                <iframe
                  title="Hartă sediu Rom Energy Armstrong — 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 className="bg-card border border-border rounded-sm p-8 md:p-10 shadow-sm">
              <h3 className="font-headings text-2xl font-bold text-primary mb-6">Cere o ofertă personalizată</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="hc-name" className={labelCls}>Nume</label>
                    <input id="hc-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="hc-phone" className={labelCls}>Telefon</label>
                      <input id="hc-phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} required placeholder="+40 7XX XXX XXX" className={fieldCls} />
                    </div>
                    <div>
                      <label htmlFor="hc-email" className={labelCls}>Email</label>
                      <input id="hc-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required placeholder="nume@companie.ro" className={fieldCls} />
                    </div>
                  </div>
                  <div>
                    <label htmlFor="hc-subject" className={labelCls}>Subiect</label>
                    <div className="relative">
                      <select id="hc-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="hc-message" className={labelCls}>Mesaj</label>
                    <textarea id="hc-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>
                  <button type="submit" disabled={isSubmitting} className="w-full 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.5 rounded-sm font-semibold text-base transition-colors group mt-1">
                    {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 text-center mt-1 leading-snug">Răspundem în max 24h în zile lucrătoare · Datele tale rămân la noi · GDPR</p>
                </form>
              }
            </div>
          </div>
        </div>
      </section>
    );
  }

  const companyLinks = [
    { name: 'Despre noi', href: '../companie/index.html' },
    { name: 'Parteneri', href: '#' },
    { name: 'Industrii deservite', href: '#' },
    { name: 'Cariere', href: '../cariere/index.html' },
    { name: 'Contact', href: '../contact/index.html' }
  ];

  function Footer() {
    return (
      <footer className="relative bg-muted pt-20 pb-24 xl:pb-8 border-t-4 border-accent overflow-hidden">
        <div aria-hidden="true" className="absolute inset-x-0 top-0 h-96 opacity-[0.04] pointer-events-none"
          style={{ backgroundImage: 'linear-gradient(to right, #1D2235 1px, transparent 1px), linear-gradient(to bottom, #1D2235 1px, transparent 1px)', backgroundSize: '48px 48px', maskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)', WebkitMaskImage: 'linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%)' }} />
        <div className="container mx-auto px-4 relative">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-12 mb-16">
            <div className="lg:col-span-4 space-y-6">
              <img src={D.logo} alt="Rom Energy Armstrong, partener tehnic din 1994" className="h-10 w-auto" />
              <p className="text-foreground/70 text-sm leading-relaxed">Partener tehnic din 1994 pentru sisteme de aer, abur și apă caldă în industria grea din România.</p>
              <ul className="space-y-3 pt-2">
                <li className="flex items-start gap-3 text-sm text-foreground/70">
                  <Icon name="phone" className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                  <div className="flex flex-col gap-0.5">
                    <a href="tel:+40212323884" className="hover:text-accent transition-colors">T +40 21 232 38 84</a>
                    <a href="tel:+40722402902" className="hover:text-accent transition-colors">M +40 722 402 902</a>
                  </div>
                </li>
                <li className="flex items-start gap-3 text-sm text-foreground/70">
                  <Icon name="mail" className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                  <a href="mailto:rea@romenergy.ro" className="hover:text-accent transition-colors">rea@romenergy.ro</a>
                </li>
                <li className="flex items-start gap-3 text-sm text-foreground/70">
                  <Icon name="map-pin" className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                  <span>Str. Avram Iancu 25, Otopeni,<br />Ilfov, 075100, România</span>
                </li>
                <li className="flex items-start gap-3 text-sm text-foreground/70">
                  <Icon name="clock" className="w-4 h-4 text-accent mt-0.5 flex-shrink-0" />
                  <span>Luni–Vineri · 09:00–18:00</span>
                </li>
              </ul>
            </div>
            <div className="lg:col-span-4">
              <h4 className="text-primary font-headings font-bold mb-6 uppercase tracking-[0.2em] text-xs">Produse</h4>
              <ul className="columns-1 sm:columns-2 gap-x-6">
                {D.productCategories.map((cat) => (
                  <li key={cat.slug} className="mb-3 break-inside-avoid">
                    <a href={cat.href} className="text-foreground/70 hover:text-accent transition-colors text-sm leading-snug">{cat.title}</a>
                  </li>
                ))}
              </ul>
            </div>
            <div className="lg:col-span-2">
              <h4 className="text-primary font-headings font-bold mb-6 uppercase tracking-[0.2em] text-xs">Servicii</h4>
              <ul className="space-y-3">
                {D.services.map((svc) => (
                  <li key={svc.slug}>
                    <a href={D.linkForItem(svc.title)} className="text-foreground/70 hover:text-accent transition-colors text-sm leading-snug">{svc.title}</a>
                  </li>
                ))}
              </ul>
            </div>
            <div className="lg:col-span-2">
              <h4 className="text-primary font-headings font-bold mb-6 uppercase tracking-[0.2em] text-xs">Companie</h4>
              <ul className="space-y-3">
                {companyLinks.map((item) => (
                  <li key={item.name}>
                    <a href={item.href} className="text-foreground/70 hover:text-accent transition-colors text-sm leading-snug">{item.name}</a>
                  </li>
                ))}
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t border-border flex flex-col md:flex-row items-center justify-between gap-4">
            <p className="text-muted-foreground text-sm">© {new Date().getFullYear()} Rom Energy Armstrong. Toate drepturile rezervate.</p>
            <div className="flex flex-wrap items-center gap-x-6 gap-y-2 justify-center">
              <a href="#" className="text-muted-foreground hover:text-primary text-sm transition-colors">Termeni și condiții</a>
              <a href="#" className="text-muted-foreground hover:text-primary text-sm transition-colors">Politică de confidențialitate</a>
              <a href="https://anpc.ro/" target="_blank" rel="noopener noreferrer" className="text-muted-foreground hover:text-primary text-sm transition-colors">ANPC</a>
            </div>
          </div>
        </div>
      </footer>
    );
  }

  Object.assign(window, { ContactSection, Footer });
})();