import site from "@/corvos.config.ts";

import { Container } from "../layouts/Container.tsx";
import { Divider } from "../objects/Divider.tsx";
import { Logo } from "./Logo.tsx";

export const SiteFooter = async () => {
	const symbols = await site.load("assets/symbols.svg").one();

	return (
		<footer class="c-site-footer">
			<div class="c-site-footer__banner">
				<svg class="c-site-footer__banner-img">
					<use href={`${symbols.url}#site-footer`} />
				</svg>

				<svg class="c-site-footer__banner-bg">
					<use href={`${symbols.url}#site-footer-bg`} />
				</svg>
			</div>

			<div class="c-site-footer__content-wrap t-static-white">
				<Container class="c-site-footer__content" fixed="150" pad-block pad-inline>
					<div class="c-site-footer__sections">
						<section class="c-site-footer__section s-links s-links--mark-external s-links--static-white">
							Developed by <a href="https://volpeon.ink/">Volpeon</a>
						</section>
					</div>

					<Divider class="c-site-footer__divider" level="quiet" variant="static-white" />

					<section class="c-site-footer__logo">
						<Logo size="lg" variant="static-white" />
					</section>
				</Container>
			</div>
		</footer>
	);
};