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

export const metadata = {
  title: "FAQ | Lynkedup Technologies",
  description: "Frequently asked questions about Lynkedup Technologies.",
};

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

      {/* HERO SECTION */}
      <section
        className="ux-project-hero"
        style={{
          backgroundImage: "url('/assets/brandback.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
          padding: "180px 0 120px",
          position: "relative",
        }}
      >
        <div className="overlay"></div>

        <div className="container position-relative">
          <div className="ux-project-content text-center">
            <p className="mini-title" data-aos="fade-down" data-aos-duration="700">SUPPORT</p>

            <h1 className="ux-project-title" data-aos="fade-up" data-aos-delay="100">
              Frequently Asked Questions
            </h1>

            <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200">
              Everything you need to know about our process,
              timelines, strategy, design systems, development, and
              long-term collaboration.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ SECTION */}
      <section className="faq-section">
        <div className="container">
          <div className="row g-4">

            <div className="col-lg-6">
              <div className="faq-left">
                <p className="faq-label" data-aos="fade-down" data-aos-duration="700">FAQs</p>

                <h2 data-aos="fade-up" data-aos-delay="100">
                  Answers Built Around Real Client Questions
                </h2>

                <p data-aos="fade-up" data-aos-delay="200">
                  We work with founders, operators, startups, and
                  modern businesses that need scalable systems—not just
                  visual design. Here are some of the most common
                  questions we receive.
                </p>

                <div className="faq-info-card" data-aos="fade-up" data-aos-delay="300">
                  <h4>Still Have Questions?</h4>

                  <p>
                    Our team is available to discuss your project,
                    clarify workflows, and guide you through the next
                    steps.
                  </p>
                  <a className="lk-contact-btn " href="#">
                  Start A Conversation
  <span className="lk-btn-icon">
    <img
      src="/assets/buttonarrow.svg"
      className="lk-user-img"
      alt="arrow"
    />
  </span>
</a>
                </div>
              </div>
            </div>

            <div className="col-lg-6">
              <div
                className="accordion custom-accordion"
                id="faqAccordion"
              >

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="0">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq1"
                    >
                      What services does Lynkedup Technologies provide?
                    </button>
                  </h2>

                  <div
                    id="faq1"
                    className="accordion-collapse collapse show"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      We specialize in UI/UX design, web development,
                      branding, digital systems, strategy, scalable
                      product experiences, and custom software
                      solutions.
                    </div>
                  </div>
                </div>

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="100">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button collapsed"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq2"
                    >
                      How long does a typical project take?
                    </button>
                  </h2>

                  <div
                    id="faq2"
                    className="accordion-collapse collapse"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      Timelines depend on project complexity, features,
                      and approval cycles. Smaller websites may take
                      2–4 weeks, while larger systems can require
                      several months.
                    </div>
                  </div>
                </div>

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="200">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button collapsed"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq3"
                    >
                      Do you work with startups and enterprise clients?
                    </button>
                  </h2>

                  <div
                    id="faq3"
                    className="accordion-collapse collapse"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      Yes. We collaborate with startups, growing
                      businesses, agencies, and enterprise teams that
                      require scalable digital infrastructure and modern
                      design systems.
                    </div>
                  </div>
                </div>

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="300">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button collapsed"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq4"
                    >
                      Can you redesign an existing platform?
                    </button>
                  </h2>

                  <div
                    id="faq4"
                    className="accordion-collapse collapse"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      Absolutely. We often redesign outdated websites,
                      improve user experience, modernize interfaces, and
                      optimize platforms for better scalability and
                      conversion performance.
                    </div>
                  </div>
                </div>

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="400">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button collapsed"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq5"
                    >
                      Do you provide ongoing maintenance and support?
                    </button>
                  </h2>

                  <div
                    id="faq5"
                    className="accordion-collapse collapse"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      Yes. We offer long-term maintenance, updates,
                      optimization, technical support, and system
                      improvements after project completion.
                    </div>
                  </div>
                </div>

                <div className="accordion-item" data-aos="fade-up" data-aos-delay="0">
                  <h2 className="accordion-header">
                    <button
                      className="accordion-button collapsed"
                      type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#faq6"
                    >
                      Which technologies do you work with?
                    </button>
                  </h2>

                  <div
                    id="faq6"
                    className="accordion-collapse collapse"
                    data-bs-parent="#faqAccordion"
                  >
                    <div className="accordion-body">
                      Our team works with technologies including React,
                      Next.js, WordPress, Node.js, Tailwind CSS,
                      Bootstrap, APIs, cloud systems, and custom modern
                      web stacks.
                    </div>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </section>

      <Footer />

     
    </>
  );
}