import {
  ArrowUpRight,
  BadgeCheck,
  CalendarDays,
  ClipboardList,
  FileText,
  Handshake,
  HelpCircle,
  Mail,
  MapPin,
  Megaphone,
  Mic2,
  Radio,
  ShieldCheck,
  Sparkles,
  UsersRound,
  Wrench
} from "lucide-react";
import {
  businessProducts,
  siteConfig,
  sourceRegistry,
  audienceContextMap,
  campaignMomentsPlanner,
  eventProductionBackstage,
  interviewContentStudio,
  communityCommunicationBridge,
  eventStandExhibitorPack,
  sponsorCampaignPaths,
  sponsorCollaborationProcess,
  sponsorFitGuide,
  sponsorOfferBrief,
  sponsorProofDeliverables
} from "./content/pop-media";
import { BusinessHeader } from "./components/BusinessHeader";

const mediaAssets = {
  radio: "/images/pop-media-radio.webp",
  event: "/images/pop-media-event.webp",
  studio: "/images/pop-media-radio.webp"
};

const productIcons = {
  "radio-ads": Radio,
  "event-sponsor-pack": CalendarDays,
  "event-media-production": Wrench,
  "interviews-podcasts": Mic2,
  "partner-proof-pack": FileText,
  "community-guide-trust": ShieldCheck
};

const offerBundles = [
  {
    title: "Pachet Radio Start",
    fit: "Pentru firme care vor o prima prezenta credibila in jurul Radio Belgia.",
    includes: "mesaj audio, context potrivit, link public si recap pentru follow-up",
    page: "#radio-ads"
  },
  {
    title: "Pachet Sponsor Eveniment",
    fit: "Pentru sponsori care vor sa fie vazuti inainte, la fata locului si dupa eveniment.",
    includes: "anunt radio, prezenta la eveniment, moment sponsor si recap media",
    page: "#event-sponsor-pack"
  },
  {
    title: "Pachet Partener / Institutie",
    fit: "Pentru organizatii care au nevoie de context, incredere si documentare clara.",
    includes: "proof pack, surse publice, servicii explicate si material de prezentare",
    page: "#partner-proof-pack"
  }
];

const trustSignals = [
  {
    label: "Entitate",
    value: siteConfig.legalIdentifier,
    detail: `${siteConfig.legalName}, ${siteConfig.location}`,
    icon: BadgeCheck
  },
  {
    label: "Canal media",
    value: siteConfig.primaryBrand,
    detail: "Radio, programe, social, podcasturi si comunitate.",
    icon: Radio
  },
  {
    label: "Piata",
    value: siteConfig.serviceArea,
    detail: "Romani din Belgia, firme locale, sponsori si parteneri.",
    icon: MapPin
  }
];

const campaignStages = [
  {
    title: "Auzit",
    text:
      "Mesajul tau intra in programul si comunicarea Radio Belgia intr-un context potrivit pentru comunitate.",
    icon: Radio
  },
  {
    title: "Vazut",
    text:
      "Prezenta la eveniment face brandul recognoscibil: scena, stand, materiale, oameni si momente reale.",
    icon: UsersRound
  },
  {
    title: "Retinut",
    text:
      "Interviurile, fotografiile si recap-ul transforma evenimentul intr-un material care poate fi trimis mai departe.",
    icon: FileText
  },
  {
    title: "Verificat",
    text:
      "O colaborare buna vine cu explicatii clare, exemple publice si materiale pe care le poti trimite mai departe.",
    icon: ShieldCheck
  }
];

const sponsorDecisionPath = [
  {
    label: "01 Audienta",
    title: "Cine trebuie sa observe brandul",
    text:
      "Romani din Belgia, familii, antreprenori, participanti la evenimente si parteneri locali.",
    icon: UsersRound
  },
  {
    label: "02 Pachetul",
    title: "Ce prezenta cumperi",
    text:
      "Radio, eveniment, interviu, material recap sau o combinatie discutata inainte de campanie.",
    icon: Handshake
  },
  {
    label: "03 Dovada",
    title: "Ce ramane dupa campanie",
    text:
      "Linkuri publice, imagini aprobate, mentiuni si material care poate fi trimis mai departe.",
    icon: FileText
  },
  {
    label: "04 Urmatorul pas",
    title: "Cum incepe discutia corect",
    text:
      "Alegem directia, confirmam perioada si trimitem oferta dupa aprobarea comerciala.",
    icon: Mail
  }
];

