// Footer — Modern 4-column with glowing effects + Enquiry Modal
const { useState } = React;

function SiteFooter({ t }) {
  const [showModal, setShowModal] = useState(false);
  const [formData, setFormData] = useState({
    name: '',
    phone: '',
    email: '',
    subject: '',
    message: ''
  });

  const locations = [
    { name: "Ipoh Office", address: "17, Persiaran Buntong Jaya 26, 30100, Ipoh, Perak" },
    { name: "Workshop", address: "22, Laluan Perusahaan Kledang 1, Taman Perindustrian Chandan Raya, 31450, Menglembu, Perak" },
    { name: "Penang Office", address: "26, Lorong Sutera 1, Taman Sutera, Seberang Jaya, 13700, Prai" },
    { name: "Selangor Office", address: "9, Jalan Berlian, Taman Berlian, Batu Caves, 68100, Selangor" },
  ];

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const emailSubject = `Enquiry from ${formData.name}: ${formData.subject}`;
    const body = `
Name: ${formData.name}
Phone: ${formData.phone}
Email: ${formData.email}
Subject: ${formData.subject}

Message:
${formData.message}

---
Sent from AEQ Safety Website
    `.trim();

    const mailtoLink = `mailto:aeqse@yahoo.com?subject=${encodeURIComponent(emailSubject)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailtoLink;

    setShowModal(false);
    setFormData({ name: '', phone: '', email: '', subject: '', message: '' });
  };

  return (
    <footer className="modern-footer">
      <div className="footer-glow"></div>

      {/* Enquiry Button - Floating */}
      <button className="enquiry-float-btn" onClick={() => setShowModal(true)}>
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
        </svg>
        <span>Enquiry</span>
      </button>

      <div className="footer-container">
        <div className="footer-grid">
          {/* Company Info */}
          <div className="footer-brand">
            <div className="footer-logo-wrap">
              <img src="assets/aeq-logo-transparent.png" alt="AEQ Safety" className="footer-logo" />
              <span className="footer-company-name">AEQ Safety</span>
            </div>
            <p className="footer-description">
              Safety, environmental and engineering practice — pairing accredited lab analysis with on-site monitoring and field training.
            </p>
            <div className="footer-badges">
              <span className="footer-badge">SAMM 686</span>
              <span className="footer-badge">ISO 17025</span>
              <span className="footer-badge">ISO 14001</span>
            </div>
            <div className="footer-social">
              <a href="https://wa.me/60103740583" className="social-link" aria-label="WhatsApp">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
                </svg>
              </a>
              <a href="mailto:aeqse@yahoo.com" className="social-link" aria-label="Email">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="2" y="4" width="20" height="16" rx="2"/>
                  <path d="M22 6l-10 7L2 6"/>
                </svg>
              </a>
              <a href="tel:+60103740583" className="social-link" aria-label="Phone">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                </svg>
              </a>
              <button className="social-link enquiry-btn" onClick={() => setShowModal(true)} aria-label="Enquiry">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </button>
            </div>
          </div>

          {/* Contact Us */}
          <div className="footer-col footer-contact">
            <h4 className="footer-heading">
              <span className="heading-icon contact-glow">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
                  <circle cx="12" cy="10" r="3"/>
                </svg>
              </span>
              Contact Us
            </h4>
            <div className="contact-items">
              <a href="https://wa.me/60103740583" className="contact-item">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                </svg>
                <span>+60 10-374 0583</span>
              </a>
              <a href="mailto:aeqse@yahoo.com" className="contact-item">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <rect x="2" y="4" width="20" height="16" rx="2"/>
                  <path d="M22 6l-10 7L2 6"/>
                </svg>
                <span>aeqse@yahoo.com</span>
              </a>
              <button className="contact-item enquiry-contact-btn" onClick={() => setShowModal(true)}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
                <span>Enquiry</span>
              </button>
            </div>

            <h5 className="locations-title">Our Locations</h5>
            <div className="locations-list">
              {locations.map((loc, i) => (
                <div key={i} className="location-item">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/>
                    <circle cx="12" cy="10" r="3"/>
                  </svg>
                  <div>
                    <strong>{loc.name}</strong>
                    <span>{loc.address}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Bottom Bar */}
        <div className="footer-bottom">
          <p className="copyright">
            &copy; {new Date().getFullYear()} AEQ Safety Respond and Engineering Training &amp; Consultancy PLT
          </p>
          <p className="tagline">~ We serve because we care ~</p>
        </div>
      </div>

      {/* Enquiry Modal */}
      {showModal && (
        <div className="modal-overlay" onClick={() => setShowModal(false)}>
          <div className="modal-content" onClick={(e) => e.stopPropagation()}>
            <button className="modal-close" onClick={() => setShowModal(false)}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
              </svg>
            </button>

            <div className="modal-header">
              <div className="modal-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                </svg>
              </div>
              <h3>Send an Enquiry</h3>
              <p>Fill in your details and we'll get back to you</p>
            </div>

            <form onSubmit={handleSubmit} className="modal-form">
              <div className="form-row">
                <div className="form-group">
                  <label htmlFor="name">Full Name *</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleInputChange}
                    required
                    placeholder="Your full name"
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="phone">Phone Number *</label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleInputChange}
                    required
                    placeholder="+60 12-345 6789"
                  />
                </div>
              </div>

              <div className="form-group">
                <label htmlFor="email">Email Address</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  placeholder="your@email.com"
                />
              </div>

              <div className="form-group">
                <label htmlFor="subject">Subject *</label>
                <select
                  id="subject"
                  name="subject"
                  value={formData.subject}
                  onChange={handleInputChange}
                  required
                >
                  <option value="">Select subject</option>
                  <option value="EHS Training">EHS Training</option>
                  <option value="Engineering Training">Engineering Training</option>
                  <option value="Lab Analysis">Lab Analysis</option>
                  <option value="Environmental Services">Environmental Services</option>
                  <option value="OSH Monitoring">OSH Monitoring</option>
                  <option value="Consultation">Consultation</option>
                  <option value="Other">Other</option>
                </select>
              </div>

              <div className="form-group">
                <label htmlFor="message">Message *</label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleInputChange}
                  rows="4"
                  required
                  placeholder="Tell us about your requirements..."
                />
              </div>

              <button type="submit" className="submit-btn">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="22" y1="2" x2="11" y2="13"/>
                  <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                </svg>
                Send Enquiry
              </button>
            </form>
          </div>
        </div>
      )}

      <style>{`
        .modern-footer {
          position: relative;
          background: linear-gradient(180deg, #0a0f1a 0%, #030712 100%);
          border-top-left-radius: 24px;
          border-top-right-radius: 24px;
          margin-top: 0;
          overflow: hidden;
          isolation: isolate;
        }

        .footer-glow {
          position: absolute;
          top: -100px;
          left: 50%;
          transform: translateX(-50%);
          width: 600px;
          height: 300px;
          background: radial-gradient(ellipse at center,
            rgba(0, 255, 255, 0.15) 0%,
            rgba(132, 204, 22, 0.1) 30%,
            transparent 70%
          );
          filter: blur(60px);
          pointer-events: none;
          z-index: 0;
        }

        /* Floating Enquiry Button */
        .enquiry-float-btn {
          position: absolute;
          top: 24px;
          right: 48px;
          right: calc(48px + env(safe-area-inset-right, 0px));
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 14px 28px;
          min-height: 48px;
          background: linear-gradient(135deg, var(--cyan) 0%, var(--lime) 100%);
          border: none;
          border-radius: 50px;
          color: #030712;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
          z-index: 10;
          box-shadow: 0 4px 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.2);
          transition: all 0.3s ease;
          -webkit-tap-highlight-color: transparent;
        }

        .enquiry-float-btn:hover,
        .enquiry-float-btn:active {
          transform: translateY(-3px);
          box-shadow: 0 6px 30px rgba(0, 255, 255, 0.5), 0 0 60px rgba(0, 255, 255, 0.3);
        }

        @media (max-width: 768px) {
          .enquiry-float-btn {
            right: 24px;
            right: calc(24px + env(safe-area-inset-right, 0px));
            padding: 12px 20px;
            font-size: 13px;
            min-height: 44px;
          }
        }

        .footer-container {
          position: relative;
          z-index: 1;
          max-width: 1400px;
          margin: 0 auto;
          padding: 80px 48px 32px;
          padding-left: calc(48px + env(safe-area-inset-left, 0px));
          padding-right: calc(48px + env(safe-area-inset-right, 0px));
          padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        }

        @media (max-width: 768px) {
          .footer-container {
            padding: 60px 24px 24px;
            padding-left: calc(24px + env(safe-area-inset-left, 0px));
            padding-right: calc(24px + env(safe-area-inset-right, 0px));
            padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
          }
        }

        .footer-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 48px;
          max-width: 900px;
        }

        @media (max-width: 640px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }
        }

        /* Brand Section */
        .footer-brand {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }

        .footer-logo-wrap {
          display: flex;
          align-items: center;
          gap: 14px;
        }

        .footer-logo {
          width: 52px;
          height: 52px;
          border-radius: 12px;
          object-fit: cover;
          box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
        }

        .footer-company-name {
          font-size: 22px;
          font-weight: 700;
          color: #fff;
          letter-spacing: -0.02em;
        }

        .footer-description {
          font-size: 14px;
          line-height: 1.7;
          color: rgba(255,255,255,0.6);
          max-width: 280px;
        }

        .footer-badges {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-top: 4px;
        }

        .footer-badge {
          font-family: var(--font-mono);
          font-size: 10px;
          padding: 5px 10px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 6px;
          color: rgba(255,255,255,0.7);
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        .footer-social {
          display: flex;
          gap: 12px;
          margin-top: 8px;
        }

        .social-link {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 44px;
          height: 44px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 10px;
          color: rgba(255,255,255,0.7);
          transition: all 0.3s ease;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
        }

        .social-link:hover,
        .social-link:active {
          background: rgba(0, 255, 255, 0.1);
          border-color: rgba(0, 255, 255, 0.3);
          color: var(--cyan);
          box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
          transform: translateY(-2px);
        }

        .social-link.enquiry-btn {
          background: rgba(0, 255, 255, 0.1);
          border-color: rgba(0, 255, 255, 0.3);
          color: var(--cyan);
        }

        .social-link.enquiry-btn:hover {
          background: rgba(0, 255, 255, 0.2);
          box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
        }

        /* Column Headings */
        .footer-heading {
          display: flex;
          align-items: center;
          gap: 10px;
          font-size: 15px;
          font-weight: 600;
          color: #fff;
          margin-bottom: 20px;
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        .heading-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border-radius: 8px;
          transition: all 0.3s ease;
        }

        .heading-icon.contact-glow {
          background: rgba(255, 255, 0, 0.1);
          color: #ffd700;
          box-shadow: 0 0 15px rgba(255, 255, 0, 0.2);
        }

        /* Contact Section */
        .contact-items {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin-bottom: 24px;
        }

        .contact-item {
          display: flex;
          align-items: center;
          gap: 12px;
          font-size: 14px;
          color: rgba(255,255,255,0.7);
          text-decoration: none;
          padding: 12px 14px;
          min-height: 48px;
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.08);
          border-radius: 10px;
          transition: all 0.3s ease;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
        }

        .contact-item:hover,
        .contact-item:active {
          background: rgba(0, 255, 255, 0.08);
          border-color: rgba(0, 255, 255, 0.2);
          color: #fff;
          box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
        }

        .contact-item svg {
          color: var(--cyan);
          flex-shrink: 0;
        }

        .enquiry-contact-btn {
          background: rgba(0, 255, 255, 0.08);
          border-color: rgba(0, 255, 255, 0.25);
          width: 100%;
          font-family: inherit;
        }

        .enquiry-contact-btn:hover {
          background: rgba(0, 255, 255, 0.15);
          border-color: rgba(0, 255, 255, 0.4);
          box-shadow: 0 0 25px rgba(0, 255, 255, 0.2);
        }

        .locations-title {
          font-size: 12px;
          font-weight: 600;
          color: rgba(255,255,255,0.5);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          margin-bottom: 14px;
        }

        .locations-list {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }

        .location-item {
          display: flex;
          gap: 10px;
          align-items: flex-start;
        }

        .location-item svg {
          color: var(--cyan);
          flex-shrink: 0;
          margin-top: 2px;
          opacity: 0.7;
        }

        .location-item div {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .location-item strong {
          font-size: 13px;
          font-weight: 600;
          color: rgba(255,255,255,0.85);
        }

        .location-item span {
          font-size: 11px;
          color: rgba(255,255,255,0.45);
          line-height: 1.4;
        }

        /* Bottom Bar */
        .footer-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 16px;
          margin-top: 48px;
          padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.08);
        }

        .copyright {
          font-family: var(--font-mono);
          font-size: 11px;
          color: rgba(255,255,255,0.4);
          letter-spacing: 0.05em;
        }

        .tagline {
          font-size: 12px;
          color: rgba(255,255,255,0.3);
          font-style: italic;
        }

        @media (max-width: 640px) {
          .footer-bottom {
            flex-direction: column;
            text-align: center;
          }
        }

        /* Modal Styles */
        .modal-overlay {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.8);
          backdrop-filter: blur(8px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: 20px;
          padding-top: calc(20px + env(safe-area-inset-top, 0px));
          padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          padding-left: calc(20px + env(safe-area-inset-left, 0px));
          padding-right: calc(20px + env(safe-area-inset-right, 0px));
          animation: fadeIn 0.3s ease;
          -webkit-overflow-scrolling: touch;
        }

        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }

        .modal-content {
          background: linear-gradient(180deg, #0f1729 0%, #030712 100%);
          border: 1px solid rgba(0, 255, 255, 0.2);
          border-radius: 20px;
          padding: 32px;
          max-width: 520px;
          width: 100%;
          position: relative;
          box-shadow: 0 0 60px rgba(0, 255, 255, 0.15), 0 25px 50px rgba(0, 0, 0, 0.5);
          animation: slideUp 0.4s ease;
          max-height: 90vh;
          max-height: 90dvh;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        @media (max-width: 600px) {
          .modal-content {
            padding: 24px 20px;
            border-radius: 16px;
            max-height: 85vh;
            max-height: 85dvh;
          }
        }

        @keyframes slideUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .modal-close {
          position: absolute;
          top: 16px;
          right: 16px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 8px;
          padding: 8px;
          cursor: pointer;
          color: rgba(255,255,255,0.6);
          transition: all 0.2s ease;
        }

        .modal-close:hover {
          background: rgba(255,255,255,0.1);
          color: #fff;
        }

        .modal-header {
          text-align: center;
          margin-bottom: 28px;
        }

        .modal-icon {
          width: 56px;
          height: 56px;
          background: linear-gradient(135deg, rgba(0,255,255,0.2) 0%, rgba(132,204,22,0.2) 100%);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
          color: var(--cyan);
          box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
        }

        .modal-header h3 {
          font-size: 24px;
          font-weight: 700;
          color: #fff;
          margin: 0 0 8px;
        }

        .modal-header p {
          font-size: 14px;
          color: rgba(255,255,255,0.5);
          margin: 0;
        }

        .modal-form {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }

        @media (max-width: 500px) {
          .form-row {
            grid-template-columns: 1fr;
          }
        }

        .form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        .form-group label {
          font-size: 12px;
          font-weight: 600;
          color: rgba(255,255,255,0.7);
          text-transform: uppercase;
          letter-spacing: 0.05em;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
          background: rgba(255,255,255,0.03);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 10px;
          padding: 12px 14px;
          font-size: 14px;
          color: #fff;
          font-family: inherit;
          transition: all 0.2s ease;
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
          color: rgba(255,255,255,0.3);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
          outline: none;
          border-color: rgba(0, 255, 255, 0.4);
          background: rgba(0, 255, 255, 0.05);
          box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
        }

        .form-group select {
          cursor: pointer;
        }

        .form-group select option {
          background: #0f1729;
          color: #fff;
        }

        .form-group textarea {
          resize: vertical;
          min-height: 80px;
        }

        .submit-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 14px 24px;
          min-height: 50px;
          background: linear-gradient(135deg, var(--cyan) 0%, var(--lime) 100%);
          border: none;
          border-radius: 12px;
          color: #030712;
          font-size: 15px;
          font-weight: 600;
          cursor: pointer;
          margin-top: 8px;
          transition: all 0.3s ease;
          box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
          -webkit-tap-highlight-color: transparent;
          width: 100%;
        }

        .submit-btn:hover,
        .submit-btn:active {
          transform: translateY(-2px);
          box-shadow: 0 6px 30px rgba(0, 255, 255, 0.4);
        }

        @media (hover: none) {
          .submit-btn:active {
            transform: translateY(0);
          }
        }
      `}</style>
    </footer>
  );
}
window.SiteFooter = SiteFooter;