import type { Metadata } from "next";
import {
  ArrowUpRight,
  CheckCircle2,
  FileCheck2,
  Radio,
  UsersRound
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import { getEntityPage, getPublicSourceLabel, sponsorProofPackBlueprint } from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("parteneri");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section sponsor-proof-blueprint" aria-labelledby="proof-blueprint-title">
        <div className="sponsor-proof-intro">
          <FileCheck2 aria-hidden="true" />
          <div>
            <h2 id="proof-blueprint-title">{sponsorProofPackBlueprint.title}</h2>
            <p>{sponsorProofPackBlueprint.summary}</p>
          </div>
        </div>

        <div className="sponsor-proof-positioning">
          <strong>Linia corecta de vanzare</strong>
          <p>{sponsorProofPackBlueprint.positioning}</p>
        </div>

        <div className="sponsor-proof-stages" aria-label="Traseu proof pack">
          {sponsorProofPackBlueprint.stages.map((stage, index) => {
            const Icon = index === 0 ? Radio : index === 1 ? UsersRound : FileCheck2;

            return (
              <article key={stage.phase}>
                <div className="sponsor-proof-phase">
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  <Icon aria-hidden="true" />
                  <h3>{stage.phase}</h3>
                </div>
                <div className="sponsor-proof-copy">
                  <strong>{stage.sponsorQuestion}</strong>
                  <p>{stage.popMediaAnswer}</p>
                  <ul>
                    {stage.proofItems.map((item) => (
                      <li key={item}>
                        <CheckCircle2 aria-hidden="true" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section sponsor-proof-evidence" aria-labelledby="proof-evidence-title">
        <div>
          <h2 id="proof-evidence-title">Ce face o colaborare mai usor de aprobat</h2>
          <p>
            Un pachet bun arata publicul, momentele in care brandul devine
            vizibil si ce material ramane dupa colaborare.
          </p>
        </div>
        <div className="sponsor-proof-columns">
          <article>
            <h3>Semnale de incredere</h3>
            {sponsorProofPackBlueprint.decisionSignals.map((signal) => (
              <p key={signal}>{signal}</p>
            ))}
          </article>
          <article>
            <h3>Unde il folosim</h3>
            {sponsorProofPackBlueprint.sampleUseCases.map((useCase) => (
              <p key={useCase}>{useCase}</p>
            ))}
          </article>
        </div>
        <div className="sponsor-proof-sources" aria-label="Surse pentru proof pack">
          {sponsorProofPackBlueprint.sourceUrls.map((url) => (
            <a href={url} key={url}>
              <span>{getPublicSourceLabel(url)}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}