<?php
/**
 * The ready made contact sections.
 *
 * Not only the form, but a WHOLE part of a page: the heading, the text, the
 * contact details with a phone number you can tap, an image and a layout.
 *
 * The layouts are taken from LIVE sites we already run, not invented: an image
 * on the left with the details and the form on the right, a coloured band with a
 * white card, the form on the left and the details on the right. Those are
 * layouts that have already proved themselves.
 *
 * Built as WordPress block patterns rather than as a block of our own:
 *
 * 1. A pattern is only an arrangement of ordinary blocks. There is no code per
 *    section, so ten sections weigh no more than one
 * 2. Once a person inserts it, EVERYTHING becomes theirs. They change the text,
 *    the colour, the image and the layout like any other part of the page
 * 3. It is all ready for a phone already, because the columns fold one under the
 *    other on their own
 *
 * Copyright (c) 2026 Quantum, Serbia. https://2ranq.com
 *
 * This program is free software: you can redistribute it and change it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 2 of the License, or any later version. The full
 * text is in LICENSE.txt, next to this file.
 *
 * @package Ranq_Forms
 */

defined( 'ABSPATH' ) || exit;

/**
 * Ranq_Forms_Patterns
 */
class Ranq_Forms_Patterns {

	/**
	 * The name of the group our sections sit in.
	 */
	const CATEGORY = 'ranq-forms';

	/**
	 * The changes the form owner makes to a section.
	 *
	 * Kept in a property rather than passed through every helper, because
	 * otherwise all eight layouts would have to hand the same array through five
	 * calls.
	 *
	 * @var array
	 */
	private static $opts = array();

	/**
	 * The trade being assembled right now.
	 *
	 * @var array
	 */
	private static $biz = array();

	/**
	 * The default changes, that is to say none.
	 *
	 * @return array
	 */
	private static function blank_opts() {

		return array(
			'heading' => null,
			'lead'    => null,
			'bg'      => null,
			'text'    => null,
			'image'   => null,
			'rows'    => null,
			'slot'    => false,
			'phone'   => null,
			'email'   => null,
			'street'  => null,
			'city'    => null,
			'hours'   => null,
			'values'  => array(),
		);
	}

	/**
	 * Hooks up.
	 *
	 * @return void
	 */
	public static function hooks() {

		add_action( 'init', array( __CLASS__, 'register' ), 20 );
	}

	/**
	 * Registers the group and every section.
	 *
	 * @return void
	 */
	public static function register() {

		if ( ! function_exists( 'register_block_pattern' ) ) {
			return;
		}

		if ( function_exists( 'register_block_pattern_category' ) ) {
			register_block_pattern_category(
				self::CATEGORY,
				array( 'label' => __( '2ranq Forms', '2ranq-forms' ) )
			);
		}

		foreach ( self::all() as $key => $pattern ) {

			register_block_pattern(
				'2ranq-forms/' . $key,
				array(
					'title'       => $pattern['title'],
					'description' => $pattern['description'],
					'categories'  => array( self::CATEGORY ),
					'keywords'    => array( 'contact', 'form', '2ranq' ),
					'content'     => $pattern['content'],
				)
			);
		}
	}

	/**
	 * The company details, out of the settings.
	 *
	 * @return array
	 */
	private static function details() {

		$saved = get_option( 'ranq_forms_company', array() );
		$saved = is_array( $saved ) ? $saved : array();

		$filled = array();

		foreach ( $saved as $key => $value ) {
			if ( is_string( $value ) && '' !== trim( $value ) ) {
				$filled[ $key ] = $value;
			}
		}

		// The order matters. The trade details come first, because they are what makes
		// the example look like a real place. Over them go the details the site owner
		// typed in, because those are their true ones. That way the example is full
		// before the owner enters anything, and the moment they do, theirs wins.
		$base = array(
			'name'   => get_bloginfo( 'name' ),
			'street' => __( '1200 Market Street, Suite 400', '2ranq-forms' ),
			'city'   => __( 'San Francisco, CA 94103', '2ranq-forms' ),
			'phone'  => '(415) 555-0134',
			'email'  => (string) get_option( 'admin_email' ),
			'hours'  => __( 'Monday to Friday, 9am to 5pm', '2ranq-forms' ),
		);

		foreach ( array( 'name', 'street', 'city', 'phone', 'email', 'hours' ) as $key ) {
			if ( isset( self::$biz[ $key ] ) && '' !== self::$biz[ $key ] ) {
				$base[ $key ] = self::$biz[ $key ];
			}
		}

		$out = array_merge( $base, $filled );

		// What is typed into the widget itself beats both the trade and the global
		// ones, because it is closest to what a person is looking at right now.
		foreach ( array( 'phone', 'email', 'street', 'city', 'hours' ) as $key ) {
			if ( isset( self::$opts[ $key ] ) && is_string( self::$opts[ $key ] ) && '' !== self::$opts[ $key ] ) {
				$out[ $key ] = self::$opts[ $key ];
			}
		}

		return $out;
	}

	/**
	 * The phone number in a shape that can be dialled with a tap.
	 *
	 * @param string $phone The number as it is written.
	 *
	 * @return string
	 */
	/**
	 * The custom properties, out of what a person changed.
	 *
	 * ONLY what differs from the default is printed, so the record is short or
	 * not there at all. The defaults sit in the style sheet, once.
	 *
	 * @param string $layout The pattern key.
	 *
	 * @return string
	 */
	private static function css_vars( $layout ) {

		$vrednosti = self::$opts['values'];

		if ( ! is_array( $vrednosti ) || ! $vrednosti ) {
			return '';
		}

		$opis = Ranq_Forms_Widget::controls_for( $layout );
		$out  = '';

		foreach ( $vrednosti as $kljuc => $vrednost ) {

			if ( ! isset( $opis[ $kljuc ]['var'] ) ) {
				continue;
			}

			$jedinica = isset( $opis[ $kljuc ]['unit'] ) ? $opis[ $kljuc ]['unit'] : '';

			if ( ! $jedinica && 'size' === $opis[ $kljuc ]['type'] ) {
				$jedinica = 'px';
			}

			$out .= '--' . $opis[ $kljuc ]['var'] . ':' . $vrednost . $jedinica . ';';
		}

		return $out;
	}

