import React, { useState } from "react";

// Bubble Muse — Candy Pop Art Portfolio (TailwindCSS required) // Focused exclusively on art pieces.

export default function BubbleMuse() { const palette = { pink: "#FF6FB5", aqua: "#6FE7DD", yellow: "#FFE66D", lavender: "#CBA6F7", pearl: "#FFFFFF", };

const artPieces = [ { id: 1, title: "Sweet Sunrise", src: "https://picsum.photos/seed/art1/800/800", desc: "Mixed media — acrylic & glitter" }, { id: 2, title: "Bubblegum Dreams", src: "https://picsum.photos/seed/art2/800/800", desc: "Digital collage" }, { id: 3, title: "Cotton Cloud", src: "https://picsum.photos/seed/art3/800/800", desc: "Watercolor study" }, { id: 4, title: "Neon Petals", src: "https://picsum.photos/seed/art4/800/800", desc: "Fashion illustration" }, { id: 5, title: "Candy Street", src: "https://picsum.photos/seed/art5/800/800", desc: "Photography + edits" }, { id: 6, title: "Polaroid Heart", src: "https://picsum.photos/seed/art6/800/800", desc: "Mini series" }, ];

const [selectedArt, setSelectedArt] = useState(null);

return ( <div className="min-h-screen bg-gradient-to-b from-white to-pink-50 text-gray-800"> {/* Header */} <header className="sticky top-0 backdrop-blur-md bg-white/60 border-b border-pink-200 z-30"> <nav className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between"> <div className="flex items-center gap-4"> <div className="w-12 h-12 rounded-full flex items-center justify-center shadow-md" style={{ background: palette.pink }}> <span className="font-bold text-white">BM</span> </div> <div> <h1 className="text-xl font-extrabold tracking-tight">Bubble Muse</h1> <p className="text-sm text-gray-600">a candy pop art portfolio</p> </div> </div>

<div className="flex items-center gap-4">
        <a href="#gallery" className="px-3 py-2 rounded-full hover:scale-105 transition">Gallery</a>
        <a href="#about" className="px-3 py-2 rounded-full hover:scale-105 transition">About</a>
        <a href="#contact" className="px-3 py-2 rounded-full bg-yellow-200 text-sm font-semibold shadow" style={{ background: palette.yellow }}>Contact</a>
      </div>
    </nav>
  </header>

  {/* Hero Section */}
  <section className="max-w-5xl mx-auto px-6 py-12 flex flex-col md:flex-row items-center gap-8">
    <div className="flex-1">
      <h2 className="text-4xl md:text-5xl font-extrabold leading-tight">Welcome to <span style={{ color: palette.pink }}>Bubble Muse</span> 🎨</h2>
      <p className="mt-4 text-lg text-gray-700">A vibrant world where art pops, colors dance, and every piece whispers something sweet.</p>

      <div className="mt-6 flex gap-3">
        <a href="#gallery" className="px-5 py-3 rounded-xl font-semibold shadow-lg" style={{ background: palette.pink, color: '#fff' }}>Explore Gallery</a>
      </div>
    </div>

    <div className="flex-1 grid grid-cols-2 gap-3 w-full">
      <img src="https://picsum.photos/seed/hero1/600/400" alt="hero1" className="rounded-2xl shadow-lg object-cover w-full h-48 md:h-56" />
      <img src="https://picsum.photos/seed/hero2/600/400" alt="hero2" className="rounded-2xl shadow-lg object-cover w-full h-48 md:h-56" />
      <img src="https://picsum.photos/seed/hero3/600/400" alt="hero3" className="rounded-2xl shadow-lg object-cover w-full h-48 md:h-56" />
      <img src="https://picsum.photos/seed/hero4/600/400" alt="hero4" className="rounded-2xl shadow-lg object-cover w-full h-48 md:h-56" />
    </div>
  </section>

  {/* Art Gallery */}
  <section id="gallery" className="max-w-5xl mx-auto px-6 py-8">
    <h3 className="text-2xl font-bold">Gallery</h3>
    <p className="text-gray-600 mt-2">Each piece a bubble of imagination. Tap to explore the magic.</p>

    <div className="mt-6 grid grid-cols-2 md:grid-cols-3 gap-4">
      {artPieces.map((a) => (
        <button key={a.id} onClick={() => setSelectedArt(a)} className="group relative overflow-hidden rounded-xl shadow hover:scale-105 transition-transform bg-white">
          <img src={a.src} alt={a.title} className="w-full h-56 object-cover group-hover:scale-105 transition-transform" />
          <div className="absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/40 text-white">
            <div className="font-semibold">{a.title}</div>
            <div className="text-xs opacity-90">{a.desc}</div>
          </div>
        </button>
      ))}
    </div>
  </section>

  {/* About Section */}
  <section id="about" className="max-w-5xl mx-auto px-6 py-8 flex flex-col md:flex-row gap-6 items-center">
    <img src="https://picsum.photos/seed/portrait/400/400" alt="portrait" className="w-48 h-48 rounded-3xl object-cover shadow-lg" />
    <div>
      <h3 className="text-2xl font-bold">About the Muse</h3>
      <p className="mt-3 text-gray-700">I’m Señorita — the dreamer behind <strong>Bubble Muse</strong>. My art celebrates color, emotion, and the playful beauty of the world through candy tones and glittered light.</p>
      <div className="mt-4 flex gap-3">
        <a href="#contact" className="px-4 py-2 rounded-full shadow" style={{ background: palette.pink, color: '#fff' }}>Work with me</a>
        <a href="#gallery" className="px-4 py-2 rounded-full border">View Gallery</a>
      </div>
    </div>
  </section>

  {/* Contact Section */}
  <footer id="contact" className="max-w-5xl mx-auto px-6 py-10">
    <div className="bg-white rounded-2xl p-6 shadow flex flex-col md:flex-row items-center justify-between">
      <div>
        <h4 className="text-lg font-bold">Let’s create something colorful together</h4>
        <p className="text-gray-600">Email: <span className="font-medium">yourname@example.com</span></p>
      </div>
      <div className="mt-4 md:mt-0 flex items-center gap-3">
        <a href="#" className="w-10 h-10 rounded-full flex items-center justify-center shadow" title="Instagram">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#FF6FB5" strokeWidth="1.5"/></svg>
        </a>
        <a href="#" className="w-10 h-10 rounded-full flex items-center justify-center shadow" title="TikTok">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8 3v12a4 4 0 004 4 4 4 0 004-4V7h3" stroke="#6FE7DD" strokeWidth="1.4"/></svg>
        </a>
      </div>
    </div>
    <div className="mt-6 text-center text-sm text-gray-500">© {new Date().getFullYear()} Bubble Muse — All art and designs by Señorita 💖</div>
  </footer>

  {/* Modal for Art */}
  {selectedArt && (
    <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-6" onClick={() => setSelectedArt(null)}>
      <div className="bg-white rounded-2xl overflow-hidden max-w-3xl w-full shadow-lg" onClick={(e) => e.stopPropagation()}>
        <img src={selectedArt.src} alt={selectedArt.title} className="w-full object-cover h-96" />
        <div className="p-4">
          <h4 className="font-bold text-xl">{selectedArt.title}</h4>
          <p className="text-gray-700 mt-2">{selectedArt.desc}</p>
          <div className="mt-4 text-right">
            <button onClick={() => setSelectedArt(null)} className="px-4 py-2 rounded-full border">Close</button>
          </div>
        </div>
      </div>
    </div>
  )}

  {/* Floating Bubble */}
  <div className="fixed right-6 bottom-6">
    <div className="p-3 rounded-full shadow-lg" style={{ background: 'linear-gradient(135deg, #FF6FB5 0%, #6FE7DD 100%)' }}>
      <button className="text-white font-bold text-sm">💖</button>
    </div>
  </div>
</div>

); }