"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Hero from '@/components/Hero/hero';
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 { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaPlug, FaPaste, FaRegFileAlt } from 'react-icons/fa';
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';

const heading = "Everyday Marketing - Automate and optimize your marketing workflows";
const description = "Everyday helps you streamline marketing automation by seamlessly connecting your tools, minimizing errors, and uncovering valuable insights from your data. Free up your team’s time and focus on creating high-impact campaigns.";
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: "Integrate AI into your marketing",
    desc: "No matter how you use AI, Everyday’s growing app ecosystem makes it easy to incorporate AI into essential workflows like lead generation, marketing automation, and campaign management.",
    button: "Explore tools",
    buttonColor: "sky-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
    link: "#"
  },
  {
    head: "Let AI build your automations",
    desc: "Describe the marketing automation you need—such as lead capture or email nurturing—and Everyday’s AI will generate a workflow tailored to your needs.",
    button: "Get started",
    buttonColor: "purple-300",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
    link: "#"
  },
  {
    head: "Enhance workflows with AI-powered customization",
    desc: "Fine-tune your marketing automation with AI-generated code snippets, giving you more control over customization without complex coding.",
    button: "Unlock now",
    buttonColor: "amber-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
    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: "Unify Your Marketing Data",
    description:
      "Eliminate data silos by centralizing insights from all your marketing tools. Get a complete view of your campaigns, leads, and performance metrics in one place.",
    link: "https://stripe.com",
    icon: FaListUl, // Add icon here
  },
  {
    title: "Automate Marketing Workflows",
    description:
      "Boost efficiency by automating repetitive marketing tasks. Sync data, trigger personalized campaigns, and schedule actions—so you can focus on strategy and creativity.",
    link: "https://netflix.com",
    icon: FaSearch, // Add icon here
  },
  {
    title: "Enhance Team Collaboration",
    description:
      "Keep your marketing team aligned by integrating communication tools. Share updates, assign tasks, and track campaign progress effortlessly in one connected workspace.",
    link: "https://enterprise.everydayseries.com/",
    icon: FaArrowsAlt, // Add icon here
  },
];

const words = `“Stay ahead with evolving marketing automation—new features and integrations are constantly added to enhance your campaigns.”`

export default function Integrations() {
  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>
      
      {/* <Hero /> */}
      <div className='flex w-full my-40'>
        <div className="relative flex h-[550px] w-1/2 flex-col items-center justify-center overflow-hidden">
          <img
            src="https://res.cloudinary.com/zapier-media/image/upload/q_auto,f_auto/v1718390031/Solutions/RevOps/revops-ai_jgccpl.png"
            alt="Workflow GIF"
            className="rounded-lg shadow-lg w-[60%] h-1/2 mx-auto"
          />
        </div>
        <div className='flex flex-col w-1/2 justify-center space-y-10'>
          <h1 className='text-7xl font-medium tracking-wide'>Bring Your Tools Together</h1>
          <p className='text-xl'>With Everyday, you can easily connect and synchronize data from thousands of applications, creating a comprehensive and efficient workflow tailored to your business needs.</p>
        </div>
      </div>

      <div className="flex flex-col text-white h-fit py-20 space-y-40">
        {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>
            <img className="w-[90%] mx-auto" src={item.image} alt=""></img>
            <a
              href={item.link}
              className={`bg-${item.buttonColor} 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>
              </>
            )}
          </div>
        ))}
      </div>
      <div className="max-w-7xl mx-auto px-8 my-20">
        <HoverEffect items={contents} />
      </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">Magic Button:</strong> Simply press the magic button to instantly generate your series automatically.
        </p> */}
        <TextGenerateEffect words={words} />
      </div>

      <Footer />
    </div>
  );
}