import { CONTACT, getHome, getSectors, getT } from "@/lib/content";
import type { Locale } from "@/lib/locales";
import { href } from "@/lib/routes";

import { DemoForm, type SectorOption } from "./DemoForm";
import { Section } from "./Section";
import styles from "./DemoBlock.module.css";

/**
 * The demo request block. Present at the end of every product, sector and
 * company page and as the whole of /kontakt, with the phone beside it
 * everywhere, because the phone is how Sulsys sells today (Blueprint 02).
 */
export function DemoBlock({
  locale,
  heading,
  lead,
  /** The home page's ending: the heading at display scale, on paper. */
  closing = false,
}: {
  locale: Locale;
  heading?: string;
  lead?: string;
  closing?: boolean;
}) {
  const t = getT(locale);
  const home = getHome(locale);
  const sectors = getSectors(locale);

  const sectorOptions: SectorOption[] = sectors.map((sector) => ({
    value: sector.id,
    label: sector.name,
  }));

  const form = (
    <DemoForm
      locale={locale}
      sectors={sectorOptions}
      strings={{
        name: t("form.name"),
        company: t("form.company"),
        sector: t("form.sector"),
        sectorPlaceholder: t("form.sectorPlaceholder"),
        sectorOther: t("form.sectorOther"),
        phone: t("form.phone"),
        language: t("form.language"),
        message: t("form.message"),
        optional: t("form.optional"),
        consent: t("form.consent"),
        privacyLabel: t("form.privacyLink"),
        privacyHref: href({ key: "privacy" }, locale),
        send: t("cta.demo"),
        sending: t("cta.sending"),
        successTitle: t("form.successTitle"),
        successBody: t("form.successDemo"),
        errorTitle: t("form.errorTitle"),
        errorSummaryAria: t("form.errorSummaryAria"),
      }}
    />
  );

  /*
   * The ending. On the home page the ask closes the experience: the
   * statement at the scale of the opening's headline beside the form, and
   * nothing else — the number, WhatsApp and the address were stated one
   * chapter up and are stated again in the footer.
   */
  if (closing) {
    return (
      <Section surface="paper">
        <div className={styles.closing}>
          <div className={styles.closingLede}>
            <h2 className={styles.closingHeading}>{heading ?? home.demoHeading}</h2>
            <p className={styles.lead}>{lead ?? home.demoLead}</p>
          </div>
          <div>{form}</div>
        </div>
      </Section>
    );
  }

  return (
    <Section surface="alt">
      <div className={styles.layout}>
        <div>
          <h2>{heading ?? home.demoHeading}</h2>
          <p className={styles.lead}>{lead ?? home.demoLead}</p>
          {form}
        </div>

        <div className={styles.aside}>
          <div>
            <p className={styles.asideLabel}>{t("label.direct")}</p>
            <ul className={styles.channels}>
              <li className={styles.channel}>
                <span className={styles.channelLabel}>{t("contact.phoneLabel")}</span>
                <span className={styles.channelValue}>
                  <a href={`tel:${CONTACT.phoneE164}`} data-event="call_click">
                    {CONTACT.phoneDisplay}
                  </a>
                </span>
              </li>
              <li className={styles.channel}>
                <span className={styles.channelLabel}>{t("contact.whatsappLabel")}</span>
                <span className={styles.channelValue}>
                  <a
                    href={CONTACT.whatsapp}
                    target="_blank"
                    rel="noopener noreferrer"
                    data-event="whatsapp_click"
                  >
                    {CONTACT.phoneDisplay}
                  </a>
                </span>
              </li>
              <li className={styles.channel}>
                <span className={styles.channelLabel}>{t("contact.emailLabel")}</span>
                <span className={styles.channelValue}>
                  <a href={`mailto:${CONTACT.email}`} data-event="email_click">
                    {CONTACT.email}
                  </a>
                </span>
              </li>
            </ul>
          </div>

          <div>
            <p className={styles.asideLabel}>{t("contact.addressLabel")}</p>
            <address className={styles.address}>
              <span>{CONTACT.street}</span>
              <span>
                {CONTACT.postalCode} {CONTACT.city[locale]}
              </span>
              <span>{CONTACT.country[locale]}</span>
            </address>
          </div>
        </div>
      </div>
    </Section>
  );
}