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

export const metadata = {
  title: "About us | Lynkedup Technologies",
  description: "Learn more about Lynkedup Technologies.",
};

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

      {/* HERO */}
      <section
  className="ux-project-hero"
  style={{
    backgroundImage: "url('/assets/brandback.png')",
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  }}
>
  <div className="container">
    <div className="ux-project-content text-center">
      <h6 data-aos="fade-down" data-aos-duration="700">About us</h6>
      <h1 className="ux-project-title" data-aos="fade-up" data-aos-delay="100">We build with structure.</h1>

      <p className="ux-project-subtitle" data-aos="fade-up" data-aos-delay="200">
      Lynkedup Technologies is a boutique systems-led  creative studio  for operators  who need more than  <br /> aesthetic polish, they need scalable execution.  </p>
    </div>

  </div>
</section>

<section className="philosophy-section ">
  <div className="container">
    <div className="row align-items-center g-5">
      
      <div className="col-lg-6" data-aos="fade-right">
        <div className="image-box">
          <img
            src="/assets/intersection.png"
            alt="Philosophy"
            className="img-fluid"
          />
        </div>
      </div>

      <div className="col-lg-6" data-aos="fade-left" data-aos-delay="100">
        <p className="ux-section-label">Philosophy</p>

        <h2 className="main-heading">
          We exist at the intersection of strategy, design, and
          execution. Not as separate phases—but as a single
          disciplined approach.
        </h2>

        <p className="desc mt-3">
          Too Many Agencies Deliver Beautiful Work That Doesn't
          Scale. Too Many Consultancies Deliver Strategies That
          Never Ship. We Do Both.
        </p>

        <p className="desc">
          Our Clients Don't Need Hand-Holding. They Need Clarity,
          Structure, And Speed—Without Sacrificing Taste Or
          Long-Term Thinking.
        </p>
      </div>

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

      {/* LEADERSHIP */}
      <section className="leadership-section py-5">
        <div className="container">

          <div className="section-heading mb-5">
            <h2 data-aos="fade-up" data-aos-delay="100">Our leadership team</h2>

            <p data-aos="fade-up" data-aos-delay="200">
              Our Leadership Team Brings Together Over A Century
              <br />
              Of Combined Experience.
            </p>
          </div>

          <div className="leadership-wrapper position-relative">

            <div className="center-logo">
              <div className="logo-circle">
                <img src="/assets/center-logo.png" alt="" />
              </div>
            </div>

            <div className="row align-items-center">

              <div className="col-lg-5 mb-4 mb-lg-0" data-aos="fade-right">
                <div className="leader-card">

                  <div className="leader-img">
                    <img
                      src="/assets/leader1.png"
                      className="img-fluid"
                      alt=""
                    />
                  </div>

                  <div className="leader-info">
                    <div>
                      <h3>Justin Johnson</h3>
                      <span>CEO Founder</span>
                    </div>

                    <a href="mailto:justinj@lynkeduptechnology.com">
                      justinj@lynkeduptechnology.com
                    </a>
                  </div>

                </div>
              </div>

              <div className="col-lg-2 d-none d-lg-block"></div>

              <div className="col-lg-5" data-aos="fade-left" data-aos-delay="100">
                <div className="leader-card">

                  <div className="leader-img blue-bg">
                    <img
                      src="/assets/leader2.png"
                      className="img-fluid"
                      alt=""
                    />
                  </div>

                  <div className="leader-info">
                    <div>
                      <h3>Vivek Mishra</h3>
                      <span>Founder</span>
                    </div>

                    <a href="mailto:vivekm@lynkeduptechnology.com">
                      vivekm@lynkeduptechnology.com
                    </a>
                  </div>

                </div>
              </div>

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

      {/* TEAM SECTION */}
      <section className="team-section py-5">
        <div className="container">
{/* 
          <div className="team-heading mb-5">
            <h2 data-aos="fade-up" data-aos-delay="100">Applogic</h2>

            <p data-aos="fade-up" data-aos-delay="200">
              Build faster with a team that blends strategy, design,
              <br />
              and scalable technology.
            </p>
          </div> */}

          <div className="row">

            {/* Fixed Card */}
            <div className="col-lg-3 mb-4 mb-lg-0" data-aos="fade-right">
              <div className="team-card fixed-card">

                <div className="team-img">
                  <Image
                    src="/assets/team-lead.png"
                    width={500}
                    height={700}
                    className="img-fluid"
                    alt="team lead"
                  />
                </div>

                <div className="team-info">
                  <h3>Bhargav LynkedUp Tech</h3>
                  <span>Lead Frontend Developer</span>
                </div>

              </div>
            </div>

            {/* Swiper Slider */}
            <div className="col-lg-9">

              <div
                id="teamSlider"
                className="carousel slide"
                data-bs-ride="carousel"
                data-bs-interval="3000"
              >

                <div className="carousel-inner">

                  {/* Slide 1 */}
                  <div className="carousel-item active">
                    <div className="row g-4">

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Kabir Malhotra</h3>
                            <span>Developer</span>
                          </div>

                        </div>
                      </div>

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Rohan Sharma</h3>
                            <span>Backend Developer</span>
                          </div>

                        </div>
                      </div>

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Aryan Patel</h3>
                            <span>UI/UX Designer</span>
                          </div>

                        </div>
                      </div>

                    </div>
                  </div>

                  {/* Slide 2 */}
                  <div className="carousel-item">
                    <div className="row g-4">

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Dev Verma</h3>
                            <span>React Developer</span>
                          </div>

                        </div>
                      </div>

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Neha Kapoor</h3>
                            <span>Project Manager</span>
                          </div>

                        </div>
                      </div>

                      <div className="col-md-4">
                        <div className="team-card">

                          <div className="team-img small-img">
                            <Image
                              src="/assets/team-lead.png"
                              width={400}
                              height={500}
                              className="img-fluid"
                              alt=""
                            />
                          </div>

                          <div className="team-info">
                            <h3>Harsh Mehta</h3>
                            <span>QA Engineer</span>
                          </div>

                        </div>
                      </div>

                    </div>
                  </div>

                </div>

                {/* Controls */}
                <div className="team-controls">

                  <button
                    className="slider-btn"
                    type="button"
                    data-bs-target="#teamSlider"
                    data-bs-slide="prev"
                  >
                  <img src="/assets/icons/prev.svg" alt="" />
                  </button>

                  <button
                    className="slider-btn active-btn"
                    type="button"
                    data-bs-target="#teamSlider"
                    data-bs-slide="next"
                  >
                      <img src="/assets/icons/next.svg" alt="" />
                  </button>

                </div>

              </div>

            </div>

          </div>
        </div>
      </section>
{/* =========================================
    MULTIPLE TEAM SECTIONS
========================================= */}

