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

export default function HomePage() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js";
    script.async = true;
    script.onload = () => {
      if (window.ShopifyBuy) {
        if (window.ShopifyBuy.UI) {
          const client = window.ShopifyBuy.buildClient({
            domain: 'your-shop-name.myshopify.com',
            storefrontAccessToken: 'your-access-token'
          });

          window.ShopifyBuy.UI.onReady(client => {
            const products = [];

            products.forEach(({ id, nodeId }) => {
              client.createComponent('product', {
                id,
                node: document.getElementById(nodeId),
                moneyFormat: '%24%7B%7Bamount%7D%7D',
                options: {
                  product: {
                    buttonDestination: 'checkout',
                    layout: 'vertical',
                    width: '240px'
                  },
                  cart: {
                    startOpen: false
                  },
                  toggle: {
                    sticky: true
                  }
                }
              });
            });
          });
        }
      }
    };
    document.body.appendChild(script);
  }, []);

  return (
    <motion.div 
      initial={{ opacity: 0 }} 
      animate={{ opacity: 1 }} 
      transition={{ duration: 1 }}
      className="min-h-screen bg-gradient-to-r from-[#0f0c29] via-[#302b63] to-[#24243e] text-white p-4 space-y-16 font-sans overflow-x-hidden"
    >
      {/* Hero Section */}
      <motion.section 
        className="text-center py-24 bg-black bg-opacity-40 rounded-3xl shadow-2xl backdrop-blur-md"
        initial={{ opacity: 0, y: -50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 1.2 }}
      >
        <h1 className="text-6xl font-extrabold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500 animate-pulse">Nextgen Layers</h1>
        <p className="text-xl mb-6">Crafting the Future of 3D Printing</p>
        <Button className="text-lg bg-gradient-to-r from-indigo-500 to-pink-500 hover:scale-105 transition-transform duration-300">Request a Quote</Button>
      </motion.section>

      {/* About Section */}
      <motion.section 
        className="max-w-4xl mx-auto bg-black bg-opacity-60 p-8 rounded-3xl shadow-xl"
        initial={{ opacity: 0, x: -100 }}
        whileInView={{ opacity: 1, x: 0 }}
        transition={{ duration: 1 }}
        viewport={{ once: true }}
      >
        <h2 className="text-4xl font-bold mb-4 text-cyan-400">About Us</h2>
        <p className="text-gray-300 text-lg leading-relaxed">
          At Nextgen Layers, we fuse technology and creativity to deliver elite 3D printed products. From aviation parts to custom board game pieces, we’re your design-to-delivery solution.
        </p>
      </motion.section>

      {/* Services Section */}
      <motion.section 
        className="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8"
        initial="hidden"
        whileInView="visible"
        variants={{
          hidden: {},
          visible: {
            transition: {
              staggerChildren: 0.2
            }
          }
        }}
        viewport={{ once: true }}
      >
        {["Multi-color 3D Printing", "Custom Part Design", "RC Plane Parts", "Rapid Prototyping", "Material Advice"].map(service => (
          <motion.div
            key={service}
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <Card className="rounded-2xl hover:shadow-neon transition duration-300 bg-[#1a1a2e]">
              <CardContent className="p-6">
                <h3 className="text-xl font-semibold text-transparent bg-clip-text bg-gradient-to-r from-pink-500 to-yellow-400">
                  {service}
                </h3>
              </CardContent>
            </Card>
          </motion.div>
        ))}
      </motion.section>

      {/* Shop Section */}
      <motion.section className="max-w-6xl mx-auto px-4" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 1 }} viewport={{ once: true }}>
        <h2 className="text-3xl font-bold text-purple-400 mb-8 text-center">Shop Now</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
          {["RC Plane Parts", "Game Tokens", "Custom Tokens"].map((item, idx) => (
            <motion.div key={idx} whileHover={{ scale: 1.05 }}>
              <Card className="bg-[#1f1f3a] rounded-2xl">
                <CardContent className="p-6 space-y-4">
                  <div className="aspect-square bg-gray-700 rounded-xl"></div>
                  <h3 className="text-lg font-semibold text-white">{item}</h3>
                  <Button className="w-full bg-gradient-to-r from-teal-400 to-blue-500 hover:from-blue-500 hover:to-teal-400 transition duration-300">Buy Now</Button>
                </CardContent>
              </Card>
            </motion.div>
          ))}
        </div>
      </motion.section>

      {/* Portfolio Section */}
      <motion.section className="max-w-5xl mx-auto px-4" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 1 }} viewport={{ once: true }}>
        <h2 className="text-3xl font-bold text-cyan-400 mb-6 text-center">Our Work</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {[1, 2, 3, 4].map(i => (
            <motion.div key={i} whileHover={{ scale: 1.05 }} className="aspect-square bg-gray-600 rounded-xl"></motion.div>
          ))}
        </div>
      </motion.section>

      {/* Contact Section */}
      <motion.section className="max-w-2xl mx-auto bg-[#1f1f3a] p-8 rounded-3xl shadow-xl" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 1 }} viewport={{ once: true }}>
        <h2 className="text-3xl font-bold text-pink-400 mb-6 text-center">Contact Us</h2>
        <form className="space-y-4">
          <input className="w-full p-3 border border-gray-500 rounded bg-transparent text-white placeholder-gray-400" placeholder="Name" />
          <input className="w-full p-3 border border-gray-500 rounded bg-transparent text-white placeholder-gray-400" placeholder="Email" type="email" />
          <textarea className="w-full p-3 border border-gray-500 rounded bg-transparent text-white placeholder-gray-400" placeholder="Message" rows={4} />
          <Button className="w-full bg-gradient-to-r from-indigo-500 to-pink-500 hover:from-pink-500 hover:to-indigo-500 transition duration-300">Send Message</Button>
        </form>
      </motion.section>

      {/* FAQ Section */}
      <motion.section className="max-w-3xl mx-auto bg-[#1a1a2e] p-8 rounded-3xl shadow-xl" initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} transition={{ duration: 1 }} viewport={{ once: true }}>
        <h2 className="text-3xl font-bold text-yellow-400 mb-6 text-center">FAQ</h2>
        <ul className="space-y-4 text-white">
          <li><strong>Can I request a custom part?</strong> Absolutely! Send us your idea or file and we’ll bring it to life.</li>
          <li><strong>How long does printing take?</strong> Depends on size and material — typically 1–3 days.</li>
          <li><strong>What materials do you use?</strong> PLA, PETG, TPU, ABS, and more based on your project needs.</li>
        </ul>
      </motion.section>
    </motion.div>
  );
}