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 {
  getEntityPage,
  getPublicSourceLabel,
  siteConfig,
  sponsorCampaignPaths
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("campanii");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section campaign-paths-page" aria-labelledby="campaign-paths-title">
        <div className="campaign-paths-intro">
          <Megaphone aria-hidden="true" />
          <div>
            <p className="entity-kicker">Obiectiv inainte de format</p>
            <h2 id="campaign-paths-title">{sponsorCampaignPaths.title}</h2>
            <p>{sponsorCampaignPaths.summary}</p>
          </div>
        </div>

        <div className="campaign-paths-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorCampaignPaths.positioning}</p>
        </div>
      </section>

      <section className="entity-section campaign-principles" aria-labelledby="campaign-principles-title">
        <div className="campaign-paths-section-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="campaign-principles-title">Patru reguli pentru o campanie sanatoasa</h2>
            <p>
              Cand obiectivul este clar, pachetul devine mai usor de explicat,
              de aprobat si de verificat dupa colaborare.
            </p>
          </div>
        </div>

        <div className="campaign-principle-grid">
          {sponsorCampaignPaths.principles.map((principle, index) => (
            <article key={principle.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h3>{principle.title}</h3>
              <p>{principle.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section campaign-objectives" aria-labelledby="campaign-objectives-title">
        <div className="campaign-paths-section-head">
          <Radio aria-hidden="true" />
          <div>
            <p className="entity-kicker">Alege directia</p>
            <h2 id="campaign-objectives-title">Ce vrei sa ramana in mintea oamenilor?</h2>
            <p>
              Alegem directia potrivita dupa obiectiv, apoi construim oferta in
              jurul publicului, momentului si dovezii care trebuie sa ramana.
            </p>
          </div>
        </div>

        <div className="campaign-objective-list">
          {sponsorCampaignPaths.paths.map((path, index) => (
            <article key={path.objective}>
              <div className="campaign-objective-main">
                <span>{String(index + 1).padStart(2, "0")}</span>
                <h3>{path.objective}</h3>
                <p>{path.buyerSituation}</p>
                <strong>{path.recommendedPath}</strong>
              </div>

              <div className="campaign-objective-details">
                <div>
                  <h4>Ce poate include</h4>
                  <ul>
                    {path.mediaMix.map((item) => (
                      <li key={item}>
                        <CheckCircle2 aria-hidden="true" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h4>Dovada utila dupa</h4>
                  <p>{path.proofAfter}</p>
                  <small>{path.nextQuestion}</small>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section campaign-trust" aria-labelledby="campaign-trust-title">
        <div>
          <BadgeCheck aria-hidden="true" />
          <div>
            <h2 id="campaign-trust-title">Ce stabilim inainte de oferta</h2>
            <p>
              O campanie buna devine mai usor de aprobat cand este clar unde
              apare mesajul, ce ramane dupa si cum pot fi folosite materialele
              mai departe.
            </p>
          </div>
        </div>

        <div className="campaign-trust-list">
          {sponsorCampaignPaths.trustChecklist.map((item) => (
            <p key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section campaign-next" aria-labelledby="campaign-next-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="campaign-next-title">Cum incepe discutia</h2>
            <p>{sponsorCampaignPaths.nextStep}</p>
          </div>
        </div>

        <div className="campaign-actions">
          <a className="button primary" href="/media-kit">
            <FileText aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href="/potrivire">
            <UsersRound aria-hidden="true" />
            Verifica potrivirea
          </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 campaign-sources" aria-labelledby="campaign-sources-title">
        <h2 id="campaign-sources-title">Exemple si repere pentru traseele de campanie</h2>
        <div>
          {sponsorCampaignPaths.sourceUrls.map((url) => (
            <a href={url} key={url}>
              <span>{getPublicSourceLabel(url)}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}