import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import CTA from "@/components/sections/CTA";

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

export default function ContactPage() {
  return (
    <>
      <Header />
      <section
  className="ux-project-hero"
  style={{
    backgroundImage: "url('/assets/contactback.png')",
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  }}
>
  <div className="container">
    <div className="ux-project-content text-center">
      <h1 className="ux-project-title" data-aos="fade-up" data-aos-delay="100">Start A Project</h1>

      <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200">
        Tell us what you're building. We&apos;ll structure the rest.
      </p>
    </div>

    <div className="ux-joined-box" data-aos="zoom-in" data-aos-delay="300">
      <div className="ux-avatar-group">
        <img src="/assets/user1.png" alt="User" />
        <img src="/assets/user2.png" alt="User" />
        <img src="/assets/user3.png" alt="User" />
      </div>

      <p>
        100+ people already joined <br />
        the AAideA
      </p>
    </div>
  </div>
</section>
<section className="ux-contact-section">
  <div className="container">
    <div className="row g-4">
      <div className="col-lg-4" data-aos="fade-right">
        <div className="ux-contact-left">
       <img src="/assets/contactimage.png" alt="" />
        </div>
      </div>
      <div className="col-lg-8">
        <div className="ux-contact-box">
          <p className="ux-contact-mini" data-aos="fade-down" data-aos-duration="700">Let's Build it Properly.</p>
          <h2 className="ux-contact-title" data-aos="fade-up" data-aos-delay="100">
            Tell us what you're building. We'll structure the rest.
          </h2>
          <form>
            <div className="row g-4">
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="0">
                <label>Name</label>
                <input
                  className="form-control ux-input active"
                  placeholder="John"
                  type="text"
                  defaultValue=""
                  name="name"
                />
              </div>
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <label>Company Name</label>
                <input
                  className="form-control ux-input"
                  placeholder="enter name"
                  type="text"
                  defaultValue=""
                  name="company"
                />
              </div>
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="0">
                <label>Website</label>
                <input
                  className="form-control ux-input"
                  placeholder="enter website"
                  type="text"
                  defaultValue=""
                  name="website"
                />
              </div>
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <label>Project Type</label>
                <select name="project_type" className="form-select ux-input">
                  <option value="">select type</option>
                  <option value="Web App">Web App</option>
                  <option value="Mobile App">Mobile App</option>
                </select>
              </div>
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="0">
                <label>Budget Range</label>
                <select name="budget" className="form-select ux-input">
                  <option value="">select range</option>
                  <option value="$10K - $25K">$10K - $25K</option>
                  <option value="$25K+">$25K+</option>
                </select>
              </div>
              <div className="col-md-6" data-aos="fade-up" data-aos-delay="100">
                <label>Timeline</label>
                <input
                  className="form-control ux-input"
                  placeholder="estimated weeks"
                  type="text"
                  defaultValue=""
                  name="timeline"
                />
              </div>
              <div className="col-12" data-aos="fade-up" data-aos-delay="200">
                <label>Brief Description</label>
                <textarea
                  name="description"
                  className="form-control ux-textarea"
                  rows={6}
                  placeholder="What are we building?"
                  defaultValue={""}
                />
              </div>
              <div className="col-12 text-end" data-aos="zoom-in" data-aos-delay="400">
              <button className="lk-contact-btn">Start a Project<span className="lk-btn-icon"><img src="/assets/buttonarrow.svg" className="lk-user-img" alt=""/></span></button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

      <Footer />
    </>
  );
}
