import { platforms } from "@/data/platforms";
import { PlatformIcon } from "@/components/platform-icon";
import { SectionHeading } from "@/components/section-heading";
import { StreamingLinks } from "@/components/streaming-links";

export function PlatformsSection() {
  return (
    <section className="section platforms-section">
      <div className="shell">
        <SectionHeading
          eyebrow="OUÇA ONDE ESTIVER"
          title="Uma mensagem. Todas as plataformas."
          description="Spotify, Apple Music, Amazon Music, Deezer, YouTube e YouTube Music já conectados."
          align="center"
        />

        <div className="platform-cloud" data-reveal aria-hidden="true">
          {platforms.map((platform) => (
            <div
              key={platform.id}
              className={platform.confirmed ? "is-live" : "is-soon"}
            >
              <PlatformIcon id={platform.id} />
              <span>{platform.shortName}</span>
              {!platform.confirmed && <small>EM BREVE</small>}
            </div>
          ))}
        </div>

        <StreamingLinks context="platforms_section" className="platforms-cta" />
      </div>
    </section>
  );
}