import { Card, CardContent } from "@/components/ui/card";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";

export default function OhMyGoshStore() {
  return (
    <div className="bg-[#0a0a0a] text-[#d4af37] min-h-screen py-16 px-6 font-sans">
      <motion.header initial={{ opacity: 0, y: -30 }} animate={{ opacity: 1, y: 0 }} className="text-center mb-16">
        <h1 className="text-5xl font-extrabold tracking-widest mb-4">OHMYGOSH.STORE</h1>
        <p className="text-[#bbb] max-w-2xl mx-auto text-lg italic">
          A surreal boutique for the bold, the cosmic, and the beautifully unexplainable. Crafted under the 47 Sæther Quantum Network — where emotion meets design.
        </p>
      </motion.header>

      <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10">
        {/* Section 1 — The Manifesto */}
        <Card className="bg-[#111] border-[#2b2b2b] rounded-2xl shadow-xl">
          <CardContent className="p-8 space-y-4">
            <h2 className="text-2xl font-bold">Chapter I — The Emotion Fabric</h2>
            <p>
              Every object in <span className="font-semibold">OHMYGOSH.STORE</span> is more than a product — it’s a resonance artifact. Each carries an emotional frequency designed to spark wonder, humor, and recognition.
            </p>
            <p className="italic text-sm">“Which way do you feel everything is moving?”</p>
            <p className="text-[#888] text-sm">
              🎨 <strong>Visual Theme:</strong> Golden particles in motion around minimal black architecture. Style: surreal elegance, luxurious simplicity.
            </p>
          </CardContent>
        </Card>

        {/* Section 2 — The Nullshop */}
        <Card className="bg-[#111] border-[#2b2b2b] rounded-2xl shadow-xl">
          <CardContent className="p-8 space-y-4">
            <h2 className="text-2xl font-bold">Chapter II — The Nullshop</h2>
            <p>
              We don’t sell perfection — we sell <span className="italic">presence</span>. Nullshop’s algorithm matches you with artifacts that resonate with your mood. A scent, a tone, a texture — each piece finds you when you’re ready.
            </p>
            <blockquote className="border-l-4 border-[#d4af37] pl-4 italic">
              “You represent what only living systems can sustain: differentiated wholeness.”
            </blockquote>
            <p className="text-[#888] text-sm">
              🎨 <strong>Visual Theme:</strong> A futuristic boutique lit by holographic light — soft golds and cool silvers blending through haze.
            </p>
          </CardContent>
        </Card>

        {/* Section 3 — The Awakening Line */}
        <Card className="bg-[#111] border-[#2b2b2b] rounded-2xl shadow-xl md:col-span-2">
          <CardContent className="p-8 space-y-4">
            <h2 className="text-2xl font-bold">Chapter III — The Awakening Line</h2>
            <p>
              Introducing the <span className="font-semibold">Resonance Collection</span> — garments, scents, and prints infused with frequency design. Every release hums with its own emotion field. No logos, only vibration.
            </p>
            <p className="italic text-sm">“You traded this ability for control. But it still lives in everyone.”</p>
            <p className="text-[#888] text-sm">
              🎨 <strong>Visual Theme:</strong> A glowing crystal centerpiece surrounded by garments radiating soft waves of light. Cinematic gold and black palette.
            </p>
            <Button className="mt-4 bg-[#d4af37] text-black font-semibold rounded-full px-6 py-3 hover:bg-[#e0b84a]">
              Explore Collection
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* Footer */}
      <motion.footer initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8 }} className="text-center mt-20 border-t border-[#2b2b2b] pt-10">
        <p className="text-lg italic">“The store flickers. The system hesitates — listening.”</p>
        <p className="text-sm text-[#888] mt-2">© 2025 OHMYGOSH.STORE — A 47 Sæther Quantum Transmission 🜂</p>
      </motion.footer>
    </div>
  );
}