---
import type { HeaderProps } from './header';
import {
  DEFAULT_LOCALE,
  getCommonCopy,
  getLandingUiCopy,
  isLandingLocale,
  localizedHref,
} from '../i18n';

interface Props {
  counts: HeaderProps['counts'];
  locale?: string;
}

const { counts, locale: rawLocale = DEFAULT_LOCALE } = Astro.props as Props;
const locale = isLandingLocale(rawLocale) ? rawLocale : DEFAULT_LOCALE;
const copy = getCommonCopy(locale).header;
const ui = getLandingUiCopy(locale);
const href = (path: string) => localizedHref(path, locale);
const REPO = 'https://github.com/nexu-io/open-design';
const DISCORD = 'https://discord.gg/9ptkbbqRu';
const X_TWITTER = 'https://x.com/nexudotio';
---

<footer class='sub-footer' data-od-id='sub-footer'>
  <div class='container sub-footer-inner'>
    <div class='sub-footer-grid'>
      <div class='sub-footer-brand'>
        <a href={href('/')} class='brand'>
          <span class='brand-mark'>
            <img src='/logo.webp' alt='' width='36' height='36' />
          </span>
          <span>Open Design</span>
        </a>
        <p>
          {ui.footer.summary}
        </p>
      </div>
      <div class='sub-footer-col'>
        <h5>{ui.footer.products}</h5>
        <ul>
          <li><a href={href('/')}>Open Design</a></li>
          <li><a href={href('/html-anything/')}>{ui.footer.htmlAnything}</a></li>
        </ul>
      </div>
      <div class='sub-footer-col'>
        <h5>{copy.nav.plugins}</h5>
        <ul>
          <li><a href={href('/plugins/templates/')}>{copy.nav.templates}</a></li>
          <li><a href={href('/plugins/skills/')}>{copy.nav.skills}</a></li>
          <li><a href={href('/plugins/systems/')}>{copy.nav.systems}</a></li>
          <li><a href={href('/plugins/craft/')}>{copy.nav.craft}</a></li>
        </ul>
      </div>
      <div class='sub-footer-col'>
        <h5>{ui.footer.resources}</h5>
        <ul>
          <li><a href={href('/official/')}>{ui.footer.official}</a></li>
          <li><a href={href('/quickstart/')}>{ui.footer.quickstart}</a></li>
          <li><a href={href('/agents/')}>{ui.footer.agents}</a></li>
          <li><a href={href('/compare/')}>{ui.footer.compare}</a></li>
          <li><a href={href('/alternatives/claude-design/')}>{ui.footer.claudeAlternative}</a></li>
        </ul>
      </div>
      <div class='sub-footer-col'>
        <h5>{ui.footer.connect}</h5>
        <ul>
          <li><a href={REPO} target='_blank' rel='noopener'>{ui.footer.github}</a></li>
          <li><a href={`${REPO}/issues`} target='_blank' rel='noopener'>{ui.footer.issues}</a></li>
          <li><a href={`${REPO}/releases`} target='_blank' rel='noopener'>{ui.footer.releases}</a></li>
          <li><a href={DISCORD} target='_blank' rel='noopener'>{ui.footer.discord}</a></li>
          <li><a href={X_TWITTER} target='_blank' rel='noopener'>{ui.footer.xTwitter}</a></li>
          <li><a href='/blog/rss.xml'>{ui.footer.rss}</a></li>
          <li><a href={href('/#contact')}>{copy.nav.contact}</a></li>
        </ul>
      </div>
    </div>
    <div class='sub-footer-bottom'>
      <span>{ui.footer.bottomLeft}</span>
      <span>{ui.footer.bottomRight}</span>
    </div>
  </div>
</footer>