/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

// ===== ICONS =====
function Icon({ name, size = 20, stroke = 1.75 }) {
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "car": return (<svg {...c}><path d="M5 17h14M5 17v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2M5 17l1.5-6.5A2 2 0 0 1 8.46 9h7.08a2 2 0 0 1 1.96 1.5L19 17M15 17v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2"/></svg>);
    case "hammer": return (<svg {...c}><path d="M14 10l-9 9a1.4 1.4 0 0 1-2-2l9-9"/><path d="M11 7l4-4 6 6-4 4-2-2-2 2z"/></svg>);
    case "doc": return (<svg {...c}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>);
    case "wrench": return (<svg {...c}><path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.5-.7-.7-2.5z"/></svg>);
    case "lock": return (<svg {...c}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>);
    case "truck": return (<svg {...c}><path d="M1 8h12v9H1zM13 11h5l3 3v3h-8z"/><circle cx="5.5" cy="18" r="2"/><circle cx="17.5" cy="18" r="2"/></svg>);
    case "heir": return (<svg {...c}><path d="M12 3l8 4-8 4-8-4 8-4z"/><path d="M4 11l8 4 8-4M4 15l8 4 8-4"/></svg>);
    case "check": return (<svg {...c}><polyline points="20 6 9 17 4 12"/></svg>);
    case "plus": return (<svg {...c}><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>);
    case "star": return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M12 17.3l-6.2 3.7 1.6-7L2 9.2l7.2-.6L12 2l2.8 6.6 7.2.6-5.4 4.8 1.6 7z"/></svg>);
    case "arrow": return (<svg {...c}><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>);
    case "phone": return (<svg {...c}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.3a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>);
    case "wa": return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.2-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.9-2.9-1.5-4-3.5-.3-.5.3-.5.8-1.6.1-.2 0-.4 0-.6-.1-.2-.6-1.4-.8-2-.2-.5-.4-.4-.6-.4h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 3 1.2 3.2c.1.2 2.1 3.3 5.2 4.6 1.9.8 2.6.9 3.6.7.6-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.1-1.3c1.4.8 3.1 1.3 4.9 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>);
    case "tg": return (<svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M22 3L1 11l6 2.5 11-7-9 8 .5 6 3-3 5 4z"/></svg>);
    case "camera": return (<svg {...c}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>);
    default: return null;
  }
}

// ===== MASK =====
function maskPhone(raw) {
  let digits = (raw || "").replace(/\D/g, "");
  if (digits.startsWith("8")) digits = "7" + digits.slice(1);
  if (!digits.startsWith("7")) digits = "7" + digits;
  digits = digits.slice(0, 11);
  const d = digits.slice(1);
  let out = "+7";
  if (d.length > 0) out += " (" + d.slice(0, 3);
  if (d.length >= 3) out += ") ";
  if (d.length >= 4) out += d.slice(3, 6);
  if (d.length >= 7) out += "-" + d.slice(6, 8);
  if (d.length >= 9) out += "-" + d.slice(8, 10);
  return out;
}
const validPhone = (v) => (v || "").replace(/\D/g, "").length === 11;

function Field({ label, name, value, onChange, error, placeholder, type = "text", autoComplete }) {
  return (
    <div className="field">
      <label htmlFor={name}>{label}</label>
      <input id={name} name={name} type={type} className="input" value={value}
        onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
        aria-invalid={error ? "true" : "false"} autoComplete={autoComplete} required />
      <div className="field__error">{error || "\u00a0"}</div>
    </div>
  );
}

function ContactMethod({ value, onChange }) {
  const opts = [
    { v: "call", l: "Звонок", icon: "phone" },
    { v: "wa", l: "WhatsApp", icon: "wa" },
    { v: "tg", l: "Telegram", icon: "tg" },
  ];
  return (
    <div className="field full">
      <label>Удобный способ связи</label>
      <div className="radio-row">
        {opts.map(o => (
          <label key={o.v} className="radio-pill" data-active={value === o.v ? "true" : "false"}>
            <input type="radio" name="contactMethod" value={o.v} checked={value === o.v} onChange={() => onChange(o.v)} />
            <Icon name={o.icon} size={16} />{o.l}
          </label>
        ))}
      </div>
      <div className="field__error">&nbsp;</div>
    </div>
  );
}

