---
import Layout from '../layouts/Layout.astro'
import Map from '../components/Map.astro'

import { Content as WhatIs } from '../content/index/whatis.md'
import { Content as Pricing } from '../content/index/pricing.md'
import { Content as Rest } from '../content/index/rest.md'
---

<Layout title="OpenFreeMap">
  <img src="logo.jpg" alt="logo" height="200" class="logo" />
  <h1>OpenFreeMap</h1>
  <div class="icons">
    <a href="https://github.com/hyperknot/openfreemap" target="_blank"
      ><img src="github.svg" alt="github" height="28" /></a
    >
    <a href="https://x.com/hyperknot" target="_blank"><img src="x.svg" alt="x" height="28" /></a>
  </div>

  <WhatIs />

  <h2>How can I use it?</h2>
  <p>(Click below, it's interactive!)</p>

  <Map />

  <!--<p>How to use: <a href="#">In detail</a></p>-->

  <div id="pricing"></div>

  <h2>How can I donate or support this project?</h2>
  <p>
    If this project helps you save on your map hosting costs, please subscribe to one of our support
    plans here:
  </p>
  <div id="support-plans-slider"></div>

  <Pricing />

  <h2>Is commercial usage allowed?</h2>
  <p>Yes.</p>

  <h2>Who is behind this project?</h2>
  <p>
    I'm Zsolt Ero (<a href="https://x.com/hyperknot">X</a>, <a href="https://blog.hyperknot.com/"
      >blog</a
    >, <a href="mailto:zsolt@openfreemap.org">email</a>). I built <a href="https://maphub.net/"
      >MapHub</a
    > and have been running map hosting in production for 8 years.
  </p>

  <Rest />

  <!--<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>-->
  <!--<script src="https://unpkg.com/nouislider@15.7.1/dist/nouislider.min.js"></script>-->

  <!--<script src="map_howto.js"></script>-->
  <!--<script src="support_plans.js"></script>-->

  <!--<script src="https://unpkg.com/prismjs@1.29.0/components/prism-core.min.js"></script>-->
  <!--<script src="https://unpkg.com/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>-->
</Layout>
