'use client';

import { useEffect, useRef, useState } from 'react';

/**
 * Platform Logos - reemplazado por carrusel infinito que usa data-URIs
 * Los SVG se muestran en blanco y negro aplicando un filtro CSS.
 */

const clientLogos = [
  {
    name: 'Microsoft',
    dataUri:
      'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMzNy42IDcyIiB2aWV3Qm94PSIwIDAgMzM3LjYgNzIiPjxwYXRoIGQ9Ik0xNDAuNCAxNC40djQzLjJoLTcuNVYyMy43aC0uMWwtMTMuNCAzMy45aC01bC0xMy43LTMzLjloLS4xdjMzLjloLTYuOVYxNC40aDEwLjhsMTIuNCAzMmguMmwxMy4xLTMyaDEwLjJ6bTYuMiAzLjNjMC0xLjIuNC0yLjIgMS4zLTMgLjktLjggMS45LTEuMiAzLjEtMS4yIDEuMyAwIDIuNC40IDMuMiAxLjJzMS4zIDEuOCAxLjMgMy0uNCAyLjItMS4zIDNjLS45LjgtMS45IDEuMi0zLjIgMS4ycy0yLjMtLjQtMy4xLTEuMmMtLjgtLjktMS4zLTEuOS0xLjMtM3ptOC4xIDguOXYzMWgtNy4zdi0zMWg3LjN6bTIyLjEgMjUuN2MxLjEgMCAyLjMtLjIgMy42LS44IDEuMy0uNSAyLjUtMS4yIDMuNi0ydjYuOGMtMS4yLjctMi41IDEuMi00IDEuNS0xLjUuMy0zLjEuNS00LjkuNS00LjYgMC04LjMtMS40LTExLjEtNC4zLTIuOS0yLjktNC4zLTYuNi00LjMtMTEgMC01IDEuNS05LjEgNC40LTEyLjMgMi45LTMuMiA3LTQuOCAxMi40LTQuOCAxLjQgMCAyLjguMiA0LjEuNSAxLjQuMyAyLjUuOCAzLjMgMS4ydjdjLTEuMS0uOC0yLjMtMS41LTMuNC0xLjktMS4yLS40LTIuNC0uNy0zLjYtLjctMi45IDAtNS4yLjktNyAyLjhzLTIuNiA0LjQtMi42IDcuNmMwIDMuMS45IDUuNiAyLjYgNy4zIDEuNyAxLjcgNCAyLjYgNi45IDIuNnptMjcuOS0yNi4yYy42IDAgMS4xIDAgMS42LjFzLjkuMiAxLjIuM3Y3LjRjLS40LS4zLS45LS42LTEuNy0uOHMtMS42LS40LTIuNy0uNGMtMS44IDAtMy4zLjgtNC41IDIuM3MtMS45IDMuOC0xLjkgN3YxNS42aC03LjN2LTMxaDcuM3Y0LjloLjFjLjctMS43IDEuNy0zIDMtNCAxLjQtLjkgMy0xLjQgNC45LTEuNHptMy4yIDE2LjVjMC01LjEgMS41LTkuMiA0LjMtMTIuMiAyLjktMyA2LjktNC41IDEyLTQuNSA0LjggMCA4LjYgMS40IDExLjMgNC4zczQuMSA2LjggNC4xIDExLjdjMCA1LTEuNSA5LTQuMyAxMi0yLjkgMy02LjggNC41LTExLjggNC41LTQuOCAwLTguNi0xLjQtMTEuNC00LjItMi44LTIuOS00LjItNi44LTQuMi0xMS42em03LjYtLjNjMCAzLjIuNyA1LjcgMi4yIDcuNHMzLjYgMi42IDYuMyAyLjZjMi42IDAgNC43LS44IDYuMS0yLjYgMS40LTEuNyAyLjEtNC4yIDIuMS03LjYgMC0zLjMtLjctNS44LTIuMS03LjYtMS40LTEuNy0zLjUtMi42LTYtMi42LTIuNyAwLTQuNy45LTYuMiAyLjctMS43IDEuOS0yLjQgNC40LTIuNCA3Ljd6bTM1LTcuNWMwIDEgLjMgMS45IDEgMi41LjcuNiAyLjEgMS4zIDQuNCAyLjIgMi45IDEuMiA1IDIuNSA2LjEgMy45IDEuMiAxLjUgMS44IDMuMiAxLjggNS4zIDAgMi45LTEuMSA1LjItMy40IDctMi4yIDEuOC01LjMgMi42LTkuMSAyLjYtMS4zIDAtMi43LS4yLTQuMy0uNS0xLjYtLjMtMi45LS43LTQtMS4ydi03LjJjMS4zLjkgMi44IDEuNyA0LjMgMi4yIDEuNS41IDIuOS44IDQuMi44IDEuNiAwIDIuOS0uMiAzLjYtLjcuOC0uNSAxLjItMS4yIDEuMi0yLjMgMC0xLS40LTEuOC0xLjItMi42LS44LS43LTIuNC0xLjUtNC42LTIuNC0yLjctMS4xLTQuNi0yLjQtNS43LTMuOHMtMS43LTMuMi0xLjctNS40YzAtMi44IDEuMS01LjEgMy4zLTYuOSAyLjItMS44IDUuMS0yLjcgOC42LTIuNyAxLjEgMCAyLjMuMSAzLjYuNHMyLjUuNiAzLjQuOVYzNGMtMS0uNi0yLjEtMS4yLTMuNC0xLjctMS4zLS41LTIuNi0uNy0zLjgtLjctMS40IDAtMi41LjMtMy4yLjgtLjcuNy0xLjEgMS40LTEuMSAyLjR6bTE2LjQgNy44YzAtNS4xIDEuNS05LjIgNC4zLTEyLjIgMi45LTMgNi45LTQuNSAxMi00LjUgNC44IDAgOC42IDEuNCAxMS4zIDQuM3M0LjEgNi44IDQuMSAxMS43YzAgNS0xLjUgOS00LjMgMTItMi45IDMtNi44IDQuNS0xMS44IDQuNS00LjggMC04LjYtMS40LTExLjQtNC4yLTIuNy0yLjktNC4yLTYuOC00LjItMTEuNnptNy42LS4zYzAgMy4yLjcgNS43IDIuMiA3LjRzMy42IDIuNiA2LjMgMi42YzIuNiAwIDQuNy0uOCA2LjEtMi42IDEuNC0xLjcgMi4xLTQuMiAyLjEtNy42IDAtMy4zLS43LTUuOC0yLjEtNy42LTEuNC0xLjctMy41LTIuNi02LTIuNi0yLjcgMC00LjcuOS02LjIgMi43LTEuNiAxLjktMi40IDQuNC0yLjQgNy43em00OC40LTkuN0gzMTJ2MjVoLTcuNHYtMjVoLTUuMnYtNmg1LjJ2LTQuM2MwLTMuMiAxLjEtNS45IDMuMi04czQuOC0zLjEgOC4xLTMuMWMuOSAwIDEuNy4xIDIuNC4xczEuMy4yIDEuOC40VjE4Yy0uMi0uMS0uNy0uMy0xLjMtLjUtLjYtLjItMS4zLS4zLTIuMS0uMy0xLjUgMC0yLjcuNS0zLjUgMS40LS44LjktMS4yIDIuNC0xLjIgNC4ydjMuN2gxMC45di03bDcuMy0yLjJ2OS4yaDcuNHY2aC03LjRWNDdjMCAxLjkuNCAzLjIgMSA0IC43LjggMS44IDEuMiAzLjMgMS4yLjQgMCAuOS0uMSAxLjUtLjMuNi0uMiAxLjEtLjQgMS41LS43djZjLS41LjMtMS4yLjUtMi4zLjctMS4xLjItMi4xLjMtMy4yLjMtMy4xIDAtNS40LS44LTYuOS0yLjQtMS41LTEuNi0yLjMtNC4xLTIuMy03LjRsLjEtMTUuOHoiIHN0eWxlPSJmaWxsOiM3MzczNzMiLz48cGF0aCBkPSJNMCAwaDM0LjJ2MzQuMkgweiIgc3R5bGU9ImZpbGw6I2YyNTAyMiIvPjxwYXRoIGQ9Ik0zNy44IDBINzJ2MzQuMkgzNy44eiIgc3R5bGU9ImZpbGw6IzdmYmEwMCIvPjxwYXRoIGQ9Ik0wIDM3LjhoMzQuMlY3MkgweiIgc3R5bGU9ImZpbGw6IzAwYTRlZiIvPjxwYXRoIGQ9Ik0zNy44IDM3LjhINzJWNzJIMzcuOHoiIHN0eWxlPSJmaWxsOiNmZmI5MDAiLz48L3N2Zz4='
  },
  {
    name: 'Salesforce',
    dataUri:
      'data:image/svg+xml;base64,[encoded data, 9620 characters]'
  },
  {
    name: 'NBC',
    dataUri:
      'data:image/svg+xml;base64,[encoded data, 5304 characters]'
  },
  {
    name: 'IBM',
    dataUri:
      'data:image/svg+xml;base64,[encoded data, 4676 characters]'
  },
  {
    name: 'Zendesk',
    dataUri:
      'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJsYXllciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCiAgICAgdmlld0JveD0iMCAwIDYxMyAxNTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYxMyAxNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KICAgIDxwYXRoIGZpbGw9IiMwMzM2M0QiIGQ9Ik00NzcuNSwxMDEuMmM1LjQsMC4xLDEwLjYtMS45LDE0LjQtNS42bDcuMiw3LjhjLTQuNyw0LjktMTEuMyw4LjUtMjEuNSw4LjVjLTE3LjUsMC0yOC43LTExLjYtMjguNy0yNy4yCgljLTAuMy0xNC44LDExLjUtMjcsMjYuMy0yNy4zYzAuMywwLDAuNSwwLDAuOCwwYzE3LjMsMCwyNy4yLDEzLjIsMjYuMywzMS41aC00MUM0NjIuOSw5Ni4zLDQ2OC4yLDEwMS4yLDQ3Ny41LDEwMS4yIE00OTAsODAKCWMtMS4xLTcuMS01LjMtMTIuMy0xMy44LTEyLjNjLTcuOSwwLTEzLjQsNC41LTE0LjgsMTIuM0g0OTB6IE0yMDguNSwxMDAuNmwzMS41LTMyaC0zMC44VjU4LjVoNDUuNHYxMC4zbC0zMS41LDMyaDMydjEwLjFoLTQ2LjYKCUwyMDguNSwxMDAuNnogTTI5MC41LDEwMS4yYzUuNCwwLjEsMTAuNi0xLjksMTQuNC01LjZsNy4yLDcuOGMtNC43LDQuOS0xMS4zLDguNS0yMS41LDguNWMtMTcuNSwwLTI4LjctMTEuNi0yOC43LTI3LjIKCWMtMC4zLTE0LjgsMTEuNS0yNywyNi4zLTI3LjNjMC4zLDAsMC41LDAsMC44LDBjMTcuMywwLDI3LjIsMTMuMiwyNi4zLDMxLjVoLTQxQzI3NS44LDk2LjMsMjgxLjIsMTAxLjIsMjkwLjUsMTAxLjIgTTMwMyw4MAoJYy0xLjEtNy4xLTUuMy0xMi4zLTEzLjgtMTIuM2MtNy45LDAtMTMuNCw0LjUtMTQuOCwxMi4zSDMwM3ogTTM4My40LDg0LjVjMC0xNi43LDEyLjUtMjcuMiwyNi4zLTI3LjJjNi43LTAuMSwxMy4xLDIuOCwxNy41LDcuOQoJVjM0LjNoMTEuMXY3Ni41aC0xMS4xdi03LjNjLTQuMyw1LjMtMTAuOCw4LjMtMTcuNiw4LjNDMzk2LjIsMTExLjgsMzgzLjQsMTAxLjIsMzgzLjQsODQuNSBNNDI3LjgsODQuNQoJYy0wLjQtMTQuNy0xOC4yLTIxLjctMjguNS0xMS4xcy0yLjgsMjguMiwxMS45LDI4LjJDNDIwLjcsMTAxLjUsNDI3LjgsOTMuOSw0MjcuOCw4NC41IE01MDkuNiw5OS43bDEwLjEtNS4yCgljMi43LDQuOSw3LjksNy44LDEzLjUsNy42YzYuMywwLDkuNi0zLjIsOS42LTYuOWMwLTQuMi02LjEtNS4xLTEyLjctNi41Yy04LjktMS44LTE4LjItNC44LTE4LjItMTUuNmMwLTguMyw3LjktMTUuOSwyMC4zLTE1LjgKCWM5LjcsMCwxNywzLjksMjEuMiwxMC4xbC05LjMsNS4xYy0yLjYtMy45LTcuMS02LjEtMTEuOC02Yy02LDAtOS4xLDIuOS05LjEsNi4zYzAsMy44LDQuOCw0LjgsMTIuNCw2LjVjOC42LDEuOCwxOC40LDQuNywxOC40LDE1LjYKCWMwLDcuMy02LjMsMTctMjEuMiwxNi45QzUyMS43LDExMS44LDUxNCwxMDcuNCw1MDkuNiw5OS43IE01ODQuMSw4Ny42bC04LjgsOS42djEzLjZoLTExLjFWMzQuM2gxMS4xdjUwbDIzLjctMjZoMTMuNkw1OTIsODAuOAoJbDIxLDI5LjloLTEyLjZMNTg0LjEsODcuNnogTTM0OS43LDU3LjRjLTEzLjIsMC0yNC4zLDguNi0yNC4zLDIyLjh2MzAuNmgxMS40VjgxLjVjMC04LjYsNC45LTEzLjcsMTMuNC0xMy43CgljOC40LDAsMTIuNiw1LjEsMTIuNiwxMy43djI5LjJoMTEuM1Y4MC4xYzAtMTQuMi0xMS4xLTIyLjgtMjQuMy0yMi44IE04MS42LDQxLjV2OTguNUgwTDgxLjYsNDEuNXogTTgxLjYsNi4xCgljMCwyMi41LTE4LjMsNDAuOC00MC44LDQwLjhDMTguMyw0Ni45LDAsMjguNiwwLDYuMUg4MS42eiBNOTUsMTM5LjljMC0yMi41LDE4LjMtNDAuOCw0MC44LTQwLjhjMjIuNSwwLDQwLjgsMTguMyw0MC44LDQwLjhIOTV6CgkgTTk1LDEwNC42VjYuMWg4MS42TDk1LDEwNC42eiIvPgo8L3N2Zz4K'
  },
  {
    name: 'Disney',
    dataUri:
      'data:image/svg+xml;base64,[encoded data, 8972 characters]'
  },
  {
    name: 'Nvidia',
    dataUri:
      'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMTI0IDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPHBhdGggZD0iTTc1Ljc1NzcgNC42NDczNlYyMC4xODJIODAuMTIwN1Y0LjY0NzM2SDc1Ljc1NzdaTTQxLjQyOTcgNC42MjEwM1YyMC4xNjg5SDQ1LjgzMjFWOC4wOTY1OUw0OS4yNjQ5IDguMTA5NzVDNTAuMzkxNiA4LjEwOTc1IDUxLjE3NzggOC4zODYyMiA1MS43MTUgOC45NjU0OEM1Mi40MDk0IDkuNzAyNzEgNTIuNjg0NiAxMC45MDA3IDUyLjY4NDYgMTMuMDcyOVYyMC4xNjg5SDU2Ljk1NTlWMTEuNTg1M0M1Ni45NTU5IDUuNDUwNDMgNTMuMDY0NSA0LjYyMTAzIDQ5LjI2NDkgNC42MjEwM0g0MS40Mjk3Wk04Mi43OTM2IDQuNjQ3MzZWMjAuMTgySDg5Ljg2ODhDOTMuNjQyMyAyMC4xODIgOTQuODczOSAxOS41NTAxIDk2LjE5NzIgMTguMTQxNUM5Ny4xNDA2IDE3LjE1NDEgOTcuNzQzMyAxNC45Njg3IDk3Ljc0MzMgMTIuNTg1OEM5Ny43NDMzIDEwLjQwMDUgOTcuMjMyMyA4LjQ1MjA0IDk2LjMyODMgNy4yNDA4NkM5NC43Mjk4IDUuMDY4NjQgOTIuMzk3NiA0LjY0NzM2IDg4LjkxMjQgNC42NDczNkg4Mi43OTM2Wk04Ny4xMTc0IDguMDE3Nkg4OC45OTFDOTEuNzE2MyA4LjAxNzYgOTMuNDcyIDkuMjQxOTQgOTMuNDcyIDEyLjQyNzlDOTMuNDcyIDE1LjYxMzggOTEuNzE2MyAxNi44NTEzIDg4Ljk5MSAxNi44NTEzSDg3LjExNzRWOC4wMTc2Wk02OS40Njg2IDQuNjQ3MzZMNjUuODI2MSAxNi45NTY2TDYyLjM0MDkgNC42NDczNkg1Ny42MjQxTDYyLjYwMyAyMC4xODJINjguODkyMUw3My45MjM0IDQuNjQ3MzZINjkuNDY4NlpNOTkuNzg3MyAyMC4xODJIMTA0LjE1VjQuNjQ3MzZIOTkuNzg3M1YyMC4xODJaTTExMi4wMjUgNC42NDczNkwxMDUuOTMyIDIwLjE2ODlIMTEwLjIzTDExMS4xOTkgMTcuNDE3NEgxMTguNDA2TDExOS4zMjMgMjAuMTU1N0gxMjRMMTE3Ljg1NSA0LjY0NzM2SDExMi4wMjVaTTExNC44NTUgNy40Nzc4M0wxMTcuNTAyIDE0Ljc0NDlIMTEyLjEzTDExNC44NTUgNy40Nzc4M1oiIGZpbGw9ImJsYWNrIi8+CiAgICA8cGF0aCBkPSJNMTMuMjcyNiA3LjIyNzY5VjUuMDk0OTdDMTMuNDgyMyA1LjA4MTggMTMuNjkxOSA1LjA2ODY0IDEzLjkwMTUgNS4wNjg2NEMxOS43MTg5IDQuODg0MzMgMjMuNTMxNyAxMC4wOTc3IDIzLjUzMTcgMTAuMDk3N0MyMy41MzE3IDEwLjA5NzcgMTkuNDE3NiAxNS44Mzc2IDE1LjAwMjEgMTUuODM3NkMxNC40MTI1IDE1LjgzNzYgMTMuODM2IDE1Ljc0NTQgMTMuMjg1NyAxNS41NjExVjkuMDgzOTVDMTUuNTUyNCA5LjM2MDQyIDE2LjAxMSAxMC4zNjEgMTcuMzYwNSAxMi42Mzg1TDIwLjM4NzIgMTAuMDg0NUMyMC4zODcyIDEwLjA4NDUgMTguMTcyOSA3LjE3NTAzIDE0LjQ1MTggNy4xNzUwM0MxNC4wNTg4IDcuMTYxODcgMTMuNjY1NyA3LjE4ODIgMTMuMjcyNiA3LjIyNzY5Wk0xMy4yNzI2IDAuMTcxMjY1VjMuMzU3MTlMMTMuOTAxNSAzLjMxNzY5QzIxLjk4NTYgMy4wNDEyMyAyNy4yNjU5IDkuOTc5MTcgMjcuMjY1OSA5Ljk3OTE3QzI3LjI2NTkgOS45NzkxNyAyMS4yMTI2IDE3LjM3NzkgMTQuOTEwNCAxNy4zNzc5QzE0LjM2MDEgMTcuMzc3OSAxMy44MjI5IDE3LjMyNTIgMTMuMjg1NyAxNy4yMzMxVjE5LjIwNzhDMTMuNzMxMiAxOS4yNjA1IDE0LjE4OTggMTkuMyAxNC42MzUzIDE5LjNDMjAuNTA1MSAxOS4zIDI0Ljc1MDIgMTYuMjg1MiAyOC44NjQzIDEyLjczMDdDMjkuNTQ1NyAxMy4yODM2IDMyLjMzNjQgMTQuNjEzMiAzMi45MTI5IDE1LjE5MjVDMjkuMDA4NSAxOC40ODM3IDE5LjkwMjQgMjEuMTI5OSAxNC43NDAxIDIxLjEyOTlDMTQuMjQyMiAyMS4xMjk5IDEzLjc3MDUgMjEuMTAzNiAxMy4yOTg4IDIxLjA1MDlWMjMuODI4N0gzNS41OTg5VjAuMTcxMjY1TDEzLjI3MjYgMC4xNzEyNjVaTTEzLjI3MjYgMTUuNTYxMVYxNy4yNDYyQzcuODQ4MjcgMTYuMjcyIDYuMzQxNTEgMTAuNTk3OSA2LjM0MTUxIDEwLjU5NzlDNi4zNDE1MSAxMC41OTc5IDguOTQ4ODYgNy43MDE2MyAxMy4yNzI2IDcuMjI3NjlWOS4wNzA3OUgxMy4yNTk1QzEwLjk5MjggOC43OTQzMiA5LjIxMDkxIDEwLjkyNyA5LjIxMDkxIDEwLjkyN0M5LjIxMDkxIDEwLjkyNyAxMC4yMTk4IDE0LjUyMTEgMTMuMjcyNiAxNS41NjExWk0zLjY0MjQzIDEwLjM2MUMzLjY0MjQzIDEwLjM2MSA2Ljg1MjUgNS41OTUyMyAxMy4yODU3IDUuMDk0OTdWMy4zNTcxOUM2LjE1ODA3IDMuOTM2NDUgMCA5Ljk5MjM0IDAgOS45OTIzNEMwIDkuOTkyMzQgMy40ODUyMSAyMC4xMjk0IDEzLjI3MjYgMjEuMDUwOVYxOS4yMDc4QzYuMDkyNTYgMTguMzEyNiAzLjY0MjQzIDEwLjM2MSAzLjY0MjQzIDEwLjM2MVoiIGZpbGw9IiM3NkI5MDAiLz4KPC9zdmc+Cg=='
  },
  {
    name: 'DigitalOcean',
    dataUri:
    'data:image/svg+xml;base64,[encoded data, 10616 characters]'
  },
  {
    name: 'Hootsuite',
    dataUri:
    'data:image/svg+xml;base64,[encoded data, 7412 characters]'
  }
];

