import React from "react";
import { FiPhoneCall, FiMail } from "lucide-react";
import { motion } from "framer-motion";

// Mock Data
const products = [
  {
    id: 1,
    name: "Antipasto",
    description: "Una mezcla exquisita de verduras conservadas en aceite de oliva.",
    image: "https://via.placeholder.com/300x200?text=Antipasto",
  },
  {
    id: 2,
    name: "Dip de Pimienta",
    description: "Un dip cremoso y picante elaborado con pimientos frescos.",
    image: "https://via.placeholder.com/300x200?text=Dip+de+Pimienta",
  },
  {
    id: 3,
    name: "Dip de Piña",
    description: "Un dip suave y dulce hecho con piña natural.",
    image: "https://via.placeholder.com/300x200?text=Dip+de+Piña",
  },
];

const blogPosts = [
  {
    id: 1,
    title: "Receta de Ensalada Griega",
    excerpt: "Descubre cómo hacer una ensalada griega auténtica.",
    image: "https://via.placeholder.com/300x200?text=Ensalada+Griega",
  },
  {
    id: 2,
    title: "Ensalada de Quinoa",
    excerpt: "Una opción saludable y deliciosa.",
    image: "https://via.placeholder.com/300x200?text=Ensalada+de+Quinoa",
  },
];

const App = () => {
  return (
    <div className="font-sans text-gray-900 antialiased">
      {/* Header */}
      <header className="bg-green-900 text-yellow-300 py-6">
        <nav className="container mx-auto flex justify-between items-center px-4">
          <div className="text-3xl font-bold">BENDITA'S DELICIAS FOODS</div>
          <ul className="flex space-x-4">
            <li>
              <a href="#catalogo" className="hover:text-yellow-200">
                Catálogo
              </a>
            </li>
            <li>
              <a href="#blog" className="hover:text-yellow-200">
                Blog
              </a>
            </li>
            <li>
              <a href="#contacto" className="hover:text-yellow-200">
                Contacto
              </a>
            </li>
          </ul>
        </nav>
      </header>

      {/* Hero Section */}
      <section
        id="hero"
        className="bg-cover bg-center h-screen flex items-center justify-center"
        style={{ backgroundImage: 'url("https://via.placeholder.com/1920x1080?text=Hero")' }}
      >
        <div className="text-center text-white">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">
            Delicias Tradicionales, Sabores Exquisitos
          </h1>
          <p className="text-xl mb-6">
            Descubre nuestra selección de productos gourmet.
          </p>
          <button className="bg-yellow-300 hover:bg-yellow-400 text-green-900 font-bold py-2 px-4 rounded">
            Conoce nuestro catálogo
          </button>
        </div>
      </section>

      {/* Sobre Nosotros */}
      <section id="sobre-nosotros" className="py-12 bg-green-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-6 text-center">
            Sobre Nosotros
          </h2>
          <p className="text-lg mb-8">
            En Bendita's Delicias Foods, nos enfocamos en ofrecer productos de alta calidad inspirados en la cocina mediterránea. Nuestros ingredientes son frescos y seleccionados cuidadosamente para brindarte sabores auténticos y deliciosos.
          </p>
          <img
            src="https://via.placeholder.com/600x400?text=Ingredientes+Frescos"
            alt="Ingredientes Frescos"
            className="mx-auto mb-4"
          />
        </div>
      </section>

      {/* Catálogo de Productos */}
      <section id="catalogo" className="py-12">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-6 text-center">
            Nuestro Catálogo
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {products.map((product) => (
              <div
                key={product.id}
                className="bg-white shadow-md rounded overflow-hidden"
              >
                <img
                  src={product.image}
                  alt={product.name}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-xl font-bold">{product.name}</h3>
                  <p className="text-gray-600">{product.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Blog de Recetas */}
      <section id="blog" className="py-12 bg-green-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-6 text-center">
            Blog de Recetas
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {blogPosts.map((post) => (
              <div
                key={post.id}
                className="bg-white shadow-md rounded overflow-hidden"
              >
                <img
                  src={post.image}
                  alt={post.title}
                  className="w-full h-48 object-cover"
                />
                <div className="p-4">
                  <h3 className="text-xl font-bold">{post.title}</h3>
                  <p className="text-gray-600">{post.excerpt}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Redes Sociales */}
      <section className="py-12 bg-green-900 text-yellow-300">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-6 text-center">
            Seguinos en Redes Sociales
          </h2>
          <div className="flex justify-center space-x-4">
            <a
              href="https://www.tiktok.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-yellow-300 hover:bg-yellow-400 text-green-900 font-bold py-2 px-4 rounded"
            >
              TikTok
            </a>
            <a
              href="https://www.facebook.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-yellow-300 hover:bg-yellow-400 text-green-900 font-bold py-2 px-4 rounded"
            >
              Facebook
            </a>
            <a
              href="https://www.instagram.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="bg-yellow-300 hover:bg-yellow-400 text-green-900 font-bold py-2 px-4 rounded"
            >
              Instagram
            </a>
          </div>
        </div>
      </section>

      {/* Contacto */}
      <section id="contacto" className="py-12 bg-green-100">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-bold mb-6 text-center">
            Contáctanos
          </h2>
          <form className="max-w-md mx-auto">
            <div className="mb-4">
              <label
                htmlFor="name"
                className="block text-gray-700 font-bold mb-2"
              >
                Nombre
              </label>
              <input
                type="text"
                id="name"
                className="w-full border border-gray-300 p-2 rounded"
              />
            </div>
            <div className="mb-4">
              <label
                htmlFor="email"
                className="block text-gray-700 font-bold mb-2"
              >
                Correo Electrónico
              </label>
              <input
                type="email"
                id="email"
                className="w-full border border-gray-300 p-2 rounded"
              />
            </div>
            <div className="mb-4">
              <label
                htmlFor="message"
                className="block text-gray-700 font-bold mb-2"
              >
                Mensaje
              </label>
              <textarea
                id="message"
                rows="4"
                className="w-full border border-gray-300 p-2 rounded"
              ></textarea>
            </div>
            <button
              type="submit"
              className="bg-yellow-300 hover:bg-yellow-400 text-green-900 font-bold py-2 px-4 rounded w-full"
            >
              Enviar
            </button>
          </form>
          <div className="mt-8">
            <p className="text-lg mb-2">
              También puedes contactarnos por:
            </p>
            <div className="flex space-x-4">
              <span className="flex items-center">
                <FiPhoneCall className="mr-2" /> 315 1625940
              </span>
              <span className="flex items-center">
                <FiMail className="mr-2" /> benditasdeliciasfood@blessdjirehstore.com
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-green-900 text-yellow-300 py-6">
        <div className="container mx-auto px-4 flex justify-between items-center">
          <div>
            <p>© 2023 Bendita's Delicias Foods. Todos los derechos reservados.</p>
          </div>
          <div>
            <ul className="flex space-x-4">
              <li>
                <a href="#" className="hover:text-yellow-200">
                  Términos de Uso
                </a>
              </li>
              <li>
                <a href="#" className="hover:text-yellow-200">
                  Política de Privacidad
                </a>
              </li>
            </ul>
          </div>
        </div>
      </footer>

      {/* WhatsApp Float Button */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.5 }}
        className="fixed bottom-8 right-8 bg-yellow-300 text-green-900 font-bold py-2 px-4 rounded-full cursor-pointer shadow-lg z-50"
      >
        <a href="https://wa.me/3151625940" target="_blank" rel="noopener noreferrer">
          Chat con WhatsApp
        </a>
      </motion.div>
    </div>
  );
};

export default App;