<section id="contact">
  <div class="container">
    <div class="contact-grid">
      <div class="contact-info fade-up">
        <div class="section-eyebrow">Get in Touch</div>
        <h1>Let's Talk About<br>Your Project</h1>
        <p>Whether you have a detailed brief or just an idea, our team is ready to listen, advise, and deliver.</p>
        <div class="contact-detail"><div class="contact-detail-icon"><svg viewBox="0 0 24 24"><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><div><div class="contact-detail-label">Head Office</div><div class="contact-detail-value">KG 9 Ave, Kacyiru<br>Kigali, Rwanda</div></div></div>
        <div class="contact-detail"><div class="contact-detail-icon"><svg viewBox="0 0 24 24"><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-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg></div><div><div class="contact-detail-label">Phone</div><div class="contact-detail-value">+250 788 123 456</div></div></div>
        <div class="contact-detail"><div class="contact-detail-icon"><svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg></div><div><div class="contact-detail-label">Email</div><div class="contact-detail-value">info@solidconstruction.rw</div></div></div>
        <div class="contact-detail"><div class="contact-detail-icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg></div><div><div class="contact-detail-label">Business Hours</div><div class="contact-detail-value">Monday – Friday: 7:30 AM – 5:30 PM<br>Saturday: 8:00 AM – 1:00 PM</div></div></div>
        <div class="contact-socials">
          <a href="#" class="social-btn"><svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg></a>
          <a href="#" class="social-btn"><svg viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"/></svg></a>
          <a href="#" class="social-btn"><svg viewBox="0 0 24 24"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg></a>
        </div>
      </div>
      <div class="contact-form fade-up">
        <div style="margin-bottom:36px;"><h3 style="font-size:32px; color:var(--charcoal); margin-bottom:8px;">Request a Quote</h3><p style="font-size:14px; color:var(--stone);">Fill in the form and we'll get back to you within 24 hours.</p></div>
        <div class="form-row"><div class="form-group"><label class="form-label" for="fname">Full Name *</label><input class="form-input" type="text" id="fname" placeholder="John Doe" required></div><div class="form-group"><label class="form-label" for="femail">Email Address *</label><input class="form-input" type="email" id="femail" placeholder="john@company.com" required></div></div>
        <div class="form-row"><div class="form-group"><label class="form-label" for="fphone">Phone Number</label><input class="form-input" type="tel" id="fphone" placeholder="+250 788 000 000"></div><div class="form-group"><label class="form-label" for="ftype">Project Type *</label><select class="form-select" id="ftype" required><option value="" disabled selected>Select type</option><option>Residential Construction</option><option>Commercial Construction</option><option>Renovation & Remodeling</option><option>Civil Works & Infrastructure</option><option>Project Management</option><option>Design & Build</option><option>Maintenance Services</option><option>Other</option></select></div></div>
        <div class="form-group"><label class="form-label" for="fmsg">Project Details *</label><textarea class="form-textarea" id="fmsg" rows="5" placeholder="Tell us about your project — location, scope, timeline, budget range..." required></textarea></div>
        <div class="form-checkbox"><input type="checkbox" id="fconsent" required><label for="fconsent">I agree to the Privacy Policy and consent to Solid Construction contacting me regarding my enquiry.</label></div>
        <button type="button" class="form-submit" onclick="submitForm()">Send Enquiry →</button>
        <div id="form-msg" style="margin-top:16px; font-size:13px; display:none;"></div>
      </div>
    </div>
    <div class="map-placeholder fade-up" style="margin-top:80px;"><div style="text-align:center;"><svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="1.5" width="32" height="32" style="margin-bottom:12px;"><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 class="map-placeholder-text">Interactive Map — KG 9 Ave, Kacyiru, Kigali</div><p style="font-size:12px; color:var(--stone); margin-top:8px;">Embed Google Maps here in production</p></div></div>
  </div>
</section>

