"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 { Marquee } from '@/components/ui/marquee';
import { TextGenerateEffect } from "@/components/ui/text-generate-effect";
import { FaListUl, FaSearch, FaArrowsAlt, FaRegFileAlt, FaCalendarAlt, FaChartLine,
         FaTasks, FaUsers, FaCog, FaRocket, FaLightbulb, FaDatabase, FaUserPlus, FaSitemap } from 'react-icons/fa'; //Added FaUserPlus and FaSitemap
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';

const heading = "Strategic HR Teams Employ Everyday to Foster High-Performing Teams"; // Changed Heading
const description = "Oversee recruiting pipeline, streamline your onboarding processes, and maintain team alignment as your company evolves."; // Changed Description

const features = [
  {
    head: "Streamline New Hire Onboarding", // Changed head
    desc: "Establish a single source of truth for your HR policies. Organize and update HR information and resources in one place.", // Changed desc
    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: "#",
    icon: <FaUserPlus className="text-sky-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Maintain Team Alignment Throughout Hiring", // Changed head
    desc: "Collaborate on hiring plans, interview requirements, and more to attract and hire top talent.", // Changed desc
    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: "#",
    icon: <FaUsers className="text-purple-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Establish a Single Source of Truth for HR", // Changed head
    desc: "Organize and update all your HR information and resources in one place, so your team can access what they need.", // Changed desc
    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: "#",
    icon: <FaDatabase className="text-amber-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Visualize Your Organization", // Changed head
    desc: "Visualize your org chart and personnel data to keep your entire company connected and adapt as your team evolves.", // Changed desc
    button: "See demo",
    buttonColor: "emerald-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809091/Solutions/Marketing/marketing-lp_04_liatuw.png",
    link: "#",
    icon: <FaSitemap className="text-emerald-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Consolidate All Data in One Place", // Changed head
    desc: "Integrate with existing tools, add apps to gain valuable insights, and write your own scripts to further customize your workflow.", // Changed desc
    button: "Learn more",
    buttonColor: "rose-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_02_ivu6pd.png",
    link: "#",
    icon: <FaListUl className="text-rose-400 text-2xl" />
  },
  {
    head: "Simplify HR Workflows", // Changed head
    desc: "Manage everything from your candidate pipeline to your new hire onboarding with Everyday.", // Changed desc
    button: "View details",
    buttonColor: "blue-200",
    image: "https://res.cloudinary.com/zapier-media/image/upload/q_auto/f_auto/v1727809087/Solutions/Marketing/marketing-lp_01_slh5ws.png",
    link: "#",
    icon: <FaCog className="text-blue-400 text-2xl" /> // Changed Icon
  }
];

const whyEveryday = [
  {
    title: "Perfect Fit for Strategic HR", // Changed title
    description: "Everyday streamlines recruiting, onboarding, and team alignment, empowering HR to build high-performing teams efficiently.", // Changed Description
    icon: <FaUsers className="text-4xl text-indigo-400" />
  },
  {
    title: "Streamline Onboarding", // Changed title
    description: "Simplify the onboarding process for new hires, ensuring they have all the resources and information they need from day one.", // Changed Description
    icon: <FaTasks className="text-4xl text-blue-400" />
  },
  {
    title: "Visualize Your Organization", // Changed title
    description: "Gain a comprehensive view of your organization with org charts and personnel data to adapt quickly as your team evolves.", // Changed Description
    icon: <FaSitemap className="text-4xl text-green-400" /> // Changed Icon
  },
  {
    title: "Centralize HR Policies", // Changed title
    description: "Establish a single source of truth for HR policies, making it easy for employees to access and stay informed.", // Changed Description
    icon: <FaRegFileAlt className="text-4xl text-amber-400" />
  }
];

const detailedFeatures = [
  {
    title: "Recruiting Pipeline Management", // Changed title
    description: "Oversee the entire recruiting process from application to offer, ensuring a smooth and efficient experience.", // Changed Description
    subFeature: "Track candidates, manage interviews, and streamline communication with potential hires.", // Changed subFeature
    icon: <FaUserPlus className="text-4xl text-sky-400" /> // Changed Icon
  },
  {
    title: "Streamlined Onboarding", // Changed title
    description: "Simplify the onboarding process with automated tasks, document management, and new hire resources.", // Changed Description
    subFeature: "Ensure new hires are fully equipped and integrated into the team from day one.", // Changed subFeature
    icon: <FaCalendarAlt className="text-4xl text-purple-400" />
  },
  {
    title: "HR Knowledge Base", // Changed title
    description: "Create a centralized repository for all HR policies, procedures, and employee resources.", // Changed Description
    subFeature: "Make it easy for employees to find the information they need, when they need it.", // Changed subFeature
    icon: <FaDatabase className="text-4xl text-rose-400" />
  },
  {
    title: "Team Alignment and Collaboration", // Changed title
    description: "Foster collaboration and alignment across teams with tools for communication, goal setting, and performance tracking.", // Changed Description
    subFeature: "Keep everyone on the same page and working towards common objectives.", // Changed subFeature
    icon: <FaLightbulb className="text-4xl text-amber-400" />
  }
];

