import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import CTA from "@/components/sections/CTA";
import { Phone, Mail, MapPin } from "lucide-react";

export const metadata = {
  title: "Contact | Lynkedup Technologies",
  description: "Get in touch with Lynkedup Technologies.",
};

export default function ContactPage() {
  return (
    <>
      <Header />

      <section className="linkedup-contact-section position-relative overflow-hidden">
        {/* Background Overlay */}
        <div className="linkedup-contact-overlay"></div>

        <div className="container position-relative z-1">
          {/* Heading */}
          <div className="text-center mb-5">
            <p className="linkedup-contact-subtitle mb-2">Contact Us</p>

            <h2 className="linkedup-contact-title">
              Schedule a complimentary Consultation
              <br />
              with our design team
            </h2>
          </div>

          <div className="row align-items-center justify-content-center ">
            {/* Left Card */}
            <div className="col-lg-4">
              <div className="linkedup-contact-info-card">
                <h3>Get In Touch</h3>

                <p>
                  Contact us today for tailored marketing strategies and
                  expert advice. We’re eager to help your business grow!
                </p>

                <div className="linkedup-contact-info-item">
                  <div className="linkedup-contact-icon">
                    <Phone size={18} />
                  </div>

                  <div>
                    <span>Phone Number</span>
                    <h6>(555) 123-4567</h6>
                  </div>
                </div>


                <div className="linkedup-contact-info-item">
                  <div className="linkedup-contact-icon">
                    <Mail size={18} />
                  </div>

                  <div>
                    <span>Email Address</span>
                    <h6>info@lynkeduptech.com</h6>
                  </div>
                </div>

                <div className="linkedup-contact-info-item">
                  <div className="linkedup-contact-icon">
                    <MapPin size={18} />
                  </div>

                  <div>
                    <span>Office Hours</span>

                    <h6>
                      MONDAY-FRIDAY: 8AM - 6PM
                      <br />
                      SATURDAY: 9AM - 3PM
                    </h6>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Form */}
            <div className="col-lg-8">
              <div className="linkedup-contact-form-wrapper">
                <h3>Send us a Message</h3>

                <form>
                  <div className="row">
                    <div className="col-md-6 mb-4">
                      <input
                        type="text"
                        placeholder="First Name"
                        className="form-control linkedup-contact-input"
                      />
                    </div>

                    <div className="col-md-6 mb-4">
                      <input
                        type="text"
                        placeholder="Last Name"
                        className="form-control linkedup-contact-input"
                      />
                    </div>

                    <div className="col-md-6 mb-4">
                      <input
                        type="email"
                        placeholder="Email Address"
                        className="form-control linkedup-contact-input"
                      />
                    </div>

                    <div className="col-md-6 mb-4">
                      <input
                        type="text"
                        placeholder="Phone Number"
                        className="form-control linkedup-contact-input"
                      />
                    </div>

                    <div className="col-12 mb-4">
                      <textarea
                        rows={6}
                        placeholder="Project Details"
                        className="form-control linkedup-contact-textarea"
                      ></textarea>
                    </div>

                    <div className="col-12 text-end">
                      <button
                        type="submit"
                        className="linkedup-contact-btn"
                      >
                        Get a Free Consultant
                      </button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="linkedup-connect-section">
  <div className="container">
    {/* Heading */}
    <div className="text-center linkedup-connect-heading">
      <span>Stay Connected</span>

      <h2>
        2000+ happy customers already growing
        <br />
        with housecoin
      </h2>
    </div>

    {/* Cards */}
    <div className="row justify-content-center g-4">
      {/* Card 1 */}
      <div className="col-lg-4 col-md-6">
        <div className="linkedup-connect-card">
          <div className="linkedup-connect-icon">
          <img src="/assets/callcontact.svg" alt="" />
          </div>

          <h4>+1800 0000 000</h4>

          <p>Architectural extensions featuring</p>
        </div>
      </div>

      {/* Card 2 */}
      <div className="col-lg-4 col-md-6">
        <div className="linkedup-connect-card">
          <div className="linkedup-connect-icon">
          <img src="/assets/email.svg" alt="" />
          </div>

          <h4>info@lynkeduptech.com</h4>

          <p>Architectural extensions featuring</p>
        </div>
      </div>

      {/* Card 3 */}
      <div className="col-lg-4 col-md-6">
        <div className="linkedup-connect-card">
          <div className="linkedup-connect-icon">
         <img src="/assets/whatsaap.svg" alt="" />
          </div>

          <h4>+911234567890</h4>

          <p>Architectural extensions featuring</p>
        </div>
      </div>
    </div>
  </div>

</section>
      <Footer />

   
    </>
  );
}