"use client";

import React from 'react';
import Navbar from '@/components/Navbar/navbar';
import Footer from "@/components/footer";
import { FaHandshake, FaLightbulb, FaChartLine, FaCogs, FaRocket } from 'react-icons/fa';

const heading = "Our Team is Your Team";
const description = "Achieve results quicker with support and collaboration from the Everyday Enterprise Services team.";

const servicesOverview = [
  {
    title: "Our Established Approach for Transformation at Scale",
    description: "Our Enterprise plan gives you exclusive access to services led by our experienced team. Our proven approach enhances operational efficiency, delivers faster results, and keeps your team ahead of the curve.",
    icon: <FaRocket className="text-4xl text-indigo-400" />
  },
  {
    title: "Transactions",
    description: "Use and re-use responsive sections to create the perfect layout.",
    icon: <FaChartLine className="text-4xl text-blue-400" />
  },
  {
    title: "Summaries",
    description: "Use and re-use responsive sections to create the perfect layout.",
    icon: <FaCogs className="text-4xl text-green-400" />
  }
];

const howItWorks = [
  {
    title: "Realize Your Vision",
    description: "Design new solutions, or optimize existing ones, with our expertise. To help you deploy faster, our Enterprise plan gives you access to professional services like consultations and builds.",
    button: "Explore Snippets",
    link: "#",
    icon: <FaLightbulb className="text-4xl text-amber-400" />
  }
];

const addOnServices = [
  {
    title: "Implementation Specialist",
    description: "Customer base trainings and base build services only available to qualified customers as set forth on an applicable order form",
    button: "Explore Free Trial",
    link: "#",
    image: "https://via.placeholder.com/400x300"
  },
  {
    title: "Foundation",
    description: "A quick start for teams who have an established workflow. We'll work with you to create a prototype within 2 to 3 weeks.",
    subFeatures: [
      "Discovery",
      "Handoff training"
    ]
  },
  {
    title: "Standard Build",
    description: "For teams who have an established workflow, and want to invest 3+ weeks to design an Everyday solution.",
    subFeatures: [
      "Everything in Foundation",
      "Solution design",
      "Feedback sessions"
    ]
  },
  {
    title: "Advanced Build",
    description: "Perfect for teams who want assistance defining their existing workflow and translating it into an Everyday solution.",
    subFeatures: [
      "Everything in Standard",
      "Workflow mapping"
    ]
  },
  {
    title: "Custom Build",
    description: "Offered to teams who want to collaborate on defining a more complex workflow and developing an integrated Everyday solution.",
    subFeatures: [
      "Everything in Advanced",
      "Tailored sessions"
    ]
  }
];

export default function ServicesPage() {
  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">
              Contact Sales
            </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>

      {/* Services Overview 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">
          <h2 className="text-4xl md:text-5xl mb-16 text-center">
            Our <span className="text-indigo-400">Enterprise Services</span> at a Glance
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
            {servicesOverview.map((item, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm p-8 rounded-xl border border-gray-800 hover:border-gray-700 transition-all">
                <div className="mb-6">{item.icon}</div>
                <h3 className="text-2xl mb-4">{item.title}</h3>
                <p className="text-gray-300">{item.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* How Everyday Enterprise Services Works 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">How Everyday Enterprise Services Works</h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Some of our services are included with your Enterprise plan. You may also purchase add-on Professional Services as needed.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-1 gap-8">
            {howItWorks.map((feature, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
                <div className="mb-6">{feature.icon}</div>
                <h3 className="text-2xl mb-4">{feature.title}</h3>
                <p className="text-gray-300 mb-6">{feature.description}</p>
                <a href={feature.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
                  {feature.button}
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Add-On Professional Services 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">
          <h2 className="text-4xl md:text-5xl mb-16 text-center">
            Add-On Professional Services
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Require a little more? We offer optional add-on services for developing even more solutions. Providing the best solution.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {addOnServices.map((service, index) => (
              <div key={index} className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-800 hover:border-gray-700">
                {service.image && <img src={service.image} alt={service.title} className="mb-4 rounded-md" />}
                <h3 className="text-2xl mb-4">{service.title}</h3>
                <p className="text-gray-300 mb-6">{service.description}</p>
                {service.subFeatures && (
                  <ul className="list-disc text-gray-300 pl-6 mb-6">
                    {service.subFeatures.map((feature, idx) => (
                      <li key={idx}>{feature}</li>
                    ))}
                  </ul>
                )}
                {service.button && (
                  <a href={service.link} className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-900 font-medium hover:opacity-90 transition-opacity">
                    {service.button}
                  </a>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}