import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Image from "next/image";

export default function StoryFlyer() {
  return (
    <div className="flex flex-col items-center justify-center w-full h-full bg-white text-[#15151e] p-4 gap-4">
      <h1 className="text-2xl font-bold text-center">🛏️ ¡Remato colchón y base NUEVOS!</h1>
      <p className="text-center text-base">Todo SIN USO y con <strong>20% de descuento real</strong> sobre precios de tienda.</p>

      <Card className="w-full max-w-sm">
        <CardContent className="p-2 flex flex-col items-center">
          <Image
            src="/mnt/data/luuna-original (1).webp"
            alt="Colchón Luuna"
            width={300}
            height={200}
            className="rounded-xl"
          />
          <p className="text-lg font-semibold mt-2">Colchón Luuna Basics Queen</p>
          <p className="text-sm">Precio en tienda: $6,379</p>
          <p className="text-lg text-[#940F0F] font-bold">Tú lo pagas: $5,103</p>
        </CardContent>
      </Card>

      <Card className="w-full max-w-sm">
        <CardContent className="p-2 flex flex-col items-center">
          <Image
            src="/mnt/data/neiden-base-de-cama-pino__1102025_pe866849_s5.avif"
            alt="Base NEIDEN"
            width={300}
            height={200}
            className="rounded-xl"
          />
          <p className="text-lg font-semibold mt-2">Base de cama NEIDEN (Matrimonial)</p>
          <p className="text-sm">Precio en tienda: $1,499</p>
          <p className="text-lg text-[#940F0F] font-bold">Tú la pagas: $1,199</p>
        </CardContent>
      </Card>

      <div className="text-center text-sm">
        📍 Ubicación: Calle Colibrí, Valle de Bravo <br />
        📩 Escríbeme por DM si te interesa o si conoces a alguien que los necesite 🙌
      </div>

      <div className="text-center text-sm italic">
        Sí, sé que es raro tener una base matrimonial y un colchón queen… culpa de mi déficit de atención 😅
      </div>

      <div className="text-center text-base font-semibold mt-2">
        💥 Si compras ambos te doy <span className="text-[#940F0F] font-bold">10% adicional</span>: <br />
        Total: $6,302 → <strong>$5,672</strong>
      </div>
    </div>
  );
}