	/**
	 * One value a person changed, or the default.
	 *
	 * @param string $kljuc The key.
	 * @param string $inace What to use when it was not changed.
	 *
	 * @return string
	 */
	private static function val( $kljuc, $inace ) {

		$v = self::$opts['values'];

		return ( is_array( $v ) && isset( $v[ $kljuc ] ) && '' !== $v[ $kljuc ] ) ? (string) $v[ $kljuc ] : $inace;
	}

	private static function mail_link( $email, $style = '' ) {

		$email = (string) $email;

		// An incomplete address is printed as plain text. A link to "milos@" leads
		// nowhere, and a visitor would click it.
		if ( ! is_email( $email ) ) {
			return '<span' . ( $style ? ' class="' . esc_attr( $style ) . '"' : '' ) . '>' . esc_html( $email ) . '</span>';
		}

		return '<a href="mailto:' . esc_attr( $email ) . '"'
			. ( $style ? ' class="' . esc_attr( $style ) . '"' : '' ) . '>' . esc_html( $email ) . '</a>';
	}

	private static function tel( $phone ) {

		return 'tel:' . preg_replace( '/[^0-9+]/', '', $phone );
	}

	/**
	 * An icon as an image embedded in the address itself.
	 *
	 * Why this way and not as a file: the icon then costs no extra request to the
	 * server, it cannot go missing, and a person can still swap it for their own,
	 * because it is an ordinary image in the page.
	 *
	 * @param string $path  The drawing path.
	 * @param string $color The colour.
	 *
	 * @return string
	 */
	private static function icon( $path, $color = '#5b4be0', $width = '1.6' ) {

		$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"'
			. ' stroke="' . $color . '" stroke-width="' . $width . '" stroke-linecap="round" stroke-linejoin="round">'
			. $path . '</svg>';

		// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.obfuscation_base64_encode -- this is not code hiding, it is an image embedded in an address.
		return 'data:image/svg+xml;base64,' . base64_encode( $svg );
	}

	/**
	 * The icon drawings.
	 *
	 * @return array
	 */
	private static function shapes() {

		return array(
			'car'   => '<path d="M5 17h14M6.5 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM20.5 17a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zM3 17v-4l2-5a2 2 0 0 1 1.9-1.3h10.2A2 2 0 0 1 19 8l2 5v4M5 13h14"/>',
			'plane' => '<path d="M21 15.5 3 9.8l2-2.3 4.7 1 4.6-4.6a2 2 0 0 1 2.8 2.8L12.6 11l1 4.7-2.3 2L9 12.5M8 19h8"/>',
			'phone' => '<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2 4.2 2 2 0 0 1 4 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.1a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"/>',
			'pin'   => '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>',
			'mail'  => '<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/>',
			'clock' => '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
			'check' => '<path d="M20 6 9 17l-5-5"/>',
			'chat'  => '<path d="M21 11.5a8.4 8.4 0 0 1-9 8.4 8.5 8.5 0 0 1-3.9-.9L3 21l1.9-5A8.4 8.4 0 0 1 12 3a8.4 8.4 0 0 1 9 8.5z"/>',
		);
	}

	/**
	 * One row of detail: an icon and then the text.
	 *
	 * @param string $shape The drawing key.
	 * @param string $title The label.
	 * @param string $value The value, which may be a link.
	 * @param string $color The icon colour.
	 * @param bool   $light Whether the text is light.
	 *
	 * @return string
	 */
	private static function row( $shape, $title, $value, $color = '#5b4be0', $light = false ) {

		$shapes = self::shapes();
		$icon   = self::icon( isset( $shapes[ $shape ] ) ? $shapes[ $shape ] : $shapes['pin'], $color );

		$attr  = $light ? ' {"style":{"color":{"text":"#ffffff"}}}' : '';
		$class = $light ? ' class="has-text-color" style="color:#ffffff"' : '';

		// `isStackedOnMobile` set to false is REQUIRED. Without it WordPress drops the
		// icon into a row of its own above the text on a phone, and the row of detail
		// looks broken. Checked at a width of 390.
		return '<!-- wp:columns {"verticalAlignment":"center","isStackedOnMobile":false,"style":{"spacing":{"blockGap":{"left":"12px"},"margin":{"bottom":"14px"}}}} -->'
			. '<div class="wp-block-columns are-vertically-aligned-center is-not-stacked-on-mobile ranq-row" style="margin-bottom:14px"'
			. ( self::$opts['slot'] ? ' data-ranq-row="' . esc_attr( $shape ) . '"' : '' ) . '>'

			. '<!-- wp:column {"verticalAlignment":"center","width":"28px"} -->'
			. '<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:28px">'
			. '<!-- wp:image {"width":"24px","sizeSlug":"full"} -->'
			. '<figure class="wp-block-image size-full is-resized"><img src="' . $icon . '" alt="" style="width:24px"/></figure>'
			. '<!-- /wp:image -->'
			. '</div><!-- /wp:column -->'

			. '<!-- wp:column {"verticalAlignment":"center"} -->'
			. '<div class="wp-block-column is-vertically-aligned-center">'
			. '<!-- wp:paragraph' . $attr . ' -->'
			. '<p' . $class . '><strong>' . esc_html( $title ) . '</strong><br>' . $value . '</p>'
			. '<!-- /wp:paragraph -->'
			. '</div><!-- /wp:column -->'

			. '</div><!-- /wp:columns -->';
	}


