"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 & positioning",
      desc: "Founder interviews, competitive audit, positioning thesis. Outputs: voice document, positioning brief.",
      tags: ["Process map", "Priority list"],
      image:
        "/assets/promotions1.png",
    },
    {
      week: "Week 3 — 6",
      title: "Identity sprint",
      desc: "Mark, type, color, motion, and a full applications mock — from app icon to OOH.",
      tags: ["Brand v1", "Applications mock"],
      image:
        "/assets/promotions2.png",
    },
    {
      week: "Week 7 — 14",
      title: "Systemize & ship",
      desc: "Brand OS, code tokens, Figma library, writer's handbook. Brand goes live across product + marketing.",
      tags: ["Brand OS", "Live rollout"],
      image:
        "/assets/promotions3.png",
    },
    {
      week: "Week 15 — 22",
      title: "Campaign & operate",
      desc: "Optional managed operations or full handover to your team on a published schedule.",
      tags: ["Retained CD", "Quarterly campaigns"],
      image:
        "/assets/promotions4.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/promotionsback.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>
                      Brands that behave like products.<br/>Campaigns that print.
                      </h2>
                    </div>

                    <div className="col-md-5">
                      <p>
                      Creative branding systems for founders building scalable, unmistakable, tokenized brands with technology-driven precision.</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/brand.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"
          >
    A logo is the smallest part of a brand. The real identity lives in behavior — how products onboard, how support communicates,<strong>how checkout feels, and how every interaction builds trust, consistency, recognition, and emotional connection over time.</strong>
          
          </h2>

          <p className="thesis-para">
          We design identities that survive contact with the product, the campaign, and the customer — token-driven, code-ready, and easy for your team to extend.
  </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>Identity system</h4>

              <p>
              Wordmark, monogram, lockups, motion logo, and sub-brand architecture.
              </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>Type & color</h4>

              <p>
              Custom or licensed type pairings, a tokenized palette, accessibility-graded.
              </p>

              <span>WCAG AAA</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>Editorial voice</h4>

              <p>
              A documented voice — with examples, anti-patterns, and a writer's handbook.
              </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>Campaign & launch</h4>

              <p>
              Launch film, OOH, social system, paid creative, and the editorial calendar.

              </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>Packaging & physical</h4>

              <p>
              Boxes, environments, merch, and the printer relationships.
              </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"
        >
       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>2.4×</h2>

          <h4>Aided brand recall</h4>

          <p>
          Vs. pre-launch baseline, measured against direct competitors.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Time to first campaign</h4>

          <p>
          From brand-live to first launch campaign in market.
          </p>
        </div>
      </SwiperSlide>

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

          <h4>Lift in qualified inbound</h4>

          <p>
          Median uplift in inbound demos / applications after the rebrand ships.
          </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>0</h2>

          <h4>Brand drift incidents</h4>

          <p>
          On platforms running the Brand OS, year-over-year.
          </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 />
    </>
  );
}