"use client";

import { useReducedMotion, m } from "framer-motion";
import Image from "next/image";

interface SectionNameProps {
  className?: string;
}

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.2,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 40 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 100,
      damping: 20,
      mass: 1.2,
    },
  },
};

export function SectionName({ className }: SectionNameProps) {
  const prefersReducedMotion = useReducedMotion();

  return (
    <section
      aria-labelledby="section-heading"
      className={`py-24 md:py-32 bg-[var(--color-canvas)] ${className}`}
    >
      <div className="container mx-auto px-4 md:px-6 lg:px-8">
        <m.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          variants={prefersReducedMotion ? {} : containerVariants}
        >
          {/* Header */}
          <m.div variants={prefersReducedMotion ? {} : itemVariants} className="mb-12">
            <span className="text-xs font-mono uppercase tracking-[0.3em] text-[var(--color-accent-ui)]">
              Label
            </span>
            <h2
              id="section-heading"
              className="text-4xl md:text-5xl lg:text-6xl font-serif mt-4"
            >
              Section Title
            </h2>
          </m.div>

          {/* Content */}
          <m.div
            variants={prefersReducedMotion ? {} : itemVariants}
            className="grid md:grid-cols-2 gap-8"
          >
            {/* Add content here */}
          </m.div>
        </m.div>
      </div>
    </section>
  );
}

bg-[var(--color-canvas)]       // Warm Bone #fffbf5
text-stone-900                  // Charcoal Bronze (headings)
text-[var(--color-accent-ui)]  // Soft Coral #ff7850
text-stone-600                  // Muted text

// Headings
className="font-serif text-4xl md:text-5xl lg:text-6xl"

// Labels/Overlines
className="font-mono text-xs uppercase tracking-[0.3em]"

// Body
className="font-sans text-base md:text-lg"

// Section padding
className="py-24 md:py-32"

// Container
className="container mx-auto px-4 md:px-6 lg:px-8"

// Grid gaps
className="gap-6 md:gap-8"

transition: {
  type: "spring",
  stiffness: 100,  // "Heavy" feel
  damping: 20,
  mass: 1.2,
}

const prefersReducedMotion = useReducedMotion();
// Apply to all Framer Motion variants

// Mobile-first breakpoints
text-2xl md:text-4xl lg:text-6xl
grid-cols-1 md:grid-cols-2 lg:grid-cols-3

<Image
  src={image}
  alt="Descriptive text"
  width={800}
  height={600}
  sizes="(max-width: 768px) 100vw, 50vw"
  loading="lazy"
  placeholder="blur"
  blurDataURL={blurData}
/>