"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Features from "@/components/Features/features";
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { Marquee } from '@/components/ui/marquee';
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { TextGenerateEffect } from '@/components/ui/text-generate-effect';

const heading = "Tools - Automate Task Sequences for Streamlined Workflows";
const description = "A programmed tool designed to execute a predefined sequence of tasks systematically, automating workflows and minimizing manual intervention.";
const image = "https://res.cloudinary.com/zapier-media/video/upload/q_auto:best/f_auto/v1726860625/Homepage%20%E2%80%94%20Sept%202024/sc03_HP_240917_Power-with-AI_v02_supxar.mp4"

const features = [
  {
    head: "Connect the apps you already love",
    desc: "Everyday supports over 100 apps, so you can tame the chaos and turn your tools into processes all in one place.",
    button: "Explore all apps",
    link: "#"
  },
  {
    head: "Start quickly with these pre-built templates from other Everyday users",
    desc: "Automate your tasks in just a few minutes to reclaim countless hours of your time.",
    button: "Explore more",
    link: "#"
  }
]

const images = [
  "https://www.zarla.com/images/starbucks-logo-2400x2400-20220513.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/apple-logo-2400x2400-20220512-3.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/google-logo-2400x2400-20220519.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/mercedes-benz-logo-2400x2400-20220513-2.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/walmart-logo-2400x2400-20223105.png?crop=1:1,smart&width=150&dpr=2",
  "https://www.zarla.com/images/pepsi-logo-2400x2400-20220513-1.png?crop=1:1,smart&width=150&dpr=2",
];

const contents = [
  {
    title: "List",
    description:
      "Our proven approach enhances operational efficiency, delivers faster results, and keeps your team ahead of the curve.",
    link: "https://stripe.com",
    icon: FaListUl, // Add icon here
  },
  {
    title: "Assign/Complete",
    description:
      "Assign a task to a team member, or do it on your own. Complete flow of tasks now at your fingertips without the hassle of assigning and reassigning and increasing due dates.",
    link: "https://cal.com",
    icon: FaSearch, // Add icon here
  },
  {
    title: "History",
    description:
      "History captures tasks submitted by users, recording all associated data for reference. This way, you can go back and look at the progress so far.",
    link: "https://enterprise.everydayseries.com/",
    icon: FaSearch, // Add icon here
  },
];

const featuresData = [
  {
    title: "Create Series using Drag and Drop",
    description: "Organize, connect, and track your goals using the GoalGrid. Stay aligned and in sync with your strategic objectives.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065418_xo3ezn.png",
  },
  {
    title: "Built for Enterprises",
    description: "Everyday platform ensures enterprise-grade deployment, security, and data governance, all with the simplicity of one centrally managed platform.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065356_gbkov8.png",
  },
  {
    title: "Integrate your Workflows",
    description: "Connect Everyday to your existing tools, integrate important business processes, and build more powerful applications.",
    imgSrc: "https://res.cloudinary.com/dezd109fz/image/upload/v1737595526/Screenshot_2025-01-23_065455_whfipm.png",
  },
];

const words = `Require a little more? We offer optional add-on services for developing even more solutions.`

export default function Series() {
  return (
    <div className="p-6 bg-[#080E12] dark text-white">
      <Navbar />
      <div className='h-screen py-10 px-24 flex flex-col items-start justify-end'>
        <h1 className="text-8xl mb-10">{heading}</h1>
        <h2 className='text-4xl'>{description}</h2>
      </div>
      <div className='p-40'><video src={image} autoPlay className="w-ful border rounded-2xl object" /></div>

      <div className="max-w-7xl mx-auto px-8">
        <HoverEffect items={contents} />
      </div>

      <Features featuresData={featuresData} />

      {/* FEATURES */}
      <div className="flex flex-col text-white h-fit py-20 space-y-20">
        {features.map((item, index) => (
          <div key={index} className="p-6 text-center space-y-10 h-fit">
            {/* Feature Heading and Description */}
            <h2 className="text-5xl mb-2 w-2/3 mx-auto">{item.head}</h2>
            <p className="w-2/3 mx-auto -mt-3">{item.desc}</p>
            <a
              href={item.link}
              className="bg-violet-500 hover:bg-violet-300 font-medium px-4 py-2 rounded-lg mt-4 inline-block"
            >
              {item.button}
            </a>

            {/* Conditional Rendering for Marquee After First Feature */}
            {index === 0 && (
              <>
                <Marquee className="[--duration:60s] w-[90%] mx-auto mt-20">
                  <div className="flex space-x-10">
                    {images.map((img, index) => (
                      <img
                        key={index}
                        src={img}
                        alt={`Avatar ${index + 1}`}
                        className="h-24 w-24 border rounded-lg object-cover"
                      />
                    ))}
                  </div>
                </Marquee>
                <Marquee reverse className="[--duration:60s] w-[90%] mx-auto">
                  <div className="flex space-x-10">
                    {images.map((img, index) => (
                      <img
                        key={index}
                        src={img}
                        alt={`Avatar ${index + 1}`}
                        className="h-24 w-24 border rounded-lg object-cover"
                      />
                    ))}
                  </div>
                </Marquee>
                {/* Add gradient effects for marquee */}
                <div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-l from-transparent to-[#080E12]"></div>
                <div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-r from-transparent to-[#080E12]"></div>
              </>
            )}

            {/* Conditional Rendering for GIF After Second Feature */}
            {index === 1 && (
              <div className="mt-20 flex justify-center">
                <img
                  src="https://cdn.dribbble.com/users/695342/screenshots/3782293/dashboard-gif-ok.gif"
                  alt="Workflow GIF"
                  className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
                />
              </div>
            )}
          </div>
        ))}
      </div>

      <div className="bg-white rounded-lg shadow-md px-10 py-20 mx-10 my-20">
        <div className="text-yellow-500 text-center text-2xl mb-10">
          ★★★★★
        </div>

        <p className="text-gray-700 leading-relaxed text-4xl">
          <strong className="font-semibold">Add-On</strong> Professional Services
        </p>
        <TextGenerateEffect words={words} />
      </div>


      <Footer />

    </div>
  );
}