{/* Achievar */}
<section className="team-section py-5">
  <div className="container">

    {/* <div className="team-heading mb-4">
      <h2 data-aos="fade-up" data-aos-delay="100">Achievar</h2>

      <p data-aos="fade-up" data-aos-delay="200">
        Transform concepts into cinematic, interactive,
        and scalable digital experiences.
      </p>
    </div> */}

    <div className="row">

      {/* Fixed Card */}
      <div className="col-lg-3 mb-4 mb-lg-0">
        <div className="team-card fixed-card">

          <div className="team-img">
            <Image
              src="/assets/team-lead.png"
              width={500}
              height={700}
              className="img-fluid"
              alt=""
            />
          </div>

          <div className="team-info">
            <h3>Prashact Achievar</h3>
            <span>Lead Video/3d</span>
          </div>

        </div>
      </div>

      {/* Slider */}
      <div className="col-lg-9">

        <div
          id="achievarSlider"
          className="carousel slide"
          data-bs-ride="carousel"
        >

          <div className="carousel-inner">

            <div className="carousel-item active">
              <div className="row g-4">

                {[1, 2, 3].map((item) => (
                  <div className="col-md-4" key={item}>
                    <div className="team-card">

                      <div className="team-img small-img">
                        <Image
                          src="/assets/team-lead.png"
                          width={400}
                          height={500}
                          className="img-fluid"
                          alt=""
                        />
                      </div>

                      <div className="team-info">
                        <h3>Kabir Malhotra</h3>
                        <span>Developer</span>
                      </div>

                    </div>
                  </div>
                ))}

              </div>
            </div>

          </div>

          <div className="team-controls">
            <button
              className="slider-btn"
              type="button"
              data-bs-target="#achievarSlider"
              data-bs-slide="prev"
            >
              <img src="/assets/icons/prev.svg" alt="" />
            </button>

            <button
              className="slider-btn active-btn"
              type="button"
              data-bs-target="#achievarSlider"
              data-bs-slide="next"
            >
                <img src="/assets/icons/next.svg" alt="" />
            </button>
          </div>

        </div>

      </div>

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