<style>
#contact { 
  padding: 140px 0 120px; 
  background: #F5F5F5; /* Light gray background */
}
.contact-grid { 
  display: grid; 
  grid-template-columns: 1fr 1.4fr; 
  gap: 80px; 
  align-items: start; 
}
.contact-info h1 { 
  font-size: clamp(44px, 5vw, 68px); 
  color: var(--charcoal); /* Dark text for light background */
  margin-bottom: 20px; 
  margin-top: 24px; 
}
.contact-info p { 
  font-size: 16px; 
  color: var(--stone); 
  line-height: 1.75; 
  margin-bottom: 48px; 
}
.contact-detail { 
  display: flex; 
  align-items: flex-start; 
  gap: 20px; 
  margin-bottom: 28px; 
}
.contact-detail-icon { 
  width: 44px; 
  height: 44px; 
  border: 1px solid rgba(200,169,110,0.3); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0;
  background: var(--white);
  border-radius: 8px;
}
.contact-detail-icon svg { 
  width: 20px; 
  height: 20px; 
  fill: none; 
  stroke: var(--gold); 
  stroke-width: 1.5; 
}
.contact-detail-label { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--gold); 
  margin-bottom: 4px; 
}
.contact-detail-value { 
  font-size: 15px; 
  color: var(--charcoal); /* Dark text for light background */
  line-height: 1.5; 
}
.contact-socials { 
  display: flex; 
  gap: 12px; 
  margin-top: 48px; 
}
.social-btn { 
  width: 44px; 
  height: 44px; 
  border: 1px solid rgba(200,169,110,0.3); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-decoration: none; 
  transition: all var(--transition);
  background: var(--white);
  border-radius: 8px;
}
.social-btn:hover { 
  border-color: var(--gold); 
  background: var(--gold); 
}
.social-btn:hover svg {
  fill: var(--charcoal);
}
.social-btn svg { 
  width: 18px; 
  height: 18px; 
  fill: var(--stone); 
  transition: fill var(--transition);
}
.contact-form { 
  background: var(--white); 
  padding: 56px 48px; 
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.form-group { 
  margin-bottom: 24px; 
}
.form-label { 
  display: block; 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  color: var(--gold); 
  margin-bottom: 10px; 
}
.form-input, .form-select, .form-textarea { 
  width: 100%; 
  background: #F9F9F9; /* Light gray input background */
  border: 1px solid #E0E0E0; 
  color: var(--charcoal); 
  font-family: 'DM Sans', sans-serif; 
  font-size: 15px; 
  padding: 14px 18px; 
  outline: none; 
  transition: border-color var(--transition); 
  appearance: none; 
  border-radius: 8px;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { 
  border-color: var(--gold); 
  background: var(--white);
}
.form-select { 
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23C8A96E' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L2 5h12z'/%3E%3C/svg%3E"); 
  background-repeat: no-repeat; 
  background-position: right 16px center; 
  background-color: #F9F9F9; 
  cursor: pointer; 
}
.form-select option { 
  background: var(--white); 
  color: var(--charcoal); 
}
.form-textarea { 
  resize: vertical; 
  min-height: 120px; 
}
.form-row { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 16px; 
}
.form-checkbox { 
  display: flex; 
  align-items: flex-start; 
  gap: 12px; 
  margin-bottom: 32px; 
}
.form-checkbox input { 
  margin-top: 3px; 
  accent-color: var(--gold); 
}
.form-checkbox label { 
  font-size: 13px; 
  color: var(--stone); 
  line-height: 1.6; 
}
.form-submit { 
  width: 100%; 
  background: var(--gold); 
  color: var(--charcoal); 
  border: none; 
  font-family: 'DM Sans', sans-serif; 
  font-size: 13px; 
  font-weight: 700; 
  letter-spacing: 0.15em; 
  text-transform: uppercase; 
  padding: 18px; 
  cursor: pointer; 
  border-radius: 8px;
  transition: all var(--transition);
}
.form-submit:hover { 
  background: var(--gold-dark); 
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(200,169,110,0.3);
}
.map-placeholder { 
  margin-top: 48px; 
  height: 280px; 
  background: #E8E8E8; /* Light gray for map */
  border: 1px solid #D0D0D0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 12px;
}
.map-placeholder-text { 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 0.2em; 
  text-transform: uppercase; 
  color: var(--stone); 
}
/* Update eyebrow for light background */
#contact .section-eyebrow {
  color: var(--gold);
}
#contact .section-eyebrow::before {
  background: var(--gold);
}
@media (max-width: 1024px) { 
  .contact-grid { 
    grid-template-columns: 1fr; 
    gap: 50px;
  } 
  .contact-form { 
    padding: 40px 32px; 
  } 
}
@media (max-width: 768px) { 
  .contact-form { 
    padding: 32px 24px; 
  } 
  .form-row { 
    grid-template-columns: 1fr; 
  }
}
</style>