// tow-screens-a.jsx — Hero, RequestForm, Searching

// ── HERO ─────────────────────────────────────────────────────────────
function Hero({ go }) {
  const accent = window.useAccent();
  const props = [
    { icon: 'eye-off', title: 'Без спама и десятков звонков', sub: 'Номер скрыт — никто не названивает' },
    { icon: 'tag',     title: 'Цена видна заранее',           sub: 'Ориентир по стоимости до заказа' },
    { icon: 'zap',     title: 'Эвакуатор за секунды',          sub: 'Один запрос — ближайшим сразу' },
    { icon: 'pin',     title: 'Вы выбираете сами',             sub: 'На карте или из предложений' },
  ];
  return (
    <div data-screen-label="Главная" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: '#fff' }}>
      <window.StatusBar/>
      {/* brand row */}
      <div style={{ padding: '6px 20px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: accent, display: 'grid', placeItems: 'center' }}>
            <window.Icon name="truck" size={17} color="#fff" strokeWidth={2}/>
          </div>
          <span style={{ fontFamily: 'Inter', fontWeight: 800, fontSize: 16, color: C.text, letterSpacing: -0.2 }}>AIDAPP <span style={{ color: C.textMuted, fontWeight: 600 }}>Эвакуатор</span></span>
        </div>
        <button style={{ border: 'none', background: C.surface, width: 36, height: 36, borderRadius: 999, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
          <window.TIcon name="user" size={18} color={C.text}/>
        </button>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 20px 16px', display: 'flex', flexDirection: 'column' }}>
        {/* hero headline */}
        <div style={{ marginTop: 6 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 11px', borderRadius: 999,
            background: window.tint(accent, 0.08), marginBottom: 14, whiteSpace: 'nowrap',
          }}>
            <window.TIcon name="shield-check" size={13} color={accent} strokeWidth={2.2}/>
            <span style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 700, color: accent }}>Защищённый поиск</span>
          </div>
          <div style={{ fontFamily: 'Inter', fontWeight: 800, fontSize: 30, lineHeight: 1.12, color: C.text, letterSpacing: -0.6 }}>
            Поиск эвакуатора<br/>без хаоса и спама
          </div>
          <div style={{ fontFamily: 'Inter', fontSize: 15, color: C.textMuted, marginTop: 10, lineHeight: 1.45, maxWidth: 300 }}>
            Один запрос — и ближайшие эвакуаторы сами присылают предложения. Никаких десятков навязчивых звонков.
          </div>
        </div>

        {/* value props */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 22 }}>
          {props.map(p => (
            <div key={p.icon} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', background: C.surface, borderRadius: 14 }}>
              <div style={{ width: 38, height: 38, borderRadius: 11, background: '#fff', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <window.TIcon name={p.icon} size={19} color={accent} strokeWidth={2}/>
              </div>
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 13.5, color: C.text, lineHeight: 1.25 }}>{p.title}</div>
                <div style={{ fontFamily: 'Inter', fontSize: 12, color: C.textMuted, marginTop: 1 }}>{p.sub}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ flex: 1, minHeight: 16 }}/>
      </div>

      {/* CTA */}
      <div style={{ padding: '12px 20px 20px', borderTop: `1px solid ${C.hairline}`, background: '#fff' }}>
        <button onClick={() => go('form')} style={{
          width: '100%', height: 54, borderRadius: 16, border: 'none', cursor: 'pointer',
          background: accent, color: '#fff', fontFamily: 'Inter', fontSize: 16.5, fontWeight: 800,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 9,
          boxShadow: `0 8px 22px ${window.tint(accent, 0.3)}`,
        }}>
          <window.Icon name="truck" size={20} color="#fff" strokeWidth={2}/>
          Нужен эвакуатор
        </button>
      </div>
    </div>
  );
}
window.Hero = Hero;

// ── REQUEST FORM ─────────────────────────────────────────────────────
const CAR_TYPES = [
  { id: 'sedan', label: 'Седан' }, { id: 'cross', label: 'Кроссовер' },
  { id: 'suv', label: 'Внедорожник' }, { id: 'van', label: 'Минивэн' },
  { id: 'truck', label: 'Грузовой' }, { id: 'moto', label: 'Мотоцикл' },
];
const PROBLEMS = [
  { id: 'crash', label: 'ДТП', icon: 'crash' }, { id: 'nostart', label: 'Не заводится', icon: 'battery' },
  { id: 'tire', label: 'Колесо', icon: 'tire' }, { id: 'stuck', label: 'Заклинило', icon: 'wrench' },
  { id: 'fuel', label: 'Нет топлива', icon: 'fuel' }, { id: 'other', label: 'Другое', icon: 'more' },
];

