import type { Metadata } from "next";
import {
  ArrowUpRight,
  BadgeCheck,
  Captions,
  CheckCircle2,
  FileText,
  Mail,
  Mic2,
  Radio,
  ShieldCheck,
  Sparkles,
  UsersRound,
  Video
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  getEntityPage,
  getPublicSourceLabel,
  interviewContentStudio,
  siteConfig
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("interviuri");

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

const formatIcons = [Radio, Video, UsersRound, BadgeCheck, Captions];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section interview-page" aria-labelledby="interview-title">
        <div className="interview-intro">
          <Mic2 aria-hidden="true" />
          <div>
            <p className="entity-kicker">Voce, context si incredere</p>
            <h2 id="interview-title">{interviewContentStudio.title}</h2>
            <p>{interviewContentStudio.summary}</p>
          </div>
        </div>

        <div className="interview-positioning">
          <Sparkles aria-hidden="true" />
          <p>{interviewContentStudio.positioning}</p>
        </div>
      </section>

      <section className="entity-section interview-promise" aria-labelledby="interview-promise-title">
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="interview-promise-title">Ce promitem corect</h2>
          <p>{interviewContentStudio.promise}</p>
        </div>
      </section>

      <section className="entity-section interview-formats" aria-labelledby="interview-formats-title">
        <div className="interview-section-head">
          <Mic2 aria-hidden="true" />
          <div>
            <h2 id="interview-formats-title">Cinci forme de interviu care pot deveni produs</h2>
            <p>
              Formatul se alege dupa invitat, eveniment, audienta si ce
              material trebuie sa ramana dupa campanie.
            </p>
          </div>
        </div>

        <div className="interview-format-list">
          {interviewContentStudio.formats.map((format, index) => {
            const Icon = formatIcons[index] ?? Mic2;

            return (
              <article data-interview-format key={format.label}>
                <div className="interview-format-main">
                  <Icon aria-hidden="true" />
                  <h3>{format.label}</h3>
                </div>
                <div className="interview-format-detail">
                  <div>
                    <h4>Pentru public</h4>
                    <p>{format.audienceValue}</p>
                  </div>
                  <div>
                  <h4>Pentru brand</h4>
                    <p>{format.sponsorValue}</p>
                  </div>
                  <div>
                    <h4>In productie</h4>
                    <p>{format.productionWork}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section interview-prep" aria-labelledby="interview-prep-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="interview-prep-title">Ce pregatim inainte de inregistrare</h2>
            <p>
              Interviul bun incepe inainte sa porneasca microfonul. Aici se
              clarifica invitatul, tema, limba, acordurile si materialul care
              poate ramane dupa publicare.
            </p>
          </div>
        </div>

        <div className="interview-prep-list">
          {interviewContentStudio.prepChecklist.map((item) => (
            <p data-interview-prep key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section interview-angles" aria-labelledby="interview-angles-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="interview-angles-title">Unghiuri sigure pentru sponsori</h2>
          <p>
            Brandul poate fi prezent natural cand alegem un unghi util, uman si
            verificabil.
          </p>
        </div>
        <div className="interview-angle-list">
          {interviewContentStudio.sponsorSafeAngles.map((item) => (
            <p data-interview-angle key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section interview-boundaries" aria-labelledby="interview-boundaries-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="interview-boundaries-title">Ce pregatim inainte de publicare</h2>
            <p>
              Aceasta este partea care protejeaza invitatul, brandul si Pop
              Media. O conversatie buna ramane clara si dupa ce este publicata.
            </p>
          </div>
        </div>

        <div className="interview-boundary-list">
          {interviewContentStudio.consentBoundaries.map((item) => (
            <p data-interview-boundary key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section interview-assets" aria-labelledby="interview-assets-title">
        <Captions aria-hidden="true" />
        <div>
          <h2 id="interview-assets-title">Ce poate ramane dupa interviu</h2>
          <p>
            Materialul de dupa ajuta publicul, brandul si motoarele de cautare
            sa inteleaga rapid despre ce a fost conversatia.
          </p>
        </div>
        <div className="interview-asset-list">
          {interviewContentStudio.reuseAssets.map((item) => (
            <p data-interview-asset key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section interview-next" aria-labelledby="interview-next-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="interview-next-title">Cum incepe discutia</h2>
            <p>
              Trimite invitatul, tema, limba, perioada, legatura cu comunitatea
              si ce fragment sau dovada trebuie sa ramana dupa publicare.
            </p>
          </div>
        </div>

        <div className="interview-actions">
          <a className="button primary" href="/contact">
            <Mail aria-hidden="true" />
            Contact
          </a>
          <a className="button secondary" href="/publicitate">
            <Radio aria-hidden="true" />
            Publicitate
          </a>
          <a className="button secondary" href="/dovada">
            <FileText aria-hidden="true" />
            Dovada
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

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