"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";

export default function Contact() {
  return (
    <div className="section-contact style-default position-relative" style={{ paddingLeft: "30px", paddingRight: "30px" }}>
      <div className="tf-container-2" style={{ padding:"30px", background: "linear-gradient(89.8deg, #ff3a2d -0.43%, #ffa13f 100.84%)", borderRadius: "26px" }}>
        <div className="row">
          <div className="col-lg-6">
            <div className="left">
              <div className="heading">
                <div className="h1 split-text split-lines-rotation-x text-white">
                  Let's Start Building Solutions Together
                </div>
              </div>
              <div className="bot">
                <div className="content">
                  <h6 className="mb_5 text-white">+91 90954 50005</h6>
                  <p className="text-body-2 text-white">
                    Call us for urgent Inquiry
                  </p>
                </div>
                {/* <Link 
                  href="https://maps.app.goo.gl/pznAE2GE6p3YUhrE7?g_st=com.google.maps.preview.copy"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="tf-btn btn-primary2 h36"
                  style={{
                    backgroundColor: 'white',
                    color: 'black',
                    border: '1px solid #ddd'
                  }}
                >
                  <span className="text-caption" style={{ color: 'black' }}>Get Direction</span>
                  <span className="bg-effect" />
                </Link> */}
              </div>
            </div>
          </div>
          <div className="col-lg-6">
            <form onSubmit={(e) => e.preventDefault()} className="form-contact" style={{ gap: "10px !important" }}>
              <fieldset style={{ marginBottom: "5px !important" }}>
                <label htmlFor="name" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                  Full Name*
                </label>
                <input type="text" placeholder="Full Name" id="name" required />
              </fieldset>
              <div className="grid-2 gap_24" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px !important", marginBottom: "5px !important" }}>
                <fieldset style={{ marginBottom: "0px !important" }}>
                  <label htmlFor="email" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                    Email Address*
                  </label>
                  <input
                    type="email"
                    placeholder="Your email address*"
                    id="email"
                    required
                  />
                </fieldset>
                <fieldset style={{ marginBottom: "0px !important" }}>
                  <label htmlFor="phone" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                    Phone Number
                    <span style={{ opacity: "0.6", color: "black" }}> (Optional)</span>
                  </label>
                  <input
                    type="text"
                    placeholder="Your phone number"
                    id="phone"
                  />
                </fieldset>
              </div>
              <fieldset style={{ marginBottom: "5px !important" }}>
                <label htmlFor="message" style={{ display: "block", marginBottom: "5px !important", color: "black", fontWeight: "500" }}>
                  Message
                </label>
                <textarea
                  className="message"
                  placeholder="Write your message here..."
                  id="message"
                  defaultValue={""}
                />
              </fieldset>
              <a href="#" className="link attachment text-dark" style={{ marginBottom: "5px !important", display: "inline-block" }}>
                <i className="icon-paperclip-solid" />
                Add an attachment
              </a>
              <button type="submit" className="tf-btn btn-primary2">
                <span>Send Message</span>
                <span className="bg-effect" />
              </button>
            </form>
          </div>
        </div>
      </div>
      {/* <div className="shape position-absolute">
        <Image
          alt="item"
          src="/images/item/shape-5.png"
          width={1105}
          height={720}
        />
      </div> */}
    </div>
  );
}