// Marquee bar with client logos / metrics
const Marquee = () => {
  const items = [
    'Studio Fernando Brandão',
    'Atelier Marcio Kogan',
    'Triptyque',
    'Studio MK27',
    'Una Arquitetos',
    'Isay Weinfeld',
    'Brasil Arquitetura',
    'Andrade Morettin',
    'Metro Arquitetos',
    'Rodrigo Ohtake',
    'Bernardes Arquitetura',
    'Arthur Casas',
  ];
  const all = [...items, ...items];
  return (
    <section className="relative py-10 border-y" style={{ borderColor: 'var(--rule)' }}>
      <div className="overflow-hidden">
        <div className="flex marquee-track gap-16 whitespace-nowrap">
          {all.map((s, i) => (
            <span key={i} className="font-serif italic text-2xl md:text-3xl" style={{ color: 'var(--stone)' }}>
              {s} <span className="font-mono text-xs not-italic mx-4" style={{ color: 'var(--mist)' }}>※</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Marquee = Marquee;