"use client";

import { useState } from "react";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, FreeMode } from "swiper/modules";
import Link from "next/link";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import "swiper/css";
import "swiper/css/free-mode";

export default function Home() {
  const services = [
    {
      icon: "/assets/icons/icon1.svg",
      title: "Websites & Digital Platforms",
      desc: "High-performance marketing sites, SaaS platforms, landing ecosystems.",
    },
    {
      icon: "/assets/icons/icon2.svg",
      title: "Brand Systems",
      desc: "Identity, structure, messaging architecture, scalable visual language.",
    },
    {
      icon: "/assets/icons/icon3.svg",
      title: "Campaign & Performance Creative",
      desc: "Conversion-led campaigns across web and social.",
      active: true,
    },
    {
      icon: "/assets/icons/icon4.svg",
      title: "Motion & Content Systems",
      desc: "Video, reels, explainers, multi-format content packaging.",
    },
    {
      icon: "/assets/icons/icon4.svg",
      title: "AI-Accelerated Production",
      desc: "Structured workflows that amplify execution speed.",
    },
  ];

  const projects = [
    {
      logo: "/assets/lynkeduppro.png",
      image: "/assets/case1.png",
      desc: "Designing a SaaS platform that bridges vetted talent and real-world execution.",
      location: "4617 South Buckner, Dallas, Texas 75227",
      url: "http://lynkeduppro.com/",      
    },
    {
      logo: "/assets/housecoin.png",
      image: "/assets/case2.png",
      desc: "Modern infrastructure platform for smart city architecture.",
      location: "Dallas, Texas",
      url: "#",   
    },
    {
      logo: "/assets/hvac.png",
      image: "/assets/case3.png",
      desc: "High-performance HVAC systems with scalable operations.",
      location: "United States",
      url: "acmhvacpro.com",      
    },
  ];

  const steps = [
    {
      number: "01",
      title: "Systems over chaos.",
      desc: "Structured digital systems that scale cleanly.",
      image: "/assets/why1.png",
      imageTitle: "Systems over chaos."
    },
    {
      number: "02",
      title: "Taste without ego.",
      desc: "Elegant design focused on usability and clarity.",
      image: "/assets/why1.png",
      imageTitle: "Taste without ego."
    },
    {
      number: "03",
      title: "AI as amplifier.",
      desc: "Technology enhances thinking — it doesn't replace it.",
      image: "/assets/why1.png",
      imageTitle: "AI as amplifier."
    },
    {
      number: "04",
      title: "Built for operators.",
      desc: "Practical systems for ambitious businesses.",
      image: "/assets/why1.png",
      imageTitle: "Built for operators."
    },
    {
      number: "05",
      title: "Scalable by design.",
      desc: "Flexible infrastructure designed for growth.",
      image: "/assets/why1.png",
      imageTitle: "Scalable by design."
    }
  ];

  const [activeStep, setActiveStep] = useState(0);

  return (
    <>
      <Header />

      {/* HERO SECTION */}
      <section className="lk-hero-main lk-hero-mainborder position-relative overflow-hidden">
        <div className="lk-hero-mainoverlay"></div>
        <div className="lk-hero-bg">
          <video autoPlay muted loop playsInline className="w-100 h-100 object-fit-cover">
            <source src="/assets/herovideo.mp4" type="video/mp4" />
          </video>
        </div>
        <div className="container-fluid position-relative z-2 h-100 wrapheader">
          <div className="row h-100 align-items-center">
            <div className="col-lg-7">
              <div className="lk-users-wrapper d-flex align-items-center mb-4" data-aos="fade-right" data-aos-delay="100">
                <div className="d-flex">
                  <img src="/assets/100people.png" className="lk-user-img" alt="" />
                </div>
                <div className="ms-3">
                  <p className="text-white mb-0">
                    100+ people already joined the
                    <br />
                    Lynkedup Technologies
                  </p>
                </div>
              </div>
              <h1 className="lk-hero-title" data-aos="fade-right" data-aos-delay="200">
                AI-Driven
                <br />
                Intelligence Across
                <br />
                Every
                <span className="lk-highlight-text ms-3">Digital Surface</span>
              </h1>
              <p className="lk-hero-desc" data-aos="fade-right" data-aos-delay="400">
                We build AI-native digital ecosystems,
                cinematic brand systems, and scalable
                growth engines for ambitious operators.
              </p>
              <a href="/contact" className="lk-contact-btn" data-aos="zoom-in" data-aos-delay="600">
                Contact Sales
                <span className="lk-btn-icon">
                  <img src="/assets/buttonarrow.svg" className="lk-user-img" alt="" />
                </span>
              </a>
            </div>
          </div>
        </div>
        <div className="lk-social-fixed">
          <a href="#"><img src="/assets/icons/faceboook.svg" alt="" /></a>
          <a href="#"><img src="/assets/icons/instgram.svg" alt="" /></a>
          <a href="#"><img src="/assets/icons/linkedin.svg" alt="" /></a>
          <a href="#"><img src="/assets/icons/twiiter.svg" alt="" /></a>
          <a href="#"><img src="/assets/icons/youtube.svg" alt="" /></a>
        </div>
      </section>

      <section className="ux-digital-section">
        <div className="container">
          <div className="case-top">
            <p className="case-label" data-aos="fade-down" data-aos-duration="700">Digital</p>
            <h2 className="case-heading" data-aos="fade-up" data-aos-delay="100">
              We design digital experiences, brand <br /> systems, and scalable solutions
            </h2>
          </div>
          <div className="row g-4">
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
              <Link href="/custom-solutions" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service1.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>Custom Solutions</h3>
                      <p>Smart data systems, dashboards, and scalable infrastructure.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
              <Link href="/ai-native-products" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service2.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>AI Native Products</h3>
                      <p>AI-first platforms, tools, and digital experiences for modern growth.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
              <Link href="/3d-visualization" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service3.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>3D Visualization</h3>
                      <p>Immersive visuals, motion assets, and futuristic storytelling.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
              <Link href="/cinema-film-production" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service4.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>Cinema Film Production</h3>
                      <p>Premium films, launch campaigns, and visual storytelling.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
              <Link href="/automation-workflow-systems" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service5.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>Automation & Workflow Systems</h3>
                      <p>Streamline operations with smart workflows and reduced manual effort.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
              <Link href="/branding-promotion" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service6.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>Branding & Promotion</h3>
                      <p>Custom platforms with real-time data and seamless user experience.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
              <Link href="/crm-lead-generation" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service7.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>CRM & Lead Generation</h3>
                      <p>Conversion-focused stores built for growth and retention.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
            <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
              <Link href="/cloud-infrastructure-setup" className="text-decoration-none text-reset d-block">
                <div className="ux-digital-card">
                  <img src="/assets/service8.png" alt="" className="img-fluid" />
                  <div className="ux-digital-overlay">
                    <div className="ux-digital-content">
                      <h3>Cloud & Infrastructure Setup</h3>
                      <p>Secure, scalable cloud systems built for speed and reliability.</p>
                    </div>
                  </div>
                </div>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="case-stack-section">
        <div className="container">
          <div className="case-top">
            <p className="case-label" data-aos="fade-down" data-aos-duration="700">Case Study</p>
            <h2 className="case-heading" data-aos="fade-up" data-aos-delay="100">
              We build digital homes, brand <br />
              systems, and scalable
            </h2>
          </div>

          <div className="case-stack-wrapper">
            {projects.map((item, index) => (
              <div
                className="case-card"
                key={index}
                style={{ top: `${80 + index * 30}px` }}
              >
                {/* LEFT */}
                <div className="case-left">
                  <img src={item.logo} alt="" className="case-logo" data-aos="fade-right" />
                  <p className="case-desc" data-aos="fade-up" data-aos-delay="100">{item.desc}</p>
                  <div className="case-location" data-aos="fade-up" data-aos-delay="200">
                    <img src="/assets/icons/location.svg" alt="" />
                    {item.location}
                  </div>
                  <div className="case-bottom-info" data-aos="fade-up" data-aos-delay="300">
                    <div>
                      <h4>What we did</h4>
                      <ul>
                        <li>Strategy</li>
                        <li>Branding</li>
                        <li>UI/UX</li>
                        <li>Development</li>
                      </ul>
                    </div>
                    <div>
                      <h4>Outcome</h4>
                      <ul>
                        <li>+42% Engagement</li>
                        <li>Faster Onboarding</li>
                        <li>Scalable Platform</li>
                      </ul>
                    </div>
                  </div>
                </div>

                {/* RIGHT */}
                <div className="case-right">
                  <img
                    src={item.image}
                    alt=""
                    className="case-main-image"
                    data-aos="fade-left"
                    data-aos-delay="100"
                  />
                  {/* ✅ EXTERNAL URL PAR REDIRECT */}
                  <a
                    href={item.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="lk-contact-btn case-btn"
                    data-aos="zoom-in"
                    data-aos-delay="300"
                  >
                    Learn Case
                    <span className="lk-btn-icon">
                      <img src="/assets/buttonarrow.svg" className="lk-user-img" alt="" />
                    </span>
                  </a>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="wb-section">
        <div className="container">
          <div className="row">
            <div className="case-top">
              <p className="case-label" data-aos="fade-down" data-aos-duration="700">What we build.</p>
              <h2 className="case-heading" data-aos="fade-up" data-aos-delay="100">
                We don't sell services.<br />
                We build systems that scale.
              </h2>
            </div>
          </div>
          <Swiper
            modules={[Autoplay, FreeMode]}
            spaceBetween={24}
            slidesPerView={4}
            loop={true}
            freeMode={true}
            speed={8000}
            allowTouchMove={false}
            autoplay={{ delay: 0, disableOnInteraction: false, pauseOnMouseEnter: false }}
            breakpoints={{
              320: { slidesPerView: 1.2 },
              576: { slidesPerView: 1.8 },
              768: { slidesPerView: 2.5 },
              992: { slidesPerView: 3 },
              1200: { slidesPerView: 4 },
            }}
            className="wb-slider"
          >
            {services.map((item, index) => (
              <SwiperSlide key={index}>
                <div className={`wb-card ${item.active ? "active" : ""}`}>
                  <div className="wb-icon">
                    <img src={item.icon} alt="" className="img-fluid" />
                  </div>
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>
        </div>
      </section>

      {/* ABOUT SECTION */}
      <section className="ux-about-section">
        <div className="container">
          <div className="partners-wrapper">
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="0">
              <img src="/assets/lutron.png" alt="Lutron" className="img-fluid" />
            </div>
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="100">
              <img src="/assets/kohler.png" alt="Kohler" className="img-fluid" />
            </div>
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="200">
              <img src="/assets/samsung.png" alt="Samsung" className="img-fluid" />
            </div>
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="300">
              <img src="/assets/ring.png" alt="Ring" className="img-fluid" />
            </div>
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="400">
              <img src="/assets/nest.svg" alt="Nest" className="img-fluid" />
            </div>
            <div className="partner-item" data-aos="zoom-in" data-aos-delay="500">
              <img src="/assets/sherwin.png" alt="Sherwin" className="img-fluid" />
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT EXPERIENCE SECTION */}
      <section className="ux-exp-section">
        <div className="container">
          <div className="row mb-5">
            <div className="col-lg-3">
              <p className="ux-exp-label" data-aos="fade-right">About Lynkedup Technologies</p>
            </div>
            <div className="col-lg-9">
              <h2 className="ux-exp-heading" data-aos="fade-left" data-aos-delay="100">
                We build digital homes, brand systems,
                and scalable content engines designed
                for clarity and growth.
                <span>
                  Everything is structured to help
                  fast-moving operators stay consistent,
                  move with precision, and turn attention
                  into lasting momentum.
                </span>
              </h2>
            </div>
          </div>
          <div className="row align-items-center g-4 mb-4">
            <div className="col-lg-4" data-aos="fade-up" data-aos-delay="0">
              <div className="ux-exp-image-card">
                <img src="/assets/about1.png" alt="" className="img-fluid" />
              </div>
            </div>
            <div className="col-lg-4" data-aos="fade-up" data-aos-delay="150">
              <div className="ux-exp-image-card">
                <img src="/assets/about2.png" alt="" className="img-fluid" />
              </div>
            </div>
            <div className="col-lg-4" data-aos="fade-up" data-aos-delay="300">
              <div className="ux-exp-content-box">
                <div className="ux-exp-icon">
                  <img src="/assets/icons/star.svg" alt="" />
                </div>
                <p className="ux-exp-text">
                  We build digital homes, brand systems,
                  and scalable content engines designed
                  for clarity and growth. Everything is
                  structured to help fast growth.
                </p>
                <a className="lk-contact-btn">
                  Learn More
                  <span className="lk-btn-icon">
                    <img src="/assets/buttonarrow.svg" className="lk-user-img" alt="" />
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div className="ux-info-bar">
            <div className="row g-0">
              <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="0">
                <div className="ux-info-item">
                  <img src="/assets/icons/Licensed.svg" alt="" />
                  <h4>Licensed & Insured</h4>
                </div>
              </div>
              <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="100">
                <div className="ux-info-item">
                  <img src="/assets/icons/Licensed.svg" alt="" />
                  <h4>Same-Day Service</h4>
                </div>
              </div>
              <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="200">
                <div className="ux-info-item">
                  <img src="/assets/icons/years.svg" alt="" />
                  <h4>20+ Years in DFW</h4>
                </div>
              </div>
              <div className="col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="300">
                <div className="ux-info-item border-0">
                  <img src="/assets/icons/Family.svg" alt="" />
                  <h4>Family Owned</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="lk-why-main">
        <div className="container">
          <div className="row">
            <div className="col-lg-7">
              <p className="lk-why-subtitle" data-aos="fade-right">Why LynkedUp</p>
              <h2 className="lk-why-title" data-aos="fade-right" data-aos-delay="100">
                A disciplined approach to
                building brand systems that
                scale with clarity and precision.
              </h2>
              <div className="lk-why-image-card position-relative overflow-hidden" data-aos="zoom-in" data-aos-delay="200">
                <img
                  src={steps[activeStep].image}
                  alt=""
                  className="img-fluid w-100 h-100 object-fit-cover"
                />
                <div className="lk-image-overlay">
                  <h3>{steps[activeStep].imageTitle}</h3>
                </div>
              </div>
            </div>
            <div className="col-lg-5">
              <div className="lk-step-wrapper">
                {steps.map((item, index) => (
                  <div
                    key={index}
                    className={`lk-step-item ${activeStep === index ? "active" : ""}`}
                    onClick={() => setActiveStep(index)}
                  >
                    <div className="lk-step-number">{item.number}</div>
                    <div className="lk-step-line"><span></span></div>
                    <div className="lk-step-content">
                      <h4>{item.title}</h4>
                      {activeStep === index && <p>{item.desc}</p>}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="idea-section">
        <div className="container">
          <div className="idea-content">
            <p className="idea-subtitle" data-aos="fade-down" data-aos-duration="700">
              If the idea is strong, we'll scale it.
            </p>
            <h2 className="idea-title" data-aos="fade-up" data-aos-delay="100">
              If the idea is strong, we'll scale it.
              We validate it with data, refine it
              with strategy, and shape it for
              real-world impact.
              <span>
                From concept to execution,
                we focus on sustainable growth
                and measurable results.
              </span>
            </h2>
          </div>
          <div className="idea-gallery" data-aos="fade-up" data-aos-delay="200">
            <div className="fade-left"></div>
            <div className="fade-right"></div>
            <div className="idea-track">
              <div className="idea-card"><img src="/assets/idea1.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea2.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea7.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea4.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea5.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea6.png" alt="" /></div>
              <div className="idea-card"><img src="/assets/idea7.png" alt="" /></div>
            </div>
          </div>
          <div className="idea-btn-wrap" data-aos="zoom-in" data-aos-delay="300">
            <a href="/start-project" className="lk-contact-btn">
              Start a Project
              <span className="lk-btn-icon">
                <img src="/assets/buttonarrow.svg" className="lk-user-img" alt="" />
              </span>
            </a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}