import type { Metadata } from "next";
import {
  ArrowUpRight,
  BadgeCheck,
  CheckCircle2,
  ClipboardCheck,
  FileText,
  Mail,
  Megaphone,
  Radio,
  ShieldCheck,
  UsersRound
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  advertiserPreCallBrief,
  advertisingPackageLadder,
  getEntityPage,
  siteConfig,
  sourceRegistry,
  sponsorMediaKit,
  sponsorProofPackBlueprint
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("media-kit");

export const metadata: Metadata = buildPageMetadata("media-kit");

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section media-kit-page" aria-labelledby="media-kit-title">
        <div className="media-kit-intro">
          <FileText aria-hidden="true" />
          <div>
            <h2 id="media-kit-title">{sponsorMediaKit.title}</h2>
            <p>{sponsorMediaKit.summary}</p>
          </div>
        </div>

        <div className="media-kit-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorMediaKit.positioning}</p>
        </div>

        <div className="media-kit-for" aria-label="Pentru cine este media kit-ul">
          {sponsorMediaKit.bestFor.map((item) => (
            <p key={item}>
              <UsersRound aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section media-kit-sections" aria-labelledby="media-kit-contents-title">
        <div className="media-kit-intro">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="media-kit-contents-title">Ce trebuie sa fie clar inainte de oferta</h2>
            <p>
              Un media kit bun reduce intrebarile de baza inainte de oferta:
              cine suntem, cine asculta, ce poate fi cumparat si ce ramane dupa
              campanie.
            </p>
          </div>
        </div>

        <div className="media-kit-section-grid">
          {sponsorMediaKit.kitSections.map((section, index) => (
            <article key={section.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h3>{section.title}</h3>
              <p>{section.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section media-kit-packages" aria-labelledby="media-kit-packages-title">
        <div className="media-kit-intro">
          <Radio aria-hidden="true" />
          <div>
            <h2 id="media-kit-packages-title">Pachetele care merita discutate primele</h2>
            <p>
              Alegem directia potrivita dupa obiectiv, public, perioada si
              materialul necesar, apoi pregatim o propunere clara pentru
              prima discutie.
            </p>
          </div>
        </div>

        <div className="media-kit-package-list">
          {advertisingPackageLadder.map((pack) => (
            <article key={pack.name}>
              <div>
                <span>{pack.label}</span>
                <h3>{pack.name}</h3>
              </div>
              <p>{pack.bestFor}</p>
              <strong>{pack.fitSignal}</strong>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section media-kit-proof" aria-labelledby="media-kit-proof-title">
        <div className="media-kit-intro">
          <BadgeCheck aria-hidden="true" />
          <div>
            <h2 id="media-kit-proof-title">Ce face oferta mai usor de aprobat</h2>
            <p>
              Traseul complet este clar: inainte, in timpul si dupa campanie,
              plus materialele care pot fi trimise mai departe.
            </p>
          </div>
        </div>

        <div className="media-kit-proof-grid">
          <article>
            <h3>Intrebari de decizie</h3>
            {sponsorMediaKit.sponsorDecisionQuestions.map((question) => (
              <p key={question}>
                <CheckCircle2 aria-hidden="true" />
                <span>{question}</span>
              </p>
            ))}
          </article>
          <article>
            <h3>Proof pack dupa colaborare</h3>
            {sponsorProofPackBlueprint.decisionSignals.map((signal) => (
              <p key={signal}>
                <CheckCircle2 aria-hidden="true" />
                <span>{signal}</span>
              </p>
            ))}
          </article>
        </div>
      </section>

      <section className="entity-section media-kit-next" aria-labelledby="media-kit-next-title">
        <div>
          <h2 id="media-kit-next-title">Ce cerem inainte sa pregatim oferta</h2>
          <p>{sponsorMediaKit.nextStep}</p>
        </div>

        <div className="media-kit-brief-list">
          {advertiserPreCallBrief.map((item) => (
            <article key={item.question}>
              <h3>{item.question}</h3>
              <p>{item.guidance}</p>
            </article>
          ))}
        </div>

        <div className="media-kit-actions">
          <a className="button primary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            Cere media kit-ul
          </a>
          <a className="button secondary" href="/publicitate">
            <Radio aria-hidden="true" />
            Vezi publicitate
          </a>
          <a className="button secondary" href="/pachete">
            <Megaphone aria-hidden="true" />
            Vezi pachete
          </a>
          <a className="button secondary" href="/potrivire">
            <UsersRound aria-hidden="true" />
            Vezi potrivirea
          </a>
          <a className="button secondary" href="/campanii">
            <ClipboardCheck aria-hidden="true" />
            Alege campania
          </a>
          <a className="button secondary" href="/dovada">
            <BadgeCheck aria-hidden="true" />
            Vezi dovada
          </a>
        </div>
      </section>

      <section className="entity-section media-kit-source-strip" aria-labelledby="media-kit-source-title">
        <h2 id="media-kit-source-title">Repere care sustin discutia</h2>
        <div>
          {sourceRegistry.map((source) => (
            <a href={source.url} key={source.url}>
              <span>{source.label}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}