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

const page = getEntityPage("caz-eveniment");

export const metadata: Metadata = buildPageMetadata("caz-eveniment");

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section event-case-hero" aria-labelledby="event-case-title">
        <div className="event-case-copy">
          <p className="entity-kicker">Exemplu public de activare</p>
          <h2 id="event-case-title">{eventCaseStudy.title}</h2>
          <p>{eventCaseStudy.summary}</p>
          <a className="text-link" href={eventCaseStudy.publicExample.sourceUrl}>
            Vezi sursa publica
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>
        <img
          src="/images/pop-media-event.webp"
          alt="Eveniment romanesc promovat de Pop Media si Radio Belgia"
        />
      </section>

      <section className="entity-section event-case-facts" aria-labelledby="event-facts-title">
        <div>
          <CalendarDays aria-hidden="true" />
          <h2 id="event-facts-title">{eventCaseStudy.publicExample.name}</h2>
          <p>{eventCaseStudy.publicExample.audienceContext}</p>
        </div>
        <div className="event-fact-grid">
          <article>
            <span>Data</span>
            <strong>{eventCaseStudy.publicExample.date}</strong>
          </article>
          <article>
            <span>Program</span>
            <strong>{eventCaseStudy.publicExample.time}</strong>
          </article>
          <article>
            <span>Locatie</span>
            <strong>{eventCaseStudy.publicExample.location}</strong>
          </article>
        </div>
      </section>

      <section
        className="entity-section event-case-positioning"
        aria-labelledby="event-positioning-title"
      >
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="event-positioning-title">Cum trebuie citit exemplul</h2>
          <p>{eventCaseStudy.positioning}</p>
        </div>
      </section>

      <section className="entity-section event-case-stages" aria-labelledby="event-stages-title">
        <div className="event-case-section-head">
          <Radio aria-hidden="true" />
          <div>
            <p className="entity-kicker">Traseul activarii</p>
            <h2 id="event-stages-title">Inainte, la fata locului si dupa eveniment</h2>
          </div>
        </div>

        <div className="event-case-stage-list">
          {eventCaseStudy.stages.map((stage, index) => (
            <article key={stage.phase}>
              <div className="event-stage-label">
                <span>{String(index + 1).padStart(2, "0")}</span>
                <h3>{stage.phase}</h3>
              </div>
              <div className="event-stage-copy">
                <strong>{stage.sponsorQuestion}</strong>
                <p>{stage.popMediaAnswer}</p>
                <ul>
                  {stage.proofItems.map((item) => (
                    <li key={item}>
                      <CheckCircle2 aria-hidden="true" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section event-case-proof" aria-labelledby="event-proof-title">
        <div>
          <FileText aria-hidden="true" />
          <h2 id="event-proof-title">Ce poate arata concret acest exemplu</h2>
        </div>
        <div className="event-proof-grid">
          <article>
            <h3>Semnale de valoare</h3>
            {eventCaseStudy.sponsorValueSignals.map((signal) => (
              <p key={signal}>
                <UsersRound aria-hidden="true" />
                <span>{signal}</span>
              </p>
            ))}
          </article>
          <article>
            <h3>Ce arata exemplul</h3>
            {eventCaseStudy.notClaims.map((claim) => (
              <p key={claim}>
                <ShieldCheck aria-hidden="true" />
                <span>{claim}</span>
              </p>
            ))}
          </article>
        </div>
      </section>

      <section className="entity-section event-case-next" aria-labelledby="event-next-title">
        <div>
          <MapPin aria-hidden="true" />
          <h2 id="event-next-title">Cum se foloseste in discutia comerciala</h2>
          <p>{eventCaseStudy.nextStep}</p>
        </div>
        <div className="event-case-actions">
          <a className="button primary" href="/media-kit">
            <FileText aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Radio aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>
    </EntityPageView>
  );
}