function RequestForm({ go }) {
  const accent = window.useAccent();
  const [from, setFrom] = React.useState('Алматы, мкр. Самал-2, д. 33');
  const [to, setTo] = React.useState('');
  const [car, setCar] = React.useState('suv');
  const [problem, setProblem] = React.useState('nostart');
  const [towType, setTowType] = React.useState('');
  const [urgent, setUrgent] = React.useState(true);
  const [comment, setComment] = React.useState('');

  const Label = ({ children, opt }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: C.textMuted, margin: '18px 0 8px', textTransform: 'uppercase', letterSpacing: 0.4, whiteSpace: 'nowrap' }}>
      {children}{opt && <span style={{ fontWeight: 600, color: C.textFaint, textTransform: 'none', letterSpacing: 0 }}>· необязательно</span>}
    </div>
  );

  return (
    <div data-screen-label="Заявка" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: '#fff' }}>
      <window.StatusBar/>
      <window.SubHeader title="Новая заявка" subtitle="Эвакуатор · опишите ситуацию" onBack={() => go('hero')}/>
      <div style={{ flex: 1, overflowY: 'auto', padding: '0 20px 16px' }}>
        {/* route */}
        <div style={{ background: C.surface, borderRadius: 16, padding: '4px 14px' }}>
          <RouteField icon="crosshair" iconColor={accent} dotLabel="Откуда" value={from} onChange={setFrom} gps/>
          <div style={{ height: 1, background: C.hairline, marginLeft: 30 }}/>
          <RouteField icon="pin" iconColor={C.redDeep} dotLabel="Куда" value={to} onChange={setTo} placeholder="Адрес назначения / СТО" />
        </div>

        {/* car type */}
        <Label>Тип автомобиля</Label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {CAR_TYPES.map(c => {
            const on = car === c.id;
            return (
              <button key={c.id} onClick={() => setCar(c.id)} style={{
                padding: '9px 14px', borderRadius: 999, cursor: 'pointer', fontFamily: 'Inter', fontSize: 13, fontWeight: on ? 700 : 600,
                border: on ? 'none' : `1px solid ${C.hairline}`, background: on ? accent : '#fff', color: on ? '#fff' : C.text,
              }}>{c.label}</button>
            );
          })}
        </div>

        {/* problem */}
        <Label>Что случилось</Label>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {PROBLEMS.map(p => {
            const on = problem === p.id;
            return (
              <button key={p.id} onClick={() => setProblem(p.id)} style={{
                border: on ? `2px solid ${accent}` : `1px solid ${C.hairline}`, cursor: 'pointer',
                background: on ? window.tint(accent, 0.05) : '#fff', borderRadius: 14, padding: '12px 8px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7,
              }}>
                <window.TIcon name={p.icon} size={22} color={on ? accent : C.text} strokeWidth={1.8}/>
                <span style={{ fontFamily: 'Inter', fontSize: 12, fontWeight: 600, color: on ? accent : C.text }}>{p.label}</span>
              </button>
            );
          })}
        </div>

        {/* tow type (optional) */}
        <Label opt>Тип эвакуатора</Label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {Object.entries(window.TOW_TYPES).map(([id, t]) => {
            const on = towType === id;
            return (
              <button key={id} onClick={() => setTowType(on ? '' : id)} style={{
                padding: '8px 12px', borderRadius: 10, cursor: 'pointer', fontFamily: 'Inter', fontSize: 12.5, fontWeight: 600,
                border: on ? `1.5px solid ${accent}` : `1px solid ${C.hairline}`, background: on ? window.tint(accent, 0.06) : '#fff', color: on ? accent : C.text,
                textAlign: 'left',
              }}>{t.label}</button>
            );
          })}
        </div>

        {/* photo + urgency */}
        <Label opt>Детали</Label>
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, border: `1px dashed ${C.hairline}`, background: '#fff', borderRadius: 14, padding: '13px 12px', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: C.textMuted, fontFamily: 'Inter', fontSize: 13, fontWeight: 600,
          }}>
            <window.Icon name="image" size={18}/> Фото
          </button>
          <button onClick={() => setUrgent(u => !u)} style={{
            flex: 1, border: urgent ? 'none' : `1px solid ${C.hairline}`, cursor: 'pointer', borderRadius: 14, padding: '13px 12px',
            background: urgent ? C.redBgSoft : '#fff', color: urgent ? C.redText : C.textMuted, fontFamily: 'Inter', fontSize: 13, fontWeight: 700,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          }}>
            <window.Icon name="alert-triangle" size={17} color={urgent ? C.redText : C.textMuted} strokeWidth={2}/> Срочно
          </button>
        </div>
        <textarea value={comment} onChange={e => setComment(e.target.value)} rows={2} placeholder="Комментарий: ориентир, состояние авто…" style={{
          width: '100%', boxSizing: 'border-box', marginTop: 8, border: `1px solid ${C.hairline}`, borderRadius: 14, padding: 13,
          fontFamily: 'Inter', fontSize: 14, resize: 'none', outline: 'none', color: C.text,
        }}/>

        <div style={{ marginTop: 16 }}><window.ProtectBanner/></div>
      </div>

      {/* CTA */}
      <div style={{ padding: '12px 20px 20px', borderTop: `1px solid ${C.hairline}`, background: '#fff' }}>
        <button onClick={() => go('searching')} style={{
          width: '100%', height: 52, borderRadius: 16, border: 'none', cursor: 'pointer',
          background: accent, color: '#fff', fontFamily: 'Inter', fontSize: 16, fontWeight: 800,
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
        }}>
          <window.Icon name="navigation" size={18} color="#fff" strokeWidth={2}/>
          Найти эвакуатор
        </button>
      </div>
    </div>
  );
}
window.RequestForm = RequestForm;

