import type { Metadata } from "next";
import {
  ArrowUpRight,
  CalendarDays,
  CheckCircle2,
  ClipboardList,
  FileText,
  Mail,
  PackageCheck,
  ShieldCheck,
  Target,
  UsersRound,
  XCircle
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  getEntityPage,
  getPublicSourceLabel,
  siteConfig,
  sponsorOfferBrief
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("brief");

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

const fieldIcons = [
  Target,
  UsersRound,
  CalendarDays,
  PackageCheck,
  ShieldCheck,
  FileText
];

const briefBody = `${sponsorOfferBrief.emailTemplate.join("\n")}\n\nMultumesc.`;

const briefMailto = `mailto:${siteConfig.email}?subject=${encodeURIComponent(
  sponsorOfferBrief.emailSubject
)}&body=${encodeURIComponent(briefBody)}`;

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section offer-brief-page" aria-labelledby="offer-brief-title">
        <div className="offer-brief-intro">
          <ClipboardList aria-hidden="true" />
          <div>
            <p className="entity-kicker">Primul pas catre oferta</p>
            <h2 id="offer-brief-title">{sponsorOfferBrief.title}</h2>
            <p>{sponsorOfferBrief.summary}</p>
          </div>
        </div>

        <div className="offer-brief-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorOfferBrief.positioning}</p>
        </div>
      </section>

      <section className="entity-section offer-brief-fields" aria-labelledby="brief-fields-title">
        <div className="offer-brief-section-head">
          <Target aria-hidden="true" />
          <div>
            <p className="entity-kicker">Ce trebuie sa trimiti</p>
            <h2 id="brief-fields-title">Sase raspunsuri care fac oferta mai clara.</h2>
            <p>
              Nu avem nevoie de un text lung. Avem nevoie de cateva decizii
              simple, ca pachetul sa fie ales dupa obiectiv si dupa dovada
              care trebuie sa ramana.
            </p>
          </div>
        </div>

        <div className="offer-brief-field-list">
          {sponsorOfferBrief.briefFields.map((field, index) => {
            const Icon = fieldIcons[index] ?? ClipboardList;

            return (
              <article data-brief-field key={field.label}>
                <div className="offer-brief-field-label">
                  <Icon aria-hidden="true" />
                  <span>{field.label}</span>
                </div>
                <div className="offer-brief-field-copy">
                  <h3>{field.question}</h3>
                  <p>{field.guidance}</p>
                  <strong>{field.example}</strong>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section offer-brief-packages" aria-labelledby="brief-packages-title">
        <div>
          <PackageCheck aria-hidden="true" />
          <h2 id="brief-packages-title">Daca nu stii pachetul, alege directia.</h2>
          <p>
            Nu trebuie sa nimeresti produsul perfect din prima. Primul mesaj
            trebuie doar sa arate ce vrei sa obtii si ce material te ajuta dupa
            campanie.
          </p>
        </div>

        <div className="offer-brief-package-list">
          {sponsorOfferBrief.packageHints.map((hint) => (
            <article data-brief-package key={hint.label}>
              <span>{hint.label}</span>
              <h3>{hint.when}</h3>
              <p>{hint.next}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section offer-brief-email" aria-labelledby="brief-email-title">
        <div className="offer-brief-email-copy">
          <Mail aria-hidden="true" />
          <div>
            <p className="entity-kicker">Model de email</p>
            <h2 id="brief-email-title">Un mesaj scurt este suficient.</h2>
            <p>
              Modelul de mai jos deschide emailul tau si pastreaza primul pas
              simplu, clar si usor de transformat intr-o oferta.
            </p>
          </div>
        </div>

        <pre aria-label="Model de email pentru oferta">{briefBody}</pre>

        <div className="offer-brief-actions">
          <a className="button primary" href={briefMailto}>
            <Mail aria-hidden="true" />
            Scrie emailul pentru oferta
          </a>
          <a className="button secondary" href="/media-kit">
            <ArrowUpRight aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href="/pachete">
            <ArrowUpRight aria-hidden="true" />
            Vezi pachete
          </a>
        </div>
      </section>

      <section className="entity-section offer-brief-approval" aria-labelledby="brief-approval-title">
        <div>
          <CheckCircle2 aria-hidden="true" />
          <h2 id="brief-approval-title">Ce trebuie aprobat inainte.</h2>
        </div>
        <div className="offer-brief-checklist">
          {sponsorOfferBrief.approvalChecklist.map((item) => (
            <p data-brief-approval key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section offer-brief-limits" aria-labelledby="brief-limits-title">
        <div>
          <XCircle aria-hidden="true" />
          <h2 id="brief-limits-title">Ce stabilim inainte de oferta.</h2>
        </div>
        <div className="offer-brief-limit-list">
          {sponsorOfferBrief.notIncluded.map((item) => (
            <p data-brief-limit key={item}>
              <XCircle aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

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