const words = `"Everyday has revolutionized our HR processes. From streamlining onboarding to ensuring team alignment, it's the perfect solution for building a high-performing organization."`; // Changed Testimonial

export default function HRHub() { // Changed function name
  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">
              Get Started
            </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">
              Book Demo
            </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>
      {/* Integration Hub */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 items-center">
          <div className="relative flex h-[400px] w-full md:w-1/2 flex-col items-center justify-center overflow-hidden">
            <OrbitingCircles iconSize={50} radius={180}>
              <Icons.salesforce />
              <Icons.hubspot />
              <Icons.slack />
              <Icons.zoom />
              <Icons.linkedin />
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={120} reverse speed={2}>
              <Icons.salesforce />
              <Icons.hubspot />
              <Icons.slack />
              <Icons.zoom />
            </OrbitingCircles>
          </div>
          <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">
              Connect Your HR Tools
            </h2>
            <p className="text-lg md:text-xl text-gray-300">
              With Everyday, you can easily connect and synchronize data from your HRIS, applicant tracking systems, performance management platforms, and more, creating a comprehensive and efficient workflow tailored to your HR team's needs.
            </p>
            <button className="px-6 py-3 bg-gray-800 rounded-lg w-fit hover:bg-gray-700 transition-all border border-gray-700 mt-4">
              Discover Integrations
            </button>
          </div>
        </div>
      </div>

      {/* Why Everyday 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">
            Why Everyday is the <span className="text-indigo-400">Perfect Fit</span> for HR Teams
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
            {whyEveryday.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>

      {/* Features Grid */}
      <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">All Features</h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Everything you need to optimize your HR workflows in one powerful platform
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.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.head}</h3>
                <p className="text-gray-300 mb-6">{feature.desc}</p>
                <a href={feature.link} className={`inline-block px-6 py-2 rounded-md bg-${feature.buttonColor} text-gray-900 font-medium hover:opacity-90 transition-opacity`}>
                  {feature.button}
                </a>
              </div>
            ))}
          </div>
        </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">
          <div className="text-amber-400 text-center text-2xl mb-10">
            ★★★★★
          </div>
          <TextGenerateEffect words={words} className="text-xl md:text-2xl font-medium italic text-center" />
          <p className="text-center mt-10 text-gray-400">— Michael Scott, Regional Manager</p>
        </div>
      </div>

      {/* Detailed Features */}
      <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">
            Powerful <span className="text-sky-400">Features</span> for Modern HR Teams
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
            {detailedFeatures.map((feature, index) => (
              <div key={index} className="flex gap-6">
                <div className="flex-shrink-0">{feature.icon}</div>
                <div>
                  <h3 className="text-2xl mb-3">{feature.title}</h3>
                  <p className="text-gray-300 mb-4">{feature.description}</p>
                  <div className="bg-gray-800/50 p-4 rounded-lg border-l-4 border-indigo-500">
                    <p className="text-gray-200">{feature.subFeature}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Use Cases Section - Replacing Marketplace */}
      <div className="py-24 px-6 md:px-12">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-4xl md:text-5xl mb-6 text-center">
            Manage Your Crucial HR Workflows
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Manage everything from your candidate pipeline to your new hire onboarding with Everyday. Kickstart with pre-made templates, and customize them to fit your exact needs.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Example Use Cases - Adapt Icons and Descriptions Accordingly */}
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-700">
              <FaUserPlus className="text-2xl text-green-400 mb-4" />
              <h3 className="text-2xl mb-4">Applicant Tracker</h3>
              <p className="text-gray-300 mb-6">Efficiently track and manage job applicants from initial application to offer.</p>
              <a href="#" className="inline-block px-6 py-2 rounded-md bg-emerald-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
                Explore
              </a>
            </div>
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-700">
              <FaDatabase className="text-2xl text-blue-400 mb-4" />
              <h3 className="text-2xl mb-4">HR Knowledge Base</h3>
              <p className="text-gray-300 mb-6">Create a centralized and easily accessible repository for all HR policies and resources.</p>
              <a href="#" className="inline-block px-6 py-2 rounded-md bg-sky-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
                Explore
              </a>
            </div>
            <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl p-8 hover:shadow-lg hover:shadow-indigo-900/20 transition-all border border-gray-700">
              <FaCalendarAlt className="text-2xl text-amber-400 mb-4" />
              <h3 className="text-2xl mb-4">Employee Onboarding</h3>
              <p className="text-gray-300 mb-6">Streamline the onboarding process for new hires with automated tasks and document management.</p>
              <a href="#" className="inline-block px-6 py-2 rounded-md bg-amber-200 text-gray-100 font-medium hover:opacity-90 transition-opacity">
                Explore
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* CTA 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">
            Ready to Transform Your HR Workflow?
          </h2>
          <p className="text-xl text-gray-300 mb-10">
            Join HR teams who have revolutionized their processes with Everyday.
          </p>
          <div className="flex flex-wrap gap-4 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">
              Explore Free Trial
            </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">
              Schedule a Demo
            </button>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

const Icons = {
    salesforce: () => (
      <svg width="100" height="100" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.4 23C10.4 21.3 10.7 19.8 11.4 18.4C12.1 17 13 15.8 14.2 14.9C15.4 13.9 16.8 13.1 18.3 12.6C19.9 12.1 21.5 11.8 23.2 11.8C25 11.8 26.6 12.1 28.1 12.6C29.6 13.1 31 13.9 32.2 14.9C33.4 15.9 34.3 17.1 35 18.4C35.7 19.8 36 21.3 36 23C36 24.7 35.7 26.2 35 27.6C34.3 29 33.4 30.2 32.2 31.1C31 32.1 29.6 32.9 28.1 33.4C26.6 33.9 25 34.2 23.2 34.2C21.5 34.2 19.9 33.9 18.3 33.4C16.8 32.9 15.4 32.1 14.2 31.1C13 30.1 12.1 28.9 11.4 27.6C10.7 26.2 10.4 24.7 10.4 23Z" fill="#00A1E0"/>
        <path d="M26.5 20C26.5 19.4 26.3 18.9 26 18.5C25.7 18.1 25.2 17.9 24.6 17.9C24 17.9 23.5 18.1 23.2 18.5C22.9 18.9 22.7 19.4 22.7 20C22.7 20.6 22.9 21.1 23.2 21.5C23.5 21.9 24 22.1 24.6 22.1C25.2 22.1 25.7 21.9 26 21.5C26.3 21.1 26.5 20.6 26.5 20Z" fill="white"/>
        <path d="M19.8 24.2C19.8 23.6 19.6 23.1 19.3 22.7C19 22.3 18.5 22.1 17.9 22.1C17.3 22.1 16.8 22.3 16.5 22.7C16.2 23.1 16 23.6 16 24.2C16 24.8 16.2 25.3 16.5 25.7C16.8 26.1 17.3 26.3 17.9 26.3C18.5 26.3 19 26.1 19.3 25.7C19.6 25.3 19.8 24.8 19.8 24.2Z" fill="white"/>
        <path d="M33.3 24.2C33.3 23.6 33.1 23.1 32.8 22.7C32.5 22.3 32 22.1 31.4 22.1C30.8 22.1 30.3 22.3 30 22.7C29.7 23.1 29.5 23.6 29.5 24.2C29.5 24.8 29.7 25.3 30 25.7C30.3 26.1 30.8 26.3 31.4 26.3C32 26.3 32.5 26.1 32.8 25.7C33.1 25.3 33.3 24.8 33.3 24.2Z" fill="white"/>
        <path d="M26.5 28.4C26.5 27.8 26.3 27.3 26 26.9C25.7 26.5 25.2 26.3 24.6 26.3C24 26.3 23.5 26.5 23.2 26.9C22.9 27.3 22.7 27.8 22.7 28.4C22.7 29 22.9 29.5 23.2 29.9C23.5 30.3 24 30.5 24.6 30.5C25.2 30.5 25.7 30.3 26 29.9C26.3 29.5 26.5 29 26.5 28.4Z" fill="white"/>
      </svg>
    ),
    hubspot: () => (
      <svg width="100" height="100" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M245.333 140.667H266.667V226.667H352.667V248H266.667V334H245.333V248H159.333V226.667H245.333V140.667Z" fill="white"/>
        <path d="M394.667 202.667C394.667 190.333 384.667 180.333 372.333 180.333C360 180.333 350 190.333 350 202.667C350 215 360 225 372.333 225C384.667 225 394.667 215 394.667 202.667Z" fill="white"/>
        <path d="M162 202.667C162 190.333 152 180.333 139.667 180.333C127.333 180.333 117.333 190.333 117.333 202.667C117.333 215 127.333 225 139.667 225C152 225 162 215 162 202.667Z" fill="white"/>
        <path d="M394.667 309.333C394.667 297 384.667 287 372.333 287C360 287 350 297 350 309.333C350 321.667 360 331.667 372.333 331.667C384.667 331.667 394.667 321.667 394.667 309.333Z" fill="white"/>
        <path d="M162 309.333C162 297 152 287 139.667 287C127.333 287 117.333 297 117.333 309.333C117.333 321.667 127.333 331.667 139.667 331.667C152 331.667 162 321.667 162 309.333Z" fill="white"/>
        <path d="M256 117.333C176.76 117.333 112.667 181.427 112.667 260.667C112.667 339.907 176.76 404 256 404C335.24 404 399.333 339.907 399.333 260.667C399.333 181.427 335.24 117.333 256 117.333ZM256 382.667C188.52 382.667 134 328.147 134 260.667C134 193.187 188.52 138.667 256 138.667C323.48 138.667 378 193.187 378 260.667C378 328.147 323.48 382.667 256 382.667Z" fill="#FF7A59"/>
      </svg>
    ),
    slack: () => (
      <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.5 10C13.672 10 13 9.328 13 8.5V3.5C13 2.672 13.672 2 14.5 2C15.328 2 16 2.672 16 3.5V8.5C16 9.328 15.328 10 14.5 10Z" fill="#E01E5A"/>
        <path d="M20.5 10H19V8.5C19 7.672 19.672 7 20.5 7C21.328 7 22 7.672 22 8.5C22 9.328 21.328 10 20.5 10Z" fill="#E01E5A"/>
        <path d="M9.5 14C10.328 14 11 14.672 11 15.5V20.5C11 21.328 10.328 22 9.5 22C8.672 22 8 21.328 8 20.5V15.5C8 14.672 8.672 14 9.5 14Z" fill="#2EB67D"/>
        <path d="M3.5 14H5V15.5C5 16.328 4.328 17 3.5 17C2.672 17 2 16.328 2 15.5C2 14.672 2.672 14 3.5 14Z" fill="#2EB67D"/>
        <path d="M14 9.5C14 10.328 13.328 11 12.5 11H7.5C6.672 11 6 10.328 6 9.5C6 8.672 6.672 8 7.5 8H12.5C13.328 8 14 8.672 14 9.5Z" fill="#ECB22E"/>
        <path d="M7.5 5H9V3.5C9 2.672 8.328 2 7.5 2C6.672 2 6 2.672 6 3.5C6 4.328 6.672 5 7.5 5Z" fill="#ECB22E"/>
        <path d="M10 14.5C10 13.672 10.672 13 11.5 13H16.5C17.328 13 18 13.672 18 14.5C18 15.328 17.328 16 16.5 16H11.5C10.672 16 10 15.328 10 14.5Z" fill="#36C5F0"/>
        <path d="M16.5 19H15V20.5C15 21.328 15.672 22 16.5 22C17.328 22 18 21.328 18 20.5C18 19.672 17.328 19 16.5 19Z" fill="#36C5F0"/>
      </svg>
    ),
    zoom: () => (
      <svg width="100" height="100" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M28 46.667C38.2173 46.667 46.6667 38.2177 46.6667 28.0003C46.6667 17.783 38.2173 9.33366 28 9.33366C17.7826 9.33366 9.33331 17.783 9.33331 28.0003C9.33331 38.2177 17.7826 46.667 28 46.667Z" fill="#4A8CFF"/>
        <path d="M22.6667 21V35L35 28L22.6667 21Z" fill="white"/>
      </svg>
    ),
    linkedin: () => (
      <svg width="100" height="100" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M19 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V5C21 3.895 20.105 3 19 3Z" fill="#0077B5"/>
        <path d="M8.5 10.5V16.5H6.5V10.5H8.5Z" fill="white"/>
        <path d="M7.5 7.5C8.32843 7.5 9 8.17157 9 9C9 9.82843 8.32843 10.5 7.5 10.5C6.67157 10.5 6 9.82843 6 9C6 8.17157 6.67157 7.5 7.5 7.5Z" fill="white"/>
        <path d="M13 10.5C13 10.5 13 12.5 13 13.5C13 14.5 13.5 15.5 14.5 15.5C15.5 15.5 16 14.5 16 13.5V10.5H18V16.5H16V15.5C16 15.5 15.5 16.5 14 16.5C12.5 16.5 11 15.5 11 13.5V10.5H13Z" fill="white"/>
      </svg>
    ),
  };