/* Hi-fi shared icons + tiny primitives.
   Most styling lives in hifi-styles.css. */

const Ico = {
  arrow: (s = 14, c = "currentColor") => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M2 7h10M8 3l4 4-4 4" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  play: (s = 18, c = "white") => (
    <svg width={s} height={s} viewBox="0 0 18 18" fill="none">
      <path d="M5 3l10 6-10 6V3z" fill={c}/>
    </svg>
  ),
  check: (s = 12, c = "currentColor") => (
    <svg width={s} height={s} viewBox="0 0 12 12" fill="none">
      <path d="M2 6l3 3 5-6" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  plus: (s = 14, c = "currentColor") => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M7 2v10M2 7h10" stroke={c} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  copy: (s = 14, c = "currentColor") => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <rect x="4" y="4" width="8" height="8" rx="1.5" stroke={c} strokeWidth="1.3"/>
      <path d="M9 4V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h1" stroke={c} strokeWidth="1.3"/>
    </svg>
  ),
  signal: () => (
    <svg width="17" height="11" viewBox="0 0 17 11" fill="currentColor">
      <rect x="0" y="7" width="3" height="4" rx="0.5"/>
      <rect x="5" y="5" width="3" height="6" rx="0.5"/>
      <rect x="10" y="2" width="3" height="9" rx="0.5"/>
      <rect x="14.2" y="0" width="2.5" height="11" rx="0.5" opacity=".4"/>
    </svg>
  ),
  wifi: () => (
    <svg width="16" height="11" viewBox="0 0 16 11" fill="none">
      <path d="M8 9.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zM3.5 5.5C4.7 4.4 6.3 3.7 8 3.7s3.3.7 4.5 1.8M1 3C2.9 1.3 5.4.5 8 .5s5.1.8 7 2.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round"/>
    </svg>
  ),
  battery: () => (
    <svg width="25" height="11" viewBox="0 0 25 11" fill="none">
      <rect x="0.5" y="0.5" width="21" height="10" rx="2" stroke="currentColor" strokeWidth="1"/>
      <rect x="2" y="2" width="18" height="7" rx="1" fill="currentColor"/>
      <rect x="22.5" y="3.5" width="2" height="4" rx="0.5" fill="currentColor"/>
    </svg>
  ),
  send: (s = 14, c = "currentColor") => (
    <svg width={s} height={s} viewBox="0 0 14 14" fill="none">
      <path d="M12 7L2 2l2 5-2 5 10-5z" stroke={c} strokeWidth="1.3" strokeLinejoin="round"/>
    </svg>
  ),
};

const StatusBar = () => (
  <div className="hf-statusbar">
    <span>9:41</span>
    <span className="icons">
      <Ico.signal/>
      <Ico.wifi/>
      <Ico.battery/>
    </span>
  </div>
);

const HfHeader = () => (
  <div className="hf-header">
    <div className="hf-logo">
      <span className="hf-logo-mark">T</span>
      <span>TelegaFirst</span>
    </div>
    <div className="hf-row" style={{ gap: 8 }}>
      <button className="hf-icon-btn">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        </svg>
      </button>
      <button className="hf-header-cta">
        Попробовать
        <span className="hf-header-cta-dot"/>
      </button>
    </div>
  </div>
);

window.HfIco = Ico;
window.HfStatusBar = StatusBar;
window.HfHeader = HfHeader;
