// Custom thin-line icons for iAngels Wealth
const Icon = ({ children, size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 28 28" fill="none" stroke="currentColor"
       strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
    {children}
  </svg>
);

const IconArchitecture = () => (
  <Icon>
    <path d="M3 24 L3 10 L14 4 L25 10 L25 24" />
    <path d="M9 24 L9 14 L19 14 L19 24" />
    <path d="M14 24 L14 18" />
  </Icon>
);

const IconCore = () => (
  <Icon>
    <circle cx="14" cy="14" r="3" />
    <circle cx="14" cy="14" r="8" strokeDasharray="2 3" />
    <circle cx="14" cy="14" r="12" strokeDasharray="2 5" opacity="0.5"/>
  </Icon>
);

const IconTransparency = () => (
  <Icon>
    <circle cx="14" cy="14" r="10" />
    <path d="M14 4 L14 24" />
    <path d="M4 14 L24 14" />
    <path d="M7 7 L21 21" opacity="0.4"/>
  </Icon>
);

const IconPowerhouses = () => (
  <Icon>
    <rect x="3" y="3" width="9" height="9" />
    <rect x="16" y="16" width="9" height="9" />
    <path d="M12 7 Q19 7 19 16" strokeDasharray="2 2"/>
    <path d="M7 12 Q7 19 16 19" strokeDasharray="2 2"/>
  </Icon>
);

const IconMoatResearch = () => (
  <Icon size={24}>
    <circle cx="11" cy="11" r="6.5" />
    <path d="M15.5 15.5 L21 21" />
    <path d="M8 13 V9 M11 13 V7 M14 13 V10" strokeWidth="1.8" />
  </Icon>
);

const IconMoatAccess = () => (
  <Icon size={24}>
    <rect x="5" y="14" width="14" height="9" rx="1.5" />
    <rect x="7" y="8" width="14" height="9" rx="1.5" />
    <rect x="9" y="2" width="14" height="9" rx="1.5" />
  </Icon>
);

const IconMoatPortfolio = () => (
  <Icon size={24}>
    <circle cx="14" cy="7.5" r="3" />
    <circle cx="7" cy="20" r="3" />
    <circle cx="21" cy="20" r="3" />
    <path d="M14 10.5 L7.8 17.2" />
    <path d="M14 10.5 L20.2 17.2" />
    <path d="M10 20 H18" />
  </Icon>
);

const IconArrow = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="arr">
    <path d="M2 7 L12 7" />
    <path d="M8 3 L12 7 L8 11" />
  </svg>
);

const IconChevL = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M10 3 L5 8 L10 13" />
  </svg>
);
const IconChevR = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M6 3 L11 8 L6 13" />
  </svg>
);

const IconPlay = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
    <path d="M6 4 L18 11 L6 18 Z" />
  </svg>
);

const IconClose = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
    <path d="M3 3 L11 11 M11 3 L3 11" />
  </svg>
);

/* About process staircase — thin line icons (match reference: bulb, chat, calendar, gear, chart, thumb) */
const IconStepAudit = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M16 5c-4.2 0-7.5 3.1-7.5 7 0 3.1 1.8 5.6 3.7 6.6V22h7.6v-3.4c1.9-1 3.7-3.5 3.7-6.6 0-3.9-3.3-7-7.5-7z" />
    <path d="M12.5 22v2.5c0 .8.7 1.5 1.5 1.5h4c.8 0 1.5-.7 1.5-1.5V22" />
  </svg>
);
const IconStepArchitect = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 11h11a1.5 1.5 0 0 1 1.5 1.5v6A1.5 1.5 0 0 1 16 20h-3.5L11 23v-3H5a1.5 1.5 0 0 1-1.5-1.5v-6A1.5 1.5 0 0 1 5 11z" />
    <path d="M13.5 15.5h11A1.5 1.5 0 0 1 26 17v5a1.5 1.5 0 0 1-1.5 1.5h-2L20 26v-2.5h-2.5A1.5 1.5 0 0 1 16 22v-1" />
  </svg>
);
const IconStepExecute = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="7" y="9" width="18" height="16" rx="2" />
    <path d="M7 14h18M11 7v4M21 7v4" />
    <path d="M13 19l2.2 2.2L20 15" strokeWidth="1.35" />
  </svg>
);
const IconStepMonitor = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="16" cy="16" r="3" />
    <path d="M16 8.5v3M16 20.5v3M23.5 16h-3M11.5 16H8M21.3 10.7l-2.1 2.1M12.8 19.2l-2.1 2.1M21.3 21.3l-2.1-2.1M12.8 12.8l-2.1-2.1" />
  </svg>
);
const IconStepReview = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M9 24V17M14 24V13M19 24V15" strokeWidth="1.7" strokeLinecap="square" />
    <path d="M7.5 25.5h17" opacity="0.35" />
    <path d="M19.5 9.5l5-5M24.5 9.5V5" />
  </svg>
);
const IconStepPartnership = () => (
  <svg width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14.5 25H9v-9h5.5l1.8-6.2c.2-.8 1-.9 1.6-.5l1.2 1.8h6.4a2 2 0 0 1 2 2v2.8a3.2 3.2 0 0 1-3.2 3.2H14.5z" />
    <path d="M9 16v10" />
  </svg>
);

const IconLogo = ({ size = 40 }) => (
  // Faithful recreation of the iAngels mark: ascending bars + dotted-i + green arrow + blue sweep
  <svg width={size * 1.05} height={size} viewBox="0 0 84 80" fill="none" aria-label="iAngels mark">
    {/* Bars (ascending) — black */}
    <rect x="6"  y="46" width="10" height="22" fill="currentColor"/>
    <rect x="20" y="32" width="10" height="36" fill="currentColor"/>
    <rect x="34" y="38" width="10" height="30" fill="currentColor"/>
    {/* The 'i' dot — red */}
    <rect x="20" y="14" width="10" height="10" fill="var(--accent-red)"/>
    {/* Green up-arrow */}
    <path d="M14 56 L52 18" stroke="var(--accent-green)" strokeWidth="6" strokeLinecap="square" fill="none"/>
    <path d="M40 18 L52 18 L52 30" stroke="var(--accent-green)" strokeWidth="6" strokeLinecap="square" strokeLinejoin="miter" fill="none"/>
    {/* Blue base sweep */}
    <path d="M4 72 L40 72 L60 56" stroke="var(--accent-blue)" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
  </svg>
);

const Wordmark = ({ height = 28 }) => (
  <svg height={height} viewBox="0 0 220 56" fill="none" aria-label="iAngels Wealth">
    <text x="0" y="36" fontFamily="'Poppins', sans-serif" fontWeight="700" fontSize="40" letterSpacing="-1.2" fill="currentColor">iANGELS</text>
    <text x="2" y="52" fontFamily="'Open Sans', sans-serif" fontWeight="400" fontSize="13" letterSpacing="6" fill="currentColor">WEALTH</text>
  </svg>
);

Object.assign(window, {
  IconArchitecture, IconCore, IconTransparency, IconPowerhouses,
  IconMoatResearch, IconMoatAccess, IconMoatPortfolio,
  IconArrow, IconChevL, IconChevR, IconPlay, IconClose, IconLogo, Wordmark,
  IconStepAudit, IconStepArchitect, IconStepExecute, IconStepMonitor, IconStepReview,
  IconStepPartnership,
});
