import type { Metadata } from "next";
import { FiInstagram } from "react-icons/fi";
import { ContactForm } from "@/components/contact-form";
import { PageHero } from "@/components/page-hero";

export const metadata: Metadata = {
  title: "Contato",
  description:
    "Entre em contato com o SelahBeat para parcerias, eventos, igrejas, imprensa, licenciamento e colaborações.",
  alternates: { canonical: "/contato" },
};

export default function ContactPage() {
  return (
    <main id="conteudo">
      <PageHero
        eyebrow="VAMOS CONVERSAR"
        title="Boas conexões também começam com uma mensagem."
        description="Parcerias, eventos, licenciamento, imprensa, igrejas e colaborações: escolha o assunto e conte o contexto."
      />
      <section className="section contact-section">
        <div className="shell contact-grid">
          <aside className="contact-sidebar" data-reveal>
            <span className="eyebrow">CONTATO OFICIAL</span>
            <h2>Som com propósito encontra pessoas com propósito.</h2>
            <p>
              Para agilizar a conversa, inclua datas, cidade, formato e objetivo
              do projeto sempre que possível.
            </p>
            <div className="contact-channels">
              <a
                href="https://www.instagram.com/selah.beat/"
                target="_blank"
                rel="noreferrer"
              >
                <FiInstagram />
                <span>
                  <small>INSTAGRAM</small>
                  @selah.beat
                </span>
              </a>
            </div>
            <p>
              Enquanto um e-mail oficial não é divulgado, utilize o formulário
              ou o Instagram para iniciar o contato.
            </p>
          </aside>
          <ContactForm />
        </div>
      </section>
    </main>
  );
}