// Shared registry of the site's hand-drawn brand-line icons, used by
// StepArrow-connected icon rows (/lebensuhr's phase row, /3x3-system's
// category row, /7-tage-klarheits-check's "So funktioniert"). Previously
// each page defined its own copy of these locally — consolidated here so
// the Payload page-builder's `stepRow` block can select one by a fixed
// key (see PageBlocks.tsx), and so the icons aren't duplicated per page
// anymore. The Payload StepRowBlock's `icon` select options MUST stay in
// sync with STEP_ICON_KEYS below by hand — no automatic sync between the
// two repos.

function IconSunrise() {
  return (
    <svg width="44" height="40" viewBox="0 0 44 40" fill="none">
      <line x1="4" y1="30" x2="40" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <path d="M13 30a9 9 0 0 1 18 0" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="22" y1="4" x2="22" y2="10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="9" y1="10" x2="13" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="35" y1="10" x2="31" y2="14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconGrowthBars() {
  return (
    <svg width="44" height="40" viewBox="0 0 44 40" fill="none">
      <line x1="4" y1="36" x2="40" y2="36" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <rect x="7" y="25" width="7" height="11" rx="1" stroke="#f6a701" strokeWidth="2" />
      <rect x="18.5" y="16" width="7" height="20" rx="1" stroke="#f6a701" strokeWidth="2" />
      <rect x="30" y="6" width="7" height="30" rx="1" stroke="#f6a701" strokeWidth="2" />
    </svg>
  );
}

function IconSunHigh() {
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="8" stroke="#f6a701" strokeWidth="2" />
      <line x1="20" y1="2" x2="20" y2="7" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="20" y1="33" x2="20" y2="38" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="2" y1="20" x2="7" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="33" y1="20" x2="38" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="7" y1="7" x2="10.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="29.5" y1="29.5" x2="33" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="33" y1="7" x2="29.5" y2="10.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="10.5" y1="29.5" x2="7" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconEnvelope() {
  return (
    <svg width="52" height="44" viewBox="0 0 52 44" fill="none">
      <rect x="2" y="2" width="48" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />
      <path d="M2 2l24 22L50 2" stroke="#f6a701" strokeWidth="2" />
    </svg>
  );
}

function IconMailLines() {
  return (
    <svg width="56" height="44" viewBox="0 0 56 44" fill="none">
      <line x1="2" y1="12" x2="12" y2="12" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="2" y1="20" x2="9" y2="20" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="2" y1="28" x2="7" y2="28" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <rect x="13" y="2" width="41" height="40" rx="3" stroke="#f6a701" strokeWidth="2" />
      <path d="M13 2l20.5 19L54 2" stroke="#f6a701" strokeWidth="2" />
    </svg>
  );
}

function IconNotepad() {
  return (
    <svg width="46" height="52" viewBox="0 0 46 52" fill="none">
      <rect x="2" y="4" width="32" height="42" rx="2" stroke="#f6a701" strokeWidth="2" />
      <line x1="9" y1="16" x2="27" y2="16" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="9" y1="23" x2="24" y2="23" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="9" y1="30" x2="20" y2="30" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <circle cx="37" cy="40" r="7" stroke="#f6a701" strokeWidth="2" />
      <line x1="37" y1="27" x2="37" y2="33" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconCheckCircle() {
  return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
      <circle cx="24" cy="24" r="21" stroke="#f6a701" strokeWidth="2" />
      <path d="M14 24l7.5 7.5L34 16" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconTarget() {
  return (
    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
      <circle cx="20" cy="20" r="16" stroke="#f6a701" strokeWidth="2" />
      <circle cx="20" cy="20" r="9" stroke="#f6a701" strokeWidth="2" />
      <circle cx="20" cy="20" r="2" fill="#f6a701" />
    </svg>
  );
}

function IconTrendingUp() {
  return (
    <svg width="44" height="40" viewBox="0 0 44 40" fill="none">
      <path d="M4 30l10-10 6 6 14-14" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M24 10h10v10" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function IconShield() {
  return (
    <svg width="36" height="40" viewBox="0 0 36 40" fill="none">
      <path d="M18 3l14 5v9c0 9-6 16-14 20-8-4-14-11-14-20v-9l14-5z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
    </svg>
  );
}

function IconCup() {
  // Mug + handle + steam — for "pour yourself a drink" steps (Tasse "Die
  // Pause." was the first thing that needed this, none of the existing 10
  // fit a physical cup product at all).
  return (
    <svg width="40" height="44" viewBox="0 0 40 44" fill="none">
      <path d="M6 16h20v14a7 7 0 0 1-7 7h-6a7 7 0 0 1-7-7V16z" stroke="#f6a701" strokeWidth="2" strokeLinejoin="round" />
      <path d="M26 20h3a5 5 0 0 1 0 10h-3" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <path d="M12 4c-2 2-2 3.5 0 5.5M20 4c-2 2-2 3.5 0 5.5" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function IconPause() {
  // Two rounded bars — "sit still for a moment" steps.
  return (
    <svg width="32" height="40" viewBox="0 0 32 40" fill="none">
      <rect x="5" y="4" width="8" height="32" rx="3" stroke="#f6a701" strokeWidth="2" />
      <rect x="19" y="4" width="8" height="32" rx="3" stroke="#f6a701" strokeWidth="2" />
    </svg>
  );
}

// Keys MUST match the Payload StepRowBlock's `icon` select field options
// (docker/payload/src/blocks/StepRowBlock.ts) exactly.
export const STEP_ICONS: Record<string, () => React.ReactNode> = {
  sunrise: IconSunrise,
  growthBars: IconGrowthBars,
  sunHigh: IconSunHigh,
  envelope: IconEnvelope,
  mailLines: IconMailLines,
  notepad: IconNotepad,
  checkCircle: IconCheckCircle,
  target: IconTarget,
  trendingUp: IconTrendingUp,
  shield: IconShield,
  cup: IconCup,
  pause: IconPause,
};

// Same symbolic clock icon /lebensuhr uses above its "24 Stunden" heading
// — purely decorative (no numbers/data), unlike the STEP_ICONS above which
// always sit inside an icon-above-text row. Keys MUST match the Payload
// IconBlock's `icon` select field options (docker/payload/src/blocks/
// IconBlock.ts) exactly.
function IconClockSymbol() {
  return (
    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <circle cx="24" cy="24" r="21" stroke="#f6a701" strokeWidth="2" />
      {[0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330].map((deg) => {
        const rad = (deg * Math.PI) / 180;
        const x1 = 24 + 16 * Math.sin(rad), y1 = 24 - 16 * Math.cos(rad);
        const x2 = 24 + 18.5 * Math.sin(rad), y2 = 24 - 18.5 * Math.cos(rad);
        return <line key={deg} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#f6a701" strokeWidth="1.5" strokeLinecap="round" />;
      })}
      <line x1="24" y1="24" x2="17" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <line x1="24" y1="24" x2="32" y2="15" stroke="#f6a701" strokeWidth="2" strokeLinecap="round" />
      <circle cx="24" cy="24" r="1.8" fill="#f6a701" />
    </svg>
  );
}

export const SYMBOLIC_ICONS: Record<string, () => React.ReactNode> = {
  clockSymbol: IconClockSymbol,
};
