// Icon set — minimal monoline, currentColor
const Icon = ({ d, size = 18, fill = "none", strokeWidth = 1.6, viewBox = "0 0 24 24", children, style }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill} stroke="currentColor"
    strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
    {d ? <path d={d} /> : children}
  </svg>
);

const IconArrow = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>;
const IconArrowDown = (p) => <Icon {...p}><path d="M12 5v14M5 13l7 7 7-7"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="M4 12l5 5L20 6"/></Icon>;
const IconBox = (p) => <Icon {...p}><path d="M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8"/></Icon>;
const IconTruck = (p) => <Icon {...p}><path d="M2 6h11v10H2zM13 9h4l4 4v3h-8M6 20a2 2 0 100-4 2 2 0 000 4zM18 20a2 2 0 100-4 2 2 0 000 4z"/></Icon>;
const IconReturn = (p) => <Icon {...p}><path d="M3 7l4-4 4 4M7 3v10a4 4 0 004 4h6"/></Icon>;
const IconGlobe = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18"/></Icon>;
const IconChat = (p) => <Icon {...p}><path d="M21 12a8 8 0 01-11.7 7.1L3 21l1.9-6.3A8 8 0 1121 12z"/></Icon>;
const IconChart = (p) => <Icon {...p}><path d="M3 3v18h18M7 14l4-4 3 3 5-6"/></Icon>;
const IconCheckCircle = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></Icon>;
const IconEuro = (p) => <Icon {...p}><path d="M18 7a7 7 0 100 10M3 10h11M3 14h11"/></Icon>;
const IconPackage = (p) => <Icon {...p}><path d="M3 7l9-4 9 4v10l-9 4-9-4V7zM3 7l9 4 9-4M12 11v10"/></Icon>;
const IconDot = ({ size = 8, color }) => <span style={{display:"inline-block", width:size, height:size, background:color || "currentColor", borderRadius:"50%"}}/>;
const IconHandshake = (p) => <Icon {...p}><path d="M11 17l2 2a2 2 0 003-3l-4-4M3 12l4-4 5 5-3 3a2 2 0 01-3 0L3 13M21 12l-4-4-3 3M14 8l3-3"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2z"/></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></Icon>;
const IconPhone = (p) => <Icon {...p}><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z"/></Icon>;
const IconClock = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></Icon>;

// Brand mark: stylized S with a paper-plane cut through, inspired by the brand sheet
const BrandMark = ({ size = 28, color }) => (
  <svg width={size} height={size * (32/40)} viewBox="0 0 40 32" fill="none" style={{display:"block"}}>
    {/* S shape */}
    <path d="M5 4h26c1 0 2 1 2 2v6H14c-1 0-2 1-2 2s1 2 2 2h13c4 0 6 2 6 6 0 3-3 6-6 6H7c-1 0-2-1-2-2v-6h17c1 0 2-1 2-2s-1-2-2-2H10c-3 0-5-2-5-5V6c0-1 1-2 2-2z" fill={color || "var(--accent)"}/>
    {/* Plane swooping through */}
    <path d="M16 14l16-3-7 5 4 1-4 2-2-2-7-3z" fill="white" opacity="0.95"/>
  </svg>
);

// Tempo brand mark — metronome, from the Tempo design system. Same
// tightened viewBox as the real app's Logo component (src/components/logo.tsx)
// so the mark centers cleanly against adjacent text.
const TempoMark = ({ size = 32, color = "var(--fg)", accent = "#E0913B" }) => (
  <svg width={size * (76 / 100)} height={size} viewBox="12 20 76 100" fill="none" style={{ display: "block" }}>
    <rect x="16" y="103" width="68" height="11" rx="3" fill={color}/>
    <path d="M24 104 L41 26 L59 26 L76 104 Z" fill={color}/>
    <line x1="50" y1="99" x2="65" y2="37" stroke={accent} strokeWidth="3.5" strokeLinecap="round"/>
    <circle cx="50" cy="99" r="3.2" fill={accent}/>
    <circle cx="58.5" cy="62" r="6" fill={accent}/>
  </svg>
);

// European Union flag: 3:2 blue field with the 12-star circle. Rounded corners
// so it sits nicely inline next to text.
const EUFlag = ({ width = 24, style }) => (
  <svg width={width} height={width * 2 / 3} viewBox="0 0 60 40" style={{ display: "inline-block", verticalAlign: "-0.15em", borderRadius: 2, flexShrink: 0, ...style }} aria-label="Union européenne" role="img">
    <rect width="60" height="40" fill="#003399"/>
    <circle cx="30.00" cy="11.00" r="1.55" fill="#FFCC00"/> <circle cx="34.50" cy="12.21" r="1.55" fill="#FFCC00"/> <circle cx="37.79" cy="15.50" r="1.55" fill="#FFCC00"/> <circle cx="39.00" cy="20.00" r="1.55" fill="#FFCC00"/> <circle cx="37.79" cy="24.50" r="1.55" fill="#FFCC00"/> <circle cx="34.50" cy="27.79" r="1.55" fill="#FFCC00"/> <circle cx="30.00" cy="29.00" r="1.55" fill="#FFCC00"/> <circle cx="25.50" cy="27.79" r="1.55" fill="#FFCC00"/> <circle cx="22.21" cy="24.50" r="1.55" fill="#FFCC00"/> <circle cx="21.00" cy="20.00" r="1.55" fill="#FFCC00"/> <circle cx="22.21" cy="15.50" r="1.55" fill="#FFCC00"/> <circle cx="25.50" cy="12.21" r="1.55" fill="#FFCC00"/>
  </svg>
);

Object.assign(window, {
  Icon, IconArrow, IconArrowDown, IconCheck, IconBox, IconTruck, IconReturn,
  IconGlobe, IconChat, IconChart, IconCheckCircle, IconEuro, IconPackage,
  IconDot, IconHandshake, IconSparkle, IconMail, IconPhone, IconClock, BrandMark, TempoMark, EUFlag
});