"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { HoverEffect } from '@/components/ui/card-hover-effect';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import {
  FaVideo, FaRocket, FaLightbulb, FaChartLine,
  FaTasks, FaUsers, FaCog, FaCubes, FaNetworkWired
} from 'react-icons/fa';
import { FaListCheck } from 'react-icons/fa6';

const heading = "Discover Everyday";
const description = "Experience the power of effortless AI creation and enterprise workflow optimization with Everyday. Our platform is designed to provide solutions that propel your business towards unprecedented efficiency and growth.";

const demoExpectations = [
  {
    title: "Drag-and-Drop AI Builder",
    description: "Experience the simplicity of our intuitive drag-and-drop AI builder that lets you create powerful workflows without writing a single line of code.",
    gradient: "from-sky-400 to-blue-600",
    icon: <FaCubes className="text-4xl text-white" />,
  },
  {
    title: "Interactive AI Forms",
    description: "Learn how to convert complex AI workflows into simple, interactive forms that anyone in your organization can use.",
    gradient: "from-purple-400 to-pink-500",
    icon: <FaListCheck className="text-4xl text-white" />,
  },
  {
    title: "Marketplace Solutions",
    description: "Discover ready-to-use workflows and tools for various business units in our comprehensive marketplace, saving you valuable time and resources.",
    gradient: "from-indigo-400 to-violet-600",
    icon: <FaRocket className="text-4xl text-white" />,
  },
  {
    title: "GoalGrid Integration",
    description: "Understand how to align your workflows with your organizational OKRs and KPIs using our powerful GoalGrid feature for measurable results.",
    gradient: "from-emerald-400 to-green-600",
    icon: <FaChartLine className="text-4xl text-white" />,
  },
  {
    title: "Seamless Connectivity",
    description: "Explore the potential of connecting Everyday with thousands of applications for effortless work processes across your entire tech stack.",
    gradient: "from-amber-400 to-orange-500",
    icon: <FaNetworkWired className="text-4xl text-white" />,
  },
];

const testimonialWords = `"Everyday is here to redefine how your business works. Request a personalized demo today and begin your journey towards a smarter, more efficient enterprise."`;

