import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Instagram, Facebook, Twitter, Mail } from "lucide-react";

const featuredArt = [
  { title: "Sunset Over Water", image: "/images/art1.jpg" },
  { title: "Forest Whisper", image: "/images/art2.jpg" },
  { title: "Golden Dreams", image: "/images/art3.jpg" },
];

const gallery1 = [
  "/images/gallery1-1.jpg",
  "/images/gallery1-2.jpg",
  "/images/gallery1-3.jpg",
];

const gallery2 = [
  "/images/gallery2-1.jpg",
  "/images/gallery2-2.jpg",
  "/images/gallery2-3.jpg",
];

const gallery3 = [
  "/images/gallery3-1.jpg",
  "/images/gallery3-2.jpg",
  "/images/gallery3-3.jpg",
];

export default function ArtistWebsite() {
  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* Hero Section */}
      <section className="relative bg-cover bg-center h-[80vh] flex items-center justify-center text-white" style={{ backgroundImage: 'url(/images/hero-bg.jpg)' }}>
        <div className="bg-black bg-opacity-50 p-6 rounded-xl text-center">
          <h1 className="text-4xl md:text-6xl font-bold mb-4">Welcome to My Art World</h1>
          <p className="mb-6 text-lg md:text-xl">Original paintings and visual storytelling</p>
          <Button className="text-lg px-6 py-3">Explore Gallery</Button>
        </div>
      </section>

      {/* About Me */}
      <section className="py-12 px-4 md:px-16 bg-gray-100">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">About the Artist</h2>
          <p className="text-lg text-gray-700">
            I am a traditional visual artist working primarily in oil and watercolor. My work draws inspiration from the quiet beauty of everyday life and the rich textures of nature. Through color and form, I aim to evoke emotion and invite the viewer into a contemplative space.
          </p>
        </div>
      </section>

      {/* Featured Gallery */}
      <section className="py-12 px-4 md:px-16">
        <h2 className="text-3xl font-bold mb-8 text-center">Featured Artworks</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {featuredArt.map((art, index) => (
            <Card key={index} className="overflow-hidden rounded-2xl shadow-md">
              <img src={art.image} alt={art.title} className="w-full h-64 object-cover" />
              <CardContent className="p-4">
                <h3 className="text-xl font-semibold">{art.title}</h3>
              </CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Gallery 1 */}
      <section className="py-12 px-4 md:px-16 bg-gray-50">
        <h2 className="text-3xl font-bold mb-8 text-center">Landscapes</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {gallery1.map((img, index) => (
            <img key={index} src={img} alt={`Landscape ${index + 1}`} className="w-full h-64 object-cover rounded-2xl shadow-md" />
          ))}
        </div>
      </section>

      {/* Gallery 2 */}
      <section className="py-12 px-4 md:px-16">
        <h2 className="text-3xl font-bold mb-8 text-center">Portraits</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {gallery2.map((img, index) => (
            <img key={index} src={img} alt={`Portrait ${index + 1}`} className="w-full h-64 object-cover rounded-2xl shadow-md" />
          ))}
        </div>
      </section>

      {/* Gallery 3 */}
      <section className="py-12 px-4 md:px-16 bg-gray-50">
        <h2 className="text-3xl font-bold mb-8 text-center">Still Life</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
          {gallery3.map((img, index) => (
            <img key={index} src={img} alt={`Still Life ${index + 1}`} className="w-full h-64 object-cover rounded-2xl shadow-md" />
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section className="py-12 px-4 md:px-16">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-4">Contact Me</h2>
          <p className="text-lg text-gray-700 mb-6">
            Interested in purchasing artwork, commissions, or just want to say hello? Reach out below:
          </p>
          <form className="grid grid-cols-1 gap-4">
            <input type="text" placeholder="Your Name" className="border rounded p-3" />
            <input type="email" placeholder="Your Email" className="border rounded p-3" />
            <textarea rows="5" placeholder="Your Message" className="border rounded p-3"></textarea>
            <Button className="text-lg px-6 py-3">Send Message</Button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-gray-900 text-white py-6 px-4 md:px-16 flex flex-col md:flex-row justify-between items-center">
        <p className="text-sm">&copy; {new Date().getFullYear()} My Art Studio. All rights reserved.</p>
        <div className="flex space-x-4 mt-4 md:mt-0">
          <a href="#" aria-label="Instagram"><Instagram className="w-5 h-5" /></a>
          <a href="#" aria-label="Facebook"><Facebook className="w-5 h-5" /></a>
          <a href="#" aria-label="Twitter"><Twitter className="w-5 h-5" /></a>
          <a href="mailto:artist@example.com" aria-label="Email"><Mail className="w-5 h-5" /></a>
        </div>
      </footer>
    </div>
  );
}