import React, { useState, useMemo } from "react"; // Culinary single-file React component (Tailwind CSS required in host app) // Usage: place this component in a React app that has Tailwind configured. export default function CulinarySite() { const [query, setQuery] = useState(""); const [activeCategory, setActiveCategory] = useState("Tudo"); const [selected, setSelected] = useState(null); // Sample data — replace or extend with your own recipes or API const recipes = [ { id: 1, title: "Moqueca de Peixe", category: "Peixes", time: "45 min", difficulty: "Médio", image: "https://picsum.photos/seed/moqueca/800/600", ingredients: [ "1 kg de peixe em postas", "1 cebola grande fatiada", "1 pimentão vermelho fatiado", "2 tomates maduros", "Leite de coco 200ml", "Azeite de dendê a gosto", "Coentro, sal e pimenta", ], steps: [ "Tempere o p...