// Icon components — line-style, matching the Pico screenshots
// Stroke 1.75–2px, rounded joins, slight navy tint

const Ic = ({ children, size = 20, color = '#1F2937', style = {} }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke={color} strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
    style={style}>
    {children}
  </svg>
);

const IcSearch = (p) => <Ic {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></Ic>;
const IcMenu = (p) => <Ic {...p}><path d="M4 7h16M4 12h16M4 17h16"/></Ic>;
const IcFilter = (p) => <Ic {...p}><path d="M3 6h18M6 12h12M10 18h4"/></Ic>;
const IcPerson = (p) => <Ic {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></Ic>;
const IcPersonChat = (p) => (
  <Ic {...p}>
    <circle cx="10" cy="9" r="3.5"/>
    <path d="M3 20c0-3.5 3-6 7-6 1 0 2 .2 3 .5"/>
    <path d="M15 18h4a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v3l-1 2 3-0z" fill="none"/>
  </Ic>
);
const IcChevR = (p) => <Ic {...p}><path d="m9 6 6 6-6 6"/></Ic>;
const IcChevL = (p) => <Ic {...p}><path d="m15 6-6 6 6 6"/></Ic>;
const IcChevD = (p) => <Ic {...p}><path d="m6 9 6 6 6-6"/></Ic>;
const IcCheck = (p) => <Ic {...p}><path d="M4 12l5 5L20 6"/></Ic>;
const IcPencil = (p) => <Ic {...p}><path d="M4 20h4L19 9l-4-4L4 16v4z"/><path d="m14 6 4 4"/></Ic>;
const IcPlus = (p) => <Ic {...p}><path d="M12 5v14M5 12h14"/></Ic>;
const IcHeart = (p) => (
  <Ic {...p}>
    <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/>
  </Ic>
);
const IcHeatPump = (p) => (
  // Stylized "boiler/heat pump" — small box with fan
  <Ic {...p}>
    <rect x="3" y="5" width="18" height="14" rx="2"/>
    <circle cx="12" cy="12" r="3.5"/>
    <path d="M12 8.5v0M12 15.5v0M8.5 12h0M15.5 12h0" />
  </Ic>
);
const IcSolar = (p) => (
  <Ic {...p}>
    <path d="M4 18h16L18 7H6L4 18z"/>
    <path d="M5 12h14M12 7v11M8.5 7 7 18M15.5 7l1.5 11"/>
  </Ic>
);
const IcBack = (p) => <Ic {...p}><path d="M15 5l-7 7 7 7"/></Ic>;
const IcArrLeft = (p) => <Ic {...p}><path d="M20 12H5M12 19l-7-7 7-7"/></Ic>;
const IcArrRight = (p) => <Ic {...p}><path d="M4 12h15M12 5l7 7-7 7"/></Ic>;
const IcDots = (p) => <Ic {...p}><circle cx="5" cy="12" r="1.25" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1.25" fill="currentColor" stroke="none"/><circle cx="19" cy="12" r="1.25" fill="currentColor" stroke="none"/></Ic>;
const IcTabs = (p) => <Ic {...p}><rect x="5" y="5" width="14" height="14" rx="2"/></Ic>;
const IcHourglass = ({ size = 14, color = '#0E1F3B' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M6 3h12v3l-5 6 5 6v3H6v-3l5-6-5-6V3z"
      stroke={color} strokeWidth="1.75" strokeLinejoin="round"/>
    <path d="M8 19h8M8 5h8" stroke={color} strokeWidth="1.75" strokeLinecap="round"/>
  </svg>
);

// The pico logo — 3 thick coral chevrons (∧ shapes) in a horizontal cascade
// Each chevron is identical; they stair-step up-to-the-right with small gaps.
const PicoLogo = ({ height = 28 }) => {
  const red = '#FF4B43';
  const ink = '#0E1F3B';
  // One chevron ∧: thick angular up-caret with flat end-caps.
  // Box: 22 wide, 14 tall. Apex at center top, bar thickness ~6.
  // Outer:  left-base-bottom (0,14) → left-base-top (0,10) → apex-top (11,0)
  //         → right-base-top (22,10) → right-base-bottom (22,14) → valley (11,6)
  const Chevron = (tx, ty) => (
    <path
      transform={`translate(${tx} ${ty})`}
      d="M0 14 L0 10 L11 0 L22 10 L22 14 L11 6 Z"
    />
  );
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 7, height }}>
      <svg width={height * 1.9} height={height * 0.85} viewBox="0 0 56 24" fill="none" style={{ display: 'block' }}>
        {/* staircase: chevron1 bottom-left, chevron2 middle, chevron3 top-right */}
        <g fill={red}>
          {Chevron(0, 10)}
          {Chevron(16, 5)}
          {Chevron(32, 0)}
        </g>
      </svg>
      <span style={{
        fontFamily: '"Plus Jakarta Sans", system-ui', fontWeight: 700,
        fontSize: height * 1.05, color: ink, letterSpacing: -1.3,
        lineHeight: 1,
      }}>pico</span>
    </div>
  );
};

// Yellow hourglass badge (the circular yellow pin on list rows)
const YellowHourglassBadge = ({ size = 30 }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: '#F5D82A',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    boxShadow: 'inset 0 -1.5px 0 rgba(0,0,0,0.08)',
  }}>
    <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 24 24" fill="none">
      <path d="M7 3h10v3l-5 6 5 6v3H7v-3l5-6-5-6V3z"
        stroke="#1F1F1F" strokeWidth="2" strokeLinejoin="round" fill="#F5D82A"/>
      <rect x="8.5" y="3" width="7" height="1.5" fill="#1F1F1F"/>
      <rect x="8.5" y="19.5" width="7" height="1.5" fill="#1F1F1F"/>
    </svg>
  </div>
);

Object.assign(window, {
  IcSearch, IcMenu, IcFilter, IcPerson, IcPersonChat, IcChevR, IcChevL, IcChevD,
  IcCheck, IcPencil, IcPlus, IcHeart, IcHeatPump, IcSolar, IcBack,
  IcArrLeft, IcArrRight, IcDots, IcTabs, IcHourglass,
  PicoLogo, YellowHourglassBadge,
});