"use client";
import "aos/dist/aos.css";
import { useEffect, useRef } from "react";
// import { getDatGUI } from "/lib/datgui";
// import { getDatGUI } from "../../../lib/datgui";
import Image from "next/image";
// import dat from "dat.gui";
// import * as dat from "dat.gui";
// import dat from "@/lib/datgui"; // ✅ no lint error, browser-only
import Link from "next/link";
import { FaArrowRightLong } from "react-icons/fa6";



const Mainbanner = () => {
  const canvasRef = useRef<HTMLCanvasElement | null>(null);

  useEffect(() => {
  const timeout = setTimeout(() => {
    import("aos").then((mod) => {
          mod.default.init({
          disable: window.innerWidth < 768, // mobile: no scroll animations (perf/LCP)
      duration: 800, // Slightly shorter = smoother
      offset: 80,    // Less scroll offset = less work
      easing: "ease-in-out",
      once: true,    // Only animate once = performance win
    });
        });
  }, 0); // Delay to let main thread finish critical work

  return () => clearTimeout(timeout); // Cleanup
}, []);

  // useEffect(() => {

  //   if (typeof window === "undefined") return;
  //   const init = async () => {

  //   const dat = await getDatGUI();

  //   const canvas = canvasRef.current;
  //   if (!canvas) return;
    
  //   const ctx = canvas.getContext("2d");
  //   if (!ctx) return;
  
  //   ctx.scale(2, 2);

  //   class LinkedParticles {
  //     ctx: CanvasRenderingContext2D;
  //     points: {
  //       mass: number;
  //       x: number;
  //       y: number;
  //       vx: number;
  //       vy: number;
  //       ax: number;
  //       ay: number;
  //     }[] = [];
  //     force_point_enabled = false;
  //     currentCursorPosition = { x: 0, y: 0 };
  //     transparent_background = true;
  //     background_color = "#FFF0FC";
  //     points_count = 150;
  //     point_color = "#E77025";
  //     point_size = 1.5;
  //     velocity_ratio = 1;
  //     velocity_decay = 0.8;
  //     gravity = 0;
  //     bounce = 1;
  //     line_width = 0.2;
  //     line_distance = 45;
  //     lines_color = "#595959";
  //     lines_gradient_enabled = false;
  //     lines_gradient_start_color = "#ffa700";
  //     lines_gradient_middle_color = "#f00f0f";
  //     lines_gradient_end_color = "#ff00ff";

  //     constructor(ctx: CanvasRenderingContext2D) {
  //       this.ctx = ctx;
  //       this.ctx.lineCap = "round";
  //       this.onresize();
  //       this.init();
  //       window.addEventListener("resize", this.onresize.bind(this));
  //       this.ctx.canvas.addEventListener("mousemove", (e) => {
  //         this.currentCursorPosition.x = e.offsetX;
  //         this.currentCursorPosition.y = e.offsetY;
  //       });
  //     }

  //     randomInRange(min: number, max: number) {
  //       return min + (max - min) * Math.random();
  //     }

  //     init() {
  //       this.points = [];
  //       for (let i = 0; i < this.points_count; i++) {
  //         this.points.push({
  //           mass: 50,
  //           x: this.randomInRange(5, this.ctx.canvas.width - 5),
  //           y: this.randomInRange(5, this.ctx.canvas.height - 5),
  //           vx: this.randomInRange(-1, 1),
  //           vy: this.randomInRange(-1, 1),
  //           ax: 0,
  //           ay: 0,
  //         });
  //       }
  //     }

  //     update() {
  //       this.forcePoint();
  //       for (const pt of this.points) {
  //         pt.ax *= 0.1;
  //         pt.vx += pt.ax * this.velocity_ratio * this.velocity_decay;
  //         pt.x += pt.vx;

  //         pt.ay *= 0.1;
  //         pt.vy += (pt.ay + this.gravity) * this.velocity_ratio * this.velocity_decay;
  //         pt.y += pt.vy;

  //         if (pt.x > this.ctx.canvas.width - this.point_size) {
  //           pt.x = this.ctx.canvas.width - this.point_size;
  //           pt.vx = -pt.vx * this.bounce;
  //         }
  //         if (pt.x < this.point_size) {
  //           pt.x = this.point_size;
  //           pt.vx = -pt.vx * this.bounce;
  //         }

  //         if (pt.y > this.ctx.canvas.height - this.point_size) {
  //           pt.y = this.ctx.canvas.height - this.point_size;
  //           pt.vy = -pt.vy * this.bounce;
  //         }
  //         if (pt.y < this.point_size) {
  //           pt.y = this.point_size;
  //           pt.vy = -pt.vy * this.bounce;
  //         }
  //       }
  //     }

  //     draw() {
  //       this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
  //       if (!this.transparent_background) {
  //         this.ctx.fillStyle = this.background_color;
  //         this.ctx.fillRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
  //       }

  //       this.ctx.lineWidth = this.line_width;
  //       for (let i = 0; i < this.points.length; i++) {
  //         const pt = this.points[i];
  //         for (let j = this.points.length - 1; j > i; j--) {
  //           const pt2 = this.points[j];
  //           if (
  //             Math.abs(pt2.x - pt.x) <= this.line_distance &&
  //             Math.abs(pt2.y - pt.y) <= this.line_distance
  //           ) {
  //             if (this.lines_gradient_enabled) {
  //               const gradient = this.ctx.createLinearGradient(pt.x, pt.y, pt2.x, pt2.y);
  //               gradient.addColorStop(0, this.lines_gradient_start_color);
  //               gradient.addColorStop(0.5, this.lines_gradient_middle_color);
  //               gradient.addColorStop(1, this.lines_gradient_end_color);
  //               this.ctx.strokeStyle = gradient;
  //             } else {
  //               this.ctx.strokeStyle = this.lines_color;
  //             }
  //             this.ctx.beginPath();
  //             this.ctx.moveTo(pt.x, pt.y);
  //             this.ctx.lineTo(pt2.x, pt2.y);
  //             this.ctx.stroke();
  //             this.ctx.closePath();
  //           }
  //         }
  //       }

  //       for (const pt of this.points) {
  //         this.ctx.fillStyle = this.point_color;
  //         this.ctx.beginPath();
  //         this.ctx.arc(pt.x, pt.y, this.point_size, 0, 2 * Math.PI);
  //         this.ctx.fill();
  //         this.ctx.closePath();
  //       }
  //     }

  //     forcePoint() {
  //       if (!this.force_point_enabled) return;
  //       for (const pt of this.points) {
  //         const dx = this.currentCursorPosition.x - pt.x;
  //         const dy = this.currentCursorPosition.y - pt.y;
  //         const d = Math.hypot(dx, dy);
  //         const ang = Math.atan2(dy, dx);
  //         if (d < 100) {
  //           pt.ax = 0.5 * d * Math.cos(ang);
  //           pt.ay = 0.5 * d * Math.sin(ang);
  //         }
  //       }
  //     }

  //     onresize() {
  //       this.ctx.canvas.width = window.innerWidth * 0.5;
  //       this.ctx.canvas.height = window.innerHeight * 0.5;
  //     }
  //   }

  //   const lp = new LinkedParticles(ctx);
  //   const gui = new dat.GUI();
  //   gui.remember(lp);

  //   const generalFolder = gui.addFolder("General");
  //   const ctrl = generalFolder.add(lp, "points_count", 0, 2000);
  //   ctrl.onFinishChange(() => lp.init());
  //   generalFolder.add(lp, "point_size", 0, 50).step(0.25);
  //   generalFolder.add(lp, "line_distance", 0, 300).step(5);
  //   generalFolder.add(lp, "line_width", 0, 20).step(0.1);
  //   generalFolder.open();

  //   const motionFolder = gui.addFolder("Motion");
  //   motionFolder.add(lp, "force_point_enabled");
  //   motionFolder.add(lp, "velocity_ratio", 1, 10);
  //   motionFolder.add(lp, "velocity_decay", 0, 1).step(0.1);
  //   motionFolder.add(lp, "gravity", 0, 5).step(0.1);
  //   motionFolder.add(lp, "bounce", 0, 1).step(0.1);

  //   const colorsFolder = gui.addFolder("Colors");
  //   colorsFolder.add(lp, "transparent_background");
  //   colorsFolder.addColor(lp, "background_color");
  //   colorsFolder.addColor(lp, "point_color");
  //   colorsFolder.addColor(lp, "lines_color");
  //   colorsFolder.add(lp, "lines_gradient_enabled");
  //   colorsFolder.addColor(lp, "lines_gradient_start_color");
  //   colorsFolder.addColor(lp, "lines_gradient_middle_color");
  //   colorsFolder.addColor(lp, "lines_gradient_end_color");

  //   const loop = () => {
  //     lp.update();
  //     lp.draw();
  //     requestAnimationFrame(loop);
  //   };

  //     requestAnimationFrame(loop);
  //   };
  //    // ✅ Invoke async function correctly
  //    init();
  // }, []);

  return (
  <div className="Mainbanner pt-10 pb-10 lg:pt-16 lg:pb-20 bg-[#FCFCFC] min-h-[400px]">
    <div className="dot_line_Custoem">
      <canvas id="lines-demo" ref={canvasRef} style={{ width: "100%", height: "100%" }} />
    </div>
    <div className="max-w-7xl mx-auto overflow-hidden px-6">
      <div className="grid grid-cols-1 gap-8 md:grid-cols-12 items-center">
        <div className="md:col-span-7 text-center md:text-left">
          <div>
            <h1
              data-aos="fade-right"
              className="relative text-[25px] md:text-[30px] lg:text-[45px] font-bold text-black leading-tight Manrope"
            >
              Best <span className="text-[#E77025]">Web & Mobile App Development</span><br />
              Company in Ahmedabad
            </h1>
          </div>
          <p
            data-aos="fade-right"
            className="relative text-[14px] lg:text-[20px] text-[#141414] mt-6"
          >
            Fruxinfo helps startups and enterprises in <strong>Ahmedabad, Gujarat</strong> and across India build
            high-performance <strong>websites</strong> and <strong>mobile applications</strong> that deliver measurable
            growth. We specialize in <strong>custom web development</strong>, <strong>mobile app design</strong>, and{" "}
            <strong>digital marketing</strong> to elevate your business presence online.
          </p>
          <div className="flex mt-7">
            <Link
              href="/contact"
              className="Custome_Orange_button flex items-center justify-center gap-3"
            >
              Get Quote <FaArrowRightLong className="h-[20px] w-[20px]" />
            </Link>
          </div>

        </div>

        <div
          data-aos="fade-left"
          className="md:col-span-5 flex justify-center md:justify-start"
        >
          <Image
            src="/images/MainBannerVectoreImage.webp"
            alt="Web and Mobile App Development Company in Ahmedabad - Fruxinfo"
            width={1200}
            height={600}
            className="w-[70%] md:w-[100%] max-w-sm md:max-w-md lg:max-w-lg"
            priority
          />
        </div>
      </div>
    </div>
  </div>
);
}

export default Mainbanner;