import { Arrows2 } from './Arrows2.jsx';
import { Button3 } from './Button3.jsx';
import { Tag2 } from './Tag2.jsx';

// figma node: 8165:5814 Intro Block (6 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "alignment=" + __venc(p.alignment);

export function IntroBlock(_p = {}) {
  const props = { ..._p, showTag: _p.showTag ?? true, rightButton: _p.rightButton ?? false, showHeadline: _p.showHeadline ?? true, alignment: _p.alignment ?? "h1 left", secondary: _p.secondary ?? true, showButtonArrows: _p.showButtonArrows ?? true, arrows: _p.arrows ?? true, primary: _p.primary ?? true, showBody: _p.showBody ?? true, showButtons: _p.showButtons ?? true };
  const __body0 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-32-7) * 1px)",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 64,
            lineHeight: "72px",
            letterSpacing: "-2.500px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H1 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
        {props.arrows && (
        <Arrows2
          style={{ position: "relative", flexShrink: 0 }}
          type={"default"}
        />
        )}
      </div>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-32-7) * 1px)",
        alignItems: "center",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 64,
            textAlign: "center",
            lineHeight: "72px",
            letterSpacing: "-2.500px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H1 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
        {props.showButtonArrows && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.arrows && (
          <Arrows2
            style={{ position: "relative", flexShrink: 0 }}
            type={"default"}
          />
          )}
        </div>
        )}
      </div>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-32-7) * 1px)",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 48,
            lineHeight: "52px",
            letterSpacing: "-2px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H2 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
      </div>
      {props.showButtonArrows && (
      <div style={{
        position: "relative",
        display: "flex",
        flexDirection: "row",
        gap: "calc(var(--spacing-24-5) * 1px)",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
      }}>
        {props.rightButton && (
        <Button3
          style={{
            position: "relative",
            width: 83,
            height: 40,
            flexShrink: 0,
          }}
          shape={"rectangle"}
          state={"default"}
          type={"primary"}
          icon={"no icon"}
          size={"lg"}
        />
        )}
        {props.arrows && (
        <Arrows2
          style={{ position: "relative", flexShrink: 0 }}
          type={"default"}
        />
        )}
      </div>
      )}
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-32-7) * 1px)",
        alignItems: "center",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 48,
            textAlign: "center",
            lineHeight: "52px",
            letterSpacing: "-2px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H2 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
        {props.showButtonArrows && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.arrows && (
          <Arrows2
            style={{ position: "relative", flexShrink: 0 }}
            type={"default"}
          />
          )}
        </div>
        )}
      </div>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "flex-end",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-24-5) * 1px)",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-20-4) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 40,
            lineHeight: "44px",
            letterSpacing: "-1px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H3 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
      </div>
      {props.showButtonArrows && (
      <div style={{
        position: "relative",
        display: "flex",
        flexDirection: "row",
        gap: "calc(var(--spacing-24-5) * 1px)",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        flexShrink: 0,
      }}>
        {props.rightButton && (
        <Button3
          style={{
            position: "relative",
            width: 83,
            height: 40,
            flexShrink: 0,
          }}
          shape={"rectangle"}
          state={"default"}
          type={"primary"}
          icon={"no icon"}
          size={"lg"}
        />
        )}
        {props.arrows && (
        <Arrows2
          style={{ position: "relative", flexShrink: 0 }}
          type={"default"}
        />
        )}
      </div>
      )}
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: "calc(var(--width-12-columns) * 1px)",
      display: "flex",
      flexDirection: "row",
      justifyContent: "center",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        width: "calc(var(--width-6-columns-2) * 1px)",
        display: "flex",
        flexDirection: "column",
        gap: "calc(var(--spacing-24-5) * 1px)",
        alignItems: "center",
        flexWrap: "nowrap",
        flexShrink: 0,
        alignSelf: "stretch",
      }}>
        {props.showTag && (
        <Tag2
          style={{ position: "relative", flexShrink: 0 }}
          where={"on lift"}
        />
        )}
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          gap: "calc(var(--spacing-16-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>
          {props.showHeadline && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Serif\", ui-serif, Georgia, \"Times New Roman\", serif",
            fontWeight: 400,
            fontSize: 40,
            textAlign: "center",
            lineHeight: "44px",
            letterSpacing: "-1px",
            color: "var(--text-heading-strong-2)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text1 ?? "Clear H3 headline goes here"}</span>
          )}
          {props.showBody && (
          <span style={{
            position: "relative",
            fontFamily: "\"IBM Plex Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 400,
            fontSize: 16,
            textAlign: "center",
            lineHeight: "24px",
            color: "rgba(25,24,24,0.88)",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>{props.text2 ?? "Use this text to expand on your headline. Keep it short and clear."}</span>
          )}
        </div>
        {props.showButtons && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-8-7) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.primary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"primary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
          {props.secondary && (
          <Button3
            style={{ position: "relative", flexShrink: 0 }}
            shape={"rectangle"}
            state={"default"}
            type={"secondary"}
            icon={"no icon"}
            size={"lg"}
          />
          )}
        </div>
        )}
        {props.showButtonArrows && (
        <div style={{
          position: "relative",
          display: "flex",
          flexDirection: "row",
          gap: "calc(var(--spacing-24-5) * 1px)",
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexShrink: 0,
        }}>
          {props.arrows && (
          <Arrows2
            style={{ position: "relative", flexShrink: 0 }}
            type={"default"}
          />
          )}
        </div>
        )}
      </div>
    </div>
  );
  const __impls = {
    // figma: Alignment=H1 Left
    "alignment=h1 left": __body0,
    // figma: Alignment=H1 Center
    "alignment=h1 center": __body1,
    // figma: Alignment=H2 Left
    "alignment=h2 left": __body2,
    // figma: Alignment=H2 Center
    "alignment=h2 center": __body3,
    // figma: Alignment=H3 Left
    "alignment=h3 left": __body4,
    // figma: Alignment=H3 Center
    "alignment=h3 center": __body5,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default IntroBlock;
