"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: "Story & treatment",
      desc: "Writer and director develop story, write treatment, board key scenes. Approval gate before pre-production.",
      tags: ["Treatment", "Boards"],
      image:
        "/assets/production1.png",
    },
    {
      week: "Week 3 — 6",
      title: "Pre-production",
      desc: "Casting, location, kit, crew, schedule, permits, art, wardrobe. Daily PPM meetings.",
      tags: ["Shooting script", "Call sheets"],
      image:
        "/assets/production2.png",
    },
    {
      week: "Week 7 — 14",
      title: "Production",
      desc: "Principal photography. Director, DP, AD, sound, art, wardrobe, talent on set. Brand on monitor.",
      tags: ["Dailies", "Rough assembly"],
      image:
        "/assets/production3.png",
    },
    {
      week: "Week 15 — 22",
      title: "Post & finish",
      desc: "Edit, picture lock, VFX, color, sound design, score, mix. Brand reviews at four gates.",
      tags: ["Picture lock", "Color master",],
      image:
        "/assets/production4.png",
    },
    {
      week: "Week 15 — 22",
      title: "Deliverables & toolkit",
      desc: "Hero cut, supporting cuts, OOH stills, social ladder, behind-the-scenes, archive package.",
      tags: ["Master pack", "Social ladder",],
      image:
        "/assets/production4.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/cinema.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>
                      Cinema for brands that need a<br/>
                      film, not a content piece.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      Architectural visualization, CGI, AR/VR, and cinematic motion crafted with a cinematographer’s eye for lighting, composition, and storytelling. </p>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </section>
      <section className="linkedup-thesis-section">
  <div className="container">
    <div className="row align-items-center">
      {/* Left Side */}
      <div className="col-lg-3">
        <div className="linkedup-thesis-left">
          <div className="linkedup-thesis-tag">
            <span></span>
            THE THESIS
          </div>

          <div className="linkedup-thesis-logo">
            <img
              src="/assets/thesis-logo.png"
              alt="Thesis Logo"
              className="img-fluid"
            />
          </div>

          <div className="linkedup-thesis-count">
            <h2>10+</h2>

            <p>
              Years Of Creative
              <br />
              Excellence
            </p>
          </div>
        </div>
      </div>

      {/* Right Side */}
      <div className="col-lg-9">
        <div className="linkedup-thesis-content">
          <h2>
            The cheapest CGI in history is also the easiest to identify. The
            reason isn't render time, it's composition.
            <span>
              {" "}
              What you choose to show, and how you choose to light it.
            </span>
          </h2>

          <div className="linkedup-thesis-media">
            {/* Image */}
            <div className="linkedup-thesis-image">
              <img
                src="/assets/cinemathist.png"
                alt="CGI Work"
                className="img-fluid"
              />
            </div>

            {/* Content */}
            <div className="linkedup-thesis-text">
              <span>12 shots · 4K · 60fps</span>

              <h3>Cinema-Level 3D Craftsmanship</h3>

              <p>
                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>
    </div>
  </div>

</section>
<section className="lk-core-capabilities">
  <div className="container">
    {/* TOP */}
    <div className="row  mb-5">
      <div className="col-lg-2">
        <span className="lk-core-mini-title">CORE CAPABILITIES</span>
      </div>
      <div className="col-lg-7">
        <h2 className="lk-core-main-title">
          A film-grade pipeline. End-to-end, in-house, frame-locked.
        </h2>
        <p className="lk-core-top-text">
          Six disciplines under one roof — no "we’ll bring in a vendor for
          that." Every decision protected by the same studio.
        </p>
      </div>
    </div>
    {/* GRID */}
    <div className="row g-4 align-items-stretch">
  {/* LEFT COLUMN */}
  <div className="col-lg-4 d-flex flex-column gap-4">
    
    {/* CARD 1 */}
    <div className="lk-core-card lk-core-big-card h-100">
      <h4>Director Bench</h4>
      <p>
        Twelve signed directors across documentary, narrative, fashion.
      </p>

      <img
        src="/assets/Director.png"
        alt=""
        className="img-fluid lk-core-card-img"
      />
    </div>

    {/* CARD 2 */}
    <div className="lk-core-card lk-core-small-card">
      <div className="lk-core-icon">
        <img src="/assets/layer.svg" alt="" />
      </div>

      <h4>Editorial</h4>

      <p>
        Three senior editors on retainer. Avid and Premiere bays, EDLs.
      </p>
    </div>
  </div>

  {/* CENTER COLUMN */}
  <div className="col-lg-4 d-flex flex-column gap-4">

    {/* CARD 3 */}
    <div className="lk-core-card lk-core-small-card">
      <div className="lk-core-icon">
        <img src="/assets/layer.svg" alt="" />
      </div>

      <h4>In-House Writing</h4>

      <p>
        A senior script doctor and brand-fluent writers on every project.
      </p>
    </div>

    {/* CARD 4 */}
    <div className="lk-core-card lk-core-big-card h-100">
      <h4>Color &amp; Finish</h4>

      <p>
        DaVinci suite, calibrated DCI-P3 reference, 10-bit masters for
        theatrical.
      </p>

      <img
        src="/assets/Camera.png"
        alt=""
        className="img-fluid lk-core-card-img"
      />
    </div>
  </div>

  {/* RIGHT COLUMN */}
  <div className="col-lg-4 d-flex flex-column gap-4">

    {/* CARD 5 */}
    <div className="lk-core-card lk-core-big-card h-100">
      <h4>Camera &amp; Lighting</h4>

      <p>
        Tier-1 packages: ALEXA, VENICE, REDs. Cooke, Zeiss and anamorphic
        libraries on call.
      </p>

      <img
        src="/assets/Color.png"
        alt=""
        className="img-fluid lk-core-card-img"
      />
    </div>

    {/* CARD 6 */}
    <div className="lk-core-card lk-core-small-card">
      <div className="lk-core-icon">
        <img src="/assets/layer.svg" alt="" />
      </div>

      <h4>Sound Design &amp; Mix</h4>

      <p>
        Foley, score commissioning, 5.1 and Atmos mix in a theatrical-spec
        dubbing stage.
      </p>
    </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"
        >
    Films that move people, <br/>
    numbers and brands.
        </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.4×</h2>

          <h4>Aided recall vs. category baseline</h4>

          <p>
          Average lift from films delivered in the last 12 months, measured by third-party brand-tracking partners.
          </p>
        </div>
      </SwiperSlide>


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

          <h4>Award nominations in 2025</h4>

          <p>
          Cannes Lions, AICP, D&AD, Clio, Webby — for work shipped in the last calendar year.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>In-house specialists per project</h4>

          <p>
          Average crew on a hero shoot — director, producer, AD, DP, gaffer, key grip, sound, art, wardrobe, casting, brand producer.

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

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

          <h4>Reduction in cost per qualified lead</h4>

          <p>
          Across nine launch campaigns that anchored on a hero film vs. previous static-led campaigns.
          </p>
        </div>
      </SwiperSlide>

      <SwiperSlide>
        <div className="wb-card">
          <h2>99.99%</h2>

          <h4>From picture lock to deliverable pack</h4>

          <p>
          Median time once the director and brand sign off on a cut.
          </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 />
    </>
  );
}