const ALLOWED_PHOTO_MIME = ["image/jpeg", "image/png", "image/webp"];
const MAX_PHOTO_BYTES = 8 * 1024 * 1024;

function PhotoDrop({ files, setFiles, onError }) {
  const inputRef = useRef(null);
  function add(list) {
    const room = 6 - files.length;
    const arr = Array.from(list).slice(0, room);
    const accepted = [];
    for (const f of arr) {
      if (!ALLOWED_PHOTO_MIME.includes(f.type)) {
        onError?.("Только JPG, PNG или WEBP");
        continue;
      }
      if (f.size > MAX_PHOTO_BYTES) {
        onError?.("Каждое фото — до 8 МБ");
        continue;
      }
      accepted.push({ file: f, name: f.name, url: URL.createObjectURL(f) });
    }
    if (accepted.length) setFiles([...files, ...accepted]);
  }
  function removeAt(i) {
    const f = files[i];
    if (f && f.url && f.url.startsWith("blob:")) URL.revokeObjectURL(f.url);
    setFiles(files.filter((_, j) => j !== i));
  }
  return (
    <div className="field full">
      <label>Фото авто (опционально, до 6)</label>
      <div className="dropzone" onClick={() => inputRef.current?.click()}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
          <Icon name="camera" size={20} />
          <span><strong>Прикрепить фото</strong> — для точной оценки</span>
        </div>
        <input ref={inputRef} type="file" accept="image/jpeg,image/png,image/webp" multiple style={{ display: "none" }}
          onChange={(e) => { add(e.target.files); e.target.value = ""; }} />
        {files.length > 0 && (
          <div className="dropzone__previews" onClick={(e) => e.stopPropagation()}>
            {files.map((f, i) => (
              <div className="thumb" key={i}>
                <img src={f.url} alt={f.name} />
                <button type="button" className="thumb__rm" onClick={() => removeAt(i)}>×</button>
              </div>
            ))}
          </div>
        )}
      </div>
      <div className="field__error">&nbsp;</div>
    </div>
  );
}

function TurnstileWidget({ onToken }) {
  const ref = useRef(null);
  const widgetIdRef = useRef(null);
  const sitekey = typeof window !== "undefined" ? window.__TURNSTILE_SITEKEY__ : "";
  useEffect(() => {
    if (!sitekey) return;
    let cancelled = false;
    function render() {
      if (cancelled || !ref.current || !window.turnstile) return;
      widgetIdRef.current = window.turnstile.render(ref.current, {
        sitekey,
        callback: (t) => onToken(t || ""),
        "error-callback": () => onToken(""),
        "expired-callback": () => onToken(""),
        theme: "light",
      });
    }
    if (window.turnstile) {
      render();
    } else {
      const id = setInterval(() => {
        if (window.turnstile) { clearInterval(id); render(); }
      }, 150);
      return () => clearInterval(id);
    }
    return () => {
      cancelled = true;
      if (widgetIdRef.current && window.turnstile) {
        try { window.turnstile.remove(widgetIdRef.current); } catch (e) {}
      }
    };
  }, [sitekey, onToken]);
  if (!sitekey) return null;
  return (
    <div className="field full">
      <div ref={ref} style={{ minHeight: 65 }}></div>
    </div>
  );
}

// ===== LEAD FORM =====
async function submitLead(data, turnstileToken) {
  const fd = new FormData();
  fd.append("name", data.name.trim());
  fd.append("phone", data.phone);
  fd.append("brand", data.brand.trim());
  fd.append("model", data.model.trim());
  fd.append("contactMethod", data.contactMethod);
  fd.append("description", (data.description || "").trim());
  fd.append("website", data.website || ""); // honeypot
  if (turnstileToken) fd.append("cf-turnstile-response", turnstileToken);
  for (const p of data.photos) {
    if (p && p.file) fd.append("photos", p.file, p.name || "photo");
  }
  const r = await fetch("/api/lead", { method: "POST", body: fd, credentials: "omit" });
  let body = null;
  try { body = await r.json(); } catch (e) { /* non-JSON */ }
  return { ok: r.ok && body && body.ok === true, status: r.status, body };
}

