import type { Metadata } from "next";
import { SiteFrame } from "../../components/SiteFrame/SiteFrame";
import { ContactForm } from "../../components/ContactForm/ContactForm";
import { JsonLd } from "@/app/lib/structured-data";
import { AnimatedDiv, AnimatedSection } from "@/app/components/Motion/AnimatedSection";
import styles from "../../inner-page.module.css";

export const metadata: Metadata = {
  title: "Contact",
  description: "Get in touch with Meliorate for product, growth, and partnership inquiries.",
  alternates: { canonical: "/contact" },
  openGraph: {
    title: "Contact Meliorate",
    description: "Reach out to Meliorate for product, growth, and partnership inquiries.",
    url: "/contact",
  },
};

const contactChannels = [
  {
    title: "Telegram",
    detail: "Best for direct founder-level conversations and quick updates.",
    label: "@adrian_stavljenic",
    href: "https://t.me/adrian_stavljenic",
  },
  {
    title: "LinkedIn",
    detail: "Connect with our team and follow company updates.",
    label: "Meliorate on LinkedIn",
    href: "https://www.linkedin.com/company/73263460",
  },
];

export default function ContactPage() {
  return (
    <SiteFrame>
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "BreadcrumbList",
          itemListElement: [
            { "@type": "ListItem", position: 1, name: "Home", item: "https://meliorate.pro" },
            { "@type": "ListItem", position: 2, name: "Contact", item: "https://meliorate.pro/contact" },
          ],
        }}
      />
      <JsonLd
        data={{
          "@context": "https://schema.org",
          "@type": "ContactPage",
          name: "Contact Meliorate",
          url: "https://meliorate.pro/contact",
          description: "Get in touch with Meliorate for product, growth, and partnership inquiries.",
        }}
      />
      <section className={styles.pageSection}>
        <div className={styles.container}>
          <AnimatedDiv>
            <span className={styles.eyebrow}>Contact</span>
            <h1 className={styles.title}>Let&apos;s build something meaningful.</h1>
            <p className={styles.description}>
              Reach out with your goals, constraints, and timeline. We usually respond within one
              business day and can scope an initial direction quickly.
            </p>
          </AnimatedDiv>

          <AnimatedDiv delay={0.15}>
            <div className={styles.cardGrid}>
              {contactChannels.map((channel) => (
                <article key={channel.title} className={styles.card}>
                  <h2 className={styles.cardTitle}>{channel.title}</h2>
                  <p className={styles.cardText}>{channel.detail}</p>
                  <a
                    className={styles.link}
                    href={channel.href}
                    target={channel.href.startsWith("http") ? "_blank" : undefined}
                    rel={channel.href.startsWith("http") ? "noreferrer" : undefined}
                  >
                    {channel.label}
                  </a>
                </article>
              ))}
            </div>
          </AnimatedDiv>

          <AnimatedSection className={styles.formSection} delay={0.2}>
            <h2 className={styles.formTitle}>Send project details</h2>
            <p className={styles.formDescription}>
              Tell us what you want to build, and we will help shape the fastest practical path.
            </p>
            <ContactForm />
          </AnimatedSection>

        </div>
      </section>
    </SiteFrame>
  );
}