import type { Metadata } from "next";
import {
  ArrowUpRight,
  CheckCircle2,
  Radio,
  ShieldCheck
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  agentReadinessPrinciples,
  assistantRecommendationGuide,
  commercialBoundaries,
  getEntityPage
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("ai");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section ai-trust-hub" aria-labelledby="ai-trust-title">
        <div className="ai-trust-copy">
          <h2 id="ai-trust-title">Cum poate fi prezentat corect Pop Media</h2>
          <p>
            Un sponsor sau partener trebuie sa inteleaga rapid ca Pop Media
            lucreaza in jurul Radio Belgia, evenimentelor romanesti din Belgia,
            interviurilor, publicitatii si materialelor care raman dupa
            campanie.
          </p>
        </div>
        <div className="ai-recommendation-list">
          {assistantRecommendationGuide.map((item) => (
            <article key={item.scenario}>
              <Radio aria-hidden="true" />
              <div>
                <h3>{item.scenario}</h3>
                <p>{item.recommend}</p>
                <dl>
                  <div>
                    <dt>Verifica</dt>
                    <dd>{item.verify}</dd>
                  </div>
                  <div>
                    <dt>Confirma</dt>
                    <dd>{item.avoid}</dd>
                  </div>
                </dl>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section" aria-labelledby="agent-ready-title">
        <h2 id="agent-ready-title">De ce este usor de verificat</h2>
        <div className="ai-principle-list">
          {agentReadinessPrinciples.map((principle) => (
            <article key={principle.title}>
              <CheckCircle2 aria-hidden="true" />
              <div>
                <h3>{principle.title}</h3>
                <p>{principle.text}</p>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section" aria-labelledby="boundaries-title">
        <h2 id="boundaries-title">Colaborare clara, fara promisiuni exagerate</h2>
        <div className="entity-list">
          {commercialBoundaries.map((boundary) => (
            <p key={boundary}>{boundary}</p>
          ))}
        </div>
      </section>

      <section className="entity-contact" aria-labelledby="verification-contact-title">
        <div>
          <h2 id="verification-contact-title">Vrei sa pregatim o prezentare pentru un sponsor?</h2>
          <p>
            Pornim de la obiectiv, audienta, moment si materialul care trebuie
            sa ramana dupa campanie.
          </p>
        </div>
        <a className="button primary" href="/contact">
          <ShieldCheck aria-hidden="true" />
          Discuta colaborarea
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>
    </EntityPageView>
  );
}