export default function DemoPage() {
  return (
    <div className="bg-[#080E12] dark text-white">
      <Navbar />

      {/* Hero Section */}
      <div className="min-h-screen flex flex-col justify-center p-6 md:p-12 lg:p-24 relative overflow-hidden">
        <div className="max-w-7xl mx-auto w-full z-10">
          <h1 className="text-5xl md:text-7xl lg:text-8xl mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-400">
            {heading}
          </h1>
          <h2 className="text-2xl md:text-3xl lg:text-4xl max-w-4xl mb-12">
            {description}
          </h2>
          <div className="flex flex-wrap gap-4">
            <button className="px-8 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
              Request a Demo
            </button>
            <button className="px-8 py-3 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500">
              Learn More
            </button>
          </div>
        </div>
        <div className="absolute right-0 bottom-0 w-full md:w-1/2 h-1/2 opacity-20 md:opacity-30">
          <div className="w-full h-full bg-gradient-to-tr from-indigo-500 via-purple-500 to-pink-500 rounded-full blur-3xl"></div>
        </div>
      </div>

      {/* Personalized Demo Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12]">
        <div className="max-w-7xl mx-auto flex flex-col-reverse md:flex-row gap-12 items-center">
          <div className="flex flex-col w-full md:w-1/2 gap-6">
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-medium tracking-wide">
              Personalized <span className="text-indigo-400">Demo</span>
            </h2>
            <p className="text-lg md:text-xl text-gray-300">
              Every organization is unique, and we appreciate that. Our experts are ready to provide a personalized demo that aligns with your business needs. Learn how you can implement and benefit from our range of features, including the drag-and-drop AI builder, input/output forms, GoalGrid, Marketplace, and expansive integrations.
            </p>
            <button className="px-6 py-3 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg w-fit hover:from-sky-600 hover:to-indigo-700 transition-all mt-4 shadow-lg hover:shadow-indigo-500/30">
              Request a Demo
            </button>
          </div>
          <div className="relative flex h-[400px] w-full md:w-1/2 flex-col items-center justify-center overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 to-purple-500/10 rounded-2xl"></div>
            <div className="relative z-10 p-8 bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-700 shadow-xl hover:shadow-indigo-500/20 hover:border-indigo-400/50 transition-all duration-500 w-4/5 h-4/5 flex items-center justify-center">
              <FaVideo className="text-8xl text-indigo-400 animate-pulse" />
            </div>
            <div className="absolute -bottom-16 -right-16 w-64 h-64 bg-purple-500/20 rounded-full blur-3xl"></div>
            <div className="absolute -top-16 -left-16 w-64 h-64 bg-indigo-500/20 rounded-full blur-3xl"></div>
          </div>
        </div>
      </div>

      {/* What to Expect Section */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl mb-4 text-center">
            What <span className="text-sky-400">To Expect</span>
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            In our demo, you will experience the full power of Everyday's platform with features designed to transform your enterprise workflows.
          </p>
          <div className="flex flex-col gap-8">
            {demoExpectations.map((item, index) => (
              <div
                key={index}
                className="relative w-full bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 border border-gray-800 transition-all flex flex-col md:flex-row gap-6 group hover:border-transparent overflow-hidden"
              >
                {/* Icon with Gradient */}
                <div
                  className={`flex-shrink-0 flex items-center justify-center w-16 h-16 rounded-lg transition-all bg-gray-800 group-hover:bg-opacity-80 bg-gradient-to-br ${item.gradient} text-transparent border bg-clip-text`}
                >
                  {item.icon}
                </div>

                {/* Content */}
                <div>
                  <h3
                    className={`text-2xl mb-2 transition-colors bg-clip-text text-transparent bg-gradient-to-r 
                ${item.gradient} `}
                  >
                    {item.title}
                  </h3>
                  <p className="text-gray-300">{item.description}</p>
                </div>

                {/* Soft Glow Effect */}
                <div
                  className={`absolute inset-0 rounded-xl opacity-0 blur-3xl transition-opacity duration-500 group-hover:opacity-10 bg-gradient-to-br ${item.gradient}`}
                />
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* CTA Middle Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-r from-indigo-900/20 to-purple-900/20">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-4xl md:text-5xl mb-6">
            Request <span className="text-sky-400">A Demo</span>
          </h2>
          <p className="text-xl text-gray-300 mb-10">
            Let Everyday revolutionize your business operations. Experience a demo tailored to your enterprise needs. Make AI an everyday part of your business.
          </p>
          <button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
            Schedule Your Demo Now
          </button>
        </div>
      </div>

      {/* Testimonial */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-4xl mx-auto bg-gradient-to-r from-gray-900 to-gray-800 rounded-2xl shadow-xl p-10 md:p-16 border border-gray-700 hover:border-gray-600 transition-all hover:shadow-indigo-900/20">
          <div className="text-indigo-400 text-center text-2xl mb-10">
            ★★★★★
          </div>
          <TextGenerateEffect words={testimonialWords} className="text-xl md:text-2xl font-medium italic text-center" />
          <p className="text-center mt-10 text-gray-400">— Enterprise Client</p>
        </div>
      </div>

      {/* Final CTA Section */}
      <div className="py-24 px-6 md:px-12 bg-gradient-to-b from-[#0A1218] to-[#080E12] relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-indigo-900/10 to-purple-900/10"></div>
        <div className="absolute -bottom-32 -right-32 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
        <div className="absolute -top-32 -left-32 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>

        <div className="max-w-4xl mx-auto text-center relative z-10">
          <h2 className="text-4xl md:text-5xl mb-6">
            Transform Your Enterprise Today
          </h2>
          <p className="text-xl text-gray-300 mb-10">
            Join forward-thinking organizations that have revolutionized their workflows with Everyday's AI-powered platform.
          </p>
          <div className="flex flex-wrap gap-6 justify-center">
            <button className="px-8 py-4 bg-gradient-to-r from-sky-500 to-indigo-600 rounded-lg text-lg font-medium hover:from-sky-600 hover:to-indigo-700 transition-all shadow-lg hover:shadow-indigo-500/30">
              Request Your Demo
            </button>
            <button className="px-8 py-4 bg-gray-800 rounded-lg text-lg font-medium hover:bg-gray-700 transition-all border border-gray-700 hover:border-gray-500">
              Explore Features
            </button>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}