prueba

import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { MapPin, Eye } from "lucide-react"; import { motion } from "framer-motion";

const points = [ { name: "Estancia Inalco", description: "Según teorías, refugio final de Adolf Hitler tras la Segunda Guerra Mundial. Arquitectura germana, aislada en la Patagonia.", coordinates: [-40.758, -71.646], arUnlocked: true, }, { name: "Hotel Llao Llao", description: "Frecuentado por figuras nazis según testimonios. Diseño de Alejandro Bustillo.", coordinates: [-41.020, -71.532], arUnlocked: false, }, { name: "Cerro Catedral - Búnkeres", description: "Refugios camuflados en la montaña, accesibles con guía. Alimentan teorías sobre bases secretas nazis.", coordinates: [-41.170, -71.470], arUnlocked: false, }, ];

export default function OperacionPatagoniaAR() { const [unlockedAR, setUnlockedAR] = useState(false);

const handleARUnlock = () => { setUnlockedAR(true); };

return (

<motion.h1 initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="text-3xl font-bold text-center" > Operación Patagonia: Realidad Aumentada </motion.h1>

  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
    {points.map((point, index) => (
      <Card key={index} className="rounded-2xl shadow-lg">
        <CardContent className="p-4 space-y-2">
          <div className="flex items-center gap-2">
            <MapPin className="text-red-500" />
            <h2 className="text-xl font-semibold">{point.name}</h2>
          </div>
          <p className="text-sm text-gray-600">{point.description}</p>
          {point.arUnlocked || unlockedAR ? (
            <Button variant="outline" className="w-full">
              <Eye className="mr-2" /> Ver en AR
            </Button>
          ) : (
            <Button disabled variant="ghost" className="w-full opacity-50">
              <Eye className="mr-2" /> Bloqueado
            </Button>
          )}
        </CardContent>
      </Card>
    ))}
  </div>

  {!unlockedAR && (
    <div className="text-center">
      <Button onClick={handleARUnlock} className="mt-6">
        🔓 Desbloquear experiencia AR
      </Button>
    </div>
  )}
</div>

); }