/* Shared marketing primitives, composed on top of the LexInTosh DS. */
const { Button } = window.LexInToshDesignSystem_e187a4;
const UIcon = window.Icon;
const CONTACT = window.SITE.contact;
const MARK = window.__asset("mark", "assets/lexintosh-mark.png");

const CTA_LG = { height: 52, padding: "0 26px", fontSize: 16, borderRadius: "var(--radius-md)" };
const CTA_MD = { height: 46, padding: "0 22px", fontSize: 15, borderRadius: "var(--radius-md)" };

function Eyebrow({ children, mark = false, dark = false }) {
  return (
    <span className={"eyebrow" + (dark ? " eyebrow--dark" : "")}>
      {mark ? <img className="eyebrow__mark" src={MARK} alt="" /> : <span className="eyebrow__dot" />}
      {children}
    </span>
  );
}

function TLink({ href, external, children, style, arrow = true, className = "", ...rest }) {
  const ext = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
  return (
    <a href={href} className={"tlink " + className} style={style} {...ext} {...rest}>
      {children}
      {arrow ? <UIcon name={external ? "arrow-up-right" : "arrow-right"} size={16} className="tlink__i" /> : null}
    </a>
  );
}

function SalesButton({ children = "Contact Us", variant = "default", size, style, arrow = true, ...rest }) {
  return (
    <Button
      variant={variant}
      onClick={() => {
        const target = document.getElementById("contact");
        if (target) target.scrollIntoView({ behavior: "smooth", block: "start" });
        else window.location.href = CONTACT.mailto;
      }}
      style={{ ...(size || CTA_LG), ...style }}
      {...rest}
    >
      {children}
      {arrow && variant === "default" ? <UIcon name="arrow-right" size={18} /> : null}
    </Button>
  );
}

function Reveal({ children, delay = 0, className = "", style, as = "div" }) {
  const Tag = as;
  return (
    <Tag className={"reveal " + className} style={{ transitionDelay: delay ? delay + "ms" : undefined, ...style }}>
      {children}
    </Tag>
  );
}

function SectionHead({ eyebrow, title, lead, align = "left", mark = false, dark = false, max }) {
  return (
    <div className={"sec-head" + (align === "center" ? " sec-head--center" : "")} style={max ? { maxWidth: max } : null}>
      {eyebrow ? <Reveal><Eyebrow mark={mark} dark={dark}>{eyebrow}</Eyebrow></Reveal> : null}
      {title ? <Reveal delay={60}><h2 className="h2">{title}</h2></Reveal> : null}
      {lead ? <Reveal delay={120}><p className="lead">{lead}</p></Reveal> : null}
    </div>
  );
}

Object.assign(window, { Eyebrow, TLink, SalesButton, Reveal, SectionHead, CTA_LG, CTA_MD });