import { motion } from "framer-motion";
import { Link } from "wouter";
import { Flame, Heart, Leaf, Sparkles } from "lucide-react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import lavenderImage from "@/assets/images/product-lavender.png";
import roseImage from "@/assets/images/product-rose.png";
import eucalyptusImage from "@/assets/images/product-eucalyptus.png";
import oudImage from "@/assets/images/product-oud.png";
import "./home.css";

const logoPath = "/opengraph.jpg";

const fadeInUp = {
  hidden: { opacity: 0, y: 40 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
};

const stagger = {
  visible: { transition: { staggerChildren: 0.2 } },
};

export default function Home() {
  return (
    <Box>
      {/* ── Hero ── */}
      <section className="home-hero">
        <div className="home-hero-bg" />
        <motion.div initial="hidden" animate="visible" variants={stagger}>
          <motion.div variants={fadeInUp} style={{ position: "relative" }}>
            <div className="home-hero-logo-wrap">
              <img src={logoPath} alt="Mani Candles Co." style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div className="home-hero-flame animate-flame">
              <Flame size={40} fill="currentColor" style={{ filter: "drop-shadow(0 0 12px rgba(255,211,107,0.8))" }} />
            </div>
          </motion.div>

          <motion.h1 variants={fadeInUp}>Mani Candles Co.</motion.h1>

          <motion.span variants={fadeInUp} className="home-hero-tagline">
            Handmade • Natural • Heartmade
          </motion.span>

          <motion.div variants={fadeInUp}>
            <Link href="/products" className="hero-cta">Shop the Collection</Link>
          </motion.div>
        </motion.div>
      </section>

      {/* ── Philosophy ── */}
      <section className="home-philosophy">
        <Container maxWidth="lg">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, margin: "-100px" }} variants={stagger}>
            <motion.h2 variants={fadeInUp}>The Mani Philosophy</motion.h2>
            <div className="section-divider" />
          </motion.div>

          <div className="philosophy-grid">
            {[
              { Icon: Leaf, title: "Natural", desc: "Crafted with pure soy wax and essential oils. Clean burns that respect your home and our earth." },
              { Icon: Sparkles, title: "Handmade", desc: "Poured by hand in small batches to ensure unparalleled quality and attention to detail." },
              { Icon: Heart, title: "Heartmade", desc: "Every candle is infused with love and intention, designed to bring warmth to your sacred spaces." },
            ].map(({ Icon, title, desc }, i) => (
              <motion.div
                key={title}
                className="philosophy-card"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={{ hidden: { opacity: 0, y: 30 }, visible: { opacity: 1, y: 0, transition: { delay: i * 0.2, duration: 0.6 } } }}
              >
                <div className="philosophy-icon-wrap"><Icon size={32} /></div>
                <h3>{title}</h3>
                <p>{desc}</p>
              </motion.div>
            ))}
          </div>
        </Container>
      </section>

      {/* ── Featured Products ── */}
      <section className="home-products">
        <Container maxWidth="xl">
          <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeInUp} className="home-products-header">
            <div>
              <h2>Curated Favorites</h2>
              <div className="section-divider" style={{ margin: "0.5rem 0 0", width: 80 }} />
            </div>
            <Link href="/products" className="view-all-link">View All Candles</Link>
          </motion.div>

          <div className="product-grid">
            {[
              { id: 1, name: "Lavender Dream", image: lavenderImage, price: "$28" },
              { id: 2, name: "Rose & Vanilla", image: roseImage, price: "$32" },
              { id: 3, name: "Eucalyptus Mint", image: eucalyptusImage, price: "$28" },
              { id: 4, name: "Oud & Amber", image: oudImage, price: "$36" },
            ].map((product, i) => (
              <motion.div
                key={product.id}
                className="product-card"
                initial="hidden"
                whileInView="visible"
                viewport={{ once: true }}
                variants={{ hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { delay: i * 0.1, duration: 0.6 } } }}
              >
                <div className="product-img-wrap">
                  <img src={product.image} alt={product.name} />
                  <div className="product-overlay">
                    <button className="product-overlay-btn">Quick Add</button>
                  </div>
                </div>
                <h3 className="product-name">{product.name}</h3>
                <p className="product-price">{product.price}</p>
              </motion.div>
            ))}
          </div>
        </Container>
      </section>

      {/* ── Quote ── */}
      <section className="home-quote">
        <div className="home-quote-texture" />
        <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeInUp}>
          <Flame className="animate-flame" size={48} style={{ color: "var(--brand-gold)", margin: "0 auto 1.5rem", display: "block" }} />
          <blockquote>
            "A candle loses nothing by lighting another candle. It only makes the room warmer, brighter, and more beautiful."
          </blockquote>
          <div className="home-quote-divider" />
        </motion.div>
      </section>

      {/* ── Newsletter ── */}
      <section className="home-newsletter">
        <motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} variants={fadeInUp}>
          <h2>Join Our Sanctuary</h2>
          <p>Subscribe to receive gentle updates on new collections, exclusive access, and a little light in your inbox.</p>
          <form className="newsletter-form" onSubmit={(e) => e.preventDefault()}>
            <input type="email" className="newsletter-input" placeholder="Your email address" required />
            <button type="submit" className="newsletter-btn">Subscribe</button>
          </form>
        </motion.div>
      </section>
    </Box>
  );
}
