import { Link } from 'react-router-dom'
import styled from "styled-components"

const FooterContainer = styled.div`
    margin: 0px 15px 30px 15px; 
    padding: 25px 16px; 
    border-radius: 3px;
    box-sizing: content-box;
    background: rgba(51, 51, 51, .425);
    font-size: 13px;
    line-height: 1.428571429;
    color: #f8f8f8;
    display: flex;
    flex-direction: row;
    gap: 30px;

    & h3 {
        color: #f8f8f8;
        padding: 0 0 0 15px;
        letter-spacing: 1px;
        border-left: 2px solid #E49400;
        text-transform: uppercase;
        margin-top: 5px;
        margin-bottom: 30px;
    }

    & ul li {
        font-size: 12px;
        color: #bababa;
    }

    @media (max-width: 768px) {
    flex-direction: column;
  }
`
const Footer = () => {

  return (
    <FooterContainer>
      <div className="flex-1">
        <h3 className="footer-title">ABOUT US</h3>
        <ul className="flex flex-row gap-6 flex-wrap">
          <li>회사소개</li>
          <li>비즈니스</li>
          <li>제휴문의</li>
          <li>이용약관</li>
          <li>운영정책</li>
          <li>개인정보처리방침</li>
          <li>웹접근성안내</li>
          <li>고객센터</li>
        </ul>
      </div>

      <div className="lg:px-6 ">
        <h3 className="footer-title">GET IN TOUCH</h3>
        <ul className="flex flex-col gap-5 flex-wrap">
          <li><i className="fa fa-envelope-o"/> 313devgrp@gmail.com</li>
          <li><i className="fa fa-phone-square"/> +82 10 5093 7313 </li>
        </ul>
      </div>
      <div className="flex-1 lg:px-6 ">
        <h3 className="footer-title">Rights & Addr</h3>
        <ul className="flex flex-col gap-5 flex-wrap">
          <li><i className="fa fa-globe" /> 313 B/D Dosan-daero, Gangnam-gu, Seoul, Republic of Korea 06021</li>
          <li>
            <span className="text-[13px]"> © </span>
            Copyright 2010-2024 <Link to={'https://313.co.kr/'} className="text-data hover:text-blue-700"> 313DEVGRP </Link>. All rights reserved.
          </li>
        </ul>
      </div>
    </FooterContainer>
  )
}

export default Footer