app/frontend/src/components/ArchitectureSection.tsx

import type { ArchitectureLayer } from "../content/types";

interface ArchitectureSectionProps {
  layers: ArchitectureLayer[];
}

export function ArchitectureSection({ layers }: ArchitectureSectionProps) {
  return (
    <div className="architecture-layout">
      <div className="image-card">
        <img src="/public/architecture-flow.svg" alt="Aether Voice Studio architecture diagram" />
      </div>
      <div className="architecture-grid">
        {layers.map((layer) => (
          <article key={layer.name} className="arch-card">
            <h3>{layer.name}</h3>
            <ul>
              {layer.items.map((item) => (
                <li key={item}>{item}</li>
              ))}
            </ul>
          </article>
        ))}
      </div>
    </div>
  );
}