/*
 * Brand marks — single source of truth.
 *
 * The website pages use Babel-standalone (no build step), so this file
 * is loaded as a regular <script type="text/babel"> sibling. Each mark
 * attaches to window so other JSX files can use them as
 * <window.StudioMark /> or, after destructuring at the top of a file,
 * just <StudioMark />.
 *
 * Mirror lives in dashboard/src/components/StudioMark.tsx — when
 * tweaking geometry, update both. Keeping them aligned by hand is
 * cheaper than dragging a TS build into the static site.
 */

/* StudioMark — hex shell with an internal "S" arc.
 *
 * Sub-brand of AutoArchitect: same hex shell as the master logo, the
 * letterform inside differs (master = "A" triangle + crossbar, Studio
 * = "S" arc). Keep the geometry consistent so the brand-family reads
 * as one. Pass `size` (px) to scale; defaults to 16 for product chrome.
 */
const StudioMark = ({
  size = 16,
  accentFrom = '#f59e0b',
  accentTo = '#fbbf24',
  withWordmark = false,
  wordmarkColor = 'var(--fg-2)',
  idKey = 'default',
  style = {},
}) => {
  const gradId = `studio-mark-${idKey}`;
  const svg = (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden style={{ display: 'block' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={accentFrom} />
          <stop offset="1" stopColor={accentTo} />
        </linearGradient>
      </defs>
      <path d="M16 2 L28 9 L28 23 L16 30 L4 23 L4 9 Z" fill={`url(#${gradId})`} opacity="0.18" />
      <path d="M16 2 L28 9 L28 23 L16 30 L4 23 L4 9 Z" stroke={`url(#${gradId})`} strokeWidth="1.6" />
      <path
        d="M21 11 C21 9 19.5 8 17 8 L15 8 C13 8 11.5 9 11.5 11 C11.5 13 13 14 15 14 L17 14 C19 14 20.5 15 20.5 17 C20.5 19 19 20 17 20 L15 20 C12.5 20 11 19 11 17"
        stroke={accentTo}
        strokeWidth="1.8"
        strokeLinecap="round"
        fill="none"
      />
    </svg>
  );

  if (!withWordmark) return svg;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, ...style }}>
      {svg}
      <span style={{
        fontSize: 10.5,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: wordmarkColor,
        fontWeight: 600,
      }}>
        Studio
      </span>
    </span>
  );
};

/* AutoarchitectMark — hex shell with an internal "A" triangle + crossbar.
 *
 * The master brand mark used on the marketing site (matches the favicon).
 * Use this on hero / nav / footer surfaces; use StudioMark inside the
 * Studio-as-product UI surfaces. */
const AutoarchitectMark = ({
  size = 32,
  accentFrom = '#f59e0b',
  accentTo = '#fbbf24',
  idKey = 'default',
}) => {
  const gradId = `aa-mark-${idKey}`;
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" aria-hidden style={{ display: 'block' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={accentFrom} />
          <stop offset="1" stopColor={accentTo} />
        </linearGradient>
      </defs>
      <path d="M16 2 L28 9 L28 23 L16 30 L4 23 L4 9 Z" fill={`url(#${gradId})`} opacity="0.18" />
      <path d="M16 2 L28 9 L28 23 L16 30 L4 23 L4 9 Z" stroke={`url(#${gradId})`} strokeWidth="1.5" />
      {/* Inner A triangle */}
      <path d="M16 8 L23 22 L9 22 Z" stroke={accentTo} strokeWidth="1.5" fill="none" />
      {/* A crossbar */}
      <path d="M12.5 17 L19.5 17" stroke={accentTo} strokeWidth="1.5" />
      {/* Centre dot */}
      <circle cx="16" cy="16" r="1.5" fill="#fcd34d" />
    </svg>
  );
};

window.StudioMark = StudioMark;
window.AutoarchitectMark = AutoarchitectMark;