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

const page = getEntityPage("dovada");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section proof-deliverables-page" aria-labelledby="proof-deliverables-title">
        <div className="proof-deliverables-intro">
          <BadgeCheck aria-hidden="true" />
          <div>
            <p className="entity-kicker">Dovada dupa colaborare</p>
            <h2 id="proof-deliverables-title">{sponsorProofDeliverables.title}</h2>
            <p>{sponsorProofDeliverables.summary}</p>
          </div>
        </div>

        <div className="proof-deliverables-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorProofDeliverables.positioning}</p>
        </div>
      </section>

      <section className="entity-section proof-promise" aria-labelledby="proof-promise-title">
        <Radio aria-hidden="true" />
        <div>
          <h2 id="proof-promise-title">Ce primesti dupa campanie</h2>
          <p>{sponsorProofDeliverables.proofPromise}</p>
        </div>
      </section>

      <section className="entity-section proof-deliverable-list" aria-labelledby="proof-list-title">
        <div className="proof-deliverables-section-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="proof-list-title">Livrabile care pot ramane dupa campanie</h2>
            <p>
              Nu toate colaborarile au nevoie de toate materialele. Alegem
              dovada potrivita inainte de oferta, ca sa stii ce poti folosi mai
              departe.
            </p>
          </div>
        </div>

        <div className="proof-deliverable-grid">
          {sponsorProofDeliverables.deliverables.map((item) => (
            <article key={item.name}>
              <div>
                <span>Livrabil</span>
                <h3>{item.name}</h3>
                <p>{item.whenUseful}</p>
              </div>
              <div>
                <h4>Ce poti primi</h4>
                <ul>
                  {item.whatSponsorGets.map((detail) => (
                    <li key={detail}>
                      <CheckCircle2 aria-hidden="true" />
                      <span>{detail}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <strong>{item.proofRole}</strong>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section proof-ledger" aria-labelledby="proof-ledger-title">
        <div className="proof-deliverables-section-head">
          <FileText aria-hidden="true" />
          <div>
            <h2 id="proof-ledger-title">Fisa simpla de dovada</h2>
            <p>
              Dupa campanie, trebuie sa poti vedea rapid ce a fost promis, unde
              a aparut si ce poti folosi mai departe.
            </p>
          </div>
        </div>

        <div className="proof-ledger-grid">
          {sponsorProofDeliverables.proofLedger.map((item) => (
            <article key={item.label}>
              <span>{item.label}</span>
              <p>{item.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section proof-approval" aria-labelledby="proof-approval-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="proof-approval-title">Ce trebuie aprobat inainte</h2>
            <p>
              O dovada buna se pregateste dinainte: mesaj, context, materiale
              aprobate si formatul pe care il poti folosi mai departe.
            </p>
          </div>
        </div>

        <div className="proof-approval-list">
          {sponsorProofDeliverables.approvalChecklist.map((item) => (
            <p key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section proof-not-included" aria-labelledby="proof-not-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <h2 id="proof-not-title">Ce stabilim pentru un material convingator</h2>
          <p>
            Aici stabilim ce trebuie sa fie verificabil, aprobat si usor de
            trimis mai departe dupa campanie.
          </p>
        </div>
        <div className="proof-not-list">
          {sponsorProofDeliverables.notIncluded.map((item) => (
            <p key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section proof-next" aria-labelledby="proof-next-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="proof-next-title">Cum se cere corect</h2>
            <p>{sponsorProofDeliverables.nextStep}</p>
          </div>
        </div>

        <div className="proof-actions">
          <a className="button primary" href="/campanii">
            <ClipboardCheck aria-hidden="true" />
            Alege campania
          </a>
          <a className="button secondary" href="/media-kit">
            <FileText aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

      <section className="entity-section proof-sources" aria-labelledby="proof-sources-title">
        <h2 id="proof-sources-title">Exemple si repere pentru dovada</h2>
        <div>
          {sponsorProofDeliverables.sourceUrls.map((url) => (
            <a href={url} key={url}>
              <span>{getPublicSourceLabel(url)}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}