"use client"

import Image from "next/image"
import Link from "next/link"
import { useTranslations } from "next-intl"
import NewsletterForm from "@/components/NewsletterForm"
import { CONTACT_CHANNELS, FOOTER_GROUPS } from "@/lib/site-content"

export default function Footer() {
  const t = useTranslations("footer")
  const site = useTranslations("site")

  return (
    <footer className="footer-wrapper">
      <div data-w-id="f1ff1ac2-5ccd-56f8-612a-0570791caa19" className="footer-main-section">
        <div className="corner-gradient-container">
          <div className="footer-top">
            <div className="footer-logo-wrapper">
              <Link href="/" className="logo-link w-inline-block w--current">
                <Image src="/assets/dalcode-logo-dark.svg" width={54} height={54} alt="DAL Code" className="logo-icon" />
              </Link>
            </div>
            <Link href="/contact" className="footer-button w-inline-block">
              <div className="button-content footer">
                <div>{t("applyTrial")}</div>
              </div>
              <div className="button-icon-wrapper footer primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                  <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square">
                  </path>
                </svg>
                <div className="button-icon-bg">
                </div>
                <div className="button-icon-bg-inside">
                </div>
              </div>
            </Link>
          </div>
          <div className="corner-gradient-wrapper">
            <div className="corner-gradient-horizontal bottom-left dark-mode">
            </div>
            <div className="corner-gradient-horizontal bottom-right dark-mode">
            </div>
          </div>
        </div>
        <div className="footer-middle">
          <div className="w-layout-blockcontainer container-default w-container">
            <div className="w-layout-grid footer-middle-content">
              <div className="inner-container _355px _100-tablet">
                <div className="display-6 medium text-titles-dm">{site("brand")}</div>
                <div className="mg-top-8-px">
                  <p className="text-color-neutral-400 mg-bottom-20px">{site("description")}</p>
                </div>
                <NewsletterForm variant="dark" />
              </div>
              <div className="w-layout-grid footer-pages-grid">
                {FOOTER_GROUPS.map((group) => (
                  <div key={group.title} className="footer-pages-column">
                    {group.links.map((link, index) => (
                      <Link
                        key={link.href}
                        href={link.href}
                        className={`footer-link w-inline-block ${index === group.links.length - 1 ? "last---left-column" : ""}`}
                      >
                        <div className="footer-link-text">{link.label}</div>
                        <div className="footer-link-icon">
                          <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 17 17" fill="none" className="squared-icon">
                            <path d="M6.25391 3.45312L10.7458 8.01563L6.25391 12.5781" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
                          </svg>
                        </div>
                        <div className="footer-link-bg" />
                      </Link>
                    ))}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="corner-gradient-container">
          <div className="w-layout-grid footer-links-wrapper">
            {CONTACT_CHANNELS.map((channel, index) => (
            <a key={channel.title} data-w-id={`footer-channel-${index}`} href={channel.href} className="footer-contact-link w-inline-block" target={channel.href.startsWith("http") ? "_blank" : undefined} rel={channel.href.startsWith("http") ? "noopener noreferrer" : undefined}>
              <div className="footer-contact-link-icon-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24" fill="none" className="footer-contact-link-icon">
                  <path fillRule="evenodd" clipRule="evenodd" d="M0 2H24V4.31556L12.0001 10.861L0 4.31546V2ZM0 6.59364V22H24V6.59373L12.0001 13.1391L0 6.59364Z" fill="currentColor">
                  </path>
                </svg>
                <div className="footer-contact-link-bg">
                </div>
              </div>
              <div>
                <div className="text-color-neutral-500">{channel.title}</div>
                <div className="mg-top-5x-extra-small">
                  <div className="medium text-titles-dm">{channel.value}</div>
                </div>
              </div>
            </a>
            ))}
          </div>
          <div className="corner-gradient-wrapper">
            <div className="corner-gradient-horizontal bottom-left dark-mode">
            </div>
            <div className="corner-gradient-horizontal bottom-right dark-mode">
            </div>
            <div className="corner-gradient-horizontal top-left dark-mode">
            </div>
            <div className="corner-gradient-horizontal top-right dark-mode">
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <Link href="/about" className="link-square-icon-left---dark-mode w-inline-block">
            <div className="icon-40px---dark-mode">
              <svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 19" fill="none" className="icon-18px">
                <path fillRule="evenodd" clipRule="evenodd" d="M19.7781 4.875L13.8748 16.4155H8.32985L10.8004 11.6326H10.6896C8.65138 14.2785 5.61034 16.0202 1.27734 16.4155V11.6988C1.27734 11.6988 4.04927 11.5351 5.6788 9.82186H1.27734V4.87509H6.22411V8.94374L6.33513 8.94329L8.35659 4.87509H12.0977V8.91794L12.2087 8.91776L14.306 4.875H19.7781Z" fill="currentColor">
                </path>
              </svg>
            </div>
            <div>{t("learnPositioning")}</div>
          </Link>
          <p className="text-color-neutral-500">
            {t("copyright")}
          </p>
        </div>
      </div>
    </footer>
  )
}