import { motion } from "framer-motion";
import { Droplets, Flame, HeartHandshake } from "lucide-react";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import "./about.css";

const logoPath = "/opengraph.jpg";

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

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

export default function AboutPage() {
  return (
    <Box>
      {/* ── Hero ── */}
      <section className="about-hero">
        <Container maxWidth="md">
          <motion.div initial="hidden" animate="visible" variants={stagger}>
            <motion.h1 variants={fadeInUp}>The Light Behind the Wax</motion.h1>
            <div className="section-divider" />
            <motion.p variants={fadeInUp}>
              Mani Candles Co. is a small handmade candle brand crafted with love, natural ingredients, and intention.
              Every candle is poured by hand in small batches, designed to bring warmth, luxury, and a touch of romance
              into your sacred spaces.
            </motion.p>
          </motion.div>
        </Container>
      </section>

      {/* ── Brand Values ── */}
      <section className="about-values">
        <Container maxWidth="lg">
          <div className="values-grid">
            {[
              { Icon: HeartHandshake, title: "Handmade", desc: "We believe in the power of human touch. No machines, no mass production. Just careful hands pouring beautiful creations." },
              { Icon: Droplets, title: "Natural", desc: "Pure soy wax, lead-free cotton wicks, and premium fragrance oils infused with essential oils. Clean burns only." },
              { Icon: Flame, title: "Heartmade", desc: "A candle is more than wax and scent. It's ambiance, memory, and comfort. We put our heart into every jar." },
            ].map(({ Icon, title, desc }, i) => (
              <motion.div
                key={title}
                className="value-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="value-icon"><Icon size={40} /></div>
                <h3>{title}</h3>
                <p>{desc}</p>
              </motion.div>
            ))}
          </div>
        </Container>
      </section>

      {/* ── Meet the Maker ── */}
      <section className="about-maker">
        <div className="maker-gradient-overlay" />
        <Container maxWidth="lg">
          <div className="maker-grid">
            <motion.div
              className="maker-img-wrap"
              initial={{ opacity: 0, x: -50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <img src={logoPath} alt="Mani Candles Co. Logo Art" />
              <div className="maker-img-ring" />
            </motion.div>

            <motion.div
              className="maker-content"
              initial={{ opacity: 0, x: 50 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
            >
              <h2>Meet the Maker</h2>
              <div className="maker-divider" />
              <p>What started as a quiet evening hobby quickly blossomed into a deep passion for the alchemy of scent and light.</p>
              <p>I wanted to create more than just candles; I wanted to craft experiences. The flicker of the flame, the slow release of carefully blended perfumes—these elements have the power to transform a chaotic day into a moment of pure serenity.</p>
              <p>Every Mani candle is a piece of my heart, poured in small batches to ensure that the luxury you experience is entirely personal and authentically handmade.</p>
              <span className="maker-signature">With love,</span>
            </motion.div>
          </div>
        </Container>
      </section>

      {/* ── Process Timeline ── */}
      <section className="about-process">
        <Container maxWidth="md">
          <h2>Our Process</h2>
          <p className="subtitle">The journey of a Mani Candle.</p>

          <div className="timeline">
            {[
              { step: "01", title: "Sourcing", desc: "We select only the finest natural soy wax and premium, phthalate-free fragrances." },
              { step: "02", title: "Blending", desc: "Fragrances are meticulously mixed at the exact temperature for optimal throw." },
              { step: "03", title: "Pouring", desc: "Each jar is wicked and poured entirely by hand, ensuring an even, smooth finish." },
              { step: "04", title: "Curing", desc: "Candles rest and cure for weeks to let the wax and fragrance bind perfectly." },
              { step: "05", title: "Packaging", desc: "Lovingly labeled, boxed, and prepared to illuminate your home." },
            ].map((item, i) => (
              <motion.div
                key={i}
                className="timeline-item"
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: i * 0.1, duration: 0.5 }}
              >
                <div className="timeline-step">{item.step}</div>
                <div className="timeline-body">
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
              </motion.div>
            ))}
          </div>
        </Container>
      </section>
    </Box>
  );
}