app/frontend/src/components/StudioSection.tsx

import type { SeedVoice, StudioNarrative } from "../content/types";

interface StudioSectionProps {
  narrative: StudioNarrative;
  seedLibrary: SeedVoice[];
}

export function StudioSection({ narrative, seedLibrary }: StudioSectionProps) {
  return (
    <div className="studio-layout">
      <div className="studio-story">
        <h3>{narrative.headline}</h3>
        <p>{narrative.body}</p>
        <div className="pillar-grid">
          {narrative.pillars.map((pillar) => (
            <article key={pillar.title} className="pillar-card">
              <h4>{pillar.title}</h4>
              <p>{pillar.description}</p>
            </article>
          ))}
        </div>
      </div>
      <div className="studio-assets">
        <div className="image-card">
          <img src="/public/studio-surface.svg" alt="Aether Voice Studio workflow illustration" />
        </div>
        <div className="seed-list">
          <div className="seed-list-head">
            <h4>Seed voice library</h4>
            <span>{seedLibrary.length} curated entries</span>
          </div>
          {seedLibrary.map((voice) => (
            <article key={voice.id} className="seed-card">
              <div>
                <h5>{voice.name}</h5>
                <p>{voice.persona}</p>
              </div>
              <span className="route-pill">{voice.route}</span>
              <p className="seed-purpose">{voice.bestFor}</p>
              <div className="tag-row">
                {voice.styleTags.map((tag) => (
                  <span key={tag}>{tag}</span>
                ))}
              </div>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}