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

const page = getEntityPage("potrivire");

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

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

  return (
    <EntityPageView page={page}>
      <section className="entity-section sponsor-fit-page" aria-labelledby="sponsor-fit-title">
        <div className="sponsor-fit-intro">
          <UsersRound aria-hidden="true" />
          <div>
            <p className="entity-kicker">Potrivire inainte de oferta</p>
            <h2 id="sponsor-fit-title">{sponsorFitGuide.title}</h2>
            <p>{sponsorFitGuide.summary}</p>
          </div>
        </div>

        <div className="sponsor-fit-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorFitGuide.positioning}</p>
        </div>
      </section>

      <section className="entity-section sponsor-fit-filters" aria-labelledby="fit-filters-title">
        <div className="sponsor-fit-section-head">
          <ClipboardCheck aria-hidden="true" />
          <div>
            <h2 id="fit-filters-title">Patru filtre simple inainte de discutie</h2>
            <p>
              O colaborare buna incepe cu raspunsuri clare. Aceste filtre arata
              rapid daca discutam despre radio, eveniment, interviu sau proof pack.
            </p>
          </div>
        </div>

        <div className="sponsor-fit-filter-grid">
          {sponsorFitGuide.decisionFilters.map((filter, index) => (
            <article key={filter.label}>
              <span>{String(index + 1).padStart(2, "0")} {filter.label}</span>
              <h3>{filter.question}</h3>
              <p>{filter.guidance}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-fit-segments" aria-labelledby="fit-segments-title">
        <div className="sponsor-fit-section-head">
          <Radio aria-hidden="true" />
          <div>
            <p className="entity-kicker">Segmente care pot avea sens</p>
            <h2 id="fit-segments-title">Unde Pop Media poate aduce context, nu doar afisare</h2>
            <p>
              Lista este un punct de pornire pentru a
              intelege unde audienta, canalul si dovada de dupa campanie se pot
              lega natural.
            </p>
          </div>
        </div>

        <div className="sponsor-fit-card-grid">
          {sponsorFitGuide.fitCards.map((card) => (
            <article key={card.segment}>
              <div>
                <span>{card.fitLevel}</span>
                <h3>{card.segment}</h3>
              </div>
              <p>{card.reason}</p>
              <dl>
                <div>
                  <dt>Pachet de discutie</dt>
                  <dd>{card.bestProduct}</dd>
                </div>
                <div>
                  <dt>Dovada utila dupa campanie</dt>
                  <dd>{card.proofNeeded}</dd>
                </div>
              </dl>
            </article>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-fit-not-fit" aria-labelledby="fit-not-title">
        <div>
          <ShieldCheck aria-hidden="true" />
          <h2 id="fit-not-title">Cand ajustam directia de oferta</h2>
          <p>
            O oferta buna se ajusteaza dupa audienta, moment, rolul brandului
            si dovada pe care vrei sa o pastrezi.
          </p>
        </div>
        <div className="sponsor-fit-not-list">
          {sponsorFitGuide.notFitSignals.map((signal) => (
            <p key={signal}>
              <CheckCircle2 aria-hidden="true" />
              <span>{signal}</span>
            </p>
          ))}
        </div>
      </section>

      <section className="entity-section sponsor-fit-next" aria-labelledby="fit-next-title">
        <div>
          <FileText aria-hidden="true" />
          <div>
            <h2 id="fit-next-title">Cum folosim ghidul in discutia reala</h2>
            <p>{sponsorFitGuide.nextStep}</p>
          </div>
        </div>

        <div className="sponsor-fit-actions">
          <a className="button primary" href="/media-kit">
            <FileText aria-hidden="true" />
            Vezi media kit
          </a>
          <a className="button secondary" href={`mailto:${siteConfig.email}`}>
            <Mail aria-hidden="true" />
            {siteConfig.email}
          </a>
        </div>
      </section>

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