import type { Metadata } from "next";
import {
  AlertCircle,
  ArrowUpRight,
  CheckCircle2,
  HelpCircle,
  Mail,
  ShieldCheck
} from "lucide-react";
import { EntityPageView } from "../components/EntityPage";
import {
  commercialBoundaries,
  getEntityPage,
  siteConfig,
  sponsorQuestionGuide
} from "../content/pop-media";
import { buildPageMetadata } from "../seo/metadata";

const page = getEntityPage("intrebari");

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

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

  return (
    <EntityPageView page={page}>
      <section
        className="entity-section sponsor-questions-page"
        aria-labelledby="sponsor-questions-title"
      >
        <div className="sponsor-questions-intro">
          <HelpCircle aria-hidden="true" />
          <div>
            <p className="entity-kicker">Intrebari reale, raspunsuri scurte</p>
            <h2 id="sponsor-questions-title">{sponsorQuestionGuide.title}</h2>
            <p>{sponsorQuestionGuide.summary}</p>
          </div>
        </div>

        <div className="sponsor-questions-positioning">
          <ShieldCheck aria-hidden="true" />
          <p>{sponsorQuestionGuide.positioning}</p>
        </div>

        <div className="sponsor-question-groups">
          {sponsorQuestionGuide.groups.map((group, index) => (
            <section key={group.title} aria-labelledby={`question-group-${index + 1}`}>
              <h3 id={`question-group-${index + 1}`}>{group.title}</h3>
              <div>
                {group.questions.map((item) => (
                  <article key={item.question}>
                    <h4>{item.question}</h4>
                    <p>{item.answer}</p>
                  </article>
                ))}
              </div>
            </section>
          ))}
        </div>
      </section>

      <section
        className="entity-section sponsor-fit-boundaries"
        aria-labelledby="not-fit-title"
      >
        <div>
          <AlertCircle aria-hidden="true" />
          <h2 id="not-fit-title">Cand ajustam directia</h2>
          <p>
            O colaborare buna incepe cu asteptari clare. Cand obiectivul,
            mesajul sau dovada nu sunt clare, le ajustam inainte de oferta.
          </p>
        </div>
        <div className="sponsor-not-fit-list">
          {sponsorQuestionGuide.notFitSignals.map((signal) => (
            <p key={signal}>
              <CheckCircle2 aria-hidden="true" />
              <span>{signal}</span>
            </p>
          ))}
        </div>
      </section>

      <section
        className="entity-section sponsor-question-next"
        aria-labelledby="question-next-title"
      >
        <div>
          <h2 id="question-next-title">Ce facem dupa ce raspunsurile se potrivesc?</h2>
          <p>{sponsorQuestionGuide.nextStep}</p>
        </div>
        <div className="sponsor-question-actions">
          <a className="button primary" href="/media-kit">
            <ArrowUpRight 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-question-boundaries"
        aria-labelledby="question-boundaries-title"
      >
        <h2 id="question-boundaries-title">Clarificari inainte de oferta</h2>
        <div>
          {commercialBoundaries.map((boundary) => (
            <p key={boundary}>{boundary}</p>
          ))}
        </div>
      </section>
    </EntityPageView>
  );
}