import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { useState } from "react";

export default function ConviteStore() {
  const [convites, setConvites] = useState([
    {
      id: 1,
      titulo: "Convite de Casamento Clássico",
      dimensoes: "15 x 21 cm",
      peso: "30g",
      preco: 7.5,
    },
    {
      id: 2,
      titulo: "Convite de 15 Anos Elegante",
      dimensoes: "12 x 18 cm",
      peso: "25g",
      preco: 6.0,
    },
  ]);

  return (
    <div className="min-h-screen bg-white text-blue-800 p-6" style={{ backgroundColor: '#f0f8ff' }}>
      <h1 className="text-4xl font-bold mb-6 text-center">Convites Especiais</h1>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        {convites.map((convite) => (
          <Card key={convite.id} className="bg-white shadow-md rounded-2xl border border-blue-200">
            <CardContent className="p-4">
              <h2 className="text-xl font-semibold mb-2">{convite.titulo}</h2>
              <p>Dimensões: {convite.dimensoes}</p>
              <p>Peso: {convite.peso}</p>
              <p className="font-bold mt-2">Preço: R$ {convite.preco.toFixed(2)}</p>
              <Button className="mt-4 bg-blue-500 hover:bg-blue-600 text-white">Comprar</Button>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="mt-12 p-6 bg-white shadow rounded-2xl border border-blue-200">
        <h2 className="text-2xl font-bold mb-4">Formas de Pagamento</h2>
        <ul className="list-disc list-inside text-lg">
          <li>Cartões de Crédito (Visa, Mastercard, Elo, etc.)</li>
          <li>PIX</li>
        </ul>
      </div>

      <div className="mt-12 p-6 bg-white shadow rounded-2xl border border-blue-200">
        <h2 className="text-2xl font-bold mb-4">Galeria</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <img src="/galeria/convite1.jpg" alt="Convite 1" className="rounded-xl" />
          <img src="/galeria/convite2.jpg" alt="Convite 2" className="rounded-xl" />
          <img src="/galeria/convite3.jpg" alt="Convite 3" className="rounded-xl" />
        </div>
      </div>

      <div className="mt-12 p-6 bg-white shadow rounded-2xl border border-blue-200">
        <h2 className="text-2xl font-bold mb-4">Fale Conosco</h2>
        <form className="space-y-4">
          <Input type="text" placeholder="Seu nome" required />
          <Input type="email" placeholder="Seu e-mail" required />
          <Textarea placeholder="Sua mensagem" rows={4} required />
          <Button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white">Enviar</Button>
        </form>
      </div>

      <div className="mt-12 text-center">
        <a
          href="https://wa.me/5599999999999"
          target="_blank"
          rel="noopener noreferrer"
          className="text-blue-600 hover:underline text-lg"
        >
          Fale conosco via WhatsApp
        </a>
      </div>
    </div>
  );
}