function LeadForm({ mode = "short", onSuccess }) {
  const [data, setData] = useState({
    name: "", phone: "", brand: "", model: "",
    contactMethod: "call", description: "", photos: [],
    consent: false, website: ""
  });
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);
  const [turnstileToken, setTurnstileToken] = useState("");

  const turnstileRequired = typeof window !== "undefined" && !!window.__TURNSTILE_SITEKEY__;

  const set = (k) => (v) => {
    if (k === "phone") v = maskPhone(v);
    setData(d => ({ ...d, [k]: v }));
    setErrors(e => ({ ...e, [k]: null, global: null }));
  };

  function validate() {
    const e = {};
    if (!data.name.trim() || data.name.trim().length < 2) e.name = "Укажите имя";
    if (!validPhone(data.phone)) e.phone = "Введите корректный номер";
    if (!data.brand.trim()) e.brand = "Напр. Toyota";
    if (!data.model.trim()) e.model = "Напр. Camry";
    if (!data.consent) e.consent = "Нужно согласие на обработку данных";
    if (turnstileRequired && !turnstileToken) e.global = "Подождите — идёт проверка анти-бот";
    setErrors(e);
    return Object.keys(e).filter(k => e[k]).length === 0;
  }

  function reset() {
    for (const p of data.photos) {
      if (p && p.url && p.url.startsWith("blob:")) URL.revokeObjectURL(p.url);
    }
    setData({
      name: "", phone: "", brand: "", model: "",
      contactMethod: "call", description: "", photos: [],
      consent: false, website: ""
    });
    setTurnstileToken("");
    if (typeof window !== "undefined" && window.turnstile && window.turnstile.reset) {
      try { window.turnstile.reset(); } catch (e) {}
    }
  }

  async function onSubmit(ev) {
    ev.preventDefault();
    if (submitting) return;
    if (!validate()) return;
    setSubmitting(true);
    try {
      const res = await submitLead(data, turnstileToken);
      if (res.ok) {
        const snapshot = { name: data.name, contactMethod: data.contactMethod };
        reset();
        onSuccess && onSuccess(snapshot);
      } else {
        const fieldErrors = (res.body && res.body.fields) || {};
        const msg = (res.body && res.body.error) ||
          (res.status === 429 ? "Слишком много заявок. Попробуйте позже." :
           res.status === 413 ? "Слишком большой файл" :
           res.status === 403 ? "Не пройдена проверка анти-бот" :
           "Не удалось отправить — попробуйте позже или позвоните по телефону.");
        setErrors({ ...fieldErrors, global: msg });
      }
    } catch (err) {
      setErrors({ global: "Нет связи с сервером — проверьте интернет и попробуйте ещё раз." });
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <form className="form-card" onSubmit={onSubmit} noValidate>
      <span className="form-card__badge">Оценка за 5 минут</span>
      <h3 className="form-card__title">Оставьте заявку — свяжемся</h3>
      <p className="form-card__hint">Москва и +500 км. Физ. лица, юр. лица, гос. учреждения.</p>
      <div className="form-grid">
        <Field label="Имя *" name="name" value={data.name} onChange={set("name")} error={errors.name} placeholder="Ваше имя" />
        <Field label="Телефон *" name="phone" type="tel" value={data.phone} onChange={set("phone")} error={errors.phone} placeholder="+7 (___) ___-__-__" autoComplete="tel" />
        <Field label="Марка *" name="brand" value={data.brand} onChange={set("brand")} error={errors.brand} placeholder="Toyota" />
        <Field label="Модель *" name="model" value={data.model} onChange={set("model")} error={errors.model} placeholder="Camry" />
        <ContactMethod value={data.contactMethod} onChange={set("contactMethod")} />
        {mode === "full" && (
          <>
            <div className="field full">
              <label>Состояние, недостатки, преимущества</label>
              <textarea className="textarea" placeholder="Например: целая, не битая, один владелец, торг возможен"
                value={data.description} onChange={(e) => set("description")(e.target.value)} maxLength={1000} />
              <div className="field__error">&nbsp;</div>
            </div>
            <PhotoDrop files={data.photos} setFiles={(p) => set("photos")(p)} onError={(m) => setErrors(e => ({ ...e, global: m }))} />
          </>
        )}
        {/* Honeypot — невидимое поле, боты заполняют, люди нет */}
        <input type="text" name="website" tabIndex={-1} autoComplete="off" aria-hidden="true"
          value={data.website} onChange={(e) => set("website")(e.target.value)}
          style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0, pointerEvents: "none" }} />
        <TurnstileWidget onToken={setTurnstileToken} />
        <div className="field full" style={{ display: "flex", alignItems: "flex-start", gap: 10, marginTop: -4 }}>
          <input type="checkbox" id="consent" checked={data.consent}
            onChange={(e) => set("consent")(e.target.checked)}
            style={{ marginTop: 4, width: 18, height: 18, flex: "0 0 auto", accentColor: "var(--ink-900)" }} />
          <label htmlFor="consent" style={{ fontSize: 13, color: "var(--ink-500)", lineHeight: 1.45, cursor: "pointer" }}>
            Я согласен на обработку <a href="/privacy.html" target="_blank" rel="noopener">персональных данных</a> по&nbsp;152-ФЗ
            {errors.consent ? <span style={{ color: "var(--warn)", display: "block", marginTop: 2 }}>{errors.consent}</span> : null}
          </label>
        </div>
        {errors.global && (
          <div className="full" role="alert"
            style={{ background: "rgba(220, 53, 69, 0.08)", border: "1px solid rgba(220, 53, 69, 0.3)",
              color: "var(--warn)", padding: "10px 14px", borderRadius: 10, fontSize: 14 }}>
            {errors.global}
          </div>
        )}
        <div className="full form-card__submit">
          <button type="submit" className="btn btn--primary btn--lg btn--block" disabled={submitting}>
            {submitting ? "Отправляем…" : (<>Отправить заявку <Icon name="arrow" size={16} /></>)}
          </button>
        </div>
      </div>
      <p className="form-card__legal">Нажимая, вы соглашаетесь с <a href="/privacy.html" target="_blank" rel="noopener">политикой обработки данных</a>. Свяжемся в течение 15 минут.</p>
    </form>
  );
}

