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

const page = getEntityPage("pachete");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section package-menu-page" aria-labelledby="package-menu-title">
        <div className="package-menu-intro">
          <Megaphone aria-hidden="true" />
          <div>
            <p className="entity-kicker">Meniu de discutie</p>
            <h2 id="package-menu-title">{sponsorPackageMenu.title}</h2>
            <p>{sponsorPackageMenu.summary}</p>
          </div>
        </div>

        <div className="package-menu-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorPackageMenu.positioning}</p>
        </div>
      </section>

      <section className="entity-section package-principles" aria-labelledby="package-principles-title">
        <div className="package-section-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="package-principles-title">Cum alegem pachetul corect</h2>
            <p>
              Un pachet bun nu incepe cu pretul. Incepe cu audienta,
              obiectivul, contextul si dovada care trebuie sa ramana dupa.
            </p>
          </div>
        </div>

        <div className="package-principle-grid">
          {sponsorPackageMenu.selectionPrinciples.map((principle) => (
            <article key={principle.title}>
              <BadgeCheck aria-hidden="true" />
              <h3>{principle.title}</h3>
              <p>{principle.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section package-options" aria-labelledby="package-options-title">
        <div className="package-section-head">
          <FileText aria-hidden="true" />
          <div>
            <h2 id="package-options-title">Pachete care pot fi discutate</h2>
            <p>
              Fiecare directie poate fi adaptata dupa perioada, eveniment,
              materialele aprobate si nivelul de dovada dorit.
            </p>
          </div>
        </div>

        <div className="package-option-grid">
          {sponsorPackageMenu.packages.map((pack) => (
            <article key={pack.name}>
              <div className="package-option-top">
                <span>{pack.badge}</span>
                <h3>{pack.name}</h3>
                <p>{pack.bestFor}</p>
              </div>

              <strong>{pack.sponsorQuestion}</strong>

              <ul>
                {pack.includes.map((item) => (
                  <li key={item}>
                    <CheckCircle2 aria-hidden="true" />
                    <span>{item}</span>
                  </li>
                ))}
              </ul>

              <div className="package-proof">
                <span>Dovada dupa</span>
                <p>{pack.proofAfter}</p>
              </div>

              <a href={pack.bestNextPage}>
                Vezi pagina potrivita
                <ArrowUpRight aria-hidden="true" />
              </a>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section package-preoffer" aria-labelledby="package-preoffer-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="package-preoffer-title">Ce trebuie clarificat inainte de oferta</h2>
            <p>
              Daca aceste raspunsuri sunt clare, oferta devine mai scurta, mai
              serioasa si mai usor de aprobat.
            </p>
          </div>
        </div>

        <div className="package-preoffer-list">
          {sponsorPackageMenu.preOfferQuestions.map((question) => (
            <p key={question}>
              <CheckCircle2 aria-hidden="true" />
              <span>{question}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section package-not-included" aria-labelledby="package-not-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <h2 id="package-not-title">Cum transformam pachetul in oferta</h2>
          <p>
            Pachetul devine concret dupa ce stim obiectivul tau,
            perioada, materialele disponibile si dovada dorita dupa campanie.
          </p>
        </div>

        <div className="package-not-list">
          {sponsorPackageMenu.notIncluded.map((item) => (
            <p key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section package-next" aria-labelledby="package-next-title">
        <div>
          <h2 id="package-next-title">Urmatorul pas</h2>
          <p>
            Alege pachetul cel mai apropiat si trimite un email scurt cu
            audienta dorita, perioada, mesajul principal si dovada de care ai
            nevoie dupa campanie.
          </p>
        </div>

        <div className="package-actions">
          <a className="button primary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
          <a className="button secondary" href="/media-kit">
            <FileText aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href="/campanii">
            <ClipboardCheck aria-hidden="true" />
            Alege dupa obiectiv
          </a>
        </div>
      </section>

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