"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 & eval design",
      desc: "Map the workflow, define what good means, build the golden dataset. Without evals, the rest is theatre.",
      tags: ["Eval harness v1", "Golden dataset", "Golden dataset"],
      image:
        "/assets/AI-native.png",
    },
    {
      week: "Week 3 — 6",
      title: "Retrieval foundation",
      desc: "Ingest, chunk, embed, index. Tune hybrid retrieval against the golden dataset. Cite everything.",
      tags: ["Retrieval API", "Citation UX", "Quality dashboard"],
      image:
        "/assets/AI-native1.png",
    },
    {
      week: "Week 7 — 14",
      title: "First production loop",
      desc: "One workflow live in production with real users. Streaming, citations, corrections, telemetry.",
      tags: ["Live workflow", "Telemetry", "Feedback UX"],
      image:
        "/assets/AI-native2.png",
    },
    {
      week: "Week 15 — 22",
      title: "Widen & harden",
      desc: "Expand to 3–6 workflows. Pen test the prompts. Bound cost. Switch to multi-model routing.",
      tags: ["Multi-workflow", "Cost governance", "Red-team report"],
      image:
        "/assets/AI-native3.png",
    },
    {
      week: "Week 23 —",
      title: "Continuous learning",
      desc: "Optional managed operations: prompt iteration, eval growth, fine-tune cycles, model migrations..",
      tags: ["Managed evals", "Quarterly model review", "Distilled models"],
      image:
        "/assets/AI-native4.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/ainative.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>
                      AI-native
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      We build AI-native platforms, autonomous agents, intelligent search, and conversational systems designed for the next generation of 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/aithist.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 thirty years, software treated humans as inputs and dashboards as outputs.  <strong>AI-native products invert that. They do the work, and ask humans only when judgment is required.</strong>
          
          </h2>

          <p className="thesis-para">
          We build the products that come out the other side of that inversion: research assistants for engineers, autonomous agents for operations, and generative platforms for creative teams. Each is shipped with retrieval, evals, guardrails and a clear unit economics model.
          </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">
    A complete AI runtime, not just 
                  <br />
                  a wrapper around a model.
      </h2>
      <p className="main-para" data-aos="fade-up" data-aos-delay="100">
      Each engagement composes a subset of these blocks. We commit to ship one of them every week.
                </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>Retrieval engine</h4>

              <p>
              Continuous evaluation, regression gating, golden datasets, cost & latency dashboards.
              </p>

              <span>14M+ docs tested</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>Agent runtime</h4>

              <p>
              Durable, observable, restart-safe agents with human-in-the-loop escalation built in.
              </p>

              <span>Temporal · LangGraph</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>Guardrails</h4>

              <p>
              Prompt injection defense, PII redaction, jailbreak hardening, content policy enforcement.
              </p>

              <span>Red-team tested</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>Evals & telemetry</h4>

              <p>
              Continuous evaluation, regression gating, golden datasets, cost & latency dashboards.
              </p>

              <span>CI-integrated</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>Model mesh</h4>

              <p>
              Route across Claude, GPT, Llama and custom fine-tunes by cost, latency and capability.
              </p>

              <span>Vendor-agnostic</span>
            </div>
          </div>

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

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

              <h4>Fine-tuning ops</h4>

              <p>
              Continuous learning loop: corrections, preference data, RLHF, distillation, offline eval.
              </p>

              <span>Closed-loop</span>
            </div>
          </div>

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

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

              <h4>In-product UX</h4>

              <p>
              A library of AI-native interaction patterns: streaming, citations, undo, drafts, branches.
              </p>

              <span>Open kit</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"
        >
         AI that earns its place in 
          <br />
          the P&L.
        </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>11×</h2>

          <h4>Faster expert workflows</h4>

          <p>
          Median time-savings across five clinician and engineer co-pilots, measured at 90 days.
          </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>14d</h2>

          <h4>First production loop</h4>

          <p>
          Median time-to-first-user from project kickoff. Real workflow, real eval, real users.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Hallucination rate</h4>

          <p>
          On in-domain queries with retrieval and citations, evaluated against expert-graded golden sets.
          </p>
        </div>
      </SwiperSlide>

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

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

          <p>
          Model-agnostic architecture from day one. Foundation-model swap takes weeks, not quarters.
          </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 />
    </>
  );
}