// shared.jsx — Header, icons, small primitives

const Icon = {
  Plane: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M2 12l20-9-7 20-3-9-10-2z" />
    </svg>
  ),
  Check: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <polyline points="5 12 10 17 19 7" />
    </svg>
  ),
  Arrow: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <line x1="5" y1="12" x2="19" y2="12" />
      <polyline points="13 6 19 12 13 18" />
    </svg>
  ),
  ArrowLeft: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <line x1="19" y1="12" x2="5" y2="12" />
      <polyline points="11 6 5 12 11 18" />
    </svg>
  ),
  Lock: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="4" y="11" width="16" height="10" rx="2" />
      <path d="M8 11V7a4 4 0 0 1 8 0v4" />
    </svg>
  ),
  Clock: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="9" />
      <polyline points="12 7 12 12 16 14" />
    </svg>
  ),
  Calendar: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <line x1="3" y1="10" x2="21" y2="10" />
      <line x1="8" y1="3" x2="8" y2="7" />
      <line x1="16" y1="3" x2="16" y2="7" />
    </svg>
  ),
  Video: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <rect x="2" y="6" width="14" height="12" rx="2" />
      <polygon points="22 8 16 12 22 16 22 8" fill="currentColor" stroke="none" />
    </svg>
  ),
  Doc: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" />
      <polyline points="14 3 14 9 20 9" />
    </svg>
  ),
  User: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
      <circle cx="12" cy="7" r="4" />
    </svg>
  ),
  Upload: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="17 8 12 3 7 8" />
      <line x1="12" y1="3" x2="12" y2="15" />
    </svg>
  ),
  Shield: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
    </svg>
  ),
  Globe: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="9" />
      <line x1="3" y1="12" x2="21" y2="12" />
      <path d="M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />
    </svg>
  ),
  Telegram: (props) => (
    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
      <path d="M21.5 3.5L2 11l5 2 2 6 3-3.5 5 4 4.5-16z" opacity=".95"/>
    </svg>
  ),
  Help: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...props}>
      <circle cx="12" cy="12" r="9" />
      <path d="M9.5 9a2.5 2.5 0 0 1 5 0c0 1.5-2.5 2-2.5 4" />
      <circle cx="12" cy="17" r=".8" fill="currentColor" />
    </svg>
  ),
  Plus: (props) => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" {...props}>
      <line x1="12" y1="5" x2="12" y2="19" />
      <line x1="5" y1="12" x2="19" y2="12" />
    </svg>
  ),
};

function Logo() {
  return (
    <a href="https://consultation.kiwieducation.ru/" style={{display:"flex",alignItems:"center",textDecoration:"none"}}>
      <img src="/logo.svg" alt="KiwiEducation" style={{height:28,display:"block"}}/>
    </a>
  );
}

function Header({ minimal = false, navigate }) {
  return (
    <header className="hd">
      <div className="container hd-row">
        <Logo />
        {!minimal && (
          <nav className="nav">
            {navigate
              ? <a href="#" onClick={e => { e.preventDefault(); navigate("setup"); }}>Инструкция</a>
              : <a href="#">Инструкция</a>
            }
          </nav>
        )}
        {minimal && (
          <div className="hstack gap-8 muted" style={{fontSize:13}}>
            <Icon.Lock style={{width:14,height:14}}/> Защищённое соединение
          </div>
        )}
      </div>
    </header>
  );
}

function ProgressSteps({ current = 1, show = true }) {
  if (!show) return null;
  const items = [
    { n: 1, label: "Оплата" },
    { n: 2, label: "Подготовка" },
    { n: 3, label: "Подтверждение" },
  ];
  return (
    <div className="steps">
      {items.map((it, i) => (
        <React.Fragment key={it.n}>
          <div className={`step-item ${current === it.n ? "active" : current > it.n ? "done" : ""}`}>
            <div className="step-dot">{it.n}</div>
            <div className="step-label">{it.label}</div>
          </div>
          {i < items.length - 1 && <div className={`step-bar ${current > it.n ? "done" : ""}`} />}
        </React.Fragment>
      ))}
    </div>
  );
}

// Field wrapper
function Field({ label, optional, error, children, hint }) {
  return (
    <div className={`field ${error ? "err" : ""}`}>
      {label && (
        <label>
          {label}
          {optional && <span className="opt"> (необязательно)</span>}
        </label>
      )}
      {children}
      {hint && !error && <div className="muted" style={{fontSize:12}}>{hint}</div>}
      {error && <div className="err-msg">{error}</div>}
    </div>
  );
}

// Tiny shared "next steps note"
function ReassureNote({ children }) {
  return (
    <div style={{display:'flex',gap:10,alignItems:'flex-start',padding:'12px 14px',background:'var(--brand-soft)',borderRadius:10,color:'var(--brand-deep)',fontSize:13,lineHeight:1.5}}>
      <Icon.Shield style={{width:18,height:18,flexShrink:0,marginTop:1,color:'var(--brand)'}}/>
      <span>{children}</span>
    </div>
  );
}

Object.assign(window, { Icon, Logo, Header, ProgressSteps, Field, ReassureNote });