import { A } from "@solidjs/router";
import { For } from "solid-js";

function ShieldLogo() {
  return (
    <svg
      width="24"
      height="28"
      viewBox="0 0 28 32"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <defs>
        <linearGradient
          id="footer-shield-grad"
          x1="0"
          y1="0"
          x2="28"
          y2="32"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="var(--color-brand-primary)" />
          <stop offset="1" stop-color="var(--color-brand-accent)" />
        </linearGradient>
      </defs>
      <path
        d="M14 0L26 6V16C26 24 14 32 14 32S2 24 2 16V6L14 0Z"
        fill="url(#footer-shield-grad)"
      />
      <path
        d="M10 16L13 19L19 13"
        stroke="white"
        stroke-width="2.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      />
    </svg>
  );
}

const footerLinks = [
  {
    title: "Product",
    links: [
      { label: "Features", href: "/features" },
      { label: "Pricing", href: "/pricing" },
      { label: "Changelog", href: "/changelog" },
      { label: "Documentation", href: "/docs" },
    ],
  },
  {
    title: "Company",
    links: [
      { label: "About", href: "/about" },
      { label: "Blog", href: "/blog" },
      { label: "Careers", href: "/careers" },
      { label: "Contact", href: "/contact" },
    ],
  },
  {
    title: "Resources",
    links: [
      { label: "Community", href: "/community" },
      { label: "Help Center", href: "/help" },
      { label: "Partners", href: "/partners" },
      { label: "Status", href: "/status" },
    ],
  },
  {
    title: "Legal",
    links: [
      { label: "Privacy", href: "/privacy" },
      { label: "Terms", href: "/terms" },
      { label: "Security", href: "/security" },
      { label: "Cookies", href: "/cookies" },
    ],
  },
];

function GithubIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
    </svg>
  );
}

function TwitterIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  );
}

function LinkedInIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
    </svg>
  );
}

const socialLinks = [
  { label: "GitHub", href: "https://github.com", Icon: GithubIcon },
  { label: "Twitter / X", href: "https://twitter.com", Icon: TwitterIcon },
  { label: "LinkedIn", href: "https://linkedin.com", Icon: LinkedInIcon },
];

export default function Footer() {
  return (
    <footer class="border-t border-[var(--color-border)] bg-[var(--color-bg-secondary)]">
      <div class="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8 lg:gap-12">
          <div class="lg:col-span-2">
            <div class="flex items-center gap-2 mb-4">
              <ShieldLogo />
              <span class="text-lg font-bold text-[var(--color-text-primary)]">
                ShieldAI
              </span>
            </div>
            <p class="text-sm text-[var(--color-text-secondary)] max-w-xs">
              AI-powered call intelligence that transforms how teams
              communicate, collaborate, and close deals.
            </p>
            <div class="flex items-center gap-4 mt-6">
              <For each={socialLinks}>
                {(social) => (
                  <a
                    href={social.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    aria-label={social.label}
                    class="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
                  >
                    <social.Icon />
                  </a>
                )}
              </For>
            </div>
          </div>

          <div class="lg:col-span-4 grid grid-cols-2 md:grid-cols-4 gap-8">
            <For each={footerLinks}>
              {(group) => (
                <div>
                  <h3 class="text-sm font-semibold text-[var(--color-text-primary)] mb-4">
                    {group.title}
                  </h3>
                  <ul class="space-y-3">
                    <For each={group.links}>
                      {(link) => (
                        <li>
                          <A
                            href={link.href}
                            class="text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
                          >
                            {link.label}
                          </A>
                        </li>
                      )}
                    </For>
                  </ul>
                </div>
              )}
            </For>
          </div>
        </div>

        <div class="mt-12 pt-8 border-t border-[var(--color-border)] flex flex-col sm:flex-row items-center justify-between gap-4">
          <p class="text-sm text-[var(--color-text-tertiary)]">
            {'\u00A9'} {new Date().getFullYear()} ShieldAI. All rights reserved.
          </p>
          <div class="flex items-center gap-6">
            <A
              href="/privacy"
              class="text-sm text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
            >
              Privacy Policy
            </A>
            <A
              href="/terms"
              class="text-sm text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-colors"
            >
              Terms of Service
            </A>
          </div>
        </div>
      </div>
    </footer>
  );
}
