// features/{{kebabCase featureName}}/components/{{kebabCase sectionName}}-section.tsx
'use client';

import { useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useGSAP } from '@gsap/react';
import { durations } from '@/lib/design-tokens';

gsap.registerPlugin(ScrollTrigger);

export function {{pascalCase sectionName}}Section() {
  const containerRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    const prefersReducedMotion = window.matchMedia(
      '(prefers-reduced-motion: reduce)'
    ).matches;

    if (prefersReducedMotion) return;

    gsap.from('.{{kebabCase sectionName}}-item', {
      y: 40,
      opacity: 0,
      stagger: 0.1,
      duration: durations.base,
      ease: 'power2.out',
      scrollTrigger: {
        trigger: containerRef.current,
        start: 'top 80%',
        toggleActions: 'play none none none',
      },
    });
  }, { scope: containerRef });

  return (
    <section ref={containerRef} className="{{kebabCase sectionName}}-section">
      {/* {{pascalCase sectionName}} content */}
      <div className="{{kebabCase sectionName}}-item">
        {/* Item content */}
      </div>
    </section>
  );
}