"use client";

import React, { useEffect, useRef, useMemo } from "react";
import Image from "next/image";
import Link from "next/link";

const AiToolsSection: React.FC = () => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]);
  const ctaRef   = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    // Cards — scroll-triggered fade-up with staggered delay
    const cardObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const el    = entry.target as HTMLElement;
            const delay = parseInt(el.dataset.delay || "0", 10);
            setTimeout(() => el.classList.add("ai-card--visible"), delay);
            cardObserver.unobserve(el);
          }
        });
      },
      { threshold: 0.12 }
    );

    cardRefs.current.forEach((el: any) => {
      if (el) cardObserver.observe(el);
    });

    // CTA banner
    const ctaObserver = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("ai-cta--visible");
            ctaObserver.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.15 }
    );

    if (ctaRef.current) ctaObserver.observe(ctaRef.current);

    return () => {
      cardObserver.disconnect();
      ctaObserver.disconnect();
    };
  }, []);

  const cards = useMemo(
  () => [
    {
      icon: "🤖",
      iconBg: "#e8f8f0",
      badge: "Most Popular",
      badgeClass: "badge-popular",
      title: "AI Chatbot",
      desc: "Intelligent conversational bots trained on your data for 24/7 customer support, lead qualification, and instant query resolution.",
      features: [
        "Trained on your website & FAQs",
        "WhatsApp, web & mobile support",
        "Live handoff to human agents",
      ],
      href: "/service/ai-solutions-service/ai-chatbots/",
      linkText: "Read More",
      delay: 0,
    },
    {
      icon: "🧠",
      iconBg: "#ede9fe",
      badge: "New",
      badgeClass: "badge-new",
      title: "AI Agents",
      desc: "Autonomous agents that reason, plan, and execute complex multi-step tasks independently — from research to decision-making workflows.",
      features: [
        "Multi-step task automation",
        "Tool & API integration",
        "Self-improving reasoning loops",
      ],
      href: "/service/ai-solutions-service/ai-agents/",
      linkText: "Read More",
      delay: 100,
    },
    {
      icon: "⚙️",
      iconBg: "#fff3e0",
      badge: "New",
      badgeClass: "badge-new",
      title: "Business Process Automation",
      desc: "Eliminate manual tasks by automating end-to-end workflows using intelligent RPA and AI-driven process orchestration.",
      features: [
        "Workflow design & automation",
        "ERP & CRM integration",
        "Real-time monitoring dashboard",
      ],
      href: "/service/ai-solutions-service/business-process-automation/",
      linkText: "Read More",
      delay: 200,
    },
    {
      icon: "🎧",
      iconBg: "#cffafe",
      badge: "Popular",
      badgeClass: "badge-popular",
      title: "AI-Powered Customer Support",
      desc: "Transform your support operations with AI that resolves tickets, suggests solutions, and learns from every customer interaction.",
      features: [
        "Auto ticket classification",
        "Intelligent escalation rules",
        "Sentiment analysis & CSAT boost",
      ],
      href: "/service/ai-solutions-service/ai-powered-customer-support/",
      linkText: "Read More",
      delay: 0,
    },
    {
      icon: "✍️",
      iconBg: "#fce7f3",
      badge: "New",
      badgeClass: "badge-new",
      title: "AI Content Generation",
      desc: "Generate high-quality, on-brand content at scale — product descriptions, blogs, social posts, and emails powered by LLMs.",
      features: [
        "SEO-optimised blog articles",
        "E-commerce product copy",
        "Social media & ad creatives",
      ],
      href: "/service/ai-solutions-service/ai-content-generation/",
      linkText: "Read More",
      delay: 100,
    },
    {
      icon: "📊",
      iconBg: "#fef3c7",
      badge: "Beta",
      badgeClass: "badge-beta",
      title: "AI Analytics & Insights",
      desc: "Turn raw data into actionable intelligence. Predict trends, detect anomalies, and make smarter decisions automatically.",
      features: [
        "Predictive sales forecasting",
        "Anomaly & churn detection",
        "Custom BI dashboard",
      ],
      href: "/contact/",
      linkText: "Get Started",
      delay: 200,
    },
    ],
    []
  );

  return (
    <>
      {/* ── SECTION ── */}
      <section className="ai-tools-section">

        {/* Decorative bg blobs */}
        <div className="ai-bg-shape ai-bg-shape-1" />
        <div className="ai-bg-shape ai-bg-shape-2" />

        <div className="container">

          {/* Header */}
          <div className="section-title aos-init aos-animate">
            <span className="sub-title" >
              <Image src="/img/star-icon.png" alt="star" width={32} height={34} />
              Future Growth
            </span>
            <h2>
              AI Solutions Built for <span>Your Business</span>
            </h2>
            <p>
              We help businesses adopt and scale artificial intelligence across every
              function — from customer experience to internal operations.
            </p>
          </div>

          {/* Cards */}
          <div className="ai-grid">
            {cards.map((card, i) => (
              <div
                key={card.href}
                className="ai-card"
                data-delay={card.delay}
                ref={(el) => {
                  cardRefs.current[i] = el;
                }}
              >
                <div className="ai-card-icon" style={{ background: card.iconBg }}>
                  {card.icon}
                </div>

                <span className={`ai-badge ${card.badgeClass}`}>
                  {card.badge}
                </span>

                <h3>{card.title}</h3>

                <p>{card.desc}</p>

                <ul className="ai-card-features">
                  {card.features.map((f) => (
                    <li key={f}>{f}</li>
                  ))}
                </ul>

                {/* <Link 
                  href={card.href} 
                  className="ai-card-link" 
                  aria-label={`Read more about ${card.title}`}>
                  {card.linkText}
                  <svg viewBox="0 0 24 24">
                    <path d="M5 12h14M13 6l6 6-6 6" />
                  </svg>
                </Link> */}
                <Link
                  href={card.href}
                  className="ai-card-link"
                >
                  {card.linkText}
                   <span className="sr-only">
                      about {card.title}
                    </span>

                    <svg
                      viewBox="0 0 24 24"
                      aria-hidden="true"
                      focusable="false"
                    >
                      <path d="M5 12h14M13 6l6 6-6 6" />
                    </svg>
                  </Link>
              </div>
            ))}
          </div>

          {/* CTA Banner */}
            <div className="ai-cta" ref={ctaRef}>
            <div className="ai-cta-blob" />

            <div className="ai-cta-text">
                <h3>Do You Want to Add AI to Your Project?</h3>
                <p>
                Get expert AI consultation tailored to your business — no commitment required.
                </p>
            </div>

            <div className="ai-cta-btns">
                <Link href="/request-a-quote/" className="default-btn">
                <i className="flaticon-right"></i>
                Request a Quote
                <span></span>
                </Link>

                <Link href="/contact/" className="btn-ghost">
                Contact Us
                </Link>
            </div>
            </div>

        </div>
      </section>
    </>
  );
};

export default AiToolsSection;