"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, FaMoneyBill } from 'react-icons/fa'; //Added FaMoneyBill
import { OrbitingCircles } from '@/components/magicui/orbiting-circles';

const heading = "Innovative Finance Teams Drive Transformation with Everyday"; // Changed Heading
const description = "Collect the data you need for planning and reporting, manage budgets and expenses, and optimize your workflows."; // Changed Description

const features = [
  {
    head: "Centralize Financial Data for Planning & Reporting", //Changed head
    desc: "Gather all necessary data in one platform to streamline financial planning and generate accurate reports.", //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: <FaDatabase className="text-sky-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Manage Budgets and Expenses Efficiently", // Changed head
    desc: "Monitor expenses and budgets in real-time. Effortlessly create and share reports with your team.", // 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: <FaMoneyBill className="text-purple-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Automate Financial Reporting Processes", // Changed head
    desc: "Speed up repetitive tasks by creating automated workflows for closing books and payment notifications.", // 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: <FaCog className="text-amber-400 text-2xl" /> // Changed Icon
  },
  {
    head: "Gain Real-time Insights with Custom Reports", // Changed head
    desc: "Build custom reports to monitor budget spend, purchase approvals, and other key financial metrics.", // 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: <FaChartLine className="text-emerald-400 text-2xl" />
  },
  {
    head: "Simplify Financial Workflows and Processes", // Changed head
    desc: "Organize cross-functional requests, data, and information in one platform to understand your company’s financial needs and plan for the future.", // 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" /> // Changed Icon
  },
  {
    head: "Ensure Compliance and Accuracy", // Changed head
    desc: "Maintain accurate financial records and streamline compliance processes with a centralized system.", // 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: <FaRegFileAlt className="text-blue-400 text-2xl" />
  }
];

const whyEveryday = [
  {
    title: "Perfect Fit for Finance Teams", // Changed title
    description: "Everyday streamlines financial roadmaps, budget tracking, and expense management, keeping them perfectly aligned. With the right data at their fingertips, teams can concentrate on delivering exceptional financial results, quicker.", // Changed Description
    icon: <FaUsers className="text-4xl text-indigo-400" />
  },
  {
    title: "Monitor Expenses and Budgets in Real-Time", // Changed title
    description: "An executive dashboard allows you to delve into Key Results. Monitor health, status, and related information like objectives or projects.", // Changed Description
    icon: <FaTasks className="text-4xl text-blue-400" />
  },
  {
    title: "Accelerate Financial Reporting", // Changed title
    description: "Create, manage, and deliver a sales roadmap that energizes your entire organization, yet is adaptable enough to adjust to unforeseen circumstances.", // Changed Description
    icon: <FaRocket className="text-4xl text-green-400" />
  },
  {
    title: "Connect Your Work Across Different Sources", // Changed title
    description: "Synchronize around a flexible, organization-wide roadmap. Customizable views allow every department to see their role, and plan accordingly.", // Changed Description
    icon: <FaRegFileAlt className="text-4xl text-amber-400" />
  }
];

const detailedFeatures = [
  {
    title: "Real-Time Financial Reporting", // Changed title
    description: "Built-in reporting swiftly uncovers key insights and best practices, expediting action and elevating your processes.", // Changed Description
    subFeature: "Consolidate All Essential Data in One Place Integrate your crucial tools to bring more context into the sales process.", // Changed subFeature
    icon: <FaChartLine className="text-4xl text-sky-400" />
  },
  {
    title: "Efficient Expense Management", // Changed title
    description: "Draw together product insights by consolidating all feedback—from every tool and source—into a single, accessible location.", // Changed Description
    subFeature: "Ensure launches stay on course with comprehensive tracking and management.", // Changed subFeature
    icon: <FaCalendarAlt className="text-4xl text-purple-400" />
  },
  {
    title: "Centralize Financial Data", // Changed title
    description: "Accumulating your customers' insights in one platform ensures you're steering development in the right direction.", // Changed Description
    subFeature: "Develop a feedback repository from every tool and source into a single, accessible location.", // Changed subFeature
    icon: <FaDatabase className="text-4xl text-rose-400" />
  },
  {
    title: "Automate Financial Workflows", // Changed title
    description: "Plan and Prioritize as a Team. Stay on track with every initiative while maintaining a detailed view into OKRs.", // Changed Description
    subFeature: "Interconnect across all teams with comprehensive data visualization tools.", // Changed subFeature
    icon: <FaLightbulb className="text-4xl text-amber-400" />
  }
];

const words = `"Experience true versatility for finance teams. Everyday seamlessly integrates your financial roadmaps, budget tracking, and target schedules, keeping them perfectly aligned."`; // Changed Testimonial

export default function FinanceHub() { // 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 Finance Tools
            </h2>
            <p className="text-lg md:text-xl text-gray-300">
              With Everyday, you can easily connect and synchronize data from your accounting software, banking platforms, expense management tools, and more, creating a comprehensive and efficient workflow tailored to your finance 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 Finance 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 financial 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 Finance 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 Finance Workflows
          </h2>
          <p className="text-xl text-gray-300 text-center mb-16 max-w-3xl mx-auto">
            Whether you’re managing budgets or invoicing, you can do it in Everyday. Get started with pre-made templates, and customize them to fit your specific 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">
              <FaMoneyBill className="text-2xl text-green-400 mb-4" />
              <h3 className="text-2xl mb-4">Fundraising</h3>
              <p className="text-gray-300 mb-6">Track and manage fundraising efforts, investor relations, and financial projections.</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">
              <FaChartLine className="text-2xl text-blue-400 mb-4" />
              <h3 className="text-2xl mb-4">Budget Tracker</h3>
              <p className="text-gray-300 mb-6">Monitor budget spend, track expenses, and generate reports to stay within financial goals.</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">Invoicing</h3>
              <p className="text-gray-300 mb-6">Automate invoicing processes, track payments, and manage client billing efficiently.</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 Financial Workflow?
          </h2>
          <p className="text-xl text-gray-300 mb-10">
            Join thousands of finance 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>
  ),
};