---
import { tt } from "#/copy";
import Section from "../../blocks/Section.astro";
import WebIcon from "@material-symbols/svg-100/rounded/desktop_cloud.svg";
import TabletIcon from "@material-symbols/svg-100/rounded/tablet_android.svg";
import MobileIcon from "@material-symbols/svg-300/rounded/mobile.svg";

const t = tt.landings.sections.multiPlatform.en;
---

<Section heading={{ h: 2 }} t={t} cols={2}>
  <div class="wrapper">
    <div class="illustration-wrapper">
      <div class="illustration">
        <div class="circle">
          <svg width="100" height="100" viewBox="0 0 100 100">
            <circle cx="50" cy="50" fill="none" stroke="currentColor"></circle>
          </svg>
        </div>

        <WebIcon class="web icon" />
        <TabletIcon class="tablet icon" />
        <MobileIcon class="mobile icon" />
      </div>
    </div>
  </div>
</Section>

<style>
  @reference "#/styles/global.css";

  .wrapper {
    @apply flex items-center justify-center text-[8px] sm:text-[10px] md:text-[14px];
  }

  .illustration-wrapper {
    --canvas-size: 20em;
    --web-size: 14em;
    --web-x: 5em;
    --web-y: -6em;
    --web-clip-offset: -2em;
    --web-path-padding: 2em;

    --mobile-size: 6em;
    --mobile-x: -2.5em;
    --mobile-y: 9em;
    --mobile-clip-offset: 1em;
    --mobile-path-padding: 1em;

    --tablet-size: 8em;
    --tablet-x: 14em;
    --tablet-y: 11em;
    --tablet-clip-offset: 0em;
    --tablet-path-padding: 3em;

    --padding-top: calc(var(--web-y) * -1 - var(--web-path-padding));
    --padding-left: calc(var(--mobile-x) * -1 - var(--mobile-path-padding));
    --padding-right: calc(
      var(--canvas-size) - var(--tablet-x) - var(--tablet-size) +
        var(--tablet-path-padding)
    );
    --padding-x: max(var(--padding-left), var(--padding-right));

    @apply inline-block px-(--padding-x) pt-(--padding-top);
  }

  .illustration {
    @apply size-(--canvas-size) relative;
  }

  .web,
  .tablet,
  .mobile {
    position: absolute;
  }

  .web {
    --icon-size: var(--web-size);
    left: var(--web-x);
    top: var(--web-y);
  }

  .tablet {
    --icon-size: var(--tablet-size);
    left: var(--tablet-x);
    top: var(--tablet-y);
  }

  .mobile {
    --icon-size: var(--mobile-size);
    left: var(--mobile-x);
    top: var(--mobile-y);
  }

  .circle {
    --circle-stroke: 1.5px;
    --clip-offset: 4px;

    @apply absolute text-accent-400/40;
    width: var(--canvas-size);
    height: var(--canvas-size);

    mask:
      linear-gradient(#000 0 0),
      linear-gradient(#000 0 0) calc(var(--web-x) - var(--web-clip-offset) / 2)
        calc(var(--web-y) - var(--web-clip-offset) / 2) /
        calc(var(--web-size) + var(--web-clip-offset))
        calc(var(--web-size) + var(--web-clip-offset)) no-repeat,
      linear-gradient(#000 0 0)
        calc(var(--tablet-x) - var(--tablet-clip-offset) / 2)
        calc(var(--tablet-y) - var(--tablet-clip-offset) / 2) /
        calc(var(--tablet-size) + var(--tablet-clip-offset))
        calc(var(--tablet-size) + var(--tablet-clip-offset)) no-repeat,
      linear-gradient(#000 0 0)
        calc(var(--mobile-x) - var(--mobile-clip-offset) / 2)
        calc(var(--mobile-y) - var(--mobile-clip-offset) / 2) /
        calc(var(--mobile-size) + var(--mobile-clip-offset))
        calc(var(--mobile-size) + var(--mobile-clip-offset)) no-repeat;

    mask-composite: exclude;

    & svg {
      width: 100%;
      height: 100%;

      & > circle {
        stroke-width: var(--circle-stroke);
        r: calc(50% - var(--circle-stroke) / 2);
      }
    }
  }
</style>
