import type { Metadata } from "next";
import {
  ArrowUpRight,
  BadgeCheck,
  CheckCircle2,
  ClipboardCheck,
  FileText,
  Handshake,
  LayoutGrid,
  Mail,
  Mic2,
  PackageCheck,
  Radio,
  ShieldCheck,
  Store,
  Utensils
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  eventStandExhibitorPack,
  getEntityPage,
  getPublicSourceLabel,
  siteConfig
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("standuri");

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

const standIcons = [Store, PackageCheck, Utensils, Handshake, Mic2];

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section stand-page" aria-labelledby="stand-title">
        <div className="stand-intro">
          <LayoutGrid aria-hidden="true" />
          <div>
            <p className="entity-kicker">Prezenta fizica la eveniment</p>
            <h2 id="stand-title">{eventStandExhibitorPack.title}</h2>
            <p>{eventStandExhibitorPack.summary}</p>
          </div>
        </div>

        <div className="stand-positioning">
          <Store aria-hidden="true" />
          <p>{eventStandExhibitorPack.positioning}</p>
        </div>
      </section>

      <section className="entity-section stand-promise" aria-labelledby="stand-promise-title">
        <ShieldCheck aria-hidden="true" />
        <div>
          <h2 id="stand-promise-title">Cum devine standul vandabil</h2>
          <p>{eventStandExhibitorPack.promise}</p>
        </div>
      </section>

      <section className="entity-section stand-types" aria-labelledby="stand-types-title">
        <div className="stand-section-head">
          <LayoutGrid aria-hidden="true" />
          <div>
            <h2 id="stand-types-title">Cinci tipuri de prezenta la eveniment</h2>
            <p>
              Alegem tipul de stand dupa categoria expozantului, fluxul
              evenimentului, mesajul permis si dovada care trebuie sa ramana
              dupa.
            </p>
          </div>
        </div>

        <div className="stand-type-list">
          {eventStandExhibitorPack.standTypes.map((stand, index) => {
            const Icon = standIcons[index] ?? Store;

            return (
              <article data-stand-type key={stand.label}>
                <div className="stand-type-main">
                  <Icon aria-hidden="true" />
                  <h3>{stand.label}</h3>
                </div>
                <div className="stand-type-detail">
                  <div>
                    <h4>Pentru cine</h4>
                    <p>{stand.bestFor}</p>
                  </div>
                  <div>
                    <h4>La eveniment</h4>
                    <p>{stand.eventRole}</p>
                  </div>
                  <div>
                    <h4>Dupa eveniment</h4>
                    <p>{stand.proof}</p>
                  </div>
                </div>
              </article>
            );
          })}
        </div>
      </section>

      <section className="entity-section stand-setup" aria-labelledby="stand-setup-title">
        <div>
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="stand-setup-title">Ce pregatim inainte</h2>
            <p>
              Standul trebuie pregatit inainte de eveniment: loc, material,
              persoana responsabila, mesaj si ce poate fi publicat dupa.
            </p>
          </div>
        </div>

        <div className="stand-setup-list">
          {eventStandExhibitorPack.setupChecklist.map((item) => (
            <p data-stand-setup key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section stand-care" aria-labelledby="stand-care-title">
        <BadgeCheck aria-hidden="true" />
        <div>
          <h2 id="stand-care-title">Cum pastram zona usor de inteles</h2>
          <p>
            Un stand bun respecta oamenii din jur: trasee clare, cabluri puse
            corect, materiale simple si coordonare cu organizatorul.
          </p>
        </div>
        <div className="stand-care-list">
          {eventStandExhibitorPack.visitorCare.map((item) => (
            <p data-stand-care key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section stand-proof" aria-labelledby="stand-proof-title">
        <FileText aria-hidden="true" />
        <div>
          <h2 id="stand-proof-title">Ce poate ramane dupa stand</h2>
          <p>
            Recap-ul arata prezenta, contextul, materialul aprobat si urmatorul
            pas posibil pentru sponsor.
          </p>
        </div>
        <div className="stand-proof-list">
          {eventStandExhibitorPack.proofAfter.map((item) => (
            <p data-stand-proof key={item}>
              <CheckCircle2 aria-hidden="true" />
              <span>{item}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section stand-limits" aria-labelledby="stand-limits-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <div>
            <h2 id="stand-limits-title">Ce stabilim inainte de eveniment</h2>
            <p>
              Pentru ca standul sa functioneze bine, stabilim rolul, pozitia,
              materialele, responsabilul si dovada de dupa eveniment.
            </p>
          </div>
        </div>

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

      <section className="entity-section stand-next" aria-labelledby="stand-next-title">
        <div>
          <Mail aria-hidden="true" />
          <div>
            <h2 id="stand-next-title">Cum incepe discutia</h2>
            <p>
              Trimite tipul standului, materialele, persoana responsabila, ce
              trebuie pe masa, daca ai nevoie de curent si ce dovada vrei dupa
              eveniment.
            </p>
          </div>
        </div>

        <div className="stand-actions">
          <a className="button primary" href="/contact">
            <Mail aria-hidden="true" />
            Contact
          </a>
          <a className="button secondary" href="/evenimente">
            <LayoutGrid aria-hidden="true" />
            Evenimente
          </a>
          <a className="button secondary" href="/culise">
            <Radio aria-hidden="true" />
            Culise
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

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