"use client";

import Image from "next/image";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Layers3 } from "lucide-react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";

import "swiper/css";

import { useEffect, useRef } from "react";

export default function CustomSolutionsSection() {

  const cardsRef = useRef<(HTMLDivElement | null)[]>([]);

  const processData = [
    {
      week: "Week 1 — 3",
      title: "Discovery & event storming",
      desc: "Senior architects and operators map workflows and operational systems.",
      tags: ["DOMAIN MAP", "ARCHITECTURE", "WORKFLOWS"],
      image:
        "/assets/custom-solutions.png",
    },
    {
      week: "Week 3 — 6",
      title: "Foundation & prototype",
      desc: "Build workflows and define systems through rapid prototyping.",
      tags: ["PROTOTYPE", "DESIGN SYSTEM", "DATA MODEL"],
      image:
        "/assets/custom-solutions1.png",
    },
    {
      week: "Week 7 — 14",
      title: "Vertical slice expansion",
      desc: "Expand workflows and optimize operational efficiency.",
      tags: ["WORKFLOWS", "PILOT", "TRAINING"],
      image:
        "/assets/thesis-img.png",
    },
    {
      week: "Week 15 — 22",
      title: "Hardening, audit & QA",
      desc: "Security, observability and production readiness.",
      tags: ["SOC 2", "QA", "OBSERVABILITY"],
      image:
        "/assets/custom-solutions2.png",
    },
    {
      week: "Week 23 —",
      title: "Operate & compound",
      desc: "Continuous monthly improvements and releases.",
      tags: ["OPS", "RELEASES", "SUPPORT"],
      image:
        "/assets/custom-solutions3.png",
    },
  ];

  useEffect(() => {

    const cards = cardsRef.current;

    const observer = new IntersectionObserver(
      (entries) => {

        entries.forEach((entry) => {

          if (entry.isIntersecting) {

            cards.forEach((card) => {
              card?.classList.remove("active");
            });

            entry.target.classList.add("active");
          }

        });

      },
      {
        threshold: 0.5,
      }
    );

    cards.forEach((card) => {
      if (card) observer.observe(card);
    });

    return () => {
      cards.forEach((card) => {
        if (card) observer.unobserve(card);
      });
    };

  }, []);

  return (
    <>
      {/* Header */}
      <Header />

      {/* Hero Section */}
      <section className="custom-solutions-section"
        style={{
          backgroundImage: "url('/assets/Customsolutions.png')",
          backgroundSize: "cover",
          backgroundPosition: "center",
          backgroundRepeat: "no-repeat",
        }}>
        <div className="container px-lg-0">
          <div className="row g-0">
            <div className="col-12">
              <div className="custom-card position-relative overflow-hidden">


                {/* Top Left Users */}
                <div className="top-users d-flex align-items-center">
                  <div className="users-img d-flex">
                    <img src="/assets/user1.png" alt="" />
                    <img src="/assets/user2.png" alt="" />
                    <img src="/assets/user3.png" alt="" />
                  </div>

                  <p className="mb-0">
                    100+ people already joined the <br/>
                    Lynkedup Technologies
                  </p>
                </div>

                {/* Floating Card */}
                <div className="floating-card">
                  <div className="d-flex align-items-center gap-3">
                    <img
                      src="/assets/Marcus.png"
                      alt=""
                      className="profile-img"
                    />

                    <div>
                      <span className="small-text">LET’S TALK</span>
                      <h5 className="mb-0">Marcus Lien</h5>
                      <p className="mb-0">LEAD ARCHITECT</p>
                    </div>

                    <button className="arrow-btn">
                    <img src="/assets/arrowservice.svg" alt="" />
                    </button>
                  </div>
                </div>

                {/* Bottom Content */}
                <div className="bottom-content">
                  <div className="row align-items-end">
                    <div className="col-md-7">
                      <h2>
                        Custom solutions built for the
                        <br />
                        next era of scale.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                        Generative platforms, autonomous agents &
                        conversational systems — designed by a studio
                        that has shipped twenty of them.
                      </p>
                    </div>
                  </div>
                </div>

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

      <section className="thesis-section">
  <div className="container">

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

      {/* Left Side */}
      <div className="col-lg-4">
        <div className="thesis-left">

          <p
            className="ux-exp-label"
            data-aos="fade-right"
          >
            THE THESIS
          </p>

          <div className="thesis-image">
            <img
              src="/assets/thesis-img.png"
              alt=""
              className="img-fluid"
            />
          </div>

        </div>
      </div>

      {/* Right Side */}
      <div className="col-lg-8">

        <div className="thesis-content">

          <h2
            className="ux-exp-heading"
            data-aos="fade-left"
            data-aos-delay="100"
          >
            For a generation, “enterprise software” meant choosing
            between a <strong>vendor’s roadmap and a contractor’s invoice.</strong>
          

             <strong>
               We believe the next decade belongs to organizations
            </strong>{" "}
            that own their systems, and studios that build them with
            consumer-grade craft.
          </h2>

          <p className="thesis-para">
            Custom Solutions is our practice for organizations who treat
            technology as an asset, not an expense. We design and build
            platforms that scale linearly with revenue, integrate cleanly
            into existing stacks, and graduate gracefully from prototype
            to production.
          </p>

        </div>

      </div>

    </div>
  </div>

 
</section>
      <section className="core-features-section">
      <div className="container">
      <div className="row">
            <div className="case-top">
      <p className="case-label" data-aos="fade-down" data-aos-duration="700">CORE FEATURES</p>

    <span> <h2 className="case-heading" data-aos="fade-up" data-aos-delay="100">
      Twelve building blocks. One
                  <br />
                  coherent product.
      </h2>
      <p className="main-para" data-aos="fade-up" data-aos-delay="100">
                  Each engagement composes a subset of these capabilities into a
                  single, branded surface — never a stack of disconnected vendor
                  apps stitched together with logins.
                </p>
                </span> 
    </div>

         

            </div>

        {/* Cards */}
        <div className="row g-4 justify-content-center">

          {/* Card 1 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card active">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Domain Modeling</h4>

              <p>
                Event-storming sessions with your operators to map the actual
                business — not the org chart.
              </p>

              <span>2-week kickoff</span>
            </div>
          </div>

          {/* Card 2 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Composable UI system</h4>

              <p>
                A token-driven design system that scales seamlessly across
                60+ screens without visual drift.
              </p>

              <span>Figma + code</span>
            </div>
          </div>

          {/* Card 3 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Durable workflows</h4>

              <p>
                Temporal-style orchestration so long-running processes survive
                deploys, restarts, and humans.
              </p>

              <span>Temporal · Hatchet</span>
            </div>
          </div>

          {/* Card 4 */}
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Identity & access</h4>

              <p>
                SSO, SCIM, fine-grained permissions, attribute-based
                authorization, full audit trails.
              </p>

              <span>WorkOS · Auth0</span>
            </div>
          </div>

          {/* Card 5 */}
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Embedded analytics</h4>

              <p>
                Operational dashboards inside the product — not bolted on
                through a third-party iframe.
              </p>

              <span>In-product BI</span>
            </div>
          </div>

          {/* Card 6 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Integration fabric</h4>

              <p>
                40+ pre-built connectors plus a custom integration framework
                for the long tail.
              </p>

              <span>40+ integrations</span>
            </div>
          </div>

          {/* Card 7 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Compliance by design</h4>

              <p>
                SOC 2 controls, ISO 27001, GDPR + DPA scaffolding wired into
                the architecture from day one.
              </p>

              <span>SOC 2 Type II</span>
            </div>
          </div>

          {/* Card 8 */}
          <div className="col-lg-4 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>AI co-pilot layer</h4>

              <p>
                Optional embedded LLM co-pilot for retrieval, summarization,
                and natural-language ops.
              </p>

              <span>Optional bolt-on</span>
            </div>
          </div>

          {/* Card 9 */}
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Multi-region by default</h4>

              <p>
                Active-active deployments across three regions with sub-second
                failover and replicated audit logs.
              </p>

              <span>99.99% target</span>
            </div>
          </div>

          {/* Card 10 */}
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

              <div className="icon-box">
                <Layers3 size={18} />
              </div>

              <h4>Forecast & simulation</h4>

              <p>
                Scenario modeling baked into the product so operators can
                stress-test before committing.
              </p>

              <span>Monte Carlo</span>
            </div>
          </div>

        </div>
      </div>


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

    {/* TOP */}
    <div className="row">
      <div className="case-top">
        <p
          className="case-label"
          data-aos="fade-down"
          data-aos-duration="700"
        >
          BENEFITS & OUTCOMES
        </p>

        <h2
          className="case-heading"
          data-aos="fade-up"
          data-aos-delay="100"
        >
          Outcomes we sign up for,
          <br />
          in writing.
        </h2>
      </div>

    </div>
    {/* SWIPER */}
    <Swiper
  modules={[Autoplay]}
  spaceBetween={24}
  slidesPerView={5.2}
  loop={true}
  speed={1000}
  autoplay={{
    delay: 2500, // 2.5 sec baad next slide
    disableOnInteraction: false,
  }}
  breakpoints={{
    320: {
      slidesPerView: 1.2,
    },
    576: {
      slidesPerView: 1.8,
    },
    768: {
      slidesPerView: 2.5,
    },
    992: {
      slidesPerView: 3.2,
    },
    1200: {
      slidesPerView: 4.2,
    },
  }}
  className="wb-slider"
>

      {/* CARD 1 */}
      <SwiperSlide>
        <div className="wb-card">
          <h2>3.4×</h2>

          <h4>Operator throughput</h4>

          <p>
            Median productivity uplift across 22 internal-tools
            engagements, measured 90 days post-launch.
          </p>
        </div>
      </SwiperSlide>

      {/* CARD 2 */}
      <SwiperSlide>
        <div className="wb-card">
          <h2>$20</h2>

          <h4>Vendor lock-in cost</h4>

          <p>
            You own the source, the data, the deployment.
            We hand over the keys on day one and on the last day.
          </p>
        </div>
      </SwiperSlide>

      {/* ACTIVE CARD */}
      <SwiperSlide>
        <div className="wb-card active">
          <h2>&lt; 24h</h2>

          <h4>Mean time to compliance</h4>

          <p>
            From request to SOC 2 evidence package,
            on the platforms we built and continue to operate.
          </p>
        </div>
      </SwiperSlide>

      {/* CARD 4 */}
      <SwiperSlide>
        <div className="wb-card">
          <h2>67%</h2>

          <h4>Reduction in SaaS spend</h4>

          <p>
            Average vendor consolidation savings within
            18 months — paid back the build inside year one.
          </p>
        </div>
      </SwiperSlide>

      {/* CARD 5 */}
      <SwiperSlide>
        <div className="wb-card">
          <h2>99.99%</h2>

          <h4>Production uptime</h4>

          <p>
            Across 14 platforms currently in active operation,
            multi-region active-active.
          </p>
        </div>
      </SwiperSlide>

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

<section className="process-section">

<div className="container">

  <div className="process-wrapper">

    {/* LEFT SIDE */}
    <div className="process-left">

      <div className="left-content">

        <span>
          PROCESS • 14–20 WEEKS • 5 PHASES
        </span>

        <h2>
          An end-to-end operating model.
        </h2>

        <p>
          A real operating model, not a giant chart.
          Every phase ends with a working artifact —
          not a deliverable on a slide.
        </p>

        {/* BIG LOGO */}
        <div className="flexlogo">
          <img src="/assets/customerlyn.png" alt="" />
        </div>

      </div>

    </div>

    {/* RIGHT SIDE */}
    <div className="process-right">

      {/* CENTER LINE */}
      <div className="timeline-line"></div>

      {processData.map((item, index) => (

        <div
          key={index}
          ref={(el) => {
  cardsRef.current[index] = el;
}}
          className={`process-card ${index === 0 ? "active" : ""}`}
        >

          {/* NUMBER */}
          <div className="timeline-dot">
            {index + 1}
          </div>

          {/* IMAGE */}
          <div className="card-image">
            <img src={item.image} alt="" />
          </div>

          {/* CONTENT */}
       {/* CONTENT */}
<div className="card-content">

<div className="card-top">

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

  <span>{item.week}</span>

</div>

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

<div className="card-tags">

  {item.tags.map((tag, i) => (
    <span key={i}>{tag}</span>
  ))}

</div>

</div>

        </div>

      ))}

    </div>

  </div>

</div>

</section>



   <section className="bottommarginssolution" >
    <div className="container">
      <img src="/assets/solutionimg.png" alt="" />
    </div>
   </section>
     {/* Footer */}
     <Footer />
    </>
  );
}