export default function Home() {
  const orderedProducts = [...businessProducts].sort(
    (a, b) => a.priority - b.priority
  );

  return (
    <main className="business-home" id="acasa">
      <BusinessHeader />

      <section className="business-hero" aria-labelledby="hero-title">
        <div className="hero-content">
          <p className="eyebrow">Pop Media / Radio Belgia / Belgia</p>
          <h1 id="hero-title">
            Pop Media pentru sponsori, evenimente si comunitatea romana din Belgia.
          </h1>
          <p>
            Transformam promovarea ta in prezenta reala prin Radio Belgia,
            evenimente romanesti, interviuri si materiale pe care le poti folosi
            dupa campanie. Nu vindem zgomot; pregatim un context in care oamenii
            inteleg cine esti, de ce contezi si ce pot face mai departe.
          </p>
          <div className="hero-actions">
            <a className="button primary" href="#produse">
              <Megaphone aria-hidden="true" />
              Vezi produsele
            </a>
        <a className="button quiet" href="#contact">
          <Mail aria-hidden="true" />
          Discuta o promovare
        </a>
        <a className="button quiet" href="/media-kit">
          <FileText aria-hidden="true" />
          Media kit
        </a>
        <a className="button quiet" href="/intrebari">
          <HelpCircle aria-hidden="true" />
          Intrebari inainte de colaborare
        </a>
      </div>
        </div>

        <div className="hero-media-grid" aria-label="Activitate Pop Media">
          <img
            className="hero-media-main"
            src={mediaAssets.radio}
            alt="Radio Belgia si continut media pentru comunitatea romana din Belgia"
          />
          <article>
            <Radio aria-hidden="true" />
            <strong>Radio ads</strong>
            <span>vizibilitate audio si social</span>
          </article>
          <img
            src={mediaAssets.event}
            alt="Eveniment romanesc promovat prin Radio Belgia si Pop Media"
          />
          <article>
            <UsersRound aria-hidden="true" />
            <strong>Evenimente</strong>
            <span>sponsori, standuri, recap</span>
          </article>
        </div>
      </section>

      <section
        className="sponsor-decision-band"
        aria-labelledby="sponsor-decision-title"
      >
        <div className="sponsor-decision">
          <div className="sponsor-decision-copy">
            <p className="eyebrow">Decizia clientului</p>
            <h2 id="sponsor-decision-title">
              Promovarea buna raspunde rapid la patru intrebari.
            </h2>
            <p>
              Cine trebuie sa te tina minte? Unde apari? Ce ramane dupa
              campanie? Care este pasul urmator? Media kit-ul strange aceste
              raspunsuri intr-un format usor de trimis inainte de oferta.
            </p>
            <a className="text-link" href="/media-kit">
              Deschide media kit-ul pentru sponsori
              <ArrowUpRight aria-hidden="true" />
            </a>
            <a className="text-link" href="/audienta">
              Vezi audienta si contextul
              <ArrowUpRight aria-hidden="true" />
            </a>
            <a className="text-link" href="/campanii">
              Alege campania dupa obiectiv
              <ArrowUpRight aria-hidden="true" />
            </a>
            <a className="text-link" href="#contact">
              Trimite informatiile pentru oferta
              <ArrowUpRight aria-hidden="true" />
            </a>
          </div>

          <div className="sponsor-decision-grid">
            {sponsorDecisionPath.map((item) => (
              <article key={item.label}>
                <span>{item.label}</span>
                <item.icon aria-hidden="true" />
                <h3>{item.title}</h3>
                <p>{item.text}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section
        className="business-section home-audience-section"
        id="audienta"
        aria-labelledby="home-audience-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Audienta si context</p>
          <h2 id="home-audience-title">
            Vorbesti cu oamenii potriviti, nu doar cu un public generic.
          </h2>
          <p>
            Pop Media este relevant cand firma vrea sa comunice cu romani din
            Belgia, familii, antreprenori, participanti la evenimente si
            parteneri care au nevoie de incredere locala.
          </p>
          <a className="text-link" href="/audienta">
            Vezi harta audientei
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-audience-grid">
          {audienceContextMap.audienceSegments.slice(0, 4).map((segment) => (
            <article key={segment.label}>
              <span>{segment.label}</span>
              <h3>{segment.sponsorFit}</h3>
              <p>{segment.proofSignal}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-process-section"
        id="proces"
        aria-labelledby="home-process-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Procesul de lucru</p>
          <h2 id="home-process-title">Stii de la inceput cum ajunge ideea la oferta.</h2>
          <p>
            Colaborarea ramane simpla: primul mesaj, potrivire, propunere, productie,
            activare si dovada dupa campanie. Fiecare pas arata ce pregatim,
            ce aprobam si ce material ramane util dupa colaborare.
          </p>
        </div>

        <div className="home-process-grid">
          {sponsorCollaborationProcess.steps.slice(0, 4).map((step) => (
            <article key={step.phase}>
              <span>{step.phase}</span>
              <h3>{step.title}</h3>
              <p>{step.sponsorGets}</p>
            </article>
          ))}
        </div>

        <a className="text-link" href="/proces">
          Vezi procesul complet
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>

      <section
        className="business-section home-brief-section"
        id="brief"
        aria-labelledby="home-brief-title"
      >
        <div className="home-brief-copy">
          <div className="section-heading">
            <p className="eyebrow">Primul pas catre oferta</p>
            <h2 id="home-brief-title">
              O oferta buna incepe cu cateva raspunsuri simple.
            </h2>
            <p>
              Nu trebuie sa scrii mult. Trimiti obiectivul, audienta, momentul,
              pachetul apropiat, materialele permise si dovada care trebuie sa
              ramana dupa campanie.
            </p>
          </div>
          <a className="text-link" href="#contact">
            Trimite informatiile pentru oferta
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-brief-grid">
          {sponsorOfferBrief.briefFields.slice(0, 4).map((field) => (
            <article key={field.label}>
              <ClipboardList aria-hidden="true" />
              <span>{field.label}</span>
              <h3>{field.question}</h3>
              <p>{field.guidance}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-campaign-section"
        id="campanii"
        aria-labelledby="home-campaign-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Campanii pe obiectiv</p>
          <h2 id="home-campaign-title">Alegem formatul dupa ce vrei sa ramana in mintea oamenilor.</h2>
          <p>
            Pentru un sponsor, Radio Belgia, evenimentul, interviul si proof
            pack-ul au sens diferit in functie de obiectiv: memorare, prezenta,
            incredere, dovada sau comunicare utila pentru comunitate.
          </p>
        </div>

        <div className="home-campaign-grid">
          {sponsorCampaignPaths.paths.slice(0, 4).map((path) => (
            <article key={path.objective}>
              <span>{path.recommendedPath}</span>
              <h3>{path.objective}</h3>
              <p>{path.nextQuestion}</p>
            </article>
          ))}
        </div>

        <a className="text-link" href="/campanii">
          Vezi traseele de campanie
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>

      <section
        className="business-section home-proof-section"
        id="dovada"
        aria-labelledby="home-proof-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Ce ramane dupa</p>
          <h2 id="home-proof-title">Campania nu se termina cand se opreste anuntul.</h2>
          <p>
            Dupa o colaborare buna pot ramane linkuri, recap, imagini aprobate,
            confirmari de mesaj, citate sau o nota scurta pe care o poti
            trimite mai departe.
          </p>
        </div>

        <div className="home-proof-grid">
          {sponsorProofDeliverables.deliverables.slice(0, 4).map((item) => (
            <article key={item.name}>
              <span>{item.name}</span>
              <h3>{item.proofRole}</h3>
            </article>
          ))}
        </div>

        <a className="text-link" href="/dovada">
          Vezi ce poate ramane dupa campanie
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>

      <section
        className="business-section home-moments-section"
        id="momente"
        aria-labelledby="home-moments-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Momente de campanie</p>
          <h2 id="home-moments-title">
            Alege momentul in care promovarea ta are cel mai mult sens.
          </h2>
          <p>
            Perioada conteaza. Uneori ai nevoie sa fii auzit inainte de
            eveniment, alteori sa fii vazut la fata locului sau sa ramai cu un
            recap care continua discutia dupa.
          </p>
          <a className="text-link" href="/momente">
            Vezi calendarul de campanie
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-moments-grid">
          {campaignMomentsPlanner.moments.slice(0, 4).map((moment) => (
            <article key={moment.label}>
              <span>{moment.timing}</span>
              <h3>{moment.label}</h3>
              <p>{moment.recommendedPath}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="business-section home-fit-section" id="potrivire" aria-labelledby="home-fit-title">
        <div className="section-heading">
          <p className="eyebrow">Pentru cine se potriveste</p>
          <h2 id="home-fit-title">Cele mai bune discutii incep cu potrivirea corecta.</h2>
          <p>
            Pop Media are sens cand firma vrea prezenta intr-un context romanesc
            real din Belgia: radio, evenimente, interviuri si dovada care ramane
            dupa campanie.
          </p>
        </div>

        <div className="home-fit-grid">
          {sponsorFitGuide.fitCards.slice(0, 4).map((card) => (
            <article key={card.segment}>
              <span>{card.fitLevel}</span>
              <h3>{card.segment}</h3>
              <p>{card.bestProduct}</p>
            </article>
          ))}
        </div>

        <a className="text-link" href="/potrivire">
          Vezi potrivirea pe categorii
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>

      <section className="business-strip" aria-label="Ce este Pop Media">
        {trustSignals.map((signal) => (
          <article key={signal.label}>
            <signal.icon aria-hidden="true" />
            <span>{signal.label}</span>
            <strong>{signal.value}</strong>
            <p>{signal.detail}</p>
          </article>
        ))}
      </section>

      <section className="business-section method-section" id="metoda" aria-labelledby="method-title">
        <div className="section-heading">
          <p className="eyebrow">Cum se simte o campanie buna</p>
          <h2 id="method-title">Nu cumperi doar spatiu. Cumperi prezenta care poate fi tinuta minte.</h2>
          <p>
            Cele mai bune pachete Pop Media leaga vocea radio, intalnirea din
            comunitate si materialul de dupa eveniment. Asa discutia devine mai
            usor de inteles pentru oameni, firme si parteneri.
          </p>
        </div>
        <div className="method-grid">
          {campaignStages.map((stage, index) => (
            <article key={stage.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <stage.icon aria-hidden="true" />
              <h3>{stage.title}</h3>
              <p>{stage.text}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-backstage-section"
        id="culise"
        aria-labelledby="home-backstage-title"
      >
        <div className="home-backstage-copy">
          <div className="section-heading">
            <p className="eyebrow">Culise si productie</p>
            <h2 id="home-backstage-title">
              Partea nevazuta face evenimentul sa para serios, nu improvizat.
            </h2>
            <p>
              Publicul observa scena, dar increderea se construieste in culise:
              sunet, aparatura, cabluri, primire, momente aprobate si recap-ul
              care ramane dupa.
            </p>
          </div>
          <a className="text-link" href="/culise">
            Vezi cum lucram in culise
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-backstage-grid">
          {eventProductionBackstage.operatingLanes.slice(0, 4).map((lane) => (
            <article key={lane.phase}>
              <span>{lane.phase}</span>
              <h3>{lane.title}</h3>
              <p>{lane.sponsorSees}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-stands-section"
        id="standuri"
        aria-labelledby="home-stands-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Standuri si expozanti</p>
          <h2 id="home-stands-title">
            La eveniment, oamenii trebuie sa stie unde te gasesc si de ce sa se opreasca.
          </h2>
          <p>
            Standurile pot lega prezenta fizica, radio, interviul si recap-ul
            intr-un produs usor de inteles pentru firme si organizatii.
          </p>
          <a className="text-link" href="/standuri">
            Vezi pachetele de stand
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-stands-grid">
          {eventStandExhibitorPack.standTypes.slice(0, 4).map((stand) => (
            <article key={stand.label}>
              <span>{stand.label}</span>
              <h3>{stand.bestFor}</h3>
              <p>{stand.proof}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-interview-section"
        id="interviuri"
        aria-labelledby="home-interview-title"
      >
        <div className="section-heading">
          <p className="eyebrow">Interviuri si povesti</p>
          <h2 id="home-interview-title">
            Oamenii au mai multa incredere cand aud vocea din spatele brandului.
          </h2>
          <p>
            Interviurile Pop Media pot lega invitatul, brandul, evenimentul
            si comunitatea intr-un material aprobat, usor de trimis mai departe
            dupa publicare.
          </p>
          <a className="text-link" href="/interviuri">
            Vezi produsul de interviuri
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-interview-grid">
          {interviewContentStudio.formats.slice(0, 4).map((format) => (
            <article key={format.label}>
              <span>{format.label}</span>
              <h3>{format.sponsorValue}</h3>
              <p>{format.productionWork}</p>
            </article>
          ))}
        </div>
      </section>

      <section
        className="business-section home-community-section"
        id="comunitate"
        aria-labelledby="home-community-title"
      >
        <div className="home-community-copy">
          <div className="section-heading">
            <p className="eyebrow">Comunitate si institutii</p>
            <h2 id="home-community-title">
              Mesajele utile trebuie sa fie clare, nu doar vizibile.
            </h2>
            <p>
              Pentru Belgia, un mesaj romanesc bun poate avea nevoie de context,
              surse, aprobari si o punte scurta catre franceza sau neerlandeza.
            </p>
          </div>
          <a className="text-link" href="/comunitate">
            Vezi comunicarea comunitara
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>

        <div className="home-community-grid">
          {communityCommunicationBridge.messageTypes.slice(0, 4).map((message) => (
            <article key={message.label}>
              <span>{message.label}</span>
              <h3>{message.useCase}</h3>
              <p>{message.proof}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="business-section" id="produse" aria-labelledby="products-title">
        <div className="section-heading">
          <p className="eyebrow">Ce vindem</p>
          <h2 id="products-title">Produse usor de inteles, vandute ca pachete reale.</h2>
          <p>
            Prioritatea este clara: radio, evenimente, productie media,
            interviuri si materiale de incredere pentru sponsori. Punem accent
            pe prezenta, context si continut pe care firma il poate folosi mai
            departe.
          </p>
        </div>

        <div className="product-grid">
          {orderedProducts.map((product) => {
            const Icon = productIcons[product.slug as keyof typeof productIcons];

            return (
              <article className="product-card" id={product.slug} key={product.slug}>
                <div className="product-topline">
                  <Icon aria-hidden="true" />
                  <span>{product.status}</span>
                </div>
                <h3>{product.name}</h3>
                <p>{product.summary}</p>
                <dl>
                  <div>
                    <dt>Pentru cine</dt>
                    <dd>{product.audience}</dd>
                  </div>
                  <div>
                    <dt>Nevoia cumparatorului</dt>
                    <dd>{product.buyerNeed}</dd>
                  </div>
                </dl>
                <div className="product-includes">
                  {product.includes.map((item) => (
                    <span key={item}>{item}</span>
                  ))}
                </div>
                <a href={`${product.page}#${product.slug}`}>
                  Vezi {product.shortName}
                  <ArrowUpRight aria-hidden="true" />
                </a>
              </article>
            );
          })}
        </div>
      </section>

      <section className="business-section bundle-section" id="pachete" aria-labelledby="bundles-title">
        <div className="section-heading">
          <p className="eyebrow">Cum as vinde primul</p>
          <h2 id="bundles-title">Trei pachete simple pentru discutii cu sponsori</h2>
          <p>
            Site-ul trebuie sa incalzeasca discutia si sa ajute clientul sa
            aleaga directia potrivita. Preturile si livrabilele se stabilesc
            intr-o discutie scurta, dupa obiectiv si perioada.
          </p>
        </div>
        <div className="bundle-grid">
          {offerBundles.map((bundle, index) => (
            <article className="bundle-card" key={bundle.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h3>{bundle.title}</h3>
              <p>{bundle.fit}</p>
              <strong>{bundle.includes}</strong>
              <a href={bundle.page}>
                Vezi {bundle.title}
                <ArrowUpRight aria-hidden="true" />
              </a>
            </article>
          ))}
        </div>
        <a className="text-link" href="/pachete">
          Vezi toate pachetele de discutie
          <ArrowUpRight aria-hidden="true" />
        </a>
      </section>

      <section className="proof-section" id="dovezi" aria-labelledby="proof-title">
        <div className="proof-copy">
          <p className="eyebrow">De ce sa aiba incredere</p>
          <h2 id="proof-title">O oferta mai convingatoare cand poate fi verificata.</h2>
          <p>
            Cand investesti in promovare, vrei sa stii unde apare brandul tau,
            ce mesaj ajunge la oameni si ce ramane dupa campanie. Pop Media
            leaga fiecare produs de exemple, pagini clare si materiale pe care
            le poti trimite mai departe dupa discutie.
          </p>
          <a className="text-link" href="/caz-eveniment">
            Vezi exemplul de eveniment
            <ArrowUpRight aria-hidden="true" />
          </a>
          <a className="text-link" href="/momente">
            Vezi calendarul de campanie
            <ArrowUpRight aria-hidden="true" />
          </a>
        </div>
        <div className="source-panel">
          {sourceRegistry.map((source) => (
            <a href={source.url} key={source.url}>
              <span>{source.label}</span>
              <small>{source.note}</small>
              <ArrowUpRight aria-hidden="true" />
            </a>
          ))}
        </div>
      </section>

      <section className="limits-section" aria-labelledby="limits-title">
        <div>
          <Sparkles aria-hidden="true" />
          <h2 id="limits-title">Ce face colaborarea usor de aprobat.</h2>
        </div>
        <div className="limits-list">
          <p>Obiectiv clar: memorare, prezenta la eveniment, interviu, dovada sau comunicare comunitara.</p>
          <p>Materiale pregatite pentru sponsor: mesaj, link, recap, imagini aprobate si follow-up.</p>
          <p>Discutie simpla: alegem pachetul potrivit si confirmam livrabilele inainte de campanie.</p>
        </div>
      </section>

      <section className="business-contact" id="contact" aria-labelledby="contact-title">
        <img
          src={mediaAssets.studio}
          alt="Studio si continut Radio Belgia pentru produse media Pop Media"
        />
        <div>
          <p className="eyebrow">Urmatorul pas</p>
          <h2 id="contact-title">Transformam interesul intr-o propunere clara.</h2>
          <p>
            Prima discutie clarifica obiectivul, audienta, momentul si dovada
            de care ai nevoie, apoi alegem pachetul potrivit.
          </p>
          <div className="hero-actions">
            <a className="button primary" href={`mailto:${siteConfig.email}`}>
              <Mail aria-hidden="true" />
              {siteConfig.email}
            </a>
            <a className="button quiet" href="/media-kit">
              <FileText aria-hidden="true" />
              Media kit sponsori
            </a>
            <a className="button quiet" href={siteConfig.radioUrl}>
              <Radio aria-hidden="true" />
              Radio Belgia
            </a>
          </div>
        </div>
      </section>
    </main>
  );
}