export default function PlatformLogos() {
  // Duplicamos la lista para crear el efecto infinito
  const logos = [...clientLogos, ...clientLogos];

  return (
    <section className="relative py-6 border-b border-gray-100 dark:border-slate-800 transition-colors duration-500">
      {/* Background layer: garantiza que el color de fondo cambie con el switch de tema */}
      <div className="absolute inset-0 bg-white dark:bg-slate-900 -z-10 transition-colors duration-500" aria-hidden="true" />
      <div className="container relative z-10 mx-auto px-4">
        <div className="overflow-hidden relative z-20">
          {/* Marquee container */}
          <div
            className="flex items-center gap-8 md:gap-12 lg:gap-16"
            style={{
              width: 'max-content',
              animation: 'marquee 28s linear infinite',
            }}
          >
            {logos.map((logo, i) => (
              <div key={`${logo.name}-${i}`} className="flex-shrink-0">
                <img
                  src={logo.dataUri}
                  alt={logo.name}
                  className="h-8 md:h-10 w-auto"
                  style={{
                    width: '100px',
                    objectFit: 'contain',
                    opacity: 0.95,
                  }}
                />
              </div>
            ))}
          </div>
        </div>

        <style>{`
          @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
          }
          /* Ajuste: hacer que el flex contenedor ocupe 200% para que -50% muestre la mitad (duplicado) */
          .flex.items-center[style] { width: 200%; }
        `}</style>
      </div>
    </section>
  );
}
