"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: "Pipeline audit",
      desc: "A diagnostic across data, motion, and tooling. Outputs: data hygiene report, motion map, priority list.",
      tags: ["Audit report", "Priority list"],
      image:
        "/assets/Visualization1.png",
    },
    {
      week: "Week 3 — 6",
      title: "First surface live",
      desc: "A purpose-built sales console for one team — branded, tuned, and in production.",
      tags: ["Live console", "Forecast v1"],
      image:
        "/assets/Infrastructure2.png",
    },
    {
      week: "Week 7 — 14",
      title: "Engine & lifecycle",
      desc: "Lead engine, scoring model, lifecycle plays. Seller co-pilot ships behind a flag.",
      tags: ["Lead engine", "Lifecycle OS"],
      image:
        "/assets/Infrastructure3.png",
    },
    {
      week: "Week 15 — 22",
      title: "Operate & compound",
      desc: "Optional managed RevOps: we run the model, ship monthly tuning, hand over on a published schedule.",
      tags: ["Managed RevOps", "Handover plan",],
      image:
        "/assets/Infrastructure4.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/Cloud_Infrastructure.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>
                      Infrastructure that doesn't page <br/>
you at 3 in the morning.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      We engineer secure, observable, multi-region cloud foundations for platform teams running production-grade software.  </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/brandthist.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 CRMs aren’t broken. They’re neglected. The data becomes unreliable, dashboards stop reflecting reality, and sales teams lose trust over time. <strong>When systems fail to support decisions, operations slow down, forecasting weakens.</strong>
          
          </h2>

          <p className="thesis-para">
          We rebuild the surface and the data underneath so the pipeline becomes the single artifact that sales, finance, and customer success all believe.
  </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 revenue surface.
      </h2>
      <p className="main-para" data-aos="fade-up" data-aos-delay="100">
      Composed per engagement — never a vanilla CRM rollout.
                </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>Custom CRM surface</h4>

              <p>
              A sales console shaped to your motion — built on Salesforce, HubSpot, or from scratch.
              </p>

              <span>Branded</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>Lead scoring & routing</h4>

              <p>
              A propensity model your RevOps team can tune — wired into routing, SLA, and forecast.

              </p>

              <span>Model-versioned</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>Enrichment & intent</h4>

              <p>
              First-party intent + Clearbit/Apollo/ZoomInfo enrichment, deduped at the account level.
              </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>Lifecycle automation</h4>

              <p>
              Onboarding, expansion, churn-risk and renewal plays running on the same fabric.

              </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>Forecast & reporting</h4>

              <p>
              A pipeline forecast finance trusts — with audit trail, scenario modeling, and board-grade outputs.
              </p>

              <span>Pantone-graded</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.
        </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>2.7×</h2>

          <h4>SQL → close conversion</h4>

          <p>
          Median uplift after the new surface and scoring model ship.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Forecast variance</h4>

          <p>
          On the platforms we run — vs. 25–40% on the prior CRM surface.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Seller productive time</h4>

          <p>
          Reclaimed from admin via the co-pilot, on average per seller per week.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Net revenue retention</h4>

          <p>
          Uplift from lifecycle and churn-risk plays, in the first 12 months.

          </p>
        </div>
      </SwiperSlide>

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

          <h4>Languages localized per master</h4>

          <p>
          Same shots, 12 voice-overs, 12 supers, 12 territory grades — built into the pipeline.
          </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 />
    </>
  );
}