import { component$, useStylesScoped$ } from '@builder.io/qwik';
import { $translate as t } from 'qwik-speak';

import Button, { ButtonTheme } from '../../button/button';
import Section from '../../section/section';
import styles from './medusa.css?inline';
import { centerShape, leftShape, rightShape } from './shapes';
import Line from '../../line/line';

export default component$(() => {
  useStylesScoped$(styles);

  return (
    <Section id="medusa">
      <div class="flex flex-col items-center gap-8">
        <h2 class="text-4xl leading-normal md:text-3xl text-blue-gray-900 font-bold mx-auto text-center leading-tight">
          {t('medusa.title@@Start using Module Federation with')}
        </h2>

        <Button
          class="w-full md:w-auto"
          theme={ButtonTheme.SOLID}
          href="https://www.medusa.codes"
          type="link"
        >
          <div class="flex items-center gap-3 h-[18px]">
            <svg
              class="h-[32px]"
              viewBox="0 0 126 34"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M17.3857 3.08587C17.3857 3.66237 16.9267 4.12971 16.3603 4.12971C15.794 4.12971 15.3349 3.66237 15.3349 3.08587C15.3349 2.50938 15.794 2.04203 16.3603 2.04203C16.9267 2.04203 17.3857 2.50938 17.3857 3.08587ZM17.2696 5.50118C18.2234 5.12886 18.9006 4.18787 18.9006 3.08587C18.9006 1.65774 17.7633 0.5 16.3603 0.5C14.9574 0.5 13.8201 1.65773 13.8201 3.08587C13.8201 4.18813 14.4976 5.1293 15.4518 5.50144V7.191L9.95493 10.4216C9.42856 10.731 9.1043 11.3027 9.1043 11.9214V18.2811L7.85583 19.0754C7.45449 18.8051 6.97335 18.6477 6.4561 18.6477C5.05317 18.6477 3.91586 19.8055 3.91586 21.2336C3.91586 22.6618 5.05317 23.8195 6.4561 23.8195C7.85904 23.8195 8.99634 22.6618 8.99634 21.2336C8.99634 21.009 8.96822 20.7912 8.91537 20.5834L9.93152 19.9369C9.93928 19.9416 9.94708 19.9463 9.95493 19.9509L15.51 23.2158C16.0364 23.5251 16.6849 23.5251 17.2113 23.2158L22.7664 19.9509C22.824 19.917 22.8792 19.88 22.9319 19.8401L24.199 20.4581C24.1921 20.5355 24.1887 20.6138 24.1887 20.693C24.1887 22.1211 25.326 23.2789 26.7289 23.2789C28.1318 23.2789 29.2691 22.1211 29.2691 20.693C29.2691 19.2649 28.1318 18.1071 26.7289 18.1071C26.0616 18.1071 25.4544 18.3691 25.001 18.7974L23.617 18.1224L23.617 11.9214C23.617 11.3027 23.2927 10.731 22.7664 10.4216L17.2696 7.19103V5.50118ZM16.1215 8.93409H16.5998L20.8005 11.4029L16.3407 13.7509L11.6943 11.536L16.1215 8.93409ZM10.9221 13.2112V18.3826L15.4518 21.0448V15.3705L10.9221 13.2112ZM17.2696 21.0448L21.7992 18.3826V12.9604L17.2696 15.3452V21.0448ZM15.6033 28.445L15.6033 27.1224C15.5953 27.1179 15.5874 27.1133 15.5795 27.1086L11.1254 24.4648C10.7641 24.2503 10.6419 23.7782 10.8526 23.4104C11.0633 23.0425 11.5271 22.9182 11.8885 23.1327L16.3426 25.7765C16.3535 25.783 16.3669 25.783 16.3778 25.7765L20.8319 23.1327C21.1933 22.9182 21.657 23.0425 21.8678 23.4104C22.0785 23.7782 21.9563 24.2503 21.595 24.4648L17.1408 27.1086L17.1307 27.1146C17.1265 27.117 17.1223 27.1195 17.1181 27.1219V28.4453C18.1509 28.7734 18.9006 29.7546 18.9006 30.9141C18.9006 32.3423 17.7633 33.5 16.3603 33.5C14.9574 33.5 13.8201 32.3423 13.8201 30.9141C13.8201 29.7544 14.5701 28.773 15.6033 28.445ZM5.89628 9.8585C5.89628 9.84701 5.8964 9.83554 5.89664 9.82409L4.77261 9.16347C3.97702 9.90969 2.76758 10.0798 1.78129 9.50018C0.566308 8.78611 0.150026 7.20461 0.851494 5.96781C1.55296 4.731 3.10655 4.30724 4.32152 5.02131C5.30828 5.60125 5.76821 6.75334 5.53041 7.82825L6.66568 8.49548L11.1254 5.84833C11.4868 5.63383 11.9505 5.75816 12.1612 6.12601C12.372 6.49387 12.2498 6.96595 11.8885 7.18044L7.42845 9.82775C7.4177 9.83413 7.4111 9.84584 7.4111 9.8585L7.4111 15.1566C7.4111 15.5824 7.07199 15.9276 6.65369 15.9276C6.23538 15.9276 5.89628 15.5824 5.89628 15.1566L5.89628 9.8585ZM28.2482 9.16364L26.8241 10.0006L26.8241 15.1566C26.8241 15.5824 26.485 15.9276 26.0667 15.9276C25.6484 15.9276 25.3093 15.5824 25.3093 15.1566V9.8585C25.3093 9.84584 25.3027 9.83413 25.2919 9.82776L20.8319 7.18044C20.4706 6.96595 20.3484 6.49387 20.5591 6.12601C20.7699 5.75816 21.2336 5.63384 21.595 5.84833L26.055 8.49564C26.1037 8.52456 26.1505 8.55595 26.1953 8.5896L27.4909 7.82815C27.2535 6.75349 27.7135 5.60189 28.7 5.02212C29.9149 4.30805 31.4685 4.73181 32.17 5.96861C32.8715 7.20542 32.4552 8.78691 31.2402 9.50098C30.2536 10.0808 29.0438 9.9104 28.2482 9.16364ZM6.4561 22.2775C7.02242 22.2775 7.48152 21.8101 7.48152 21.2336C7.48152 20.6571 7.02242 20.1898 6.4561 20.1898C5.88978 20.1898 5.43068 20.6571 5.43068 21.2336C5.43068 21.8101 5.88978 22.2775 6.4561 22.2775ZM2.16337 6.73882C1.88021 7.23808 2.04825 7.87649 2.5387 8.16474C3.02915 8.45298 3.65628 8.28192 3.93944 7.78266C4.2226 7.2834 4.05456 6.645 3.56411 6.35675C3.07366 6.0685 2.44653 6.23956 2.16337 6.73882ZM17.3857 30.9141C17.3857 31.4906 16.9267 31.958 16.3603 31.958C15.794 31.958 15.3349 31.4906 15.3349 30.9141C15.3349 30.3376 15.794 29.8703 16.3603 29.8703C16.9267 29.8703 17.3857 30.3376 17.3857 30.9141ZM26.7289 21.7368C27.2952 21.7368 27.7543 21.2695 27.7543 20.693C27.7543 20.1165 27.2952 19.6492 26.7289 19.6492C26.1626 19.6492 25.7035 20.1165 25.7035 20.693C25.7035 21.2695 26.1626 21.7368 26.7289 21.7368ZM29.4574 6.35756C29.9478 6.06931 30.575 6.24037 30.8581 6.73963C31.1413 7.23889 30.9732 7.87729 30.4828 8.16554C29.9923 8.45379 29.3652 8.28273 29.082 7.78347C28.7989 7.28421 28.9669 6.6458 29.4574 6.35756Z"
                fill="#A873FF"
              />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M51.4873 28.5V8.96395C51.5491 9.01304 51.6121 9.06497 51.6763 9.11981L51.6799 9.12293L51.6836 9.12601C52.117 9.48601 52.5228 9.95938 52.8948 10.5588L52.8964 10.5613L52.898 10.5638C53.2635 11.1408 53.5749 11.8382 53.8255 12.6641L53.8268 12.6684L53.8282 12.6728C54.0829 13.4702 54.2718 14.2854 54.2718 15.3094V16.0917C54.2601 16.1033 54.2484 16.115 54.2367 16.1268C53.7674 16.6005 53.1634 17.3793 53.164 18.3317C53.1645 19.284 53.7693 20.0624 54.239 20.5358C54.4874 20.7861 54.7332 20.9863 54.9162 21.1238C55.0084 21.1931 55.0862 21.2477 55.1427 21.286C55.171 21.3052 55.194 21.3203 55.211 21.3313C55.2194 21.3368 55.2264 21.3413 55.2317 21.3447L55.2385 21.3489L55.2409 21.3505L55.2423 21.3514C55.2423 21.3514 55.2424 21.3514 55.2602 21.3265L55.2603 21.3269L55.2427 21.3516L55.2693 21.3682C55.2999 21.5218 55.3011 21.678 55.2715 21.8322C55.2022 22.1937 54.9552 22.5893 54.4254 22.9364L54.9477 23.6325C55.3187 23.3894 55.6081 23.1105 55.815 22.809C56.094 23.1368 56.4834 23.416 56.9775 23.6245L57.3519 22.8498C56.7622 22.6009 56.4407 22.2553 56.3006 21.9121C56.2204 21.7156 56.1937 21.5059 56.2202 21.2945L56.2334 21.2856C56.2898 21.2473 56.3676 21.1926 56.4597 21.1233C56.6426 20.9857 56.8882 20.7853 57.1362 20.5349C57.6055 20.0611 58.2095 19.2823 58.209 18.33C58.2085 17.3777 57.6037 16.5993 57.1339 16.1259C57.1025 16.0943 57.0713 16.0635 57.0401 16.0335V15.3094C57.0401 14.2854 57.1154 13.4702 57.3702 12.6728C57.6341 11.8467 57.9592 11.1406 58.3398 10.5478C58.7287 9.94209 59.1385 9.46364 59.5637 9.10035C59.6209 9.05149 59.677 9.00512 59.7319 8.96115V28.5H62.7084V5.5H60.5431L60.3937 5.5698C59.112 6.16866 58.0238 6.8915 57.1412 7.74417C56.5519 8.31351 56.0458 8.98522 55.6188 9.75318C55.1881 8.98426 54.6752 8.31189 54.0759 7.74219C53.1964 6.89298 52.1254 6.17135 50.873 5.57257L50.7212 5.5H48.5107V28.5H51.4873ZM74.2893 18.1591V15.5333H68.2103V11.1803C68.2103 10.4956 68.2895 9.96703 68.4256 9.57505C68.5591 9.19026 68.7505 8.92757 68.9779 8.74903L68.9789 8.74827L68.9799 8.7475C69.2408 8.54115 69.5844 8.38113 70.0351 8.28394C70.5105 8.18142 71.0931 8.12579 71.7913 8.12579H74.2685V5.5H71.3541C70.4127 5.5 69.5841 5.58077 68.8818 5.75577L68.8798 5.75625L68.8779 5.75674C68.2018 5.92904 67.6082 6.1812 67.1181 6.52827C66.6563 6.85229 66.284 7.24474 66.0114 7.70498C65.7545 8.12607 65.5701 8.57681 65.4583 9.05469C65.3526 9.50609 65.2855 9.97532 65.2557 10.4617L65.2551 10.4711L65.2548 10.4805C65.2408 10.9403 65.2337 11.3876 65.2337 11.8223V28.5H74.7889V25.8742H68.2103V18.1591H74.2893ZM87.6035 23.52L87.6035 23.5195C87.6176 23.0597 87.6246 22.6124 87.6246 22.1777V11.8223C87.6246 11.3876 87.6176 10.9403 87.6035 10.4805C87.5884 9.98515 87.5204 9.50624 87.3978 9.04506C87.2864 8.57359 87.1044 8.1286 86.8516 7.71251C86.5901 7.24513 86.2139 6.85083 85.7401 6.52808C85.2591 6.1777 84.6625 5.92688 83.9785 5.75624C83.2887 5.58068 82.473 5.5 81.5459 5.5H76.9869V28.5H81.5459C82.4739 28.5 83.2902 28.4192 83.9805 28.2433L83.9856 28.242L83.9907 28.2406C84.6691 28.0574 85.2587 27.8081 85.7339 27.4761C86.2085 27.1541 86.5877 26.7655 86.8515 26.3068C87.1039 25.8787 87.2866 25.4268 87.3984 24.9527C87.5199 24.4822 87.5883 24.0044 87.6035 23.52ZM84.4328 24.4444C84.2999 24.8272 84.108 25.1006 83.8742 25.2948C83.6317 25.4833 83.3 25.6364 82.8507 25.7341C82.3868 25.8247 81.8024 25.8742 81.0879 25.8742H79.9634V8.12579H81.0879C81.8017 8.12579 82.3821 8.18171 82.8401 8.28308L82.8421 8.28352L82.8441 8.28394C83.294 8.38097 83.6254 8.53949 83.8681 8.73912L83.8742 8.74414L83.8805 8.74903C84.1079 8.92757 84.2992 9.19026 84.4328 9.57505C84.5688 9.96702 84.6481 10.4956 84.6481 11.1803V22.8392C84.6481 23.5239 84.5688 24.0524 84.4328 24.4444ZM97.7282 27.9744L97.7308 27.9731L97.7333 27.9718C98.4377 27.6128 99.0072 27.1322 99.4232 26.5276C99.8393 25.9429 100.12 25.2778 100.275 24.5422C100.423 23.8365 100.496 23.1064 100.496 22.3528V5.5H97.5197V22.9948C97.5197 23.4268 97.4697 23.8281 97.3731 24.2008C97.2796 24.561 97.1378 24.8621 96.9551 25.1131C96.7875 25.3434 96.5648 25.5315 96.2738 25.678C96.0266 25.7968 95.6823 25.8742 95.2086 25.8742C94.706 25.8742 94.3435 25.79 94.0854 25.6608C93.7937 25.5147 93.5605 25.3254 93.377 25.0909C93.1934 24.8253 93.0544 24.5259 92.9627 24.1881C92.8782 23.8116 92.835 23.4143 92.835 22.9948V5.5H89.8585V22.3528C89.8585 23.1469 89.9391 23.9063 90.1028 24.6296L90.1031 24.6309L90.1034 24.6322C90.2718 25.3618 90.5519 26.0172 90.9534 26.5875L90.9569 26.5926L90.9606 26.5975C91.3868 27.1797 91.9438 27.6446 92.6203 27.9908L92.6261 27.9937L92.6319 27.9965C93.3424 28.3443 94.1844 28.5 95.1253 28.5C96.1184 28.5 96.999 28.3389 97.7282 27.9744ZM107.83 28.5C108.551 28.5 109.237 28.3826 109.88 28.1426C110.531 27.905 111.104 27.5673 111.591 27.1275C112.076 26.6888 112.454 26.1689 112.726 25.5747C113.018 24.9646 113.16 24.3025 113.16 23.5979V21.0385C113.16 20.3583 113.025 19.7121 112.749 19.1068C112.489 18.5346 112.146 17.9941 111.724 17.4856C111.322 16.9858 110.863 16.5161 110.348 16.0761C109.855 15.6549 109.355 15.2467 108.847 14.8515C108.406 14.5039 107.973 14.1564 107.546 13.8089C107.142 13.4808 106.781 13.1429 106.459 12.7956C106.163 12.4479 105.926 12.0943 105.746 11.7349C105.532 11.2941 105.498 10.9083 105.498 10.4216C105.498 10.0788 105.555 9.77684 105.66 9.50937C105.782 9.22116 105.943 8.98627 106.137 8.79542L106.142 8.78959L106.148 8.78362C106.342 8.58368 106.578 8.42369 106.864 8.30407C107.154 8.18868 107.487 8.12579 107.872 8.12579C108.208 8.12579 108.512 8.18603 108.792 8.30225L108.802 8.30646L108.812 8.31037C109.092 8.41672 109.322 8.56763 109.512 8.76417L109.518 8.77013L109.524 8.77596C109.72 8.96819 109.881 9.20508 110.003 9.49612L110.005 9.49997L110.006 9.50382C110.12 9.765 110.183 10.0679 110.183 10.4216V12.926H113.16V10.4021C113.16 9.72562 113.026 9.08674 112.751 8.49363C112.494 7.89678 112.122 7.37474 111.637 6.93476C111.153 6.48409 110.584 6.13359 109.936 5.88226C109.286 5.62432 108.581 5.5 107.83 5.5C107.12 5.5 106.436 5.61842 105.783 5.8565L105.78 5.85752L105.777 5.85855C105.142 6.09613 104.579 6.43276 104.095 6.86848C103.605 7.29755 103.22 7.81983 102.935 8.4244L102.934 8.42797L102.932 8.43157C102.655 9.04029 102.522 9.70005 102.522 10.4021C102.522 11.1687 102.602 11.9766 102.935 12.6862C103.209 13.2689 103.559 13.8152 103.982 14.3243L103.986 14.3288L103.99 14.3332C104.418 14.8298 104.896 15.2971 105.424 15.7354L105.428 15.7384L105.431 15.7414C105.948 16.1586 106.464 16.5694 106.98 16.9737C107.404 17.3059 107.821 17.6444 108.231 17.9893C108.621 18.317 108.961 18.6534 109.254 18.9982L109.258 19.0035L109.263 19.0089C109.56 19.3443 109.789 19.6837 109.954 20.0267C110.106 20.3407 110.183 20.6756 110.183 21.0385V23.5784C110.183 23.916 110.121 24.2226 110.003 24.5039L110.001 24.5099L109.998 24.516C109.893 24.7813 109.736 25.0157 109.525 25.2234L109.524 25.224C109.329 25.4161 109.088 25.5749 108.792 25.6978C108.52 25.8106 108.197 25.8742 107.81 25.8742C107.454 25.8742 107.141 25.8185 106.863 25.7147C106.59 25.5948 106.358 25.4396 106.163 25.2492C105.96 25.038 105.798 24.7961 105.677 24.5194C105.561 24.2414 105.498 23.93 105.498 23.5784V23.6539C105.949 23.1742 106.471 22.4389 106.47 21.5536C106.47 20.6013 105.865 19.8229 105.395 19.3495C105.147 19.0992 104.901 18.899 104.718 18.7614C104.626 18.6922 104.548 18.6376 104.491 18.5993C104.463 18.5801 104.44 18.5649 104.423 18.554C104.415 18.5485 104.408 18.544 104.402 18.5406L104.396 18.5363L104.393 18.5348L104.392 18.5339C104.392 18.5339 104.392 18.5339 104.389 18.5376C104.387 18.5409 104.382 18.5471 104.374 18.5588L104.374 18.5584L104.391 18.5337L104.365 18.5171C104.334 18.3635 104.333 18.2073 104.363 18.0531C104.432 17.6916 104.679 17.296 105.209 16.9489L104.687 16.2528C104.315 16.4959 104.026 16.7748 103.819 17.0763C103.54 16.7484 103.151 16.4692 102.657 16.2607L102.282 17.0355C102.872 17.2843 103.193 17.63 103.334 17.9732C103.414 18.1696 103.44 18.3794 103.414 18.5908L103.401 18.5997C103.344 18.638 103.267 18.6926 103.175 18.7619C102.992 18.8996 102.746 19.1 102.498 19.3504C102.029 19.8242 101.425 20.6029 101.425 21.5553C101.426 22.5076 102.031 23.286 102.5 23.7594C102.507 23.7667 102.515 23.7739 102.522 23.7811V23.5979C102.522 24.2728 102.648 24.9144 102.906 25.5165L102.908 25.523L102.911 25.5295C103.181 26.1216 103.549 26.6412 104.02 27.0807L104.024 27.0847L104.028 27.0886C104.51 27.5234 105.069 27.8658 105.701 28.1166L105.704 28.1177L105.706 28.1189C106.368 28.3753 107.079 28.5 107.83 28.5ZM122.534 28.5H125.511V5.5H121.285C119.891 5.5 118.722 5.67863 117.843 6.09618C117.025 6.479 116.379 6.99918 115.951 7.67112L115.948 7.67616L115.945 7.68126C115.556 8.31747 115.334 9.023 115.271 9.78725C115.214 10.4778 115.185 11.1562 115.185 11.8223V28.5H118.162V18.1591H122.534V28.5ZM122.534 15.5333H118.162V11.1803C118.162 10.4956 118.241 9.96703 118.377 9.57505C118.511 9.19026 118.702 8.92757 118.929 8.74903L118.93 8.74827L118.931 8.7475C119.192 8.54115 119.536 8.38113 119.987 8.28394C120.461 8.1816 121.05 8.12579 121.764 8.12579H122.534V15.5333ZM103.948 22.9918C104.036 22.9174 104.128 22.8329 104.22 22.7401C104.611 22.3459 104.866 21.9258 104.866 21.5542C104.866 21.1825 104.61 20.7625 104.219 20.3686C104.127 20.2758 104.034 20.1914 103.947 20.1171C103.86 20.1915 103.767 20.276 103.675 20.3688C103.285 20.763 103.029 21.1831 103.029 21.5548C103.03 21.9264 103.286 22.3464 103.677 22.7403C103.769 22.8331 103.861 22.9175 103.948 22.9918ZM55.414 17.1452C55.506 17.0523 55.5986 16.9679 55.6857 16.8935C55.7729 16.9678 55.8656 17.0522 55.9577 17.145C56.3486 17.5389 56.6046 17.9589 56.6048 18.3305C56.605 18.7022 56.3494 19.1223 55.9589 19.5165C55.867 19.6093 55.7744 19.6938 55.6872 19.7682C55.6 19.6939 55.5073 19.6094 55.4153 19.5167C55.0244 19.1227 54.7683 18.7028 54.7681 18.3311C54.7679 17.9595 55.0235 17.5394 55.414 17.1452Z"
                fill="white"
              />
            </svg>
          </div>
        </Button>
      </div>

      <div
        q:slot="background"
        class="relative w-11/12 h-full max-w-1225 mx-auto"
      >
        <div class="absolute w-32 md:w-44 top-0 left-0 -translate-y-2/3 ">
          {leftShape}
        </div>
        <div class="absolute w-48 md:w-80 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ">
          {centerShape}
        </div>
        <div class="absolute w-32 md:w-44 bottom-0 right-0 translate-y-2/3 ">
          {rightShape}
        </div>
      </div>

      <div q:slot="background-no-overlay">
        <Line
          showStart={false}
          class="absolute w-1/4 top-[55%] md:top-[60%] left-0"
        />
        <Line
          showStart={false}
          class="absolute w-24 md:w-64 top-0 right-[26px] md:right-[14%] rotate-90 origin-left translate-x-full  md:translate-x-1/2 -translate-y-1/2"
        />
      </div>
    </Section>
  );
});