{/* Aiidea */}
<section className="team-section pb-5">
  <div className="container">

    {/* <div className="team-heading mb-4">
      <h2 data-aos="fade-up" data-aos-delay="100">Aiidea</h2>

      <p data-aos="fade-up" data-aos-delay="200">
        Designing digital homes, brand systems,
        and scalable content for modern operators.
      </p>
    </div> */}

    <div className="row">

      <div className="col-lg-3 mb-4 mb-lg-0">
        <div className="team-card fixed-card">

          <div className="team-img">
            <Image
              src="/assets/team-lead.png"
              width={500}
              height={700}
              className="img-fluid"
              alt=""
            />
          </div>

          <div className="team-info">
            <h3>Sameep Aiidea</h3>
            <span>Lead Video/3d</span>
          </div>

        </div>
      </div>

      <div className="col-lg-9">

        <div
          id="aiideaSlider"
          className="carousel slide"
          data-bs-ride="carousel"
        >

          <div className="carousel-inner">

            <div className="carousel-item active">
              <div className="row g-4">

                {[1, 2, 3].map((item) => (
                  <div className="col-md-4" key={item}>
                    <div className="team-card">

                      <div className="team-img small-img">
                        <Image
                          src="/assets/team-lead.png"
                          width={400}
                          height={500}
                          className="img-fluid"
                          alt=""
                        />
                      </div>

                      <div className="team-info">
                        <h3>Kabir Malhotra</h3>
                        <span>Developer</span>
                      </div>

                    </div>
                  </div>
                ))}

              </div>
            </div>

          </div>

          <div className="team-controls">
            <button
              className="slider-btn"
              type="button"
              data-bs-target="#aiideaSlider"
              data-bs-slide="prev"
            >
              <img src="/assets/icons/prev.svg" alt="" />
            </button>

            <button
              className="slider-btn active-btn"
              type="button"
              data-bs-target="#aiideaSlider"
              data-bs-slide="next"
            >
                <img src="/assets/icons/next.svg" alt="" />
            </button>
          </div>

        </div>

      </div>

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


{/* Fidux */}
<section className="team-section pb-5">
  <div className="container">

    {/* <div className="team-heading mb-4">
      <h2 data-aos="fade-up" data-aos-delay="100">Fidux</h2>

      <p data-aos="fade-up" data-aos-delay="200">
        A Unified Framework For Service Teams To Streamline
        Operations, Accelerate Growth, And Improve Customer Experiences.
      </p>
    </div> */}

    <div className="row">

      <div className="col-lg-3 mb-4 mb-lg-0">
        <div className="team-card fixed-card">

          <div className="team-img">
            <Image
              src="/assets/team-lead.png"
              width={500}
              height={700}
              className="img-fluid"
              alt=""
            />
          </div>

          <div className="team-info">
            <h3>Harshita Fidux</h3>
            <span>Lead Video/3d</span>
          </div>

        </div>
      </div>

      <div className="col-lg-9">

        <div
          id="fiduxSlider"
          className="carousel slide"
          data-bs-ride="carousel"
        >

          <div className="carousel-inner">

            <div className="carousel-item active">
              <div className="row g-4">

                {[1, 2, 3].map((item) => (
                  <div className="col-md-4" key={item}>
                    <div className="team-card">

                      <div className="team-img small-img">
                        <Image
                          src="/assets/team-lead.png"
                          width={400}
                          height={500}
                          className="img-fluid"
                          alt=""
                        />
                      </div>

                      <div className="team-info">
                        <h3>Kabir Malhotra</h3>
                        <span>Developer</span>
                      </div>

                    </div>
                  </div>
                ))}

              </div>
            </div>

          </div>

          <div className="team-controls">
            <button
              className="slider-btn"
              type="button"
              data-bs-target="#fiduxSlider"
              data-bs-slide="prev"
            >
              <img src="/assets/icons/prev.svg" alt="" />
            </button>

            <button
              className="slider-btn active-btn"
              type="button"
              data-bs-target="#fiduxSlider"
              data-bs-slide="next"
            >
                <img src="/assets/icons/next.svg" alt="" />
            </button>
          </div>

        </div>

      </div>

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


