import type { Metadata } from "next";
import {
  CalendarDays,
  CheckCircle2,
  ClipboardCheck,
  Megaphone,
  Radio,
  Send
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  advertiserPreCallBrief,
  advertisingPackageLadder,
  getEntityPage
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("publicitate");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section ad-package-selector" aria-labelledby="ad-package-title">
        <div className="ad-package-intro">
          <Megaphone aria-hidden="true" />
          <div>
            <h2 id="ad-package-title">Alege pachetul de discutie potrivit</h2>
            <p>
              Pornim de la ce trebuie sa inteleaga comunitatea, unde trebuie
              sa ramana mesajul si ce dovada ai nevoie dupa campanie.
            </p>
          </div>
        </div>

        <div className="ad-package-ladder" aria-label="Pachete de publicitate Pop Media">
          {advertisingPackageLadder.map((pack, index) => {
            const Icon = index === 0 ? Radio : index === 1 ? Send : CalendarDays;

            return (
              <article key={pack.name}>
                <div className="ad-package-heading">
                  <span>{pack.label}</span>
                  <Icon aria-hidden="true" />
                  <h3>{pack.name}</h3>
                </div>
                <div className="ad-package-copy">
                  <p>{pack.bestFor}</p>
                  <strong>{pack.fitSignal}</strong>
                  <ul>
                    {pack.includes.map((item) => (
                      <li key={item}>
                        <CheckCircle2 aria-hidden="true" />
                        <span>{item}</span>
                      </li>
                    ))}
                  </ul>
                  <div className="ad-package-boundary">
                    <span>Potrivit pentru</span>
                    <p>{pack.notFor}</p>
                  </div>
                  <small>{pack.nextStep}</small>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section advertiser-brief" aria-labelledby="advertiser-brief-title">
        <div className="advertiser-brief-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="advertiser-brief-title">Ce pregatim inainte de oferta</h2>
            <p>
              O discutie buna economiseste timp si pastreaza oferta
              profesionista. Aceste raspunsuri ne spun ce pachet merita
              construit si ce materiale trebuie pregatite.
            </p>
          </div>
        </div>

        <div className="advertiser-brief-grid">
          {advertiserPreCallBrief.map((item) => (
            <article key={item.question}>
              <h3>{item.question}</h3>
              <p>{item.guidance}</p>
            </article>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}