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

// figma node: 9472:2977 Component 3 (22 variants)
const __venc = (v) => String(v).replace(/[%|=]/g, encodeURIComponent);
const __vkey = (p) => "variant=" + __venc(p.variant) + '|' + "hover=" + __venc(p.hover);

export function Component3(_p = {}) {
  const props = { ..._p, variant: _p.variant ?? "2", hover: _p.hover ?? true };
  const __body0 = () => (
    <div className={props.className} style={{
      width: 356.23,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 357.138,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Jean II électrique par Jean Fourche"}</span>
    </div>
  );
  const __body1 = () => (
    <div className={props.className} style={{
      width: 356.23,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 357.138,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Jean II électrique par Jean Fourche"}</span>
    </div>
  );
  const __body2 = () => (
    <div className={props.className} style={{
      width: 198.05,
      height: 88,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 122.5,
        top: -1,
        width: 67.198,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Jean II"}</span>
      <span style={{
        position: "absolute",
        left: 0,
        top: 29,
        width: 199,
        height: 60,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
        whiteSpace: "pre-wrap",
      }}>{props.text2 ?? "électrique par Jean\nFourche"}</span>
    </div>
  );
  const __body3 = () => (
    <div className={props.className} style={{
      width: 198.05,
      height: 88,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 122.5,
        top: -1,
        width: 67.198,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Jean II"}</span>
      <span style={{
        position: "absolute",
        left: 0,
        top: 29,
        width: 199,
        height: 60,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(75,212,153)",
        whiteSpace: "pre-wrap",
      }}>{props.text2 ?? "électrique par Jean\nFourche"}</span>
    </div>
  );
  const __body4 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.81,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"4"} />}</div>
    </div>
  );
  const __body5 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.81,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"5"} />}</div>
    </div>
  );
  const __body6 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"49"} />}</div>
    </div>
  );
  const __body7 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"50"} />}</div>
    </div>
  );
  const __body8 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.69,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"52"} />}</div>
    </div>
  );
  const __body9 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.69,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"53"} />}</div>
    </div>
  );
  const __body10 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.82,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"77"} />}</div>
    </div>
  );
  const __body11 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.82,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"78"} />}</div>
    </div>
  );
  const __body12 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"106"} />}</div>
    </div>
  );
  const __body13 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"107"} />}</div>
    </div>
  );
  const __body14 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        textAlign: "center",
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.68,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"109"} />}</div>
    </div>
  );
  const __body15 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        textAlign: "center",
        lineHeight: "30px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.68,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"110"} />}</div>
    </div>
  );
  const __body16 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.81,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"124"} />}</div>
    </div>
  );
  const __body17 = () => (
    <div className={props.className} style={{
      width: 255.81,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 236.183,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        textAlign: "center",
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Découvrez comment l'utiliser"}</span>
      <div style={{
          position: "absolute",
          left: 235.81,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"125"} />}</div>
    </div>
  );
  const __body18 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        lineHeight: "24px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"169"} />}</div>
    </div>
  );
  const __body19 = () => (
    <div className={props.className} style={{
      width: 157.66,
      height: 22.5,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -0.75,
        width: 138.106,
        height: 24,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 16,
        lineHeight: "24px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "essayer les vélos"}</span>
      <div style={{
          position: "absolute",
          left: 137.66,
          top: 2.57,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"170"} />}</div>
    </div>
  );
  const __body20 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(47,133,96)",
        textDecoration: "underline",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.69,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"172"} />}</div>
    </div>
  );
  const __body21 = () => (
    <div className={props.className} style={{
      width: 282.69,
      height: 28,
      position: "relative",
      ...props.style,
    }}>
      <span style={{
        position: "absolute",
        left: 0,
        top: -1,
        width: 263.102,
        height: 30,
        fontFamily: "Poppins, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
        fontWeight: 600,
        fontSize: 20,
        lineHeight: "30px",
        color: "rgb(75,212,153)",
      }}>{props.text1 ?? "Discutez avec nos experts"}</span>
      <div style={{
          position: "absolute",
          left: 262.69,
          top: 5.46,
          width: 20,
          height: 20,
        }}>{props.icon1 ?? <Component1 variant={"173"} />}</div>
    </div>
  );
  const __impls = {
    // figma: variant=2,:hover=true
    "variant=2|hover=true": __body0,
    // figma: variant=2,:hover=false
    "variant=2|hover=false": __body1,
    // figma: variant=6,:hover=true
    "variant=6|hover=true": __body2,
    // figma: variant=6,:hover=false
    "variant=6|hover=false": __body3,
    // figma: variant=1,:hover=true
    "variant=1|hover=true": __body4,
    // figma: variant=1,:hover=false
    "variant=1|hover=false": __body5,
    // figma: variant=3,:hover=true
    "variant=3|hover=true": __body6,
    // figma: variant=3,:hover=false
    "variant=3|hover=false": __body7,
    // figma: variant=4,:hover=true
    "variant=4|hover=true": __body8,
    // figma: variant=4,:hover=false
    "variant=4|hover=false": __body9,
    // figma: variant=5,:hover=true
    "variant=5|hover=true": __body10,
    // figma: variant=5,:hover=false
    "variant=5|hover=false": __body11,
    // figma: variant=7,:hover=true
    "variant=7|hover=true": __body12,
    // figma: variant=7,:hover=false
    "variant=7|hover=false": __body13,
    // figma: variant=8,:hover=true
    "variant=8|hover=true": __body14,
    // figma: variant=8,:hover=false
    "variant=8|hover=false": __body15,
    // figma: variant=9,:hover=true
    "variant=9|hover=true": __body16,
    // figma: variant=9,:hover=false
    "variant=9|hover=false": __body17,
    // figma: variant=10,:hover=true
    "variant=10|hover=true": __body18,
    // figma: variant=10,:hover=false
    "variant=10|hover=false": __body19,
    // figma: variant=11,:hover=true
    "variant=11|hover=true": __body20,
    // figma: variant=11,:hover=false
    "variant=11|hover=false": __body21,
  };
  return (__impls[__vkey(props)] ?? __body0)();
}
export default Component3;
