import {createElement, createSidebarPage} from "../../_global/scripts/helpers";
import {createGallery} from "../../components/gallery/GalleryComponent";
import {createAccordion} from "../../components/accordion/AccordionComponent";
import {createContact} from "../../components/contact/ContactComponent";
import {SingleContactData} from "../../components/contact/ContactData";
import {createInfobox} from "../../components/infobox/InfoboxComponent";
import {createLinkCollection} from "../../components/link-collection/LinkCollectionComponent";
import {createSteps} from "../../components/steps/StepsComponent";
import {createPrintShare} from "../../components/print-share/PrintShareComponent";
import {createSurvey} from "../../sections/survey/SurveyComponent";
import {createAnchorLinks} from "../../components/anchor-links/AnchorLinksComponent";
import {lorem1, lorem2} from "../../_global/scripts/lorem";
import {createVideo} from "../../components/video/VideoComponent";
import {createEventsSection} from "../../sections/events/EventsComponent";

export const createArticlePage =
  ({
    styleBlock = '',
  }) => {
    const page = createSidebarPage({
      breadcrumb: ['Start', 'Inhalte Level 1', 'Digitalisierung'],
    });
    const main = page.main;
    const aside = page.aside;

    // START Microsite Styling
    const styleContent = styleBlock;
    const styleElement = document.createElement('style');
    styleElement.textContent = styleContent;
    document.head.appendChild(styleElement);
    // END

    createElement('p', ['kicker'], 'Förderung', main);
    createElement('h1', [], 'Finanzierung und Förderung für digitale Projekte', main);
    createElement('p', ['initial', 'strong'], 'Mehrere Programme unterstützen bei der Digitalisierung und Umsetzung Ihrer innovativen Ideen. Es gibt sowohl Förderungen für eine begleitenden Beratung als auch für Investitionen und Betriebsmittel.', main);

    main.appendChild(createAnchorLinks({}));

    createElement('h2', [], 'Beratungsförderung zur Digitalisierung', main);
    createElement('p', [], 'Beim Förderprogramm go-digital handelt es sich um eine. Das <a href="#">go-digital Förderprogramm</a> richtet sich an Unternehmen mit weniger als 100 Beschäftigten. Gefördert werden die Bereiche IT-Sicherheit, digitale Markterschließung und digitalisierte Geschäftsprozesse.', main);
    createElement('p', [], lorem1, main);

    main.appendChild(createEventsSection({}));
    main.appendChild(createGallery({}));
    main.appendChild(createSteps({}));
    main.appendChild(createAccordion({}));

    createElement('h2', [], 'Eine weitere Headline zwischendurch', main);
    createElement('p', [], lorem1, main);
    main.appendChild(createVideo({}));
    createElement('p', [], lorem2, main);

    main.appendChild(createInfobox({type: 'success'}));
    main.appendChild(createInfobox({type: 'warning'}));
    main.appendChild(createInfobox({type: 'error'}));
    main.appendChild(createSurvey({}));
    main.appendChild(createLinkCollection({}));
    main.appendChild(createContact({}));
    main.appendChild(createPrintShare({}));

    aside.appendChild(createContact({headline: 'Kontakt', contacts: SingleContactData}));

    return page.page;
  }