"use client";

import Image from "next/image";
import OurBrands from "../components/OurBrands";
import VideoSlider from "@/components/VideoSlider";
import Preloader from '@/components/Preloder';

import React, { useState, useEffect } from "react";
import { Facebook, Twitter, Instagram, Linkedin, ArrowRight, ArrowLeft, ArrowUpRight, MoveRight, Send, ChevronRight, Calendar, Tag, Star } from 'lucide-react';


{/* Counter Section fact */ }
interface Fact {
  value: number;
  label: string;
}

const factData: Fact[] = [
  { value: 9, label: 'Years' },
  { value: 276, label: 'Clients' },
  { value: 15, label: 'Initiatives' },
  { value: 21, label: 'Recognitions' },
];

const AnimatedCounter: React.FC<{ targetValue: number }> = ({ targetValue }) => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let start = 0;
    const duration = 1500;
    const step = 20;
    const increment = targetValue / (duration / step);

    const timer = setInterval(() => {
      start += increment;
      if (start < targetValue) {
        setCount(Math.ceil(start));
      } else {
        setCount(targetValue);
        clearInterval(timer);
      }
    }, step);

    return () => clearInterval(timer);
  }, [targetValue]);

  return <span>{count.toLocaleString()}</span>;
};

{/* Counter Section fact end */ }
const socialLinks = [
  {
    name: 'FACEBOOK',
    handle: 'KWimraw',
    icon: Facebook,
    url: '#',
    color: 'text-white'
  },
  {
    name: 'X',
    handle: 'KWimraw',
    icon: Twitter,
    url: '#',
    color: 'text-white'
  },
  {
    name: 'INSTAGRAM',
    handle: 'kwimraw',
    icon: Instagram,
    url: '#',
    color: 'text-white'
  },
  {
    name: 'LINKEDIN',
    handle: 'kwimraw',
    icon: Linkedin,
    url: '#',
    color: 'text-white'
  },
];

// --- Service Data Structure ---
const sections = [
  {
    title: "Capabilities",
    links: [
      "Application Development", "Cybersecurity", "Artificial Intelligence",
      "Robotics", "Consulting", "Broadcasting & Publishing",
      "Web Design", "Cloud", "Deep Space Exploration", "IoT and Digital Engineering"
    ],
    image: "/img/partens/capabilities.jpg",
    overlayColor: '#4a00e0', // Red
  },
  {
    title: "Industries",
    links: [
      "Education", "Aerospace & Defence", "Agriculture", "Software",
      "Banking & Finance", "Information Services", "E-Commerce & Logistics",
      "Media and Entertainment", "Healthcare", "Security"
    ],
    image: "/img/partens/industries.jpg",
    overlayColor: '#4a00e0',
  },
  {
    title: "Product & Platforms",
    links: [
      "Wimraw Institute", "Jhumle", "NCSI", "Panther Speaks", "NECI",
      "Sugani Spices", "Oibuild", "Oiearn", "Wimraw Cloud", "Aasiqui"
    ],
    image: "/img/partens/platforms.jpg",
    overlayColor: '#4a00e0',
  },
];