{/* Winsignia */}
<section className="team-section pb-5">
  <div className="container">

    {/* <div className="team-heading mb-4">
      <h2 data-aos="fade-up" data-aos-delay="100">Winsignia</h2>

      <p data-aos="fade-up" data-aos-delay="200">
        Winsignia Delivers Innovative Digital Solutions Focused On Design,
        Development, And Scalable Technology Services.
      </p>
    </div> */}

    <div className="row">

      <div className="col-lg-3 mb-4 mb-lg-0">
        <div className="team-card fixed-card">

          <div className="team-img">
            <Image
              src="/assets/team-lead.png"
              width={500}
              height={700}
              className="img-fluid"
              alt=""
            />
          </div>

          <div className="team-info">
            <h3>Satyam Rastogi</h3>
            <span>Lead Video/3d</span>
          </div>

        </div>
      </div>

      <div className="col-lg-9">

        <div
          id="winsigniaSlider"
          className="carousel slide"
          data-bs-ride="carousel"
        >

          <div className="carousel-inner">

            <div className="carousel-item active">
              <div className="row g-4">

                {[1, 2, 3].map((item) => (
                  <div className="col-md-4" key={item}>
                    <div className="team-card">

                      <div className="team-img small-img">
                        <Image
                          src="/assets/team-lead.png"
                          width={400}
                          height={500}
                          className="img-fluid"
                          alt=""
                        />
                      </div>

                      <div className="team-info">
                        <h3>Kabir Malhotra</h3>
                        <span>Developer</span>
                      </div>

                    </div>
                  </div>
                ))}

              </div>
            </div>

          </div>

          <div className="team-controls">
            <button
              className="slider-btn"
              type="button"
              data-bs-target="#winsigniaSlider"
              data-bs-slide="prev"
            >
              <img src="/assets/icons/prev.svg" alt="" />
            </button>

            <button
              className="slider-btn active-btn"
              type="button"
              data-bs-target="#winsigniaSlider"
              data-bs-slide="next"
            >
                <img src="/assets/icons/next.svg" alt="" />
            </button>
          </div>

        </div>

      </div>

    </div>
  </div>
</section>
<section className="wb-section aboutpage">
  <div className="container">

    {/* HEADING */}
    <div className="mb-5">
      <h2 className="wb-heading" data-aos="fade-up" data-aos-delay="100">
      What We Believe
      </h2>
    </div>

    {/* CARDS */}
    <div className="row g-4">
      {[
        {
          icon: "/assets/icons/icon1we.svg",
          title: "Ideas must survive scale",
          desc: "A strong concept doesn't break when applied across formats, platforms, or timezones. It adapts without dilution.",
          active: false,
        },
        {
          icon: "/assets/icons/icon2we.svg",
          title: "Design must justify itself",
          desc: "Every decision has a reason. We don't chase trends or add complexity for its own sake. Form follows function always.",
          active: false,
        },
        {
          icon: "/assets/icons/icon3we.svg",
          title: "AI is leverage, not identity",
          desc: "We use AI to accelerate execution, not replace judgment. Technology amplifies structured thinking — it doesn't create it.",
          active: true,
        },
        {
          icon: "/assets/icons/icon4we.svg",
          title: "Systems beat style",
          desc: "A beautiful website that can't be updated is a liability. We build for longevity, not just launch day.",
          active: false,
        },
      ].map((item, index) => (
        <div className="col-md-3" key={index} data-aos="fade-up" data-aos-delay={(index % 4) * 100}>
          <div className={`wb-card ${item.active ? "active" : ""}`}>

            {/* ICON */}
            <div className="wb-icon">
              <img
                src={item.icon}
                alt=""
                className="img-fluid"
              />
            </div>

            {/* CONTENT */}
            <h3>{item.title}</h3>

            <p>{item.desc}</p>
          </div>
        </div>
      ))}
    </div>

  </div>
