export const App = () => {
  return (
    <>
      <p className="scrollable-msg">
        You window is smaller than 1200px, therefore the cards have a horizontal
        scroll. This way you can still see what the cards side by side look
        like.
      </p>
      <div className="make-scrollable">
        <div className="pricing">
          <div className="card">
            <h2>Raycast</h2>
            <p>Free forever. Really really forever. Trust us.</p>
            <div className="monthly-price">
              <span>$0</span> / month
            </div>
            <div className="annual-price"></div>
            <ol>
              <li>
                <Check />
                Core features, including: Clipboard History, Quicklinks,
                Calculator.
              </li>
              <li>
                <Check />
                Thousands of extensions
              </li>
              <li>
                <Check />
                Custom Extensions
              </li>
              <li>
                <Check />
                Developer Tooling
              </li>
            </ol>

            <a href="#">Download</a>
          </div>

          <div className="card">
            <h2>Raycast PRO</h2>
            <p>A bit less free</p>
            <div className="monthly-price">
              <span>$8</span> / month
            </div>
            <div className="annual-price">
              <span>$96 billed annually</span>
            </div>
            <ol>
              <li>
                <Check />
                Raycast AI
              </li>
              <li>
                <Check />
                Cloud Sync
              </li>
              <li>
                <Check />
                Custom Themes
              </li>
              <li>
                <Check />
                Unlimited Clipboard History
              </li>
              <li>
                <Check />
                Translator
              </li>
              <li>
                <Check />
                Custom Window Management Commands
              </li>
              <li className="soon">
                <DotDotDot />
                More coming soon
              </li>
            </ol>

            <a href="#">Download</a>
          </div>

          <div className="card">
            <h2>Team PRO</h2>
            <p>AI for the whole team!</p>
            <div className="monthly-price">
              <span>$12</span> / month
            </div>
            <div className="annual-price">
              <span>$144 billed annually</span>
            </div>
            <ol>
              <li>
                <Check />
                Everything in PRO
              </li>
              <li>
                <Check />
                Unlimited Shared Commands
              </li>
              <li>
                <Check />
                Unlimited Shared Snippets
              </li>
              <li>
                <Check />
                Unlimited Shared Quicklinks
              </li>
              <li>
                <Check />
                Unlimited Team Members
              </li>
              <li className="soon">
                <DotDotDot />
                More coming soon
              </li>
            </ol>

            <a href="#">Download</a>
          </div>
        </div>
      </div>
    </>
  );
};

const Check = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth="1.5"
      d="M10.25 5.75s-2.385 2.54-3 4.5l-1.5-1.5m8.5-.75a6.25 6.25 0 1 1-12.5 0 6.25 6.25 0 0 1 12.5 0Z"
    ></path>
  </svg>
);

const DotDotDot = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 16 16"
    width="16"
  >
    <circle cx="8" cy="8" r="1.5" fill="currentColor"></circle>
    <circle cx="12.5" cy="8" r="1.5" fill="currentColor"></circle>
    <circle cx="3.5" cy="8" r="1.5" fill="currentColor"></circle>
  </svg>
);