interface DynamicScentNotesBreakdownProps {
  payload: any;
}

export default function DynamicScentNotesBreakdown({ payload }: DynamicScentNotesBreakdownProps) {
  const { title, description, topNotes, heartNotes, baseNotes } = payload || {};

  return (
    <section className="py-20 px-6 bg-spa-light">
      <div className="max-w-5xl mx-auto text-center">
        <h2 className="text-3xl md:text-5xl font-serif text-spa-forest mb-6">
          {title || 'Scent Notes'}
        </h2>
        {description && (
          <p className="text-lg text-spa-stone/80 max-w-2xl mx-auto mb-16">
            {description}
          </p>
        )}
        
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          <div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
            <h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Top Notes</h3>
            <p className="text-spa-stone font-light leading-relaxed">
              {topNotes || 'The initial, lighter smells of the fragrance.'}
            </p>
          </div>
          
          <div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
            <h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Heart Notes</h3>
            <p className="text-spa-stone font-light leading-relaxed">
              {heartNotes || 'The core of the fragrance, emerging just after the top notes.'}
            </p>
          </div>
          
          <div className="p-8 bg-white rounded-2xl shadow-sm border border-spa-stone/10">
            <h3 className="text-xl font-bold uppercase tracking-widest text-spa-forest mb-4">Base Notes</h3>
            <p className="text-spa-stone font-light leading-relaxed">
              {baseNotes || 'The deepest, richest scents that linger the longest.'}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}