import type { Metadata } from "next";
import Image from "next/image";
import {
  FiBookOpen,
  FiCompass,
  FiCrosshair,
  FiFeather,
  FiShield,
  FiStar,
} from "react-icons/fi";
import { CreativeProcess } from "@/components/creative-process";
import { PageHero } from "@/components/page-hero";
import { SectionHeading } from "@/components/section-heading";

export const metadata: Metadata = {
  title: "Sobre",
  description:
    "Conheça o SelahBeat, projeto de música cristã contemporânea que une fé, direção artística humana, criatividade e tecnologia.",
  alternates: { canonical: "/sobre" },
};

const values = [
  ["Fidelidade bíblica", "A mensagem nasce da Palavra e permanece responsável diante dela.", FiBookOpen],
  ["Cristo no centro", "A estética serve à mensagem. A mensagem aponta para Jesus.", FiCrosshair],
  ["Excelência", "Cada decisão artística busca clareza, qualidade e coerência.", FiStar],
  ["Originalidade", "Linguagem própria, identidade autoral e coragem para criar.", FiFeather],
  ["Integridade", "Transparência sobre o processo e responsabilidade com o público.", FiShield],
  ["Intencionalidade", "Nada é apenas efeito: ritmo, imagem e palavra carregam propósito.", FiCompass],
] as const;

export default function AboutPage() {
  return (
    <main id="conteudo">
      <PageHero
        eyebrow="IDENTIDADE / PROPÓSITO"
        title="Uma marca musical. Uma mensagem que permanece."
        description="Fé, criatividade, direção artística e tecnologia reunidas para comunicar Cristo com clareza e linguagem contemporânea."
        image="/images/brand/hero.webp"
      />

      <section className="section about-intro">
        <div className="shell about-intro-grid">
          <div data-reveal>
            <span className="eyebrow">QUEM SOMOS</span>
            <h2>Ferramentas novas. Fundamento eterno.</h2>
          </div>
          <div className="about-prose" data-reveal>
            <p>
              O SelahBeat é um projeto de música cristã contemporânea que une fé,
              criatividade, direção artística e tecnologia.
            </p>
            <p>
              As músicas são desenvolvidas a partir de letras autorais,
              construídas sobre base bíblica sólida, linguagem contemporânea e
              intencionalidade espiritual.
            </p>
            <p>
              Cada faixa passa por um processo de direção artística que define
              ritmo, atmosfera, instrumentação, dinâmica e emoção. A inteligência
              artificial é utilizada como ferramenta de produção, nunca como
              substituição da autoria humana, da mensagem ou do propósito.
            </p>
          </div>
        </div>
      </section>

      <section className="about-visual">
        <Image
          src="/images/brand/channel.webp"
          alt="Identidade SelahBeat em preto e dourado"
          fill
          sizes="100vw"
        />
        <div className="about-visual-overlay" />
        <div className="shell about-visual-copy" data-reveal>
          <span>MISSÃO</span>
          <h2>
            Usar as ferramentas do presente para comunicar verdades eternas.
          </h2>
        </div>
      </section>

      <section className="section values-section">
        <div className="shell">
          <SectionHeading
            eyebrow="O QUE SUSTENTA O SOM"
            title="Valores que não entram em modo aleatório."
            description="O processo muda, as ferramentas evoluem e a linguagem acompanha o tempo. O centro permanece."
          />
          <div className="values-grid">
            {values.map(([title, description, Icon], index) => (
              <article key={title} data-reveal>
                <span>0{index + 1}</span>
                <Icon />
                <h3>{title}</h3>
                <p>{description}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CreativeProcess />
    </main>
  );
}