// Contact — WhatsApp CTA panel
function Contact({ t }) {
  const whatsappNumber = "60103740583";
  const whatsappLink = `https://wa.me/${whatsappNumber}?text=Hi%20AEQ%2C%20I%20would%20like%20to%20schedule%20a%20consultation.`;

  return (
    <section id="contact" className="contact section">
      <div className="wrap">
        <div className="contact-shell">
          <div className="contact-bg" aria-hidden="true">
            <svg viewBox="0 0 600 600" preserveAspectRatio="xMidYMid slice">
              <defs>
                <linearGradient id="cb-g" x1="0" x2="1"><stop offset="0" stopColor="#0b1e3f"/><stop offset=".5" stopColor="#0ea5e9"/><stop offset="1" stopColor="#a3e635"/></linearGradient>
                <radialGradient id="cb-r" cx="50%" cy="50%" r="50%"><stop offset="0" stopColor="#22d3ee" stopOpacity=".4"/><stop offset="1" stopColor="#22d3ee" stopOpacity="0"/></radialGradient>
              </defs>
              <circle cx="120" cy="120" r="180" fill="url(#cb-r)"/>
              <path d="M -50 400 Q 150 320 300 380 T 700 360" stroke="url(#cb-g)" strokeWidth="2" fill="none" strokeDasharray="6 8" className="cb-line"/>
              <path d="M -50 460 Q 150 380 300 440 T 700 420" stroke="url(#cb-g)" strokeWidth="1.2" fill="none" strokeDasharray="3 10" className="cb-line" style={{animationDelay:'.4s'}}/>
              <path d="M -50 520 Q 150 440 300 500 T 700 480" stroke="url(#cb-g)" strokeWidth="1" fill="none" strokeDasharray="2 12" className="cb-line" style={{animationDelay:'.8s'}}/>
            </svg>
          </div>

          <div className="contact-left">
            <div className="eyebrow"><span className="dot"></span><span>SCHEDULE A CONSULTATION</span></div>
            <h2 className="h-xl">Tell us what you&rsquo;re working on.<br/><em>We&rsquo;ll bring the kit.</em></h2>
            <p className="lead">Most engagements begin with a 30‑minute scoping call. We&rsquo;ll come back with a plan, a quote and an audit‑calendar fit within two working days.</p>

            <ul className="contact-list">
              <li>
                <span className="mono micro">Hours</span>
                <span>Mon &ndash; Fri · 09:00 &ndash; 18:00 MYT</span>
              </li>
              <li>
                <span className="mono micro">Phone</span>
                <span>+60 10-374 0583</span>
              </li>
            </ul>

            <div className="contact-locations">
              <h4 className="mono micro">Our Locations</h4>
              <div className="contact-locations-grid">
                <div className="contact-loc-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 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  <div>
                    <strong>Ipoh Office</strong>
                    <span>17, Persiaran Buntong Jaya 26, 30100, Ipoh, Perak</span>
                  </div>
                </div>
                <div className="contact-loc-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 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  <div>
                    <strong>Workshop</strong>
                    <span>22, Laluan Perusahaan Kledang 1, Taman Perindustrian Chandan Raya, 31450, Menglembu, Perak</span>
                  </div>
                </div>
                <div className="contact-loc-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 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  <div>
                    <strong>Penang Office</strong>
                    <span>26, Lorong Sutera 1, Taman Sutera, Seberang Jaya, 13700, Prai</span>
                  </div>
                </div>
                <div className="contact-loc-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 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                  <div>
                    <strong>Selangor Office</strong>
                    <span>9, Jalan Berlian, Taman Berlian, Batu Caves, 68100, Selangor</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="contact-right">
            <div className="whatsapp-cta">
              <div className="whatsapp-icon">
                <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                  <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>
              </div>
              <h3>Chat with us on WhatsApp</h3>
              <p>Get instant response and schedule your consultation directly via WhatsApp.</p>
              <a
                href={whatsappLink}
                target="_blank"
                rel="noopener noreferrer"
                className="whatsapp-btn"
              >
                <svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
                  <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>
                <span>Message us on WhatsApp</span>
                <svg className="arrow" width="20" height="20" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <p className="whatsapp-number">+60 10-374 0583</p>
              <p className="mono cf-fineprint">Replies within minutes · Available Mon-Fri 9AM-6PM</p>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .contact{position:relative;background:#FFFF00;padding:80px 0}
        .contact-shell{
          position:relative;border-radius:32px;overflow:hidden;isolation:isolate;
          background:#000;border:2px solid #000;
          display:grid;grid-template-columns: 1.1fr .9fr;gap:0;
          box-shadow:0 20px 60px rgba(0,0,0,0.3);
        }
        @media (max-width: 920px){ .contact-shell{ grid-template-columns: 1fr } }
        .contact-bg{position:absolute;inset:0;z-index:0;opacity:.7;pointer-events:none}
        .contact-bg svg{width:100%;height:100%}
        .cb-line{stroke-dashoffset:0;animation: cb-march 16s linear infinite}
        @keyframes cb-march{ to{ stroke-dashoffset: -200 } }

        .contact-left{position:relative;z-index:1;padding:56px 48px;border-right:1px solid rgba(255,255,255,0.1);background:#0a0a0a}
        @media (max-width: 920px){.contact-left{border-right:none;border-bottom:1px solid rgba(255,255,255,0.1);padding:40px 28px}}
        .contact-left h2{margin:16px 0 20px}
        .contact-left h2 em{font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600}
        .contact-list{list-style:none;padding:32px 0 0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;border-top:1px solid rgba(255,255,255,0.1);margin-top:32px}
        @media (max-width: 640px){.contact-list{grid-template-columns:1fr}}
        .contact-list li{display:flex;flex-direction:column;gap:4px}
        .contact-list .micro{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
        .contact-list li span:last-child{font-size:15px;color:var(--ink-soft)}

        .contact-locations{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.1)}
        .contact-locations h4{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:16px}
        .contact-locations-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
        @media (max-width: 640px){.contact-locations-grid{grid-template-columns:1fr}}
        .contact-loc-item{display:flex;gap:10px;align-items:flex-start}
        .contact-loc-item svg{flex-shrink:0;color:var(--cyan);margin-top:3px}
        .contact-loc-item div{display:flex;flex-direction:column;gap:2px}
        .contact-loc-item strong{font-size:13px;font-weight:600;color:var(--ink)}
        .contact-loc-item span{font-size:12px;color:var(--ink-mute);line-height:1.4}

        .contact-right{
          position:relative;z-index:1;padding:56px 48px;
          display:flex;align-items:center;justify-content:center;
          background:#111;
          backdrop-filter:blur(10px);
        }
        @media (max-width: 920px){.contact-right{padding:40px 28px}}

        .whatsapp-cta{
          display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;
        }

        .whatsapp-icon{
          width:80px;height:80px;
          background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
          border-radius:50%;
          display:flex;align-items:center;justify-content:center;
          box-shadow:0 8px 32px rgba(37,211,102,0.4), 0 0 60px rgba(37,211,102,0.2);
          animation: wa-pulse 2s ease-in-out infinite;
        }
        .whatsapp-icon svg{
          width:44px;height:44px;color:#fff;
        }

        @keyframes wa-pulse {
          0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(37,211,102,0.4), 0 0 60px rgba(37,211,102,0.2); }
          50% { transform: scale(1.05); box-shadow: 0 12px 48px rgba(37,211,102,0.5), 0 0 80px rgba(37,211,102,0.3); }
        }

        .whatsapp-cta h3{
          font-size:24px;font-weight:700;color:var(--ink);margin:8px 0 0;
        }
        .whatsapp-cta > p{
          font-size:15px;color:var(--ink-mute);max-width:280px;line-height:1.5;margin:0;
        }

        .whatsapp-btn{
          display:inline-flex;align-items:center;gap:12px;
          padding:16px 32px;
          background:linear-gradient(135deg, #25D366 0%, #128C7E 100%);
          color:#fff;font-size:16px;font-weight:600;
          border-radius:999px;text-decoration:none;
          box-shadow:0 4px 20px rgba(37,211,102,0.4);
          transition:all 0.3s ease;
          margin-top:8px;
        }
        .whatsapp-btn:hover{
          transform:translateY(-3px) scale(1.02);
          box-shadow:0 8px 32px rgba(37,211,102,0.5), 0 0 40px rgba(37,211,102,0.3);
        }
        .whatsapp-btn svg{flex-shrink:0}
        .whatsapp-btn .arrow{margin-left:4px}

        .whatsapp-number{
          font-family:var(--font-mono);font-size:18px;font-weight:600;
          color:var(--ink);margin:8px 0 0;letter-spacing:0.05em;
        }

        .cf-fineprint{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);margin:8px 0 0}
      `}</style>
    </section>
  );
}
window.Contact = Contact;