</section>
<section className="working-section">
  <div className="container">

    {/* TOP HEADING */}
    <div className="case-top">
      <p className="case-label" data-aos="fade-down" data-aos-duration="700">Working Model</p>

      <h2 className="case-heading" data-aos="fade-up" data-aos-delay="100">
        We operate lean. Senior-led execution No bloated teams. <br/>
        No outsource chaos.
      </h2>
    </div>

    {/* CARDS */}
    <div className="row g-4">

      <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="0">
        <div className="working-card">
          <span className="number">01</span>

          <p>
            Every project is led by senior practitioners—not delegated
            to junior teams or external freelancers. You work directly
            with the people building your brand.
          </p>
        </div>
      </div>

      <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="100">
        <div className="working-card">
          <span className="number">02</span>

          <p>
            We don't scale headcount. We scale systems. This means
            faster timelines, clearer communication, and consistent
            quality from concept through deployment.
          </p>
        </div>
      </div>

      <div className="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div className="working-card">
          <span className="number">03</span>

          <p>
            Small teams move faster. Less bureaucracy. More
            accountability. Better outcomes.
          </p>
        </div>
      </div>

    </div>
  </div>
</section>
<section className="global-section py-5">
  <div className="container">
    <div className="row align-items-center g-5">

      {/* LEFT CONTENT */}
      <div className="col-lg-6" data-aos="fade-right">

        <p className="small-title">
          Global Outlook
        </p>

        <h2 className="main-heading">
          Built for global decision-makers.
        </h2>

        <p className="desc ">
          We work with operators across industries and geographies—
          from venture-backed startups to established brands entering
          new markets. Location doesn’t limit execution.
        </p>

        <div className="highlight-box mt-4">
          <span>
            <img
              src="/assets/icons/global.svg"
              alt="Global"
              className="img-fluid"
            />

            Remote-first. Timezone-flexible. Outcome-focused.
          </span>
        </div>

      </div>

      {/* RIGHT IMAGE */}
      <div className="col-lg-6" data-aos="fade-left" data-aos-delay="100">
        <div className="image-box">
          <img
            src="/assets/decision.png"
            alt="Global"
            className="img-fluid"
          />
        </div>
      </div>

    </div>
  </div>
</section>
<section className="who-section">
  <div className="container">
    <div className="row align-items-center g-5">

      {/* LEFT IMAGE */}
      <div className="col-lg-6" data-aos="fade-right">
        <div className="who-image">
          <img
            src="/assets/Whoabout.png"
            alt="Team"
            className="img-fluid"
          />
        </div>
      </div>

      {/* RIGHT CONTENT */}
      <div className="col-lg-6" data-aos="fade-left" data-aos-delay="100">

        <h2 className="who-title">
          Who We Work With
        </h2>

        <p className="who-desc">
          Founders building brands that need to scale
          without losing coherence.
        </p>

        <p className="who-desc">
          Operators who move fast but think long-term—
          execution speed matters, but structure matters more.
        </p>

        <p className="who-desc">
          Companies entering new markets or repositioning
          existing offerings—where clarity is the competitive
          advantage.
        </p>

        <p className="who-muted mt-4">
          If you value noise over signal, we’re not the right fit.
        </p>

        <p className="who-muted">
          If you need cheap and fast over structured and right,
          look elsewhere.
        </p>

      </div>
    </div>
  </div>
</section>
      <Footer />
    </>
  );
}