import type { Metadata } from "next";
import { ArrowUpRight, CheckCircle2, FileText, Mail, ShieldCheck } from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  advertiserPreCallBrief,
  getEntityPage,
  siteConfig
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("contact");

export const metadata: Metadata = buildPageMetadata("contact");

const briefSubject = "Promovare Pop Media / Radio Belgia";
const briefBody = `Buna ziua,

As vrea sa discutam despre o promovare Pop Media / Radio Belgia.

1. Cui trebuie sa ajunga mesajul:
2. Ce pachet pare potrivit: Radio Start / Sponsor Eveniment / Partener:
3. Perioada sau evenimentul dorit:
4. Ce dovada ar fi utila dupa campanie:
5. Ce trebuie confirmat inainte de publicare:

Multumesc.`;

const briefMailto = `mailto:${siteConfig.email}?subject=${encodeURIComponent(
  briefSubject
)}&body=${encodeURIComponent(briefBody)}`;

const contactAssurances = [
  "Primul pas ramane simplu: un email clar, citit de echipa Pop Media.",
  "Discutia ramane pe email pana confirmam pachetul, perioada, materialele si aprobarea comerciala.",
  "Oferta se pregateste dupa obiectiv, audienta, perioada si livrabilele potrivite."
];

export default function ContactPage() {
  if (!page) {
    return null;
  }

  return (
    <EntityPageView page={page}>
      <section className="entity-section contact-brief-kit" aria-labelledby="brief-title">
        <div className="contact-brief-head">
          <FileText aria-hidden="true" />
          <div>
            <p className="entity-kicker">Primul mesaj</p>
            <h2 id="brief-title">Trimite un email pe care il putem transforma in oferta.</h2>
            <p>
              Cel mai bun prim mesaj nu trebuie sa fie lung. Trebuie doar sa
              ne spuna cui vrei sa ajunga promovarea, ce fel de prezenta cauti,
              perioada si ce material de follow-up ar fi util dupa campanie.
            </p>
          </div>
        </div>

        <div className="contact-brief-grid">
          {advertiserPreCallBrief.map((item, index) => (
            <article key={item.question}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h3>{item.question}</h3>
              <p>{item.guidance}</p>
            </article>
          ))}
        </div>

        <div className="contact-brief-actions">
          <a className="button secondary" href="/brief">
            <ArrowUpRight aria-hidden="true" />
            Vezi intrebarile pentru oferta
          </a>
          <a className="button primary" href={briefMailto}>
            <Mail aria-hidden="true" />
            Scrie emailul de inceput
          </a>
          <a className="button secondary" href="/media-kit">
            <ArrowUpRight aria-hidden="true" />
            Vezi media kit
          </a>
        </div>
      </section>

      <section className="entity-section contact-assurance" aria-labelledby="assurance-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <h2 id="assurance-title">Discutia ramane simpla si controlata.</h2>
        </div>
        <div className="contact-assurance-list">
          {contactAssurances.map((item) => (
            <p key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}