const ServiceBox = ({ section }: { section: (typeof sections)[number] }) => {

  const { title, links, image, overlayColor } = section;

  return (
    <div
      className="group relative h-[550px] w-full overflow-hidden border border-[#414141] bg-black"
    >
      {/* 1. BACKGROUND IMAGE LAYER */}
      <div className="absolute inset-0 h-full w-full">
        <div
          className="h-full w-full bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
          style={{ backgroundImage: `url('${image}')` }}
        />
        <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent"></div>
      </div>

      {/* Disappears when hovered */}
      <div className="absolute inset-0 z-10 p-6 transition-opacity duration-300 group-hover:opacity-0">

        {/* Top Right colored square indicator */}
        <div
          className="absolute top-0 right-0 h-6 w-6"
          style={{ backgroundColor: overlayColor }}
        ></div>

        <div className="flex h-full flex-col justify-end">
          <div className="flex h-full w-full items-center justify-between">

            {/* Vertical Text Title */}
            <h2 className="h-3/4 text-2xl font-bold text-white [writing-mode:vertical-rl] rotate-180 text-left capatilize">
              {title}
            </h2>

            {/* Diagonal Arrow Icon (Idle) */}
            <div className="self-end pb-2">
              <ArrowUpRight className="h-8 w-8 text-white/80" />
            </div>
          </div>
        </div>
      </div>

      <div
        className="absolute inset-0 z-20 transition-all duration-700 ease-in-out 
             p-2
             [clip-path:circle(0%_at_100%_0%)] 
             group-hover:[clip-path:circle(150%_at_100%_0%)]"
      >
        <div
          className="h-full w-full"
          style={{ backgroundColor: overlayColor }}
        >

          {/* Content Container - Fades in after delay */}
          <div className="flex h-full flex-col p-8 text-white opacity-0 transition-opacity duration-500 delay-200 group-hover:opacity-100">

            {/* Hover Title */}
            <h2 className="mb-6 text-3xl font-bold leading-tight border-b border-white/30 pb-4">
              {title}
            </h2>

            {/* Scrollable List */}
           <ul className="grow space-y-3">
              {links.map((link, index) => (
                <li key={index} className="flex items-start text-sm font-medium tracking-wide group/item">
                  <ChevronRight className="mr-2 h-4 w-4 mt-0.5 text-white/70 group-hover/item:text-white" />
                  <span>{link}</span>
                </li>
              ))}
            </ul>

            {/* Bottom Action Arrow */}
            <div className="mt-6 flex justify-end">
              <div className="rounded-full bg-white/20 p-2 hover:bg-white/40 transition-colors cursor-pointer">
                <ArrowRight className="h-6 w-6 text-white" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

{/* feature projects */ }
const ShowcaseSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [isAnimating, setIsAnimating] = useState(false);

  const nextSlide = () => {
    if (isAnimating) return;
    setIsAnimating(true);
    setCurrentIndex((prev) => (prev + 1) % featuredProjects.length);
    setTimeout(() => setIsAnimating(false), 500);
  };

  const prevSlide = () => {
    if (isAnimating) return;
    setIsAnimating(true);
    setCurrentIndex((prev) => (prev - 1 + featuredProjects.length) % featuredProjects.length);
    setTimeout(() => setIsAnimating(false), 500);
  };

  const featuredProjects = [
    {
      id: 1,
      title: "FinTech Dashboard v2",
      category: "Web Application",
      description: "A comprehensive financial analytics platform providing real-time data visualization and predictive modeling.",
      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop",
      year: "2024"
    },
    {
      id: 2,
      title: "EcoSmart Home OS",
      category: "IoT Interface",
      description: "An intuitive control center for smart home devices focusing on energy efficiency and security automation.",
      image: "https://images.unsplash.com/photo-1558002038-1091a1661116?q=80&w=2070&auto=format&fit=crop",
      year: "2023"
    },
    {
      id: 3,
      title: "Neon Architect",
      category: "Design System",
      description: "A customized design system and component library built for a leading architectural firm.",
      image: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2070&auto=format&fit=crop",
      year: "2024"
    }
  ];

  return (
    <div className="w-full max-w-[1600px] mx-auto">
      <div className="flex justify-between items-end mb-8 px-6 lg:px-12">
        <h2 className="text-3xl font-bold text-zinc-900">Featured Works</h2>
        <div className="flex gap-2">
          <button onClick={prevSlide} className="p-3 border rounded-full hover:bg-zinc-900 hover:text-white transition-colors"><ArrowLeft className="w-5 h-5" /></button>
          <button onClick={nextSlide} className="p-3 border rounded-full hover:bg-zinc-900 hover:text-white transition-colors"><ArrowRight className="w-5 h-5" /></button>
        </div>
      </div>

      <div className="relative w-full h-[600px] overflow-hidden bg-zinc-50">
        {featuredProjects.map((project, index) => (
          <div
            key={project.id}
            className={`absolute inset-0 w-full h-full flex flex-col md:flex-row transition-opacity duration-700 ease-in-out ${index === currentIndex ? 'opacity-100 z-10' : 'opacity-0 z-0'
              }`}
          >
            <div className="w-full md:w-3/5 h-1/2 md:h-full relative">
              <img src={project.image} alt={project.title} className="w-full h-full object-cover" />
              <div className="absolute inset-0 bg-black/10"></div>
            </div>
            <div className="w-full md:w-2/5 h-1/2 md:h-full bg-white p-8 md:p-12 flex flex-col justify-center border-l border-zinc-100">
              <span className="text-blue-600 font-medium mb-2">{project.category}</span>
              <h3 className="text-4xl font-bold text-zinc-900 mb-4">{project.title}</h3>
              <p className="text-zinc-500 mb-8">{project.description}</p>
              <button className="self-start px-6 py-3 bg-zinc-900 text-white font-bold hover:bg-blue-600 transition-colors flex items-center gap-2">
                View Project <MoveRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

{/* Press Release Section  */ }
const pressReleases = [
  {
    id: 1,
    type: "CORPORATE",
    date: "Dec 12, 2024",
    title: "Global Tech Solutions Announces Strategic Acquisition of AI-First Data Startup",
    summary: "This acquisition reinforces our commitment to integrating generative AI across our entire service portfolio.",
    image: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop",
    size: "tall" // Left large column
  },
  {
    id: 2,
    type: "FINANCE",
    date: "Nov 28, 2024",
    title: "Q4 Financial Results: Record Revenue Growth Driven by Cloud Services",
    image: "https://images.unsplash.com/photo-1554224155-984063581102?q=80&w=2072&auto=format&fit=crop",
    size: "wide" // Middle top
  },
  {
    id: 3,
    type: "PARTNERSHIP",
    date: "Nov 15, 2024",
    title: "Partnering with EcoGrid to Revolutionize Sustainable Energy Management",
    image: "https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop",
    size: "wide" // Right top
  },
  {
    id: 4,
    type: "INNOVATION",
    date: "Oct 30, 2024",
    title: "Launching 'Nexus': The Next Generation Enterprise Security Platform",
    image: "https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop",
    size: "wide" // Middle bottom
  },
  {
    id: 5,
    type: "AWARDS",
    date: "Oct 12, 2024",
    title: "Recognized as 'Employer of Choice' for the 5th Consecutive Year",
    image: "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2084&auto=format&fit=crop",
    size: "tall-right" // Right bottom (or tall depending on layout)
  }
];

// --- Hexagon Background Pattern ---
const HexagonBackground = () => (
  <div className="absolute inset-0" style={{
    background: '#0a0a0f',
    backgroundImage: `
                radial-gradient(circle at center, #1b1b24 1px, transparent 1px),
                linear-gradient(90deg, transparent 50%, #1b1b24 50%),
                linear-gradient(#1b1b24, #1b1b24)`,
    backgroundSize: '20px 34.64px',
    opacity: 0.8,
    zIndex: 0,
  }}></div>
);

export default function Home() {
  return (
    <>
      
      {/* preloder */}
      <Preloader />

      {/* videoslider */}
      <VideoSlider />

      {/* About Section */}
      <section className="relative py-24 sm:py-32 overflow-hidden">

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24">

            {/* Left Text*/}
            <div className="flex flex-col justify-center">

              <p className="text-xl font-medium text-[#4a00e0] mb-2">
                An Introduction Wimraw
              </p>

              <h2 className="text-3xl sm:text-4xl font-extrabold mb-4">Advancing humanity through research & innovation.</h2>

              <p className="text-base text-gray-900 leading-relaxed max-w-lg">
                <span className="font-semibold text-gray-900">
                  “World IT and Media Research Analysis Wing” / “Wimraw”
                </span>{" "}
                is a global organization dedicated to innovation in IT, AI, Robotics,
                Space, and Media. We also provide online education, cybersecurity,
                and legal consultancy.
              </p>
            </div>

            {/* Right Image */}
            <div className="relative flex justify-center lg:justify-end items-center min-h-[400px]">
              <div className="w-full max-w-md h-96 rounded-xl shadow-2xl overflow-hidden border border-gray-700 group relative">
                <img
                  src="/img/home/intriduction.png"
                  alt="Corporate Team Working Together"
                  className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                />

                <div className="absolute inset-0 flex items-center justify-center text-white text-xl font-semibold opacity-0 group-hover:opacity-100 transition-opacity duration-700 bg-black/40">
                </div>
              </div>


              <div className="absolute right-0 top-1/4 hidden md:block">
                <div className="w-16 h-16 rounded-full bg-amber-400"
                  style={{ backgroundColor: "#7c3aed" }}
                ></div>
              </div>

              <div className="absolute right-10 bottom-0 hidden md:block">
                <div
                  className="w-20 h-20 rounded-full"
                  style={{ backgroundColor: "#7c3aed" }}
                ></div>
              </div>
            </div>
          </div>
        </div>
      </section >

      {/* what we do */}
      <section className="min-h-screen relative bg-[#0a0a0f] text-white overflow-hidden font-sans">

        {/* Background Layer */}
        <HexagonBackground />

        <div className="relative z-10 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-20">

          {/* Header Block */}
          <div className="mb-16">
            <h4 className="text-sm font-semibold uppercase tracking-widest text-indigo-400 mb-2">
              Innovating at the Speed of Change
            </h4>
            <h2 className="text-6xl font-extrabold tracking-tight uppercase text-white">
              WHAT WE DO
            </h2>
          </div>

          {/* Grid Layout */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {sections.map((section, index) => (
              <ServiceBox key={index} section={section} />
            ))}
          </div>

        </div>
      </section>

      {/* feature projects */}
      <div className="py-20 bg-white min-h-screen flex items-center justify-center">
        <ShowcaseSlider />
      </div>

      {/* news Section */}
      <section className="py-24 bg-white font-sans text-zinc-900">
        <div className="max-w-[1400px] mx-auto px-6 lg:px-12">

          {/* Section Header */}
          <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-8">
            <div className="max-w-3xl">
              <h2 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">THE LATEST INSIGHTS</h2>
              <p className="text-xl text-zinc-700 leading-relaxed max-w-2xl">
                Stay updated with the latest news, breaking stories, key developments, and timely reports that keep you informed about important events happening around you.
              </p>
            </div>

            <button
              className="flex items-center gap-2 px-6 py-3 border border-gray-400 rounded-full font-semibold text-gray-800  hover:bg-purple-600 hover:text-white transition-all duration-300 group">
              View Archive
              <ChevronRight
                className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </button>
          </div>

          {/* Bento Grid Layout */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-[300px]">

            {/* Card 1: Large Tall (Left) */}
            <div className="group relative lg:row-span-2 overflow-hidden rounded-sm cursor-pointer">
              <img
                src={pressReleases[0].image}
                alt={pressReleases[0].title}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/40 to-transparent"></div>
              <div className="absolute top-6 left-6 flex gap-3">
                <span className="bg-blue-600/90 text-white text-xs font-bold px-3 py-1 tracking-wider uppercase backdrop-blur-sm">
                  {pressReleases[0].type}
                </span>
              </div>
              <div className="absolute bottom-0 left-0 p-8 w-full">
                <div className="flex items-center gap-2 text-zinc-400 text-sm mb-3">
                  <Calendar className="w-4 h-4" /> {pressReleases[0].date}
                </div>
                <h3 className="text-2xl md:text-3xl font-bold text-white mb-4 leading-tight group-hover:underline decoration-2 underline-offset-4">
                  {pressReleases[0].title}
                </h3>
                <p className="text-zinc-300 line-clamp-3 mb-4">
                  {pressReleases[0].summary}
                </p>
                <span className="inline-flex items-center gap-2 text-white font-semibold text-sm uppercase tracking-wide">
                  Read Release <ArrowUpRight className="w-4 h-4" />
                </span>
              </div>
            </div>

            {/* Card 2: Standard (Middle Top) */}
            <div className="group relative overflow-hidden rounded-sm cursor-pointer">
              <img
                src={pressReleases[1].image}
                alt={pressReleases[1].title}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent"></div>
              <div className="absolute top-6 left-6">
                <span className="bg-white/10 border border-white/20 text-white text-xs font-bold px-3 py-1 tracking-wider uppercase backdrop-blur-sm">
                  {pressReleases[1].type}
                </span>
              </div>
              <div className="absolute bottom-0 left-0 p-6">
                <div className="flex items-center gap-2 text-zinc-400 text-xs mb-2">
                  <Calendar className="w-3 h-3" /> {pressReleases[1].date}
                </div>
                <h3 className="text-xl font-bold text-white leading-snug group-hover:text-white transition-colors group-hover:underline decoration-2 underline-offset-4">
                  {pressReleases[1].title}
                </h3>
              </div>
            </div>

            {/* Card 3: Standard (Right Top) */}
            <div className="group relative overflow-hidden rounded-sm cursor-pointer">
              <img
                src={pressReleases[2].image}
                alt={pressReleases[2].title}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/20 to-transparent"></div>
              <div className="absolute top-6 left-6">
                <span className="bg-white/10 border border-white/20 text-white text-xs font-bold px-3 py-1 tracking-wider uppercase backdrop-blur-sm">
                  {pressReleases[2].type}
                </span>
              </div>
              <div className="absolute bottom-0 left-0 p-6">
                <div className="flex items-center gap-2 text-zinc-400 text-xs mb-2">
                  <Calendar className="w-3 h-3" /> {pressReleases[2].date}
                </div>
                <h3 className="text-xl font-bold text-white leading-snug group-hover:text-[#4a00e0]transition-colors group-hover:underline decoration-2 underline-offset-4">
                  {pressReleases[2].title}
                </h3>
              </div>
            </div>

            {/* Card 4: Standard (Middle Bottom) */}
            <div className="group relative overflow-hidden rounded-sm cursor-pointer">
              <img
                src={pressReleases[3].image}
                alt={pressReleases[3].title}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-linear-to-t  from-black/90 via-black/20 to-transparent"></div>
              <div className="absolute top-6 left-6">
                <span className="bg-white/10 border border-white/20 text-white text-xs font-bold px-3 py-1 tracking-wider uppercase backdrop-blur-sm">
                  {pressReleases[3].type}
                </span>
              </div>
              <div className="absolute bottom-0 left-0 p-6">
                <div className="flex items-center gap-2 text-zinc-400 text-xs mb-2">
                  <Calendar className="w-3 h-3" /> {pressReleases[3].date}
                </div>
                <h3 className="text-xl font-bold text-white leading-snug group-hover:text-white transition-colors group-hover:underline decoration-2 underline-offset-4">
                  {pressReleases[3].title}
                </h3>
              </div>
            </div>

            {/* Card 5: Standard (Right Bottom) */}
            <div className="group relative overflow-hidden rounded-sm cursor-pointer bg-zinc-900">
              {/* Text Only Card Alternative for variety, or Image */}
              <img
                src={pressReleases[4].image}
                alt={pressReleases[4].title}
                className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105 opacity-60"
              />
              <div className="absolute inset-0 bg-linear-to-t from-black/90 via-black/50 to-transparent"></div>
              <div className="absolute top-6 left-6">
                <span className="bg-white/10 border border-white/20 text-white text-xs font-bold px-3 py-1 tracking-wider uppercase backdrop-blur-sm">
                  {pressReleases[4].type}
                </span>
              </div>
              <div className="absolute bottom-0 left-0 p-6">
                <div className="flex items-center gap-2 text-zinc-400 text-xs mb-2">
                  <Calendar className="w-3 h-3" /> {pressReleases[4].date}
                </div>
                <h3 className="text-xl font-bold text-white leading-snug group-hover:text[#4a00e0] transition-colors group-hover:underline decoration-2 underline-offset-4">
                  {pressReleases[4].title}
                </h3>
              </div>
            </div>

          </div>

          {/* Mobile View Archive Button */}
          <div className="mt-8 md:hidden">
            <button className="w-full flex justify-center items-center gap-2 px-6 py-4 border border-zinc-200 rounded-full font-semibold hover:bg-zinc-900 hover:text-white transition-colors">
              View Archive <ChevronRight className="w-4 h-4" />
            </button>
          </div>

        </div>
      </section>

      {/* Counter Section */}
      <section className="py-16 lg:py-24 bg-white" >
        <div className="w-full">
          <div className="bg-gray-900 shadow-2xl p-8 sm:p-12 -mt-20">
            <div className="grid grid-cols-2 md:grid-cols-4 divide-x divide-gray-700">
              {factData.map((fact, index) => (
                <div key={index} className="text-center py-6">
                  <h4 className="text-5xl font-extrabold text-indigo-800 mb-2">
                    <AnimatedCounter targetValue={fact.value} />
                    +
                  </h4>
                  <p className="text-sm uppercase tracking-widest text-gray-300">
                    {fact.label}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section >

      {/* Link area start Section */}
      <section className="relative py-16 text-white [background:var(--primary-gradient-background)] shadow-2xl shadow-purple-900/50" >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-10">
            <div className="social__heading max-w-lg">
             <span className="text-sm uppercase font-semibold text-purple-300 mb-2 block opacity-90 font-heading">
                <Send className="w-4 h-4 mr-2" />
                SOCIAL CONNECT
              </span>

              <h4 className="text-4xl sm:text-5xl font-extrabold leading-tight">
                Follow us for the latest updates
              </h4>
            </div>

            <div className="grid grid-cols-2 gap-x-6 gap-y-6 w-full lg:w-[60%]">
              {socialLinks.map((link) => (
                <a
                  key={link.name}
                  href={link.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-start p-4 rounded-xl transition duration-300 bg-white/5 hover:bg-white/10 hover:shadow-lg hover:shadow-purple-400/20 group cursor-pointer transform hover:-translate-y-0.5"
                >

                  <div className="mr-4 p-1">
                    <link.icon className={`w-8 h-8 ${link.color}`} />
                  </div>

                  <div className="flex flex-col text-left">
                    <h6 className="text-lg font-bold uppercase tracking-wider text-white mb-0.5">
                      {link.name}
                    </h6>

                    <p className="text-xs inline-block text-gray-300">
                      @{link.handle}
                    </p>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section >

      <OurBrands />
    </>
  );
}