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

const page = getEntityPage("momente");

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

const momentIcons = [
  Sparkles,
  UsersRound,
  CalendarDays,
  Radio,
  Megaphone,
  ShieldCheck,
  FileText
];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section moments-page" aria-labelledby="moments-title">
        <div className="moments-intro">
          <CalendarDays aria-hidden="true" />
          <div>
            <p className="entity-kicker">Momentul potrivit</p>
            <h2 id="moments-title">{campaignMomentsPlanner.title}</h2>
            <p>{campaignMomentsPlanner.summary}</p>
          </div>
        </div>

        <div className="moments-positioning">
          <Clock3 aria-hidden="true" />
          <p>{campaignMomentsPlanner.positioning}</p>
        </div>
      </section>

      <section className="entity-section moments-promise" aria-labelledby="moments-promise-title">
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="moments-promise-title">Promovare cu sens, nu doar zgomot</h2>
          <p>{campaignMomentsPlanner.promise}</p>
        </div>
      </section>

      <section className="entity-section moments-list" aria-labelledby="moments-list-title">
        <div className="moments-section-head">
          <Megaphone aria-hidden="true" />
          <div>
            <h2 id="moments-list-title">Sapte momente in care o campanie poate avea sens</h2>
            <p>
              Fiecare perioada poate face altceva pentru brandul tau: memorare
              prin radio, prezenta la eveniment, incredere prin interviu sau
              dovada care ramane dupa.
            </p>
          </div>
        </div>

        <div className="moments-card-list">
          {campaignMomentsPlanner.moments.map((moment, index) => {
            const Icon = momentIcons[index] || CalendarDays;

            return (
              <article data-moment key={moment.label}>
                <div className="moments-card-main">
                  <Icon aria-hidden="true" />
                  <span>{moment.timing}</span>
                  <h3>{moment.label}</h3>
                </div>
                <div className="moments-card-detail">
                  <div>
                    <h4>Pentru cine</h4>
                    <p>{moment.bestFor}</p>
                  </div>
                  <div>
                    <h4>Directie buna</h4>
                    <p>{moment.recommendedPath}</p>
                  </div>
                  <div>
                    <h4>Mesaj si dovada</h4>
                    <p>{moment.message}</p>
                    <p>{moment.proof}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section moments-planning" aria-labelledby="moments-planning-title">
        <div>
          <CheckCircle2 aria-hidden="true" />
          <div>
            <h2 id="moments-planning-title">Cum pregatim momentul inainte</h2>
            <p>
              O campanie sezoniera buna nu inseamna doar un mesaj trimis in
              ultima zi. Inseamna un fir simplu: moment, idee, canal, aprobare
              si dovada.
            </p>
          </div>
        </div>

        <div className="moments-step-list">
          {campaignMomentsPlanner.planningSteps.map((step) => (
            <p data-moment-step key={step}>
              <CheckCircle2 aria-hidden="true" />
              <span>{step}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section moments-channels" aria-labelledby="moments-channels-title">
        <Radio aria-hidden="true" />
        <div>
          <h2 id="moments-channels-title">Alegem canalul dupa rol, nu dupa moda</h2>
          <p>
            Nu alegem formatul pentru ca suna bine. Alegem canalul care poate
            ajuta mesajul tau sa fie auzit, vazut, inteles sau pastrat dupa
            campanie.
          </p>
        </div>

        <div className="moments-channel-list">
          {campaignMomentsPlanner.channelMix.map((item) => (
            <article data-moment-channel key={item.channel}>
              <h3>{item.channel}</h3>
              <p>{item.role}</p>
              <strong>{item.goodWhen}</strong>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section moments-limits" aria-labelledby="moments-limits-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="moments-limits-title">Ce stabilim pentru momentul potrivit</h2>
            <p>
              Stabilim perioada, canalul, mesajul si materialul final inainte
              de campanie, ca promovarea sa nu ramana doar o idee buna facuta
              prea tarziu.
            </p>
          </div>
        </div>

        <div className="moments-limit-list">
          {campaignMomentsPlanner.notIncluded.map((item) => (
            <p data-moment-limit key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section moments-next" aria-labelledby="moments-next-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="moments-next-title">Cum incepe discutia</h2>
            <p>
              Trimite perioada dorita, tipul firmei, audienta, mesajul principal
              si ce dovada vrei sa ramana dupa campanie. De acolo alegem
              impreuna directia care poate aduce prezenta, nu doar zgomot.
            </p>
          </div>
        </div>

        <div className="moments-actions">
          <a className="button primary" href="/campanii">
            <CalendarDays aria-hidden="true" />
            Vezi campaniile pe obiectiv
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

      <section className="entity-section moments-sources" aria-labelledby="moments-sources-title">
        <h2 id="moments-sources-title">Exemple si repere pentru calendarul de campanie</h2>
        <div>
          {campaignMomentsPlanner.sourceUrls.map((url) => (
            <a data-moment-source href={url} key={url}>
              <span>{getPublicSourceLabel(url)}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}