<script lang="ts">
  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;
  import '/static/fonts.css';


  let price_of_oil: string = '';
  let company_name: string = '';
  let company_phone_number: string = '';

  onMount(async () => {
    await fetch(PUBLIC_BASE_URL + "/info/price/today", {
      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["todays_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["company_name"];
      company_phone_number = company_data["company_phone_number"];
    }
  });
</script>

<svelte:head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7R7B94HG9M"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-7R7B94HG9M');
</script>

  <meta charset="UTF-8">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <meta name="description" content="Auburn Oil provides reliable heating oil delivery and top quality oil. 
   Serving homes in Auburn, Worcester, Oxford, Sutton, and Webster. ">
</svelte:head>

<div class="grid grid-cols-12 bg-blue-oil overflow-hidden custom-font">
  <div class="col-span-12 md:col-span-3 text-3xl p-10 text-orange-oil font-bold invisible md:visible h-0 md:h-auto">
    <div class="text-center pt-5 text-white">Call Today</div>
    <div class="text-center ">508-426-8800</div>
  </div>

  <div class="col-span-12 md:col-span-6 md:p-10 text-center font-bold ">
    <div class="md:flex md:justify-center pb-5 md:pb-0 gap-5">
      <a href="/">
      <img class="" src="/images/logo/1.png" alt="Auburn Oil Near Me" />
    </a>
    </div>
   
  </div>


  <div
    class=" col-span-12 md:col-span-3 md:p-10 text-3xl text-orange-oil  font-bold"
  >
    <div class="text-center pt-5 text-white">Todays Price</div>
    <div class="text-center ">${price_of_oil}</div>
  </div>

</div>


<div class="navbar bg-orange-oil text-white">
  <div class="navbar-start">
    <div class="dropdown">
      <div tabindex="0" role="button" class="btn btn-ghost hover:bg-blue-oil lg:hidden">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          ><path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M4 6h16M4 12h8m-8 6h16"
          /></svg
        >
      </div>
      <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
      <ul
        tabindex="0"
        class="menu menu-sm bg-orange-oil w-64 dropdown-content mt-3 z-[1] p-2 shadow  rounded-box  font-bold text-white"
      >
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/">Home</a></li>
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/oil">Our Oil</a></li>
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/delivery">Delivery</a></li>
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/servicearea">Delivery Area</a></li>
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/about">About Us</a></li>
        <li><a class="text-2xl py-2 hover:bg-blue-900" href="/contact">Contact</a></li>
        <li>
        <a href="https://www.facebook.com/auburnoil">
          <img class="px-5" src="/images/social/facebook.png" alt="Heating Oil lowest price near me" />
        </a>
      </li>
      <li>
        <a href="https://g.co/kgs/srVz9CQ">
    
        <img class="" src="/images/social/google.png" alt="Heating Oil lowest price near me" />
        </a>
      </li>
      </ul>
    </div>

  </div>
  <div class="navbar-center hidden lg:flex ">
    <ul class="menu menu-horizontal  px-1 text-xl">
      <li>
        <a class="hover:bg-blue-900" href="https://www.facebook.com/auburnoil">
          <img class="px-5" src="/images/social/facebook.png" alt="Heating Oil lowest price near me" />
        </a>
      </li>
      <li>
        <a class="hover:bg-blue-900" href="https://g.co/kgs/srVz9CQ">
    
        <img class=""  src="/images/social/google.png" alt="Heating Oil lowest price near me" />
        </a>
      </li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/">Home</a></li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/oil">Our Oil</a></li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/delivery">Delivery</a></li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/servicearea">Delivery Area</a></li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/about">About Us</a></li>
      <li class="hover:bg-blue-900 hover:rounded hover:text-white text-white"><a href="/contact">Contact</a></li>
     
    </ul>
  </div>
  <div class="navbar-end ">
   
  </div>
</div>
<div class="body bg-white text-black">
  <slot />
</div>
<footer>
<div class="grid grid-cols-12 bg-blue-oil py-10 w-full">
  <div
    class="col-span-12 md:col-span-4 text-center text-white text-bold text-6xl "
  >
    <div class="flex justify-center pt-5">
      <img class="" src="/images/logo/2.png" alt="Heating Oil lowest price near me" />
    </div>
  </div>
  <div
    class="col-span-12 md:col-span-4 text-center text-bold text-xl text-white pb-10"
  >
    <div class="">Phone: {company_phone_number}</div>
    <div class="">Backup Phone: 914-330-6100</div>
    <div class="">P.O. Box 174</div>
    <div class="">Auburn Ma 01501</div>
    <div class="">Mon - Fri 8:00 am - 5:00 pm</div>
    <div class="">Sat 9:00 am - 12:00 pm | Sun Closed</div>
    <div class="px-5 py-5 flex justify-center">
      <a href="https://www.facebook.com/auburnoil">
        <img class="px-5" src="/images/social/facebook.png" alt="Heating Oil lowest price near me" />
      </a>
      <a href="https://g.co/kgs/srVz9CQ">
  
      <img class="" src="/images/social/google.png" alt="Heating Oil lowest price near me" />
      </a>
    </div>
 
    
  </div>
  <div class="col-span-12 md:col-span-4 pb-10 text-center">
    <div class="flex-1"><a href="/">Home</a></div>
    <div class="flex-1"><a href="/delivery">Oil Delivery</a></div>
    <div class="flex-1"><a href="/servicearea">Delivery Area</a></div>
    <div class="flex-1"><a href="/about">About Us</a></div>
    <div class="flex-1"><a href="/contact">Contact</a></div>
  </div>
  
  <div class="col-span-12 h-auto bg-secondary text-white w-full ">
    <div class=" mx-auto max-w-7xl p-5">
      <div class="text-xl font-bold text-center">
        © 2023 by Rocket Services LLC - Auburn, MA | All Rights Reserved
      </div>
    </div>
  </div>
</div>
</footer>

<style>
.custom-font {
  font-family: EnterS
}

</style>
