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

const page = getEntityPage("comunitate");

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

const messageIcons = [Megaphone, Handshake, Languages, UsersRound, FileText];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section community-page" aria-labelledby="community-title">
        <div className="community-intro">
          <UsersRound aria-hidden="true" />
          <div>
            <p className="entity-kicker">Mesaje utile pentru oameni</p>
            <h2 id="community-title">{communityCommunicationBridge.title}</h2>
            <p>{communityCommunicationBridge.summary}</p>
          </div>
        </div>

        <div className="community-positioning">
          <Globe2 aria-hidden="true" />
          <p>{communityCommunicationBridge.positioning}</p>
        </div>
      </section>

      <section className="entity-section community-promise" aria-labelledby="community-promise-title">
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="community-promise-title">Ce poate construi Pop Media</h2>
          <p>{communityCommunicationBridge.promise}</p>
        </div>
      </section>

      <section className="entity-section community-messages" aria-labelledby="community-messages-title">
        <div className="community-section-head">
          <Megaphone aria-hidden="true" />
          <div>
            <h2 id="community-messages-title">Cinci mesaje care pot deveni produs</h2>
            <p>
              Fiecare mesaj comunitar are nevoie de un canal potrivit,
              o formulare umana si o dovada clara dupa publicare.
            </p>
          </div>
        </div>

        <div className="community-message-list">
          {communityCommunicationBridge.messageTypes.map((message, index) => {
            const Icon = messageIcons[index] ?? Megaphone;

            return (
              <article data-community-message key={message.label}>
                <div className="community-message-main">
                  <Icon aria-hidden="true" />
                  <h3>{message.label}</h3>
                </div>
                <div className="community-message-detail">
                  <div>
                    <h4>Cand se foloseste</h4>
                    <p>{message.useCase}</p>
                  </div>
                  <div>
                    <h4>Canal posibil</h4>
                    <p>{message.mediaPath}</p>
                  </div>
                  <div>
                    <h4>Dovada dupa</h4>
                    <p>{message.proof}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section community-language" aria-labelledby="community-language-title">
        <div>
          <Languages aria-hidden="true" />
          <div>
            <h2 id="community-language-title">Punte de limbaj pentru Belgia</h2>
            <p>
              Mesajul principal ramane romanesc, dar partenerii locali pot avea
              nevoie de formule scurte in franceza sau neerlandeza. Le tratam
              ca rezumate aprobate, nu ca traduceri autorizate.
            </p>
          </div>
        </div>

        <div className="community-language-list">
          {communityCommunicationBridge.languageBridge.map((item) => (
            <article data-community-language key={item.language}>
              <span>{item.language}</span>
              <p>{item.role}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section community-approval" aria-labelledby="community-approval-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="community-approval-title">Ce stabilim inainte de publicare</h2>
          <p>
            Aici se vede diferenta dintre comunicare serioasa si improvizatie:
            sursa, rolul fiecarui partener, limba, logo-ul si formularea finala.
          </p>
        </div>
        <div className="community-approval-list">
          {communityCommunicationBridge.approvalChecklist.map((item) => (
            <p data-community-approval key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section community-limits" aria-labelledby="community-limits-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="community-limits-title">Ce stabilim pentru incredere</h2>
            <p>
              O comunicare comunitara buna protejeaza increderea prin surse
              clare, roluri aprobate si un mesaj usor de inteles.
            </p>
          </div>
        </div>

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

      <section className="entity-section community-next" aria-labelledby="community-next-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="community-next-title">Cum incepe discutia</h2>
            <p>
              Trimite mesajul, publicul, limba necesara, sursa informatiei,
              rolul partenerului si ce dovada trebuie sa ramana dupa publicare.
            </p>
          </div>
        </div>

        <div className="community-actions">
          <a className="button primary" href="/contact">
            <Mail aria-hidden="true" />
            Contact
          </a>
          <a className="button secondary" href="/interviuri">
            <Radio aria-hidden="true" />
            Interviuri
          </a>
          <a className="button secondary" href="/parteneri">
            <Handshake aria-hidden="true" />
            Parteneri
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

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