"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: "Brief, story, mood",
      desc: "CD reads the brief, writes the story, builds a mood film, locks the visual direction with one client meeting.",
      tags: ["Mood film", "Treatment", "Visual reference"],
      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/Visualization1.png",
    },
    {
      week: "Week 7 — 14",
      title: "Asset, look, light",
      desc: "Modeling, materials, lighting setups. Three rounds of look-dev on a designated hero shot.",
      tags: ["Live workflow", "Telemetry", "Feedback UX"],
      image:
        "/assets/Visualization2.png",
    },
    {
      week: "Week 15 — 22",
      title: "Render & FX",
      desc: "Final passes rendered on a 240-node farm. Multi-pass for max flexibility downstream.",
      tags: ["Multi-workflow", "Cost governance", "Red-team report"],
      image:
        "/assets/Visualization3.png",
    },
    {
      week: "Week 23 —",
      title: "Comp, grade, deliver",
      desc: "Multi-pass compositing in Nuke, DaVinci grade, audio mix where applicable, full deliverable pack.",
      tags: ["Managed evals", "Quarterly model review", "Distilled models"],
      image:
        "/assets/Visualization4.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/3dvisualization.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>
                      Worlds, rendered with <br/>
the discipline of a film studio.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      Architectural CGI, AR/VR walkthroughs, and cinematic motion — crafted with cinematic lighting, composition, and detail beyond the render.  </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/brand3d.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"
          >
       The cheapest CGI is easy to recognize — not because of render quality, but because of weak composition and lifeless lighting. <strong>Great visualization shapes emotion and tells a story through every frame.</strong> The render is only the result of those creative decisions.
          
          </h2>

          <p className="thesis-para">
          Our 3D practice is run by a creative director with twenty years in cinema, not a render farm with an Instagram. Every shot is storyboarded, every lens is justified, every light has a job. The pixels follow.
  </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 film-grade pipeline. End-to-
                  <br />
                  end, in-house, frame-locked.
      </h2>
      <p className="main-para" data-aos="fade-up" data-aos-delay="100">
      Every project, regardless of scope, ships through the same nine-stage pipeline. No outsourced links, no surprises in the final cut.

                </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>Creative direction</h4>

              <p>
              A senior CD reads the brief, writes the story, owns the rooms.
              </p>

              <span>On every project</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>Storyboard & previz</h4>

              <p>
              Hand-drawn boards plus low-res previz for camera and timing decisions.

              </p>

              <span>Approve before render</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>Asset & modeling</h4>

              <p>
              Bespoke modeling, photogrammetry, on-site scanning, scan-to-CAD pipelines.
              </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>Look development</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>Lighting & rendering</h4>

              <p>
              Path-traced, multi-pass, fully physically based. No engine shortcuts.
              </p>

              <span>Cycles · Octane · Arnold</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>Animation & FX</h4>

              <p>
              Cinematic camera moves, crowd sims, motion design, particle FX, atmospheric work.

              </p>

              <span>24/30/60 fps</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>Comp & grade</h4>

              <p>
              Multi-pass compositing in Nuke, DaVinci grade, 10-bit DCI-P3 delivery.

              </p>

              <span>Theater-ready</span>
            </div>
          </div>
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

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

              <h4>Immersive output</h4>

              <p>
              Realtime export for Unreal, Unity and WebGL. Same assets, multiple destinations.  </p>

              <span>USD pipeline</span>
            </div>
          </div>
          <div className="col-lg-6 col-md-6">
            <div className="feature-card">

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

              <h4>Configurator-ready</h4>

              <p>
              Hero CGI flipped into interactive 3D configurators for product sales.


              </p>

              <span>Three.js · Babylon</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>3.1×</h2>

          <h4>Conversion lift on configured products</h4>

          <p>
          Average uplift across nine product launches that adopted our hero CGI in place of photo.
          </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>8K</h2>

          <h4>Native master resolution</h4>

          <p>
          All hero films delivered in 8K and DCI-P3 for theater and OOH placements.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Cost vs. live-action equivalent</h4>

          <p>
          For a hero campaign with vehicles, location, talent and weather risk.
          </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 />
    </>
  );
}