"use client";

import { motion } from "framer-motion";

export default function BrandStory() {
  return (
    <section className="py-20 px-4 bg-background-ice">
      <div className="max-w-7xl mx-auto">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <motion.div
            initial={{ opacity: 0, x: -30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-4xl md:text-5xl font-serif mb-6">
              Our Story
            </h2>
            <div className="space-y-4 text-foreground-muted leading-relaxed">
              <p>
                ManoonOils was born from a passion for natural beauty and the belief 
                that the best skincare comes from nature itself.
              </p>
              <p>
                Our premium oils are carefully crafted using only the finest natural 
                ingredients, handpicked for their nourishing and restorative properties.
              </p>
              <p>
                Each product is made with love and attention to detail, ensuring 
                that you receive the very best for your hair and skin.
              </p>
            </div>
          </motion.div>

          <motion.div
            className="relative aspect-square bg-gradient-to-br from-accent/20 to-accent-dark/20"
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="absolute inset-8 border border-foreground/10" />
            <div className="absolute inset-12 bg-white/50 backdrop-blur-sm flex items-center justify-center">
              <span className="font-serif text-3xl text-foreground/60">ManoonOils</span>
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}