import { ArrowUpRight, Mail } from "lucide-react";
import type { ReactNode } from "react";
import { BusinessHeader } from "./BusinessHeader";
import type { EntityPage } from "../content/pop-media";
import { siteConfig } from "../content/pop-media";

export function EntityPageView({
  children,
  page
}: {
  children?: ReactNode;
  page: EntityPage;
}) {
  return (
    <main className="entity-page">
      <BusinessHeader />

      <section className="entity-hero" aria-labelledby="entity-title">
        <p className="entity-kicker">{siteConfig.tagline}</p>
        <h1 id="entity-title">{page.title}</h1>
        <p>{page.description}</p>
      </section>

      <section className="entity-grid" aria-label="Informatii principale">
        <article className="entity-card entity-intent">
          <span>Cum te ajuta</span>
          <p>{page.intent}</p>
        </article>
        <article className="entity-card">
          <span>De ce Pop Media</span>
          <strong>{siteConfig.name}</strong>
          <p>
            {siteConfig.primaryBrand}, {siteConfig.location},{" "}
            {siteConfig.legalIdentifier}
          </p>
        </article>
      </section>

      {page.offer ? (
        <section className="entity-offer-section" aria-labelledby="offer-title">
          <div className="entity-offer-copy">
            <p className="entity-kicker">{page.offer.label}</p>
            <h2 id="offer-title">{page.offer.title}</h2>
            <p>{page.offer.summary}</p>
            <strong>{page.offer.nextStep}</strong>
          </div>
          <div className="entity-offer-panel" aria-label="Ce primeste sponsorul">
            {page.offer.outcomes.map((outcome) => (
              <p key={outcome}>{outcome}</p>
            ))}
          </div>
        </section>
      ) : null}

      <section className="entity-section" aria-labelledby="summary-title">
        <h2 id="summary-title">Ce poti obtine</h2>
        <div className="entity-list">
          {page.bullets.map((bullet) => (
            <p key={bullet}>{bullet}</p>
          ))}
        </div>
      </section>

      {children}

      {page.buyerQuestions?.length ? (
        <section className="entity-section" aria-labelledby="buyer-questions-title">
          <h2 id="buyer-questions-title">Intrebari inainte de colaborare</h2>
          <div className="entity-question-grid">
            {page.buyerQuestions.map((item) => (
              <article key={item.question}>
                <h3>{item.question}</h3>
                <p>{item.answer}</p>
              </article>
            ))}
          </div>
        </section>
      ) : null}

      <section className="entity-section" aria-labelledby="services-title">
        <h2 id="services-title">Servicii care pot fi combinate</h2>
        <div className="entity-tags">
          {page.relatedServices.map((service) => (
            <span key={service}>{service}</span>
          ))}
        </div>
      </section>

      <section className="entity-section" aria-labelledby="sources-title">
        <h2 id="sources-title">Incredere si exemple publice</h2>
        <div className="source-list">
          {page.sources.map((source) => (
            <a href={source.url} key={`${source.label}-${source.url}`}>
              <span>{source.label}</span>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>

      <section className="entity-contact" aria-labelledby="contact-title">
        <div>
          <h2 id="contact-title">Vrei sa discutam o promovare?</h2>
          <p>
            Trimite obiectivul, perioada si produsul care te intereseaza.
            Revenim cu o directie clara pentru radio, eveniment, interviu sau
            campanie.
          </p>
        </div>
        <a className="button primary" href={`mailto:${siteConfig.email}`}>
          <Mail aria-hidden="true" />
          {siteConfig.email}
        </a>
      </section>
    </main>
  );
}