// ===== HEADER =====
function Header() {
  return (
    <header className="site-header">
      <div className="wrap site-header__bar">
        <a href="#" className="logo">
          <span className="logo__mark">В</span>
          <span>Выкуп Авто<span className="logo__city"> Москва +500км</span></span>
        </a>
        <nav className="nav">
          <a href="#how">Как работает</a>
          <a href="#who">Кому подходит</a>
          <a href="#cars">Какие авто</a>
          <a href="#reviews">Отзывы</a>
          <a href="#faq">Вопросы</a>
        </nav>
        <a href="tel:+79046533219" className="hdr-phone" aria-label="Позвонить +7 904 653-32-19">
          <span className="hdr-phone__text"><span>Москва</span>+7 (904) 653-32-19</span>
          <span className="hdr-phone__icon"><Icon name="phone" size={18} stroke={2.4} /></span>
        </a>
        <a href="#lead" className="btn btn--primary">Оставить заявку</a>
      </div>
    </header>
  );
}

// ===== HERO =====
function Hero({ formMode, onLeadSubmit }) {
  return (
    <section className="hero">
      <div className="wrap">
        <div className="hero__inner">
          <div className="hero__text">
            <div className="hero__chips">
              <span className="chip"><span className="dot"></span> Москва и +500 км · 24/7</span>
            </div>
            <h1 className="h1 hero__title">
              Выкупим ваш авто <em>за 1 час</em><br/>по честной рыночной цене
            </h1>
            <p className="lede lede--on-dark hero__sub">
              Оценка за 5 минут, деньги — в день обращения. Любые легковые — даже битые, кредитные, по&nbsp;наследству без постановки на учёт.
            </p>
            <ul className="hero__points">
              <li>Физ. лица, юр. лица, гос. учреждения</li>
              <li>Бесплатный осмотр в любом районе и пригороде</li>
              <li>Сами оформляем документы и снимаем с учёта</li>
            </ul>
            <div className="hero__cta-row">
              <a href="#lead" className="btn btn--primary btn--xl">Оставить заявку <Icon name="arrow" size={16} /></a>
              <a href="#how" className="btn btn--ghost-dark btn--xl">Как мы работаем</a>
            </div>
          </div>
          <div id="lead">
            <LeadForm mode={formMode} onSuccess={onLeadSubmit} />
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== TRUST =====
function TrustStrip() {
  const stats = [
    { num: "9 лет", label: "на рынке" },
    { num: "12 400+", label: "выкупленных авто" },
    { num: "15 мин", label: "среднее время ответа" },
    { num: "4.9 / 5", label: "оценка клиентов" },
  ];
  return (
    <section className="trust-strip">
      <div className="wrap">
        <div className="trust-strip__inner">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="stat__num">{s.num}</div>
              <div className="stat__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== HOW =====
function How() {
  const steps = [
    { t: "Заявка", d: "Имя, телефон, марка, модель — этого достаточно. Можно прикрепить фото." },
    { t: "Связь", d: "Звонок, WhatsApp или Telegram — как удобно. Назовём предварительную цену." },
    { t: "Осмотр", d: "Бесплатно приедем в любой район Москвы и до 500 км от МКАД." },
    { t: "Деньги", d: "Договор и снятие с учёта — на нас. Оплата сразу: наличными или переводом." },
  ];
  return (
    <section className="section" id="how">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Как это работает</span>
          <h2 className="h2">Четыре шага — и авто продано</h2>
          <p className="lede">Без визитов в офис и долгих проверок. Весь процесс — от 1 до 3 часов.</p>
        </div>
        <div className="steps-grid">
          {steps.map((s, i) => (
            <div className="step-card" key={i}>
              <div className="step-card__num">ШАГ 0{i + 1}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== WHO BUYS FROM =====
function Who() {
  const items = [
    { tag: "Физ. лица", t: "Частные владельцы", d: "Любые ситуации — от штатных до сложных. Оплата на карту или наличными." },
    { tag: "Юр. лица", t: "Компании и автопарки", d: "Полный пакет документов, безналичный расчёт, акт выкупа." },
    { tag: "Гос. учреждения", t: "Бюджетные организации", d: "Работаем по 44-ФЗ и 223-ФЗ. Договор по форме заказчика." },
  ];
  return (
    <section className="section section--tight" style={{ background: "var(--paper-2)" }} id="who">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Кому подходит</span>
          <h2 className="h2">Выкупаем у физ. лиц, юр. лиц и&nbsp;гос. учреждений</h2>
        </div>
        <div className="who-grid">
          {items.map((it, i) => (
            <div className="who-card" key={i}>
              <span className="who-card__tag">{it.tag}</span>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CARS =====
function Cars() {
  const items = [
    { icon: "car", t: "Любые легковые", d: "Отечественные и иномарки, с пробегом и почти новые." },
    { icon: "hammer", t: "Битые и после ДТП", d: "Даже с серьёзными повреждениями кузова или двигателя." },
    { icon: "doc", t: "Кредитные и в залоге", d: "Погашаем остаток кредита из суммы выкупа." },
    { icon: "heir", t: "По наследству", d: "Выкупаем без постановки на учёт наследника." },
    { icon: "wrench", t: "Неисправные, не на ходу", d: "Заберём эвакуатором за наш счёт." },
    { icon: "lock", t: "С запретом на регдействия", d: "Работаем с юридически сложными случаями." },
  ];
  return (
    <section className="section" id="cars">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Какие авто выкупаем</span>
          <h2 className="h2">Берём то, что сложно продать самому</h2>
          <p className="lede">Если ваш случай не в списке — позвоните, скорее всего, поможем.</p>
        </div>
        <div className="cars-grid">
          {items.map((it, i) => (
            <div className="car-tile" key={i}>
              <div className="car-tile__icon"><Icon name={it.icon} size={20} /></div>
              <div>
                <h4>{it.t}</h4>
                <p>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== TESTIMONIALS =====
function Testimonials() {
  const items = [
    { name: "Андрей К.", meta: "VW Passat, 2015", quote: "Продавал после ДТП. Приехали через 40 минут, цена устроила, деньги сразу." },
    { name: "Елена С.", meta: "Hyundai Solaris, 2018", quote: "Машина в кредите, боялась проблем. Кредит погасили сами, остаток — на карту в тот же день." },
    { name: "Дмитрий Р.", meta: "BMW X5, 2020", quote: "Цена выше, чем давали в трейд-ин. Документы оформили прямо во дворе." },
  ];
  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Отзывы клиентов</span>
          <h2 className="h2">Что говорят те, кто уже продал</h2>
        </div>
        <div className="tst-wrap">
          <div className="tst-grid">
            {items.map((t, i) => (
              <div className="tst-card" key={i}>
                <div className="tst-card__stars">{[0,1,2,3,4].map(j => <Icon key={j} name="star" size={14} />)}</div>
                <p className="tst-card__quote">«{t.quote}»</p>
                <div className="tst-card__who">
                  <div className="tst-card__avatar">{t.name.charAt(0)}</div>
                  <div>
                    <div className="tst-card__name">{t.name}</div>
                    <div className="tst-card__meta">{t.meta}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== FAQ =====
function FAQ() {
  const qs = [
    { q: "Сколько времени занимает выкуп?", a: "От заявки до денег — 1–3 часа. Свяжемся за 15 минут, осмотр и оформление сразу после." },
    { q: "Я в области, дальше 100 км — приедете?", a: "Работаем по Москве и в радиусе до 500 км от МКАД. Выезд бесплатный." },
    { q: "Выкупаете авто по наследству?", a: "Да, без постановки на учёт наследника. Помогаем с документами, договор оформляем на месте." },
    { q: "Работаете с юр. лицами и бюджетными организациями?", a: "Да. Безналичный расчёт, полный пакет документов. Готовы работать по 44-ФЗ и 223-ФЗ." },
    { q: "Машина в кредите или залоге — выкупите?", a: "Да. Погашаем остаток из суммы выкупа, остальное — на карту или наличными." },
    { q: "Как формируется цена?", a: "По состоянию, году, пробегу и спросу. Предварительно — по фото и описанию, финально — после осмотра." },
    { q: "Какие документы нужны?", a: "Паспорт собственника, ПТС и СТС. По кредиту — справка об остатке. По наследству — свидетельство о праве." },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--tight" style={{ background: "var(--paper-2)" }} id="faq">
      <div className="wrap">
        <div className="sec-head">
          <span className="eyebrow">Частые вопросы</span>
          <h2 className="h2">Отвечаем заранее</h2>
        </div>
        <div className="faq">
          {qs.map((it, i) => (
            <div className="faq-item" key={i} data-open={open === i ? "true" : "false"}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon"><Icon name="plus" size={14} stroke={2.5} /></span>
              </button>
              <div className="faq-a"><div className="faq-a__body">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section section--tight">
      <div className="wrap">
        <div className="final-cta">
          <span className="eyebrow eyebrow--on-dark">Готовы продать?</span>
          <h2 className="h2" style={{ marginTop: 10, color: "#fff" }}>Получите оценку за 5 минут</h2>
          <p className="lede">Заполните форму — свяжемся в течение 15 минут и назовём цену. Без обязательств.</p>
          <a href="#lead" className="btn btn--primary btn--xl">Оставить заявку <Icon name="arrow" size={16} /></a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-col">
            <h5>Выкуп Авто Москва</h5>
            <p>Срочный выкуп автомобилей в Москве и +500 км. Работаем с физ. лицами, юр. лицами и гос. учреждениями.</p>
          </div>
          <div className="foot-col">
            <h5>Навигация</h5>
            <a href="#how">Как работает</a>
            <a href="#who">Кому подходит</a>
            <a href="#cars">Какие авто</a>
            <a href="#faq">Вопросы</a>
          </div>
          <div className="foot-col">
            <h5>Связаться</h5>
            <a href="tel:+79046533219">+7 (904) 653-32-19</a>
            <a href="#lead">Оставить заявку</a>
            <p>Москва и +500 км<br/>24/7</p>
          </div>
        </div>
        <div className="foot-bottom">
          <div>© 2026 Выкуп Авто Москва</div>
          <div><a href="/privacy.html" target="_blank" rel="noopener">Политика обработки персональных данных</a></div>
        </div>
      </div>
    </footer>
  );
}

function StickyCTA() {
  return <div className="sticky-cta"><a href="#lead" className="btn btn--primary btn--lg">Оставить заявку</a></div>;
}

function SuccessModal({ data, onClose }) {
  return (
    <div className="modal-root" role="dialog" aria-modal="true" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal__tick">✓</div>
        <h3 className="modal__title">Заявка принята!</h3>
        <p className="modal__body">
          {data?.name ? data.name + ", " : ""}мы свяжемся {data?.contactMethod === "wa" ? "в WhatsApp" : data?.contactMethod === "tg" ? "в Telegram" : "по телефону"} в течение 15 минут.
        </p>
        <button className="btn btn--primary" onClick={onClose}>Понятно</button>
      </div>
    </div>
  );
}

// ===== TWEAKS =====
function useTweaks() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__ || {});
  const [active, setActive] = useState(false);
  useEffect(() => {
    function onMsg(e) {
      const d = e.data || {};
      if (d.type === "__activate_edit_mode") setActive(true);
      if (d.type === "__deactivate_edit_mode") setActive(false);
    }
    window.addEventListener("message", onMsg);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", onMsg);
  }, []);
  useEffect(() => { document.body.setAttribute("data-tweaks", active ? "on" : "off"); }, [active]);
  return { tweaks, setTweaks, active };
}

function TweaksPanel({ tweaks, setTweaks }) {
  const opts = [
    { key: "formMode", label: "Форма", options: [{ v: "short", l: "Короткая" }, { v: "full", l: "+ фото и описание" }] },
  ];
  function set(k, v) {
    setTweaks({ ...tweaks, [k]: v });
    window.parent.postMessage({ type: "__edit_mode_set_keys", edits: { [k]: v } }, "*");
  }
  return (
    <div className="tweaks-panel">
      <h4>Tweaks <span style={{ fontSize: 11, fontWeight: 500, color: "var(--ink-300)" }}>варианты</span></h4>
      {opts.map(o => (
        <div className="tweaks-group" key={o.key}>
          <label>{o.label}</label>
          <div className="tweaks-opts">
            {o.options.map(v => (
              <button key={v.v} className="tweaks-opt" data-active={tweaks[o.key] === v.v ? "true" : "false"} onClick={() => set(o.key, v.v)}>{v.l}</button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function App() {
  const { tweaks, setTweaks, active } = useTweaks();
  const [success, setSuccess] = useState(null);
  return (
    <>
      <Header />
      <Hero formMode={tweaks.formMode} onLeadSubmit={(d) => setSuccess(d)} />
      <TrustStrip />
      <How />
      <Who />
      <Cars />
      <Testimonials />
      <FAQ />
      <FinalCTA />
      <Footer />
      {success && <SuccessModal data={success} onClose={() => setSuccess(null)} />}
      {active && <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />}
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);