	/**
	 * Our form as a block. The form is chosen after inserting.
	 *
	 * @return string
	 */
	private static function form_block() {

		// In the live preview an empty slot goes where the form is, so the builder can
		// drop the REAL form a person is assembling into it. That way the card shows
		// both the section and the form, and every change lands inside at once.
		if ( self::$opts['slot'] ) {
			return '<!-- wp:html --><div class="ranq-widget__slot"></div><!-- /wp:html -->';
		}

		return '<!-- wp:ranq/form {"formId":0} /-->';
	}

	/**
	 * A place for the image, with an instruction instead of an empty hole.
	 *
	 * @param string $radius The corner radius.
	 *
	 * @return string
	 */
	private static function image_block( $radius = '14px', $class = '' ) {

		// An image MUST have a source. An `<img>` with no source draws nothing, so a
		// hole would be left where the image goes and nobody would know it goes there.
		//
		// A scene is drawn, not a camera icon. The icon looked like a broken image,
		// so the whole section felt unfinished before a person even got round to
		// putting their own in.
		$svg = '<svg xmlns="http://www.w3.org/2000/svg" width="900" height="700" viewBox="0 0 900 700">'
			. '<defs>'
			. '<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">'
			. '<stop offset="0" stop-color="#dfe7f5"/><stop offset="1" stop-color="#f2eee7"/>'
			. '</linearGradient>'
			. '</defs>'
			. '<rect width="900" height="700" fill="url(#sky)"/>'
			. '<circle cx="700" cy="150" r="66" fill="#ffffff" opacity=".55"/>'
			. '<path d="M0 700V430l120-70 120 70v270z" fill="#c9d4e6" opacity=".85"/>'
			. '<path d="M240 700V330l170-96 170 96v370z" fill="#b7c4da"/>'
			. '<path d="M580 700V400l160-84 160 84v300z" fill="#cdd7e8" opacity=".9"/>'
			. '<g fill="#ffffff" opacity=".75">'
			. '<rect x="300" y="392" width="52" height="60" rx="6"/>'
			. '<rect x="384" y="392" width="52" height="60" rx="6"/>'
			. '<rect x="468" y="392" width="52" height="60" rx="6"/>'
			. '<rect x="300" y="492" width="52" height="60" rx="6"/>'
			. '<rect x="468" y="492" width="52" height="60" rx="6"/>'
			. '<rect x="640" y="452" width="46" height="54" rx="6"/>'
			. '<rect x="716" y="452" width="46" height="54" rx="6"/>'
			. '</g>'
			. '<rect x="374" y="560" width="72" height="140" rx="8" fill="#8fa3c2"/>'
			. '<path d="M0 700h900" stroke="#a9b7cf" stroke-width="6"/>'
			. '</svg>';

		// phpcs:ignore WordPress.PHP.DiscouragedPHPFunctions.obfuscation_base64_encode -- an image embedded in an address, not code hiding.
		$src = 'data:image/svg+xml;base64,' . base64_encode( $svg );

		// The trade photograph, when it has arrived in `assets/img/`. While it has
		// not, the drawn scene stays, so the section works without a single photo.
		if ( isset( self::$biz['photo'] ) && '' !== self::$biz['photo'] ) {

			$photo = Ranq_Forms_Business::photo( self::$biz['photo'] );

			if ( $photo ) {
				$src = esc_url( $photo );
			}
		}

		// Your own image goes through `esc_url`. The embedded thumbnail must not,
		// because `esc_url` does not let `data:` through and the address would be empty.
		if ( is_string( self::$opts['image'] ) && '' !== self::$opts['image'] ) {
			$src = esc_url( self::$opts['image'] );
		}

		// The width at a hundred percent: without it the image sits at its natural
		// size and stays smaller than the column, so the layout looks crooked.
		return '<!-- wp:image {"width":"100%","sizeSlug":"large","style":{"border":{"radius":"' . $radius . '"}}} -->'
			. '<figure class="wp-block-image size-large is-resized has-custom-border ranq-photo'
			. ( $class ? ' ' . $class : '' ) . '">'
			. '<img src="' . $src . '" alt="' . esc_attr__( 'Click to replace with a photo of your shop, office or team', '2ranq-forms' ) . '"'
			. ( self::$opts['slot'] ? ' data-ranq-part="image"' : '' )
			. ' style="border-radius:' . $radius . ';width:100%"/>'
			. '</figure><!-- /wp:image -->';
	}


	/* ------------------------------------------------------------------
	   Six families of layout

	   The half and half split was measured, not chosen: ten out of twelve of our
	   sites that split a section in two use a split between 47 and 55 percent.
	   ------------------------------------------------------------------ */


