<script lang="ts">
  import "../app.postcss";
  import { onMount } from "svelte";
  import { PUBLIC_BASE_URL } from "$env/static/public";
  import  type { company, oilprice } from '$lib/types/types'

  export let company_data: company;
  export let oil_price_data: oilprice;
  
  let price_of_oil: string = '';
  let company_name: string = '';
  let tel_number: string = '';

  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/price/oil", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (oil_price_data = result));

    if (oil_price_data["ok"] == true) {
      price_of_oil = oil_price_data["price"];
    }
  });
  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/company", {
      method: "get",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
    })
      .then((response) => response.json())
      .then((result) => (company_data = result));

    if (company_data["ok"] == true) {
      company_name = company_data["name"];
      tel_number = company_data["telephone"];
    }
  });
</script>

<div class="bg-blue-900 text-white">
  <div class="mx-auto p-0">
    <img class="w-full p-0 m-0" src="/images/worc.jpg" alt="" />
  </div>

  <div class="mx-auto p-10">
    <div class="mx-auto pb-5 text-5xl text-center">Order Now</div>
    <div class="mx-auto text-5xl text-center">
      {tel_number}
    </div>

    <div class="grid grid-cols-12 gap-5 px-5 text-center mt-10">
      <div class="col-span-12 font-bold text-4xl text-blue-400 mx-auto">
        Why call Auburn Oil?
      </div>
      <div class="col-span-12 lg:col-span-2"></div>
      <div class="col-span-12 lg:col-span-3 bg-base-100 p-10">
        <div class="text-4xl mb-3">Cheaper Prices</div>
        <div class="text-lg">
          No Middleman. No expensive bulk plants. Direct port to door for
          cheapest prices.
        </div>
      </div>
      <div class="col-span-12 lg:col-span-3 bg-base-100 p-10">
        <div class="text-4xl mb-3">Phone Support</div>
        <div class="text-lg">
          We dont cut our product with products. Our Oil is pure #2 heating oil.
        </div>
      </div>
      <div class="col-span-12 lg:col-span-3 bg-base-100 p-10">
        <div class="text-4xl mb-3">Top Quality Oil</div>
        <div class="text-lg">
          We dont cut our product with products. Our Oil is pure #2 heating oil.
        </div>
      </div>
      <div class="col-span-12 lg:col-span-2"></div>
    </div>
  </div>

  <div class="h-auto">
    <div class="mx-auto p-5">
      <div class="grid grid-cols-12">
        <div class="col-span-12 py-5">
          <div
            class="font-bold text-5xl text-blue-400 max-w-7xl mx-auto text-center md:text-left"
          >
            Serving these communites
          </div>
          <div
            class="font-bold text-xl bg-blue-400 text-blue-800 h-10 mb-10"
          ></div>
        </div>
        <div class="col-span-12 py-5">
          <div
            class="invisible md:visible h-0 md:h-auto flex gap-20 justify-center text-2xl"
          >
            <div >
              <div class="text-2xl">Auburn</div>
              <div class="text-2xl">Millbury</div>
              <div class="text-2xl">Sutton</div>
              <div class="text-2xl">Oxford</div>
              <div class="text-2xl">North Oxford</div>
              <div class="text-2xl">Webster</div>
              <div class="text-2xl">SouthBridge</div>
              <div class="text-2xl">Douglas</div>
              <div class="text-2xl">Holden</div>
              <div class="text-2xl">Shrewsbury</div>
              <div class="text-2xl">Grafton</div>
            </div>
            <div >
              <div class="text-2xl">Dudley</div>
              <div class="text-2xl">Charlton</div>
              <div class="text-2xl">Leicester</div>
              <div class="text-2xl">Cherry Valley</div>
              <div class="text-2xl">Rochdale</div>
              <div class="text-2xl">Spencer</div>
              <div class="text-2xl">West Brookfield</div>
              <div class="text-2xl">Brookfield</div>
              <div class="text-2xl">North Brookfield</div>
              <div class="text-2xl">Worcester</div>
            </div>
          </div>
          <div class="visible sm:visible md:invisible h-auto sm:h-auto md:h-0">
            <div class="text-center">
              <div class="text-2xl">Auburn</div>
              <div class="text-2xl">Millbury</div>
              <div class="text-2xl">Sutton</div>
              <div class="text-2xl">Oxford</div>
              <div class="text-2xl">North Oxford</div>
              <div class="text-2xl">Webster</div>
              <div class="text-2xl">SouthBridge</div>
              <div class="text-2xl">Douglas</div>
              <div class="text-2xl">Holden</div>
              <div class="text-2xl">Shrewsbury</div>
              <div class="text-2xl">Grafton</div>
              <div class="text-2xl">Dudley</div>
              <div class="text-2xl">Charlton</div>
              <div class="text-2xl">Leicester</div>
              <div class="text-2xl">Cherry Valley</div>
              <div class="text-2xl">Rochdale</div>
              <div class="text-2xl">Spencer</div>
              <div class="text-2xl">West Brookfield</div>
              <div class="text-2xl">Brookfield</div>
              <div class="text-2xl">North Brookfield</div>
              <div class="text-2xl">Worcester</div>
            </div>
          </div>
        </div>
        <div class="col-span-12 py-5">
          <div
            class="flex justify-center items-center "
          >
            <img class="" src="/images/map.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
