import React from 'react';
import { ExternalLinkIcon } from 'lucide-react';
type FooterLink = {
  label: string;
  href: string;
  external?: boolean;
};
const columns: {
  heading: string;
  links: FooterLink[];
}[] = [
{
  heading: 'Platform',
  links: [
  {
    label: 'Online learning',
    href: '/#online'
  },
  {
    label: 'In-person training',
    href: '/#in-person'
  },
  {
    label: 'Blended programs',
    href: '/#blended'
  },
  {
    label: 'Integrations',
    href: '/#integrations'
  },
  {
    label: 'Course catalog',
    href: 'https://app.intellectone.com',
    external: true
  }]

},
{
  heading: 'Audiences',
  links: [
  {
    label: 'Training providers',
    href: '/#providers'
  },
  {
    label: 'Companies & employers',
    href: '/#companies'
  },
  {
    label: 'Learners',
    href: 'https://app.intellectone.com',
    external: true
  }]

},
{
  heading: 'Resources',
  links: [
  {
    label: 'Book a demo',
    href: '/book-a-demo'
  },
  {
    label: 'Become a provider',
    href: '/become-a-provider'
  },
  {
    label: 'Pricing',
    href: '/pricing'
  },
  {
    label: 'Compare platforms',
    href: '/compare'
  },
  {
    label: 'Course services',
    href: '/course-services'
  }]

}];

export function Footer() {
  return (
    <footer className="print-hidden w-full border-t border-white/10 bg-brand-ink py-14">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="grid gap-10 md:grid-cols-[1.5fr_repeat(3,1fr)]">
          <div>
            <div className="flex items-center gap-2.5">
              <img
                src="/logo-white-outline.svg"
                alt="IntellectOne logo"
                className="h-8 w-8" />
              
              <span className="font-display text-lg font-bold text-white">
                intellect<span className="text-brand-bright">ONE</span>
              </span>
            </div>
            <p className="mt-4 max-w-xs text-sm leading-relaxed text-white/50">
              The white-label training platform for safety and workforce
              providers — online, in-person, and blended.
            </p>
          </div>
          {columns.map((col) =>
          <nav key={col.heading} aria-label={col.heading}>
              <h3 className="font-display text-xs font-bold uppercase tracking-[0.18em] text-brand-bright">
                {col.heading}
              </h3>
              <ul className="mt-4 space-y-2.5">
                {col.links.map((link) =>
              <li key={link.label}>
                    <a
                  href={link.href}
                  {...link.external ?
                  {
                    target: '_blank',
                    rel: 'noopener noreferrer'
                  } :
                  {}}
                  className="inline-flex items-center gap-1.5 text-sm text-white/55 transition-colors hover:text-white">
                  
                      {link.label}
                      {link.external &&
                  <ExternalLinkIcon size={12} aria-hidden="true" />
                  }
                    </a>
                  </li>
              )}
              </ul>
            </nav>
          )}
        </div>
        <div className="mt-12 flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-7 sm:flex-row">
          <p className="text-xs text-white/40">
            © 2026 IntellectOne · A SureHire platform by Codearch Solutions
          </p>

          <div className="flex items-center gap-4 text-xs">
            <a
              href="/privacy-policy"
              className="text-white/40 transition-colors hover:text-white"
            >
              Privacy Policy
            </a>

            <span className="text-white/20" aria-hidden="true">
              ·
            </span>

            <span className="text-white/40">
              intellectone.com
            </span>
          </div>
        </div>
      </div>
    </footer>);

}