function RouteField({ icon, iconColor, dotLabel, value, onChange, placeholder, gps }) {
  const accent = window.useAccent();
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 0' }}>
      <window.TIcon name={icon} size={20} color={iconColor}/>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontFamily: 'Inter', fontSize: 11, color: C.textMuted, marginBottom: 1 }}>{dotLabel}</div>
        <input value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{
          width: '100%', border: 'none', background: 'transparent', fontFamily: 'Inter', fontSize: 14.5, fontWeight: 600, outline: 'none', color: C.text, padding: 0,
        }}/>
      </div>
      {gps && (
        <button style={{
          border: 'none', background: '#fff', borderRadius: 999, padding: '6px 11px', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'Inter', fontSize: 12, fontWeight: 700, color: accent, flexShrink: 0,
        }}>
          <window.Icon name="crosshair" size={13} color={accent}/> GPS
        </button>
      )}
    </div>
  );
}

// ── SEARCHING ────────────────────────────────────────────────────────
function Searching({ go, count }) {
  const accent = window.useAccent();
  const [found, setFound] = React.useState(0);
  React.useEffect(() => {
    const tA = setTimeout(() => setFound(Math.max(1, Math.ceil(count / 2))), 900);
    const tB = setTimeout(() => setFound(count), 1700);
    const tDone = setTimeout(() => go('results'), 2600);
    return () => { clearTimeout(tA); clearTimeout(tB); clearTimeout(tDone); };
  }, []);

  return (
    <div data-screen-label="Поиск" style={{ flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0, background: '#fff' }}>
      <window.StatusBar/>
      <div style={{ padding: '8px 20px', display: 'flex', justifyContent: 'flex-end' }}>
        <button onClick={() => go('form')} style={{ border: 'none', background: C.surface, width: 36, height: 36, borderRadius: 999, display: 'grid', placeItems: 'center', cursor: 'pointer' }}>
          <window.Icon name="x" size={18} color={C.text}/>
        </button>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '0 24px' }}>
        {/* radar */}
        <div style={{ position: 'relative', width: 200, height: 200, display: 'grid', placeItems: 'center' }}>
          {[0, 1, 2].map(i => (
            <span key={i} style={{
              position: 'absolute', width: 200, height: 200, borderRadius: 999,
              border: `2px solid ${window.tint(accent, 0.5)}`,
              animation: `tow-radar 2.4s ${i * 0.8}s cubic-bezier(0,.5,.5,1) infinite`,
            }}/>
          ))}
          <div style={{ position: 'absolute', width: 120, height: 120, borderRadius: 999, background: window.tint(accent, 0.06) }}/>
          <div style={{
            width: 80, height: 80, borderRadius: 999, background: accent, display: 'grid', placeItems: 'center', zIndex: 1,
            boxShadow: `0 10px 30px ${window.tint(accent, 0.4)}`,
          }}>
            <window.Icon name="truck" size={36} color="#fff" strokeWidth={1.8}/>
          </div>
          <style>{`@keyframes tow-radar { 0% { transform: scale(.35); opacity: .9 } 100% { transform: scale(1); opacity: 0 } }`}</style>
        </div>

        <div style={{ fontFamily: 'Inter', fontWeight: 800, fontSize: 22, color: C.text, marginTop: 28, textAlign: 'center' }}>
          Ищем эвакуаторы рядом
        </div>
        <div style={{ fontFamily: 'Inter', fontSize: 14, color: C.textMuted, marginTop: 6, textAlign: 'center', minHeight: 20 }}>
          {found === 0 ? 'Отправили запрос ближайшим…' : <><b style={{ color: accent }}>{found}</b> {found === 1 ? 'эвакуатор откликнулся' : 'эвакуатора уже откликнулись'}</>}
        </div>

        <div style={{ width: '100%', maxWidth: 300, marginTop: 26 }}>
          <window.ProtectBanner/>
        </div>
      </div>
    </div>
  );
}
window.Searching = Searching;