	/**
	 * 2ranq.com, taken value by value.
	 *
	 * @param array $b The trade.
	 * @param array $d The details.
	 *
	 * @return string
	 */
	private static function exact_2ranq( $b, $d ) {

		// The rows come from the SAME list as every other section, only in the look
		// taken from 2ranq. Were they hard coded here, the "which details are shown"
		// switches would not work on this section, and nobody would know why.
		$redovi = array(
			'mail'  => array( __( 'Email', '2ranq-forms' ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '', esc_html( $d['email'] ) ),
			'phone' => array( __( 'Phone', '2ranq-forms' ), esc_url( self::tel( $d['phone'] ) ), esc_html( $d['phone'] ) ),
			'pin'   => array( __( 'Address', '2ranq-forms' ), '', esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ) ),
			'clock' => array( __( 'Open', '2ranq-forms' ), '', esc_html( $d['hours'] ) ),
		);

		$wanted = self::$opts['rows'];
		$mark   = self::$opts['slot'];

		// A table with rules. The label is 112 pixels wide, 12/400, uppercase, letter
		// spacing 1.5. The value 16/500. A 1 pixel #2b2b2b rule above every row and
		// under the last one. Spacing 16 above and below. All read off the site.
		$tabela = '<div class="ranq-2r__rows">';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$vrednost = $r[1]
				? '<a class="ranq-2r__val" href="' . $r[1] . '">' . $r[2] . '</a>'
				: '<span class="ranq-2r__val">' . $r[2] . '</span>';

			$tabela .= '<div class="ranq-2r__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<span class="ranq-2r__key">' . esc_html( $r[0] ) . '</span>'
				. $vrednost
				. '</div>';
		}

		$tabela .= '</div>';

		// The `data-ranq-part` markers are REQUIRED, otherwise the live preview in the
		// builder does not know what to change while a person types a heading and text.
		$left = '<!-- wp:html -->'
			. '<p class="ranq-2r__eyebrow"><span>//</span> <span'
			. ( $mark ? ' data-ranq-part="eyebrow"' : '' ) . '>'
			. esc_html( self::val( 'eyebrow_text', __( 'Contact', '2ranq-forms' ) ) ) . '</span></p>'
			. '<h2 class="ranq-2r__title"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<p class="ranq-2r__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>'
			. $tabela
			. '<!-- /wp:html -->';

		$right = '<!-- wp:html --><div class="ranq-2r__card"'
			. ( $mark ? ' data-ranq-part="card"' : '' ) . '><!-- /wp:html -->'
			. self::form_block()
			. '<!-- wp:html --></div>'
			. '<p class="ranq-2r__fine"' . ( $mark ? ' data-ranq-part="fine"' : '' ) . '>'
			. esc_html( self::val( 'fine_text', __( 'We answer within one working day.', '2ranq-forms' ) ) )
			. '</p><!-- /wp:html -->';

		// A 715 to 585 split out of 1300, read off the site.
		// The `wrap` marker is REQUIRED, otherwise a colour change in the side panel
		// has nothing to take hold of and the preview does not change.
		$vars = self::css_vars( 'site-2ranq' );

		return '<!-- wp:group {"align":"full","className":"ranq-2r"} -->'
			. '<div class="wp-block-group alignfull ranq-2r"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-2r__inner">'
			. '<div class="ranq-2r__left">' . $left . '</div>'
			. '<div class="ranq-2r__right">' . $right . '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}


	/**
	 * transfergaja.rs, taken value by value.
	 *
	 * @param array $b The pattern.
	 * @param array $d The details.
	 *
	 * @return string
	 */
	private static function exact_gaja( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();

		// The icons are line drawings and large, 50 pixels, in the accent colour. A
		// thinner line than usual, because the original uses thin drawings.
		$boja = self::val( 'icon', '#f8b54a' );

		$redovi = array(
			'phone' => array(
				'phone',
				__( 'Call us', '2ranq-forms' ),
				esc_url( self::tel( $d['phone'] ) ),
				esc_html( $d['phone'] ),
			),
			'mail'  => array(
				'mail',
				__( 'Send us an email', '2ranq-forms' ),
				is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '',
				esc_html( $d['email'] ),
			),
			'pin'   => array(
				'pin',
				__( 'Where we are', '2ranq-forms' ),
				'',
				esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ),
			),
			'clock' => array(
				'clock',
				__( 'When we work', '2ranq-forms' ),
				'',
				esc_html( $d['hours'] ),
			),
		);

		$wanted = self::$opts['rows'];
		$levo   = '<div class="ranq-gaja__rows">';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$ikona = self::icon( $shapes[ $r[0] ], $boja, '1.2' );

			$naslov = $r[2]
				? '<a class="ranq-gaja__title" href="' . $r[2] . '">' . esc_html( $r[1] ) . '</a>'
				: '<span class="ranq-gaja__title">' . esc_html( $r[1] ) . '</span>';

