---
/**
 * EECredit — the "Built by Emergence Engineering" lockup.
 * Uses the EE flower mark (keeps its orange) + the "Emergence Engineering"
 * wordmark set in Oswald (the blog's brand/title font) in a light color, so it
 * stays visible on the dark footer (the original wordmark SVG's text is near-black).
 *  - variant="footer": lockup + studio blurb + contact (footer column 3).
 *  - variant="inline": compact "Built by" lockup.
 */
import Icon from './Icon.astro';
import '@fontsource/oswald/500.css';

interface Props {
  variant?: 'footer' | 'inline';
  class?: string;
}
const { variant = 'footer', class: cls = '' } = Astro.props;
---

{
  variant === 'inline' ? (
    <a
      class={`ee-inline ${cls}`}
      href="https://emergence-engineering.com"
      target="_blank"
      rel="noopener"
    >
      <span class="ee-by">Built by</span>
      <Icon name="ee/ee-mark.svg" mode="img" size="1rem" alt="" />
      <span class="ee-wordmark">Emergence Engineering</span>
    </a>
  ) : (
    <div class={`ee-footer ${cls}`}>
      <span class="ee-lockup">
        <Icon name="ee/ee-mark.svg" mode="img" size="1.6rem" alt="" />
        <span class="ee-wordmark">Emergence Engineering</span>
      </span>
      <p class="ee-blurb muted">
        PCBJam is a project by Emergence Engineering, a full-stack software studio. Need
        something hard built?{' '}
        <a href="mailto:contact@emergence-engineering.com">contact@emergence-engineering.com</a>
      </p>
      <a
        class="ee-link"
        href="https://emergence-engineering.com"
        target="_blank"
        rel="noopener"
      >
        About Emergence Engineering →
      </a>
    </div>
  )
}

<style>
  .ee-wordmark {
    font-family: 'Oswald', system-ui, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--fg);
  }
  .ee-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--fg-muted);
  }
  .ee-inline:hover {
    text-decoration: none;
    color: var(--fg);
  }
  .ee-by {
    font-size: 0.85rem;
  }
  .ee-footer {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: flex-start;
  }
  .ee-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .ee-lockup .ee-wordmark {
    font-size: 1.05rem;
  }
  .ee-blurb {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .ee-link {
    font-size: 0.85rem;
  }
</style>
