import type { Metadata } from "next";
import {
  Accessibility,
  ArrowUpRight,
  BadgeCheck,
  Cable,
  Camera,
  CheckCircle2,
  ClipboardCheck,
  HeartHandshake,
  Mail,
  ShieldCheck,
  Volume2,
  Wrench
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  eventProductionBackstage,
  getEntityPage,
  getPublicSourceLabel,
  siteConfig
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("culise");

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

const laneIcons = [ClipboardCheck, Cable, Accessibility, Volume2, Camera];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section backstage-page" aria-labelledby="backstage-title">
        <div className="backstage-intro">
          <Wrench aria-hidden="true" />
          <div>
            <p className="entity-kicker">Omul si tehnicul din spate</p>
            <h2 id="backstage-title">{eventProductionBackstage.title}</h2>
            <p>{eventProductionBackstage.summary}</p>
          </div>
        </div>

        <div className="backstage-positioning">
          <HeartHandshake aria-hidden="true" />
          <p>{eventProductionBackstage.positioning}</p>
        </div>
      </section>

      <section className="entity-section backstage-promise" aria-labelledby="backstage-promise-title">
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="backstage-promise-title">Ce face culisele valoroase</h2>
          <p>{eventProductionBackstage.promise}</p>
        </div>
      </section>

      <section className="entity-section backstage-lanes" aria-labelledby="backstage-lanes-title">
        <div className="backstage-section-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="backstage-lanes-title">Cinci lucruri care se pregatesc in culise</h2>
            <p>
              O colaborare buna se vede pe scena, dar se construieste inainte:
              unde stau oamenii, unde intra cablurile, cine vorbeste, ce se
              filmeaza si ce poate ramane dupa eveniment.
            </p>
          </div>
        </div>

        <div className="backstage-lane-list">
          {eventProductionBackstage.operatingLanes.map((lane, index) => {
            const Icon = laneIcons[index] ?? Wrench;

            return (
              <article data-backstage-lane key={lane.phase}>
                <div className="backstage-lane-main">
                  <span>{lane.phase}</span>
                  <Icon aria-hidden="true" />
                  <h3>{lane.title}</h3>
                </div>
                <div className="backstage-lane-detail">
                  <div>
                    <h4>Ce se vede in fata</h4>
                    <p>{lane.sponsorSees}</p>
                  </div>
                  <div>
                    <h4>Ce se face in spate</h4>
                    <p>{lane.backstageWork}</p>
                  </div>
                  <div>
                    <h4>Ce ramane dupa</h4>
                    <p>{lane.proofAfter}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section backstage-care" aria-labelledby="backstage-care-title">
        <div>
          <Accessibility aria-hidden="true" />
          <div>
            <h2 id="backstage-care-title">Primire si orientare cu grija</h2>
            <p>
              Pentru evenimente de comunitate, atentia fata de oameni conteaza
              la fel de mult ca sunetul. Mai ales cand vin familii, copii sau
              persoane care au nevoie de repere mai clare.
            </p>
          </div>
        </div>

        <div className="backstage-care-list">
          {eventProductionBackstage.accessibilityCare.map((item) => (
            <p data-backstage-care key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section backstage-proof" aria-labelledby="backstage-proof-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="backstage-proof-title">Dovada pe care o poti folosi dupa eveniment</h2>
          <p>
            Recap-ul bun arata ce a fost aprobat, unde a aparut mesajul si ce
            material poate fi trimis mai departe.
          </p>
        </div>
        <div className="backstage-proof-list">
          {eventProductionBackstage.sponsorProofTrail.map((item) => (
            <p data-backstage-proof key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section backstage-limits" aria-labelledby="backstage-limits-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="backstage-limits-title">Ce pregatim inainte de productie</h2>
            <p>
              O productie buna incepe cu roluri clare, zone tehnice pregatite,
              materiale aprobate si un recap util dupa eveniment.
            </p>
          </div>
        </div>

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

      <section className="entity-section backstage-next" aria-labelledby="backstage-next-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="backstage-next-title">Cum incepe discutia</h2>
            <p>{eventProductionBackstage.nextStep}</p>
          </div>
        </div>

        <div className="backstage-actions">
          <a className="button primary" href="/contact">
            <Mail aria-hidden="true" />
            Contact
          </a>
          <a className="button secondary" href="/evenimente">
            <Wrench aria-hidden="true" />
            Evenimente
          </a>
          <a className="button secondary" href="/dovada">
            <BadgeCheck 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 backstage-sources" aria-labelledby="backstage-sources-title">
        <h2 id="backstage-sources-title">Exemple si repere pentru culise</h2>
        <div>
          {eventProductionBackstage.sourceUrls.map((url) => (
            <a href={url} key={url}>
              <span>{getPublicSourceLabel(url)}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}