import { Interface8 } from './Interface8.jsx';

// figma node: 9493:1102 Module/Hero/Desktop
export function ModuleHeroDesktop(_p = {}) {
  const props = _p;
  return (
    <div className={props.className} style={{
      width: 1280,
      borderRadius: 20,
      background: "linear-gradient(90deg, rgb(234,242,255) 0.00%, rgb(245,248,255) 100.00%)",
      display: "flex",
      flexDirection: "row",
      gap: 20,
      padding: "24px 24px 24px 24px",
      alignItems: "flex-start",
      flexWrap: "nowrap",
      boxSizing: "border-box",
      position: "relative",
      ...props.style,
    }}>
      <div style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 16,
        backgroundColor: "rgb(255,255,255)",
        boxShadow: "0px 4px 20px 0px rgba(44,52,119,0.08)",
        display: "flex",
        flexDirection: "column",
        gap: 8,
        padding: "28px 32px 28px 32px",
        justifyContent: "center",
        alignItems: "flex-start",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        flexGrow: 1,
        alignSelf: "stretch",
      }}>
        <span style={{
          position: "relative",
          fontFamily: "Parkinsans, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 500,
          fontSize: 22,
          lineHeight: "100%",
          color: "rgb(85,89,117)",
          flexShrink: 0,
          alignSelf: "stretch",
          whiteSpace: "pre-wrap",
        }}>{"Bonjour Thibault, vous cumulez jusqu’à "}<span style={{ fontWeight: 700, color: "rgb(75,212,153)", fontSize: 26 }}>{"1 200 €"}</span>{" 🎉"}</span>
        <span style={{
          position: "relative",
          fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
          fontWeight: 400,
          fontSize: 14,
          lineHeight: "100%",
          color: "rgb(136,136,136)",
          flexShrink: 0,
          alignSelf: "stretch",
        }}>{props.text1 ?? "Grâce à votre entreprise et aux subventions publiques."}</span>
        <div style={{
          position: "relative",
          overflow: "hidden",
          borderRadius: 100,
          background: "linear-gradient(90deg, rgb(44,52,119) 0.00%, rgb(34,40,90) 100.00%)",
          display: "flex",
          flexDirection: "row",
          gap: 8,
          padding: "12px 18px 12px 20px",
          alignItems: "center",
          flexWrap: "nowrap",
          boxSizing: "border-box",
          flexShrink: 0,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 14,
            whiteSpace: "nowrap",
            lineHeight: "100%",
            color: "rgb(255,255,255)",
            flexShrink: 0,
          }}>{props.text2 ?? "Découvrir mes aides"}</span>
          <div style={{
              position: "relative",
              width: 16,
              height: 16,
              flexShrink: 0,
            }}>{props.icon1 ?? <Interface8 property1={"arrow-right"} style={{ transform: "scale(0.667, 0.667)", transformOrigin: "0 0" }} />}</div>
        </div>
      </div>
      <div style={{
        position: "relative",
        overflow: "hidden",
        borderRadius: 16,
        backgroundColor: "rgb(255,255,255)",
        boxShadow: "0px 4px 20px 0px rgba(44,52,119,0.08)",
        display: "flex",
        flexDirection: "row",
        gap: 14,
        padding: "16px 16px 16px 16px",
        alignItems: "center",
        flexWrap: "nowrap",
        boxSizing: "border-box",
        flexGrow: 1,
        alignSelf: "stretch",
      }}>
        <div style={{
          position: "relative",
          width: 70,
          height: 70,
          overflow: "hidden",
          borderRadius: 12,
          backgroundColor: "rgb(246,246,246)",
          flexShrink: 0,
        }}>
          <div style={{
              position: "absolute",
              left: 15,
              top: 15,
              width: 40,
              height: 40,
            }}>{props.icon2 ?? <Interface8 property1={"bike"} style={{ transform: "scale(1.667, 1.667)", transformOrigin: "0 0" }} />}</div>
        </div>
        <div style={{
          position: "relative",
          overflow: "hidden",
          backgroundColor: "rgb(255,255,255)",
          display: "flex",
          flexDirection: "column",
          gap: 3,
          alignItems: "flex-start",
          flexWrap: "nowrap",
          flexGrow: 1,
        }}>
          <span style={{
            position: "relative",
            fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
            fontWeight: 600,
            fontSize: 15,
            lineHeight: "100%",
            color: "rgb(85,89,117)",
            flexShrink: 0,
            alignSelf: "stretch",
            whiteSpace: "nowrap",
          }}>{props.text3 ?? "💡 Comment ça marche ?"}</span>
          <div style={{
            position: "relative",
            overflow: "hidden",
            backgroundColor: "rgb(255,255,255)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(136,136,136)",
              flexShrink: 0,
            }}>{props.text4 ?? "Prix vélo"}</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(85,89,117)",
              flexShrink: 0,
            }}>1 499 €</span>
          </div>
          <div style={{
            position: "relative",
            overflow: "hidden",
            backgroundColor: "rgb(255,255,255)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(136,136,136)",
              flexShrink: 0,
            }}>Entreprise</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(75,212,153)",
              flexShrink: 0,
            }}>- 500 €</span>
          </div>
          <div style={{
            position: "relative",
            overflow: "hidden",
            backgroundColor: "rgb(255,255,255)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(136,136,136)",
              flexShrink: 0,
            }}>Région</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(75,212,153)",
              flexShrink: 0,
            }}>- 400 €</span>
          </div>
          <div style={{
            position: "relative",
            overflow: "hidden",
            backgroundColor: "rgb(255,255,255)",
            display: "flex",
            flexDirection: "row",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "nowrap",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 400,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(136,136,136)",
              flexShrink: 0,
            }}>BeeToGreen</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(75,212,153)",
              flexShrink: 0,
            }}>- 100 €</span>
          </div>
          <div style={{
            position: "relative",
            overflow: "hidden",
            borderRadius: 4,
            backgroundColor: "rgb(234,242,255)",
            display: "flex",
            flexDirection: "row",
            padding: "6px 8px 6px 8px",
            justifyContent: "space-between",
            alignItems: "center",
            flexWrap: "nowrap",
            boxSizing: "border-box",
            flexShrink: 0,
            alignSelf: "stretch",
          }}>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 13,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(44,52,119)",
              flexShrink: 0,
            }}>Vous payez</span>
            <span style={{
              position: "relative",
              fontFamily: "\"Instrument Sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
              fontWeight: 600,
              fontSize: 15,
              whiteSpace: "nowrap",
              lineHeight: "100%",
              color: "rgb(44,52,119)",
              flexShrink: 0,
            }}>499 €</span>
          </div>
        </div>
      </div>
    </div>
  );
}
export default ModuleHeroDesktop;
