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

const page = getEntityPage("audienta");

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

const audienceIcons = [UsersRound, Radio, BadgeCheck, FileText, ShieldCheck, BarChart3];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section audience-page" aria-labelledby="audience-title">
        <div className="audience-intro">
          <UsersRound aria-hidden="true" />
          <div>
            <p className="entity-kicker">Audienta si context</p>
            <h2 id="audience-title">{audienceContextMap.title}</h2>
            <p>{audienceContextMap.summary}</p>
          </div>
        </div>

        <div className="audience-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{audienceContextMap.positioning}</p>
        </div>
      </section>

      <section className="entity-section audience-promise" aria-labelledby="audience-promise-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="audience-promise-title">Ce spunem corect despre public</h2>
          <p>{audienceContextMap.promise}</p>
        </div>
      </section>

      <section className="entity-section audience-segments" aria-labelledby="audience-segments-title">
        <div className="audience-section-head">
          <UsersRound aria-hidden="true" />
          <div>
            <h2 id="audience-segments-title">Sase segmente pentru o promovare mai bine tintita</h2>
            <p>
              Segmentele ajuta la alegerea canalului potrivit: radio,
              eveniment, interviu, stand sau material de dovada dupa campanie.
            </p>
          </div>
        </div>

        <div className="audience-segment-list">
          {audienceContextMap.audienceSegments.map((segment, index) => {
            const Icon = audienceIcons[index] || UsersRound;

            return (
              <article data-audience-segment key={segment.label}>
                <div className="audience-segment-main">
                  <Icon aria-hidden="true" />
                  <h3>{segment.label}</h3>
                  <p>{segment.description}</p>
                </div>
                <div className="audience-segment-detail">
                  <div>
                    <h4>Potrivire sponsor</h4>
                    <p>{segment.sponsorFit}</p>
                  </div>
                  <div>
                    <h4>Dovada posibila</h4>
                    <p>{segment.proofSignal}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section audience-evidence" aria-labelledby="audience-evidence-title">
        <div>
          <BarChart3 aria-hidden="true" />
          <div>
            <h2 id="audience-evidence-title">Ce sustine contextul public</h2>
            <p>
              Aceste surse ajuta la intelegerea pietei, a comunitatii romanesti
              si a contextului media din Belgia.
            </p>
          </div>
        </div>

        <div className="audience-evidence-list">
          {audienceContextMap.evidencePoints.map((point) => (
            <article data-audience-evidence key={point.label}>
              <h3>{point.label}</h3>
              <p>{point.detail}</p>
              <strong>{point.use}</strong>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section audience-questions" aria-labelledby="audience-questions-title">
        <Radio aria-hidden="true" />
        <div>
          <h2 id="audience-questions-title">Intrebari bune inainte de oferta</h2>
          <p>
            Daca raspunsurile sunt clare, alegem mai usor intre radio, eveniment,
            interviu, stand, comunicare comunitara sau proof pack.
          </p>
        </div>

        <div className="audience-question-list">
          {audienceContextMap.sponsorQuestions.map((question) => (
            <p data-audience-question key={question}>
              <CheckCircle2 aria-hidden="true" />
              <span>{question}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section audience-limits" aria-labelledby="audience-limits-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="audience-limits-title">Ce face audienta mai usor de prezentat</h2>
            <p>
              Prezentam audienta prin potrivire, context, limba si momente reale
              de interactiune cu comunitatea.
            </p>
          </div>
        </div>

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

      <section className="entity-section audience-next" aria-labelledby="audience-next-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="audience-next-title">Cum folosim pagina in vanzare</h2>
            <p>
              Trimite acest material cand cineva intreaba daca publicul Pop
              Media se potriveste cu firma lui. Dupa aceea alegem pachetul: media kit,
              radio, eveniment, stand, interviu sau proof pack.
            </p>
          </div>
        </div>

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

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