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

    export let company_data: company;

    
    let company_name: string = '';
    let tel_number: string = '';

    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"];
        tel_number = company_data["company_phone_number"];
      }
    });
  </script>
  
  <div class="bg-secondary px-10">
    <div 
    class="max-w-7xl justify-center py-5 mx-auto font-bold text-2xl text-white"
    >
  
      Heating Oil Delivery
    </div>
  </div>
  
  <div class="max-w-7xl mx-auto px-10">
    <div class="grid grid-cols-12 max-w-7xl">
      <div class="col-span-12 lg:col-span-6">
        <div class="grid grid-cols-12">

          <div class="col-span-12 font-bold text-2xl my-10">
            We know it can be tough to order oil.  We make it simple!
          </div>
        
          
          <div class="col-span-12 font-bold text-xl text-primary">
            Worcester County
          </div>
          <div class="col-span-12 text-lg">
            <ul>100 Gallon Minimum to Worcester County</ul>
            <ul>Prime - 25$</ul>
            <ul>Same Day - 150$</ul>
          </div>
  

          <div class="col-span-12 font-bold mt-10 text-xl text-primary">
            Payments Methods
          </div>
          <div class="col-span-12 text-lg">
            <ul>Cash on Delivery (C.O.D)</ul>
            <ul>Credit Card</ul>
            <ul>Money Order</ul>
          </div>


          <div class="col-span-12 mb-10">
            <ul>
              <div class="col-span-12 font-bold mt-10 text-xl text-primary">
                How to Order Oil
              </div>
              <div class="flex gap-5">
                
                <li class=" font-bold">
                  1.)  Call {tel_number} to place an order.
                </li>
              </div>
              <div class="flex gap-5">
        
                <li class=" font-bold">
                  2.) Give your name, address, fill location, and phone number.
                </li>
              </div>
              <div class="flex gap-5">
                <li class=" font-bold">
                  3.)  Decide if you want a fill or specific gallons
                </li>
              </div>
              <div class="flex gap-5">
                <li class=" font-bold">
                  4.)  Pay with Credit Card or pay the driver cash
                </li>
              </div>
            </ul>
          </div>

          <div class="col-span-12 mx-auto  py-10">
            <img class=" h-20 w-auto" src="/images/creditcards.png" alt="">
          </div>
        </div>
      </div>
  
      <div class="col-span-12 md:col-span-6">
        <div class="col-span-12">
          <img alt="" class="w-full p-0 m-0" src="/images/worc.jpg" />
        </div>
      </div>
  
      <div class="col-span-12  mb-10  
      text-bold bg-primary text-white mt-10 text-5xl text-bold
       p-5 text-center">
        Call Today {tel_number}
      </div>
      
    </div>
  </div>
  
  