			$levo .= '<div class="ranq-gaja__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-gaja__icon" src="' . $ikona . '" alt="" />'
				. '<div class="ranq-gaja__text">' . $naslov
				. '<span class="ranq-gaja__value">' . $r[3] . '</span></div>'
				. '</div>';
		}

		$levo .= '</div>';

		$desno = '<p class="ranq-gaja__eyebrow"' . ( $mark ? ' data-ranq-part="eyebrow"' : '' ) . '>'
			. esc_html( self::val( 'eyebrow_text', __( 'Contact', '2ranq-forms' ) ) ) . '</p>'
			. '<h2 class="ranq-gaja__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<p class="ranq-gaja__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>';

		$vars = self::css_vars( 'site-gaja' );

		return '<!-- wp:group {"align":"full","className":"ranq-gaja"} -->'
			. '<div class="wp-block-group alignfull ranq-gaja"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-gaja__inner">'
			. '<div class="ranq-gaja__left"><!-- wp:html -->' . $levo . '<!-- /wp:html --></div>'
			. '<div class="ranq-gaja__right"><!-- wp:html -->' . $desno . '<!-- /wp:html -->'
			. self::form_block()
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The booking card, taken from transfergaja.rs.
	 *
	 * Unlike the other sections, there is no column of details here. The whole
	 * card is the form, because that is what the original does: a person comes to
	 * book a ride, not to read an address.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_gaja_book( $b, $d ) {

		unset( $d );

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$oblik  = self::val( 'badge_shape', 'car' );
		$ikona  = isset( $shapes[ $oblik ] ) ? $shapes[ $oblik ] : $shapes['car'];

		$zaglavlje = '<div class="ranq-gjb__head">'
			. '<span class="ranq-gjb__badge"' . ( $mark ? ' data-ranq-part="badge"' : '' ) . '>'
			. '<img src="' . self::icon( $ikona, self::val( 'badge_ink', '#1a1a1a' ), '1.6' ) . '" alt="" width="26" height="26" />'
			. '</span>'
			. '<span class="ranq-gjb__words">'
			. '<span class="ranq-gjb__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</span>'
			. '<span class="ranq-gjb__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</span>'
			. '</span>'
			. '</div>';

		$vars = self::css_vars( 'site-gaja-book' );

		return '<!-- wp:group {"align":"full","className":"ranq-gjb"} -->'
			. '<div class="wp-block-group alignfull ranq-gjb"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-gjb__card">'
			. '<!-- wp:html -->' . $zaglavlje . '<!-- /wp:html -->'
			. '<div class="ranq-gjb__body">' . self::form_block() . '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from mitaleks.rs.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_mitaleks( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#4a9a4f' );

		$redovi = array(
			'pin'   => array( 'pin', esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'phone' => array( 'phone', esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'mail'  => array( 'mail', esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'clock' => array( 'clock', esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$tekst = $r[2]
				? '<a class="ranq-mit__link" href="' . $r[2] . '">' . $r[1] . '</a>'
				: '<span>' . $r[1] . '</span>';

			$spisak .= '<li class="ranq-mit__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-mit__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.6' ) . '" alt="" width="20" height="20" />'
				. $tekst . '</li>';
		}

		$levo = '<h2 class="ranq-mit__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<p class="ranq-mit__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>'
			. '<div class="ranq-mit__buttons">'
			. '<a class="ranq-mit__btn ranq-mit__btn--full" href="' . esc_url( self::tel( $d['phone'] ) ) . '"'
			. ( $mark ? ' data-ranq-part="call"' : '' ) . '>'
			. esc_html( self::val( 'call_text', __( 'Call us now', '2ranq-forms' ) ) ) . '</a>'
			. '<a class="ranq-mit__btn ranq-mit__btn--line" href="'
			. ( is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '#' ) . '"'
			. ( $mark ? ' data-ranq-part="mail"' : '' ) . '>'
			. esc_html( self::val( 'mail_text', __( 'Send an email', '2ranq-forms' ) ) ) . '</a>'
			. '</div>'
			. '<p class="ranq-mit__name"' . ( $mark ? ' data-ranq-part="name"' : '' ) . '>'
			. esc_html( $b['name'] ) . '</p>'
			. '<ul class="ranq-mit__rows">' . $spisak . '</ul>';

		$vars = self::css_vars( 'site-mitaleks' );

		return '<!-- wp:group {"align":"full","className":"ranq-mit"} -->'
			. '<div class="wp-block-group alignfull ranq-mit"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-mit__inner">'
			. '<div class="ranq-mit__left"><!-- wp:html -->' . $levo . '<!-- /wp:html --></div>'
			. '<div class="ranq-mit__right">' . self::form_block() . '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from ortopedijauna.rs.
	 *
	 * No columns. One strong sentence across the full width, then the form on a
	 * white card in the middle. That is what the original does.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_una( $b, $d ) {

		$mark = self::$opts['slot'];

		$veza = '<a class="ranq-una__call" href="' . esc_url( self::tel( $d['phone'] ) ) . '"'
			. ( $mark ? ' data-ranq-part="call"' : '' ) . '>'
			. esc_html( self::val( 'call_text', __( 'give us a call', '2ranq-forms' ) ) ) . '</a>';

		$gore = '<p class="ranq-una__heading">'
			. '<span' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>' . esc_html( $b['heading'] ) . '</span> '
			. $veza . '</p>';

		$vars = self::css_vars( 'site-una' );

		return '<!-- wp:group {"align":"full","className":"ranq-una"} -->'
			. '<div class="wp-block-group alignfull ranq-una"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-una__inner">'
			. '<!-- wp:html -->' . $gore . '<!-- /wp:html -->'
			. '<div class="ranq-una__card"' . ( $mark ? ' data-ranq-part="card"' : '' ) . '>'
			. self::form_block() . '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from mary-jana.com.
	 *
	 * Both columns have a heading of their own, and next to the heading runs a
	 * thin line all the way to the end of the column. The details are in a two by
	 * two grid, because that is how the original arranges them.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_maryjana( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#875e41' );

		$redovi = array(
			'phone' => array( 'phone', __( 'Phone', '2ranq-forms' ), esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'mail'  => array( 'mail', __( 'Email', '2ranq-forms' ), esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'pin'   => array( 'pin', __( 'Address', '2ranq-forms' ), esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'clock' => array( 'clock', __( 'Open', '2ranq-forms' ), esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$mreza  = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$vrednost = $r[3]
				? '<a class="ranq-mj__link" href="' . $r[3] . '">' . $r[2] . '</a>'
				: $r[2];

			$mreza .= '<div class="ranq-mj__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-mj__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.4' ) . '" alt="" width="40" height="40" />'
				. '<span class="ranq-mj__text"><span class="ranq-mj__key">' . esc_html( $r[1] ) . '</span> '
				. '<span class="ranq-mj__value">' . $vrednost . '</span></span>'
				. '</div>';
		}

		$levo = '<p class="ranq-mj__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</p>'
			. '<div class="ranq-mj__grid">' . $mreza . '</div>';

		$naslovForme = '<p class="ranq-mj__heading"' . ( $mark ? ' data-ranq-part="formtitle"' : '' ) . '>'
			. esc_html( self::val( 'form_title', __( 'Send an email', '2ranq-forms' ) ) ) . '</p>';

		$vars = self::css_vars( 'site-maryjana' );

		return '<!-- wp:group {"align":"full","className":"ranq-mj"} -->'
			. '<div class="wp-block-group alignfull ranq-mj"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-mj__inner">'
			. '<div class="ranq-mj__left"><!-- wp:html -->' . $levo . '<!-- /wp:html --></div>'
			. '<div class="ranq-mj__right"><!-- wp:html -->' . $naslovForme . '<!-- /wp:html -->'
			. self::form_block()
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from cryptomenjacnica.com.
	 *
	 * Everything is centred: the heading, one line under it, three buttons for
	 * the phone, WhatsApp and Telegram, then the form below them.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_crypto( $b, $d ) {

		$mark = self::$opts['slot'];

		$cifre = preg_replace( '/[^0-9]/', '', $d['phone'] );
		$tg    = trim( (string) self::val( 'tg_handle', '' ) );

		$dugmad = '<a class="ranq-cry__btn" href="' . esc_url( self::tel( $d['phone'] ) ) . '"'
			. ( $mark ? ' data-ranq-part="call"' : '' ) . '>'
			. esc_html( self::val( 'call_text', __( 'Call us', '2ranq-forms' ) ) ) . '</a>'
			. '<a class="ranq-cry__btn" href="' . esc_url( 'https://wa.me/' . $cifre ) . '" rel="noopener" target="_blank"'
			. ( $mark ? ' data-ranq-part="wa"' : '' ) . '>'
			. esc_html( self::val( 'wa_text', __( 'WhatsApp', '2ranq-forms' ) ) ) . '</a>';

		if ( '' !== $tg ) {
			$dugmad .= '<a class="ranq-cry__btn" href="' . esc_url( 'https://t.me/' . ltrim( $tg, '@' ) ) . '" rel="noopener" target="_blank"'
				. ( $mark ? ' data-ranq-part="tg"' : '' ) . '>'
				. esc_html( self::val( 'tg_text', __( 'Telegram', '2ranq-forms' ) ) ) . '</a>';
		}

		$gore = '<h2 class="ranq-cry__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<p class="ranq-cry__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>'
			. '<div class="ranq-cry__buttons">' . $dugmad . '</div>';

		$vars = self::css_vars( 'site-crypto' );

		return '<!-- wp:group {"align":"full","className":"ranq-cry"} -->'
			. '<div class="wp-block-group alignfull ranq-cry"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-cry__inner">'
			. '<!-- wp:html -->' . $gore . '<!-- /wp:html -->'
			. '<div class="ranq-cry__form">' . self::form_block() . '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from sigurnitelefoni.com.
	 *
	 * The image and the details sit together on a grey card, with the form beside
	 * it. The form has no labels, only placeholder text, as in the original.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_sigurni( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#4a81d3' );

		$redovi = array(
			'pin'   => array( 'pin', __( 'Where we are', '2ranq-forms' ), esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'phone' => array( 'phone', __( 'Call, Viber or WhatsApp', '2ranq-forms' ), esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'mail'  => array( 'mail', __( 'Email', '2ranq-forms' ), esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'clock' => array( 'clock', __( 'When we work', '2ranq-forms' ), esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$vrednost = $r[3]
				? '<a class="ranq-st__link" href="' . $r[3] . '">' . $r[2] . '</a>'
				: $r[2];

			$spisak .= '<div class="ranq-st__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<span class="ranq-st__key">'
				. '<img class="ranq-st__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.8' ) . '" alt="" width="18" height="18" />'
				. esc_html( $r[1] ) . '</span>'
				. '<span class="ranq-st__value">' . $vrednost . '</span>'
				. '</div>';
		}

		$slika = self::val( 'image', RANQ_FORMS_URL . 'assets/img/desk-laptop.webp' );

		$kartica = '<div class="ranq-st__card">'
			. '<img class="ranq-st__photo" src="' . esc_url( $slika ) . '" alt=""' . ( $mark ? ' data-ranq-part="photo"' : '' ) . ' />'
			. '<div class="ranq-st__rows">' . $spisak . '</div>'
			. '</div>';

		$gore = '<p class="ranq-st__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</p>'
			. '<p class="ranq-st__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>';

		$vars = self::css_vars( 'site-sigurni' );

		return '<!-- wp:group {"align":"full","className":"ranq-st"} -->'
			. '<div class="wp-block-group alignfull ranq-st"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-st__inner">'
			. '<!-- wp:html -->' . $gore . '<!-- /wp:html -->'
			. '<div class="ranq-st__cols">'
			. '<!-- wp:html -->' . $kartica . '<!-- /wp:html -->'
			. '<div class="ranq-st__form">' . self::form_block() . '</div>'
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from fizikalneterapije.rs.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_fizio( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#075aad' );

		$redovi = array(
			'phone' => array( 'phone', esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'pin'   => array( 'pin', esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'mail'  => array( 'mail', esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'clock' => array( 'clock', esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$tekst = $r[2]
				? '<a class="ranq-fz__link" href="' . $r[2] . '">' . $r[1] . '</a>'
				: '<span>' . $r[1] . '</span>';

			$spisak .= '<div class="ranq-fz__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-fz__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.8' ) . '" alt="" width="24" height="24" />'
				. $tekst . '</div>';
		}

		$slika = self::val( 'image', RANQ_FORMS_URL . 'assets/img/physio-room.webp' );

		$desno = '<h2 class="ranq-fz__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<div class="ranq-fz__rows">' . $spisak . '</div>';

		$vars = self::css_vars( 'site-fizio' );

		return '<!-- wp:group {"align":"full","className":"ranq-fz"} -->'
			. '<div class="wp-block-group alignfull ranq-fz"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-fz__inner">'
			. '<div class="ranq-fz__left"><!-- wp:html -->'
			. '<img class="ranq-fz__photo" src="' . esc_url( $slika ) . '" alt=""' . ( $mark ? ' data-ranq-part="photo"' : '' ) . ' />'
			. '<!-- /wp:html --></div>'
			. '<div class="ranq-fz__right"><!-- wp:html -->' . $desno . '<!-- /wp:html -->'
			. self::form_block()
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from belgradehotspot.com.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_hotspot( $b, $d ) {

		unset( $d );

		$mark = self::$opts['slot'];

		$gore = '<h2 class="ranq-bh__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>';

		if ( '' !== $b['lead'] ) {
			$gore .= '<p class="ranq-bh__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
				. esc_html( $b['lead'] ) . '</p>';
		}

		$vars = self::css_vars( 'site-hotspot' );

		return '<!-- wp:group {"align":"full","className":"ranq-bh"} -->'
			. '<div class="wp-block-group alignfull ranq-bh"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-bh__inner">'
			. '<!-- wp:html -->' . $gore . '<!-- /wp:html -->'
			. self::form_block()
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from cvecaranena.rs.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_cvecara( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#c2185b' );

		$redovi = array(
			'pin'   => array( 'pin', __( 'Our address', '2ranq-forms' ), esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'mail'  => array( 'mail', __( 'Email', '2ranq-forms' ), esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'phone' => array( 'phone', __( 'Phone', '2ranq-forms' ), esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'clock' => array( 'clock', __( 'Open', '2ranq-forms' ), esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$vrednost = $r[3]
				? '<a class="ranq-cv__link" href="' . $r[3] . '">' . $r[2] . '</a>'
				: $r[2];

			$spisak .= '<div class="ranq-cv__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<span class="ranq-cv__key">'
				. '<img class="ranq-cv__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.8' ) . '" alt="" width="20" height="20" />'
				. esc_html( $r[1] ) . '</span>'
				. '<span class="ranq-cv__value">' . $vrednost . '</span>'
				. '</div>';
		}

		$slika = self::val( 'image', RANQ_FORMS_URL . 'assets/img/storefront.webp' );

		$gore = '<h2 class="ranq-cv__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2>'
			. '<p class="ranq-cv__lead"' . ( $mark ? ' data-ranq-part="lead"' : '' ) . '>'
			. esc_html( $b['lead'] ) . '</p>';

		$karticaGore = '<p class="ranq-cv__cardtitle"' . ( $mark ? ' data-ranq-part="cardtitle"' : '' ) . '>'
			. esc_html( self::val( 'card_title', __( 'Contact details', '2ranq-forms' ) ) ) . '</p>'
			. '<div class="ranq-cv__rows">' . $spisak . '</div>';

		$vars = self::css_vars( 'site-cvecara' );

		return '<!-- wp:group {"align":"full","className":"ranq-cv"} -->'
			. '<div class="wp-block-group alignfull ranq-cv"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-cv__inner">'
			. '<!-- wp:html -->' . $gore . '<!-- /wp:html -->'
			. '<div class="ranq-cv__band">'
			. '<!-- wp:html --><img class="ranq-cv__photo" src="' . esc_url( $slika ) . '" alt=""'
			. ( $mark ? ' data-ranq-part="photo"' : '' ) . ' /><!-- /wp:html -->'
			. '<div class="ranq-cv__card">'
			. '<!-- wp:html -->' . $karticaGore . '<!-- /wp:html -->'
			. self::form_block()
			. '</div>'
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from medijacijabeograd.com.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_medijacija( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#f88054' );

		$redovi = array(
			'phone' => array( 'phone', esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'mail'  => array( 'mail', esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'pin'   => array( 'pin', esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'clock' => array( 'clock', esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$tekst = $r[2]
				? '<a class="ranq-md__link" href="' . $r[2] . '">' . $r[1] . '</a>'
				: '<span>' . $r[1] . '</span>';

			$spisak .= '<div class="ranq-md__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-md__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.8' ) . '" alt="" width="22" height="22" />'
				. $tekst . '</div>';
		}

		$slika = self::val( 'image', RANQ_FORMS_URL . 'assets/img/office-reception.webp' );
		$sitno = self::val( 'note_text', '' );

		$desno = '<img class="ranq-md__photo" src="' . esc_url( $slika ) . '" alt=""'
			. ( $mark ? ' data-ranq-part="photo"' : '' ) . ' />'
			. '<p class="ranq-md__name"' . ( $mark ? ' data-ranq-part="name"' : '' ) . '>'
			. esc_html( $b['name'] ) . '</p>';

		if ( '' !== $sitno ) {
			$desno .= '<p class="ranq-md__note"' . ( $mark ? ' data-ranq-part="note"' : '' ) . '>'
				. esc_html( $sitno ) . '</p>';
		}

		$desno .= '<div class="ranq-md__rows">' . $spisak . '</div>';

		$vars = self::css_vars( 'site-medijacija' );

		return '<!-- wp:group {"align":"full","className":"ranq-md"} -->'
			. '<div class="wp-block-group alignfull ranq-md"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-md__inner">'
			. '<div class="ranq-md__left">' . self::form_block() . '</div>'
			. '<div class="ranq-md__right"><!-- wp:html -->' . $desno . '<!-- /wp:html --></div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * The section taken from fairplay.org.rs.
	 *
	 * @param array $b The trade.
	 * @param array $d The details for display.
	 *
	 * @return string
	 */
	private static function exact_fairplay( $b, $d ) {

		$mark   = self::$opts['slot'];
		$shapes = self::shapes();
		$boja   = self::val( 'icon', '#ffcc01' );

		$redovi = array(
			'phone' => array( 'phone', __( 'Phone contact', '2ranq-forms' ), esc_html( $d['phone'] ), esc_url( self::tel( $d['phone'] ) ) ),
			'mail'  => array( 'mail', __( 'Email', '2ranq-forms' ), esc_html( $d['email'] ), is_email( $d['email'] ) ? 'mailto:' . esc_attr( $d['email'] ) : '' ),
			'pin'   => array( 'pin', __( 'Office', '2ranq-forms' ), esc_html( $d['street'] ) . ', ' . esc_html( $d['city'] ), '' ),
			'clock' => array( 'clock', __( 'Open', '2ranq-forms' ), esc_html( $d['hours'] ), '' ),
		);

		$wanted = self::$opts['rows'];
		$spisak = '';

		foreach ( $redovi as $kljuc => $r ) {

			if ( is_array( $wanted ) && ! in_array( $kljuc, $wanted, true ) ) {
				continue;
			}

			$vrednost = $r[3]
				? '<a class="ranq-fp__link" href="' . $r[3] . '">' . $r[2] . '</a>'
				: $r[2];

			$spisak .= '<div class="ranq-fp__row"' . ( $mark ? ' data-ranq-row="' . esc_attr( $kljuc ) . '"' : '' ) . '>'
				. '<img class="ranq-fp__icon" src="' . self::icon( $shapes[ $r[0] ], $boja, '1.6' ) . '" alt="" width="26" height="26" />'
				. '<span class="ranq-fp__text">'
				. '<span class="ranq-fp__key">' . esc_html( $r[1] ) . '</span>'
				. '<span class="ranq-fp__value">' . $vrednost . '</span>'
				. '</span></div>';
		}

		$vars = self::css_vars( 'site-fairplay' );

		return '<!-- wp:group {"align":"full","className":"ranq-fp"} -->'
			. '<div class="wp-block-group alignfull ranq-fp"' . ( $mark ? ' data-ranq-part="wrap"' : '' )
			. ( $vars ? ' style="' . esc_attr( $vars ) . '"' : '' ) . '>'
			. '<div class="ranq-fp__inner">'
			. '<!-- wp:html --><h2 class="ranq-fp__heading"' . ( $mark ? ' data-ranq-part="heading"' : '' ) . '>'
			. esc_html( $b['heading'] ) . '</h2><!-- /wp:html -->'
			. '<div class="ranq-fp__cols">'
			. '<!-- wp:html --><div class="ranq-fp__card"' . ( $mark ? ' data-ranq-part="card"' : '' ) . '>'
			. $spisak . '</div><!-- /wp:html -->'
			. '<div class="ranq-fp__form">' . self::form_block() . '</div>'
			. '</div>'
			. '</div>'
			. '</div><!-- /wp:group -->';
	}

	/**
	 * Every section.
	 *
	 * Each one is a COPY of one of our own live sites, built by the rules in
	 * `10-PRAVILA-FULL-WIDGET.md`. The old, generic sections were deleted: they
	 * were not copies but approximations, and the plugin carries only what is
	 * genuinely good.
	 *
	 * @param array $args The changes the form owner makes.
	 *
	 * @return array
	 */
	public static function all( $args = array() ) {

		self::$opts = array_merge( self::blank_opts(), is_array( $args ) ? $args : array() );

		$out = array();

		foreach ( Ranq_Forms_Business::all() as $b ) {

			self::$biz = $b;

			$sadrzaj = self::render_one( $b );

			if ( '' === $sadrzaj ) {
				continue;
			}

			$out[ $b['key'] ] = array(
				'title'       => $b['title'],
				'description' => $b['description'],
				'group'       => $b['group'],
				'purpose'     => isset( $b['purpose'] ) ? $b['purpose'] : 'plain',
				'style'       => isset( $b['style'] ) ? $b['style'] : '',
				'content'     => $sadrzaj,
			);
		}

		self::$biz = array();

		/**
		 * Adding sections from modules.
		 *
		 * @param array $patterns The sections.
		 */
		return apply_filters( 'ranq_forms_patterns', $out );
	}

	/**
	 * Assembles one section. Empty when the pattern has not been built.
	 *
	 * @param array $b The pattern.
	 *
	 * @return string
	 */
	private static function render_one( $b ) {

		$d = self::details();

		switch ( $b['family'] ) {

			case 'exact-2ranq':
				return self::exact_2ranq( $b, $d );

			case 'exact-gaja':
				return self::exact_gaja( $b, $d );

			case 'exact-gaja-book':
				return self::exact_gaja_book( $b, $d );

			case 'exact-mitaleks':
				return self::exact_mitaleks( $b, $d );

			case 'exact-una':
				return self::exact_una( $b, $d );

			case 'exact-maryjana':
				return self::exact_maryjana( $b, $d );

			case 'exact-crypto':
				return self::exact_crypto( $b, $d );

			case 'exact-sigurni':
				return self::exact_sigurni( $b, $d );

			case 'exact-fizio':
				return self::exact_fizio( $b, $d );

			case 'exact-hotspot':
				return self::exact_hotspot( $b, $d );

			case 'exact-cvecara':
				return self::exact_cvecara( $b, $d );

			case 'exact-medijacija':
				return self::exact_medijacija( $b, $d );

			case 'exact-fairplay':
				return self::exact_fairplay( $b, $d );
		}

		return '';
	}
}