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

const page = getEntityPage("proces");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section sponsor-process-page" aria-labelledby="process-title">
        <div className="sponsor-process-intro">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <p className="entity-kicker">De la primul mesaj la dovada</p>
            <h2 id="process-title">{sponsorCollaborationProcess.title}</h2>
            <p>{sponsorCollaborationProcess.summary}</p>
          </div>
        </div>

        <div className="sponsor-process-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorCollaborationProcess.positioning}</p>
        </div>
      </section>

      <section className="entity-section sponsor-process-promise" aria-labelledby="process-promise-title">
        <Radio aria-hidden="true" />
        <div>
          <h2 id="process-promise-title">Ce primesti dupa o colaborare bine pregatita</h2>
          <p>{sponsorCollaborationProcess.promise}</p>
        </div>
      </section>

      <section className="entity-section sponsor-process-steps" aria-labelledby="process-steps-title">
        <div className="sponsor-process-section-head">
          <Megaphone aria-hidden="true" />
          <div>
            <h2 id="process-steps-title">Sase pasi simpli</h2>
            <p>
              Procesul este gandit pentru o discutie umana: trimiti ce conteaza,
              iar Pop Media pregateste mesajul, materialele si dovada de
              follow-up.
            </p>
          </div>
        </div>

        <div className="sponsor-process-step-list">
          {sponsorCollaborationProcess.steps.map((step) => (
            <article data-sponsor-process-step key={step.phase}>
              <div className="sponsor-process-step-main">
                <span>{step.phase}</span>
                <h3>{step.title}</h3>
                <p>{step.sponsorGets}</p>
              </div>
              <div className="sponsor-process-step-detail">
                <div>
                  <h4>Ce trimiti</h4>
                  <p>{step.sponsorNeeds}</p>
                </div>
                <div>
                  <h4>Ce face Pop Media</h4>
                  <p>{step.popMediaDoes}</p>
                </div>
                <div>
                  <h4>Ce se aproba</h4>
                  <p>{step.approval}</p>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-process-approval" aria-labelledby="process-approval-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="process-approval-title">Ce stabilim inainte de publicare</h2>
            <p>
              O colaborare buna nu te lasa sa ghicesti. Mesajul, materialele si
              dovada se pun pe masa inainte de difuzare sau activare.
            </p>
          </div>
        </div>

        <div className="sponsor-process-checklist">
          {sponsorCollaborationProcess.approvalChecklist.map((item) => (
            <p data-sponsor-process-approval key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-process-editorial" aria-labelledby="process-editorial-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="process-editorial-title">Linie editoriala si continut sponsorizat</h2>
          <p>
            Mesajele sponsorilor trebuie sa fie clare, corecte si potrivite
            comunitatii. Separarea dintre promovare si context editorial ramane
            vizibila, iar materialele sensibile se folosesc doar dupa acord.
          </p>
        </div>
      </section>

      <section className="entity-section sponsor-process-stops" aria-labelledby="process-stops-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="process-stops-title">Cum pastram propunerea clara</h2>
            <p>
              O propunere buna este scurta, verificabila si usor de explicat
              mai departe in echipa ta sau catre parteneri.
            </p>
          </div>
        </div>

        <div className="sponsor-process-stop-list">
          {sponsorCollaborationProcess.decisionStops.map((item) => (
            <p data-sponsor-process-stop key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-process-next" aria-labelledby="process-next-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="process-next-title">Cum incepe corect</h2>
            <p>{sponsorCollaborationProcess.nextStep}</p>
          </div>
        </div>

        <div className="sponsor-process-actions">
          <a className="button primary" href="/contact">
            <Mail aria-hidden="true" />
            Contact
          </a>
          <a className="button secondary" href="/pachete">
            <ClipboardCheck aria-hidden="true" />
            Vezi pachete
          </a>
          <a className="button secondary" href="/dovada">
            <BadgeCheck aria-hidden="true" />
            Vezi dovada
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

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