"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: "Process discovery",
      desc: "We shadow operators, map the actual workflows, and identify the highest-leverage pipelines.",
      tags: ["Process map", "Priority list"],
      image:
        "/assets/Visualization.png",
    },
    {
      week: "Week 3 — 6",
      title: "Storyboard & previz",
      desc: "Hand-drawn boards, low-res previz, camera and pacing decisions. Approval gate before assets.",
      tags: ["Retrieval API", "Citation UX", "Quality dashboard"],
      image:
        "/assets/discovery.png",
    },
    {
      week: "Week 7 — 14",
      title: "First pipeline live",
      desc: "One end-to-end workflow shipped to a pilot team. Real software, not a prototype.",
      tags: ["Live workflow", "Telemetry"],
      image:
        "/assets/discovery1.png",
    },
    {
      week: "Week 15 — 22",
      title: "Expansion",
      desc: "We expand outward — 6–10 workflows, the operator console, the co-pilot.",
      tags: ["Full operator surface", "Co-pilot v1"],
      image:
        "/assets/discovery2.png",
    },
    {
      week: "Week 23 —",
      title: "Handover & operate",
      desc: "Optional managed operations or full handover to your team on a published schedule.",
      tags: ["Runbook", "Handover plan"],
      image:
        "/assets/discovery3.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/autoflow.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>
                      The work that runs itself, <br/>
                      while your team does the deciding.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      Lynkedup Technologies builds enterprise systems, AI products, and cinematic digital experiences for next-generation brands.  </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/auto.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"
          >
    Most ops teams don’t have a software problem. They have a coordination problem.<strong>The work lives between Salesforce, NetSuite, Notion, Slack, endless spreadsheets, disconnected approvals, and constant manual updates. </strong> Systems break in the gaps.
          
          </h2>

          <p className="thesis-para">
          We build the layer that makes your existing stack behave like one product — orchestrated, observed, audited, and operated.
  </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">
    Six capabilities. One operator surface.
      </h2>
      <p className="main-para" data-aos="fade-up" data-aos-delay="100">
      Composed into a single console, not a stack of vendor logins, disconnected dashboards, repetitive workflows, scattered approvals, or fragmented operational systems across departments.    </p>
                </span> 
    </div>

         

            </div>

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

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

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

              <h4>Durable workflows</h4>

              <p>
              Temporal-style orchestration. Long-running processes survive everything.

              </p>

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

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

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

              <h4>Approvals & policy</h4>

              <p>
              Configurable approval chains with SLA timers, escalation, and full audit.

              </p>

              <span>SOX-ready</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>Integration fabric</h4>

              <p>
              60+ pre-built connectors plus a framework for the long tail of internal tools.
              </p>

              <span>Lidar-ready</span>
            </div>
          </div>

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

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

              <h4>Embedded analytics</h4>

              <p>
              Material libraries authored on the project, calibrated to physical samples.
              </p>

              <span>PBR · spectral</span>
            </div>
          </div>

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

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

              <h4>Ops co-pilot</h4>

              <p>
              Retrieval-grounded AI that drafts approvals, summarizes threads, flags anomalies.
              </p>

              <span>Cycles · Octane · Arnold</span>
            </div>
          </div>

          {/* Card 6 */}
         

        </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"
        >
   Measured 90 days post-launch, 
          <br />
          across 18 ops engagements.
        </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>4.1×</h2>

          <h4>Throughput per operator</h4>

          <p>
          Median productivity uplift after the first pipeline ships.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Cheaper inference</h4>

          <p>
          Average cost reduction after applying our model-mesh routing and prompt-cache discipline.
          </p>
        </div>
      </SwiperSlide>

      {/* ACTIVE CARD */}
      <SwiperSlide>
        <div className="wb-card active">
          <h2>99.95%</h2>

          <h4>Pipeline reliability</h4>

          <p>
          Across 240+ production workflows currently in operation.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Approval cycle reduction</h4>

          <p>
          From 4.2 days to 28 hours, median.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Audit findings</h4>

          <p>
          On the platforms we built — across last year's SOC 2 cycle.
          </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 – 28 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>

     {/* Footer */}
     <Footer />
    </>
  );
}