// Page sections
const { useState: useStateS, useEffect: useEffectS } = React;

/* ---------- Nav ---------- */
function Nav(){
  const [lang, setLang] = useStateS("RU");
  const [notice, setNotice] = useStateS("");

  function pick(code){
    if (code === "RU"){ setLang("RU"); setNotice(""); return; }
    setNotice(code === "CN" ? "中文版本即将推出 · Китайская версия скоро" : "English version coming soon");
    setTimeout(() => setNotice(""), 2600);
  }

  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#top">
          <span className="sq"></span>
          <span>C/ONE</span>
        </a>
        <div className="nav-links">
          <a href="#services">Услуги</a>
          <a href="#customs">Таможня</a>
          <a href="#cases">Кейсы</a>
          <a href="#blog">Блог</a>
          <a href="#contacts">Контакты</a>
        </div>
        <div className="nav-right">
          <div className="nav-badges">
            <span>ТН ВЭД</span>
            <span>НДС 22%</span>
            <span>без ПДн</span>
          </div>
          <div className="lang" role="group" aria-label="Язык / Language">
            {["RU", "CN", "EN"].map(code => (
              <button key={code}
                className={`lang-btn ${lang === code ? "on" : ""}`}
                onClick={() => pick(code)}>
                {code}
              </button>
            ))}
          </div>
          <a href="#customs" className="btn btn-dark nav-cta" style={{ padding: "10px 16px" }}>
            <span className="nav-cta-full">Рассчитать таможню</span>
            <span className="nav-cta-short">Расчёт</span>
          </a>
        </div>
      </div>
      {notice && (
        <div className="lang-notice">
          <div className="wrap lang-notice-inner mono">
            <span className="dot-accent"></span>{notice}
          </div>
        </div>
      )}
      <style>{`
        .lang{ display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
        .lang-btn{ appearance: none; border: 0; background: transparent; color: var(--muted);
          font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
          padding: 5px 9px; border-radius: 999px; cursor: pointer; line-height: 1; }
        .lang-btn:hover{ color: var(--ink); }
        .lang-btn.on{ background: var(--ink); color: var(--bg); }
        .lang-notice{ background: var(--accent); color: var(--accent-ink); }
        .lang-notice-inner{ display: flex; align-items: center; gap: 10px;
          padding: 8px 32px; font-size: 11.5px; letter-spacing: 0.04em; }
        .lang-notice .dot-accent{ width: 6px; height: 6px; background: var(--accent-ink); border-radius: 50%; }
        .nav-cta-short{ display: none; }
        @media (max-width: 1040px){
          .nav-inner{ grid-template-columns: auto 1fr; gap: 14px; }
          .nav-links, .nav-badges{ display: none; }
          .nav-right{ justify-self: end; gap: 10px; min-width: 0; }
        }
        @media (max-width: 640px){
          .nav-inner{ display: flex; height: 58px; justify-content: space-between; gap: 12px; }
          .lang{ display: none; }
          .nav-right{ flex: 0 0 auto; }
          .nav-right .btn{ padding: 9px 12px; font-size: 12px; white-space: nowrap; }
          .nav-cta-full{ display: none; }
          .nav-cta-short{ display: inline; }
        }
      `}</style>
    </nav>
  );
}

/* ---------- Ticker ---------- */
function Ticker(){
  const items = [
    "LCL Ляочэн → Москва · сборные партии",
    "FCL 40'HC Шанхай → Санкт-Петербург",
    "AIR Гуанчжоу → Шереметьево",
    "Склад в Китае · обмер и проверка груза",
    "Таможня · код ТН ВЭД, НДС, сборы",
    "Сертификация · ТР ТС, СГР, маркировка",
    "Маркетплейсы · WB, Ozon, Я.Маркет",
    "Доставка · после фактического обмера",
  ];
  const track = [...items, ...items];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {track.map((t, i) => <span key={i}><span className="dot"></span>{t}</span>)}
      </div>
    </div>
  );
}

/* ---------- Hero ---------- */
function Hero({ variant }){
  return (
    <section id="top" className="hero">
      <div className="wrap hero-wrap">
        <div className="hero-meta">
          <span className="eyebrow">C/ONE · Китай → Россия</span>
          <span className="eyebrow mono">Санкт-Петербург ⇄ Ляочэн ⇄ Гуанчжоу</span>
        </div>

        <h1 className="hero-title">
          <span className="hero-line">Доставка <em>из Китая.</em></span>
          <span className="hero-line">Таможня <em>без сюрпризов.</em></span>
        </h1>

        <div className="hero-sub">
          <p>Код ТН ВЭД, пошлина, НДС, экосбор, road map и список сертификатов — <b>как честный скрининг без файлов, контактов и ПДн.</b> Финальные ставки проверяет менеджер перед декларацией.</p>
          <div className="hero-ctas">
            <a href="#customs" className="btn btn-primary">Рассчитать таможню →</a>
            <a href="#services" className="btn btn-ghost">Услуги C/ONE</a>
          </div>
        </div>

        <div className="hero-stats">
          <div className="stat"><span className="eyebrow">Опыт в Китае</span><b>20 лет</b></div>
          <div className="stat"><span className="eyebrow">Проверки П-4К</span><b>4</b></div>
          <div className="stat"><span className="eyebrow">Расчёт таможни</span><b>5 мин</b></div>
          <div className="stat"><span className="eyebrow">Минимум партии</span><b>1 кг</b></div>
          <div className="stat"><span className="eyebrow">Отгрузок в неделю</span><b>120+</b></div>
        </div>

        <div className="hero-proof-grid" aria-label="Склад, порт и таможенное оформление">
          {CASES.map((c) => (
            <figure key={c.tag} className="hero-proof-item">
              <img src={c.img} alt={c.alt} loading="eager" />
              <figcaption>
                <span className="mono">{c.tag}</span>
                <b>{c.meta}</b>
              </figcaption>
            </figure>
          ))}
        </div>

        {variant === "map" && (
          <div className="hero-map">
            <RouteMap />
          </div>
        )}

        <div className="hero-modes">
          {[
            { lead: "таможня", title: "Скрининг онлайн", meta: "код ТН ВЭД, пошлина, НДС, сборы" },
            { lead: "road map", title: "Документы и риски", meta: "сертификация, ТРОИС, КТС" },
            { lead: "доставка", title: "По факту груза", meta: "обмер на складе в Гуанчжоу" },
            { lead: "сертификация", title: "Под ключ", meta: "ТР ТС, СГР, ввоз образцов" },
            { lead: "маркетплейсы", title: "FBO / FBS", meta: "WB · Ozon · Я.Маркет" },
          ].map((r, i) => (
            <div key={i} className="mode">
              <span className="mono mode-lead">{r.lead}</span>
              <b>{r.title}</b>
              <div className="mono mode-meta">
                <span>{r.meta}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .hero{ padding: 56px 0 32px; position: relative; }
        .hero-wrap{ display: flex; flex-direction: column; gap: 40px; }
        .hero-meta{ display: flex; justify-content: space-between; align-items: baseline; }
        .hero-title{
          margin: 0; font-weight: 500; letter-spacing: 0;
          font-size: clamp(48px, 8vw, 132px); line-height: 0.94;
          text-wrap: balance;
        }
        .hero-line{ display: block; }
        .hero-title em{ font-style: normal; color: var(--muted); }
        .hero-sub{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
        .hero-sub p{ max-width: 46ch; font-size: 18px; line-height: 1.45; color: var(--ink-2); margin: 0; }
        .hero-sub p b{ color: var(--ink); font-weight: 500; }
        .hero-ctas{ display: flex; gap: 12px; justify-self: end; }
        @media (max-width: 760px){
          .hero{ padding-top: 34px; }
          .hero-wrap{ gap: 28px; }
          .hero-meta{ align-items: flex-start; gap: 12px; flex-direction: column; }
          .hero-title{ font-size: clamp(34px, 10.5vw, 44px); line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
          .hero-title em{ display: block; }
          .hero-sub{ grid-template-columns: 1fr; gap: 20px; }
          .hero-sub p{ font-size: 16px; max-width: calc(100vw - 76px); min-width: 0; overflow-wrap: break-word; }
          .hero-ctas{ justify-self: stretch; flex-direction: column; width: calc(100vw - 76px); min-width: 0; }
          .hero-ctas .btn{ justify-content: center; width: 100%; }
        }

        .hero-stats{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
          padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .hero-stats .stat{ display: flex; flex-direction: column; gap: 6px; }
        .hero-stats b{ font-size: 28px; font-weight: 500; letter-spacing: 0; }
        @media (max-width: 760px){
          .hero-stats{ grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 0; }
          .hero-stats .stat:last-child{ grid-column: 1 / -1; }
          .hero-stats b{ font-size: 24px; }
        }

        .hero-map{ position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--bg-2); }
        @media (max-width: 760px){ .hero-map{ margin: 0 -18px; border-left: 0; border-right: 0; border-radius: 0; padding: 12px; overflow: hidden; } }

        .hero-proof-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
        .hero-proof-item{ position: relative; margin: 0; aspect-ratio: 16/11; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
        .hero-proof-item img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.94) contrast(1.03); }
        .hero-proof-item::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.58)); pointer-events: none; }
        .hero-proof-item figcaption{ position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; color: white; display: flex; flex-direction: column; gap: 3px; }
        .hero-proof-item figcaption span{ font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .76; }
        .hero-proof-item figcaption b{ font-size: 13px; line-height: 1.15; font-weight: 500; }
        @media (max-width: 860px){
          .hero-proof-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
          .hero-proof-item{ aspect-ratio: 4/3; }
        }
        @media (max-width: 520px){
          .hero-proof-grid{ display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
          .hero-proof-item{ flex: 0 0 78%; aspect-ratio: 4/3; scroll-snap-align: start; }
        }

        .hero-modes{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
        .mode{ padding: 18px 16px 18px 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
        .mode:last-child{ border-right: 0; }
        .mode-lead{ font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
        .mode b{ font-size: 18px; font-weight: 500; letter-spacing: 0; }
        .mode-meta{ display: flex; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: 11px; }
        @media (max-width: 760px){ .hero-modes{ grid-template-columns: repeat(2, 1fr); } .mode{ border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0; } }
      `}</style>
    </section>
  );
}

/* ---------- Services ---------- */
function Services(){
  return (
    <section id="services">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 02</div>
          <h2 className="sec-title">Комплексные <em>решения</em> под каждую задачу.</h2>
          <div className="sec-meta">12 направлений<br/>услуг C/ONE</div>
        </header>
        <div className="grid g-2 svc-grid">
          {SERVICES.map(s => (
            <article key={s.num} className="svc">
              <figure className="svc-media">
                <img src={s.img} alt={s.alt} loading="lazy" />
              </figure>
              <div className="svc-top">
                <span className="mono svc-num">{s.num}</span>
                <span className="mono svc-meta">{s.meta}</span>
              </div>
              <h3>{s.title}</h3>
              <ul>{s.bullets.map((b, i) => <li key={i}>{b}</li>)}</ul>
              <a href="#customs" className="svc-more">Подробнее →</a>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .svc-grid{ gap: 0; border-top: 1px solid var(--line); }
        .svc{ padding: 36px 32px 36px 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
        .svc:nth-child(2n){ padding-right: 0; padding-left: 32px; border-right: 0; }
        .svc-media{ aspect-ratio: 16/9; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
        .svc-media img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.04); transform: scale(1.01); }
        .svc-top{ display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
        .svc-num{ color: var(--accent); letter-spacing: .04em; }
        .svc h3{ font-size: 32px; margin: -2px 0 0; font-weight: 500; letter-spacing: 0; line-height: 1.05; }
        .svc ul{ padding: 0; margin: 0 0 20px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
        .svc li{ padding-left: 22px; position: relative; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
        .svc li::before{ content: ""; position: absolute; left: 0; top: 8px; width: 12px; height: 1px; background: var(--accent); }
        .svc-more{ font-size: 13px; color: var(--accent); font-weight: 500; }
        @media (max-width: 760px){
          .svc, .svc:nth-child(2n){ padding: 28px 0; border-right: 0; gap: 14px; }
          .svc h3{ font-size: 26px; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Trust / Why us ---------- */
function Trust(){
  return (
    <section id="trust">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 03</div>
          <h2 className="sec-title">Почему <em>доверяют</em> C/ONE.</h2>
          <div className="sec-meta">Шесть причин —<br/>одно решение.</div>
        </header>
        <div className="trust-grid">
          {TRUST.map((t, i) => (
            <div key={t.n} className="trust-cell">
              <div className="trust-top"><span className="mono">{t.n}.</span><span className="dot-accent"></span></div>
              <h4>{t.k}</h4>
              <p>{t.v}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .trust-grid{ display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
        .trust-cell{ padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; min-height: 220px; }
        .trust-top{ display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 12px; }
        .dot-accent{ width: 8px; height: 8px; background: var(--accent); border-radius: 50%; }
        .trust-cell h4{ font-size: 22px; font-weight: 500; letter-spacing: 0; margin: 8px 0 4px; }
        .trust-cell p{ color: var(--ink-2); margin: 0; line-height: 1.5; font-size: 14.5px; }
        @media (max-width: 760px){ .trust-grid{ grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* ---------- Process ---------- */
function Process(){
  return (
    <section id="process" className="process-sec">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 04</div>
          <h2 className="sec-title">Как проходит <em>поставка.</em></h2>
          <div className="sec-meta">П-4К брокера:<br/>код, документы, платежи, риски.</div>
        </header>
        <div className="process-grid">
          {PROCESS.map((p) => (
            <article key={p.n} className="process-card">
              <figure className="process-media">
                <img src={p.img} alt={p.alt} loading="lazy" />
                <figcaption className="mono">{p.n}</figcaption>
              </figure>
              <span className="mono process-num">{p.n}</span>
              <h3>{p.title}</h3>
              <p>{p.text}</p>
            </article>
          ))}
        </div>
        <div className="privacy-note">
          <span className="mono">152-ФЗ</span>
          <p>Калькулятор на сайте работает как предварительная оценка: не принимает файлы, контакты, комментарии, реквизиты, адреса и переписку. Для связи используйте контакты компании отдельно.</p>
        </div>
      </div>
      <style>{`
        .process-grid{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
        .process-card{ padding: 18px 18px 24px; min-height: 360px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
        .process-media{ position: relative; aspect-ratio: 4/3; margin: 0 0 8px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); }
        .process-media img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
        .process-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 54%, rgba(0,0,0,.38)); pointer-events: none; }
        .process-media figcaption{ position: absolute; left: 10px; bottom: 10px; z-index: 1; color: white; font-size: 11px; letter-spacing: .08em; }
        .process-num{ color: var(--accent); font-size: 11px; letter-spacing: .08em; }
        .process-card h3{ margin: auto 0 0; font-size: 24px; line-height: 1.08; font-weight: 500; letter-spacing: 0; }
        .process-card p{ margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.48; }
        .privacy-note{ margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--accent-tint); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
        .privacy-note .mono{ color: var(--accent); font-size: 11px; letter-spacing: .08em; }
        .privacy-note p{ margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
        @media (max-width: 960px){ .process-grid{ grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px){
          .process-grid{ grid-template-columns: 1fr; }
          .process-card{ min-height: auto; padding: 18px; }
          .process-media{ aspect-ratio: 16/9; }
          .privacy-note{ grid-template-columns: 1fr; gap: 8px; }
        }
      `}</style>
    </section>
  );
}

/* ---------- Tariffs ---------- */
// Старый компонент с $/кг удалён. Если нужен будет блок про прозрачность —
// можно добавить блок про услуги и принципы (без хардкода ставок).
function Tariffs(){
  return (
    <section id="tariffs" style={{ display: "none" }}>
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 03</div>
          <h2 className="sec-title">Тарифы. <em>Прозрачно.</em></h2>
          <div className="sec-meta">Оплата по договору —<br/>без скрытых платежей.</div>
        </header>
        <div className="tariff-grid">
          {(window.TARIFFS || []).map((t, i) => (
            <article key={t.kind} className={`tariff ${i === 1 ? "tariff-hero" : ""}`}>
              <div className="tariff-top">
                <span className="mono">{String(i+1).padStart(2,"0")}</span>
                <span className="mono tariff-kind">{t.kind}</span>
              </div>
              <div className="tariff-price">
                <span className="from mono">от</span>
                <b className="mono">{t.price}</b>
                <span className="unit mono">{t.pu}</span>
              </div>
              <div className="tariff-days mono">{t.days} дней</div>
              <ul>{t.notes.map((n, j) => <li key={j}>{n}</li>)}</ul>
              <div className="tariff-actions">
                <a href="#customs" className="btn btn-dark" style={{ width: "100%", justifyContent: "center", padding: "12px 16px" }}>Получить прайс</a>
              </div>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .tariff-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
        .tariff{ background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
        [data-theme="dark"] .tariff{ background: #17171530; }
        .tariff-hero{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
        .tariff-hero .unit, .tariff-hero .from, .tariff-hero .tariff-days, .tariff-hero li{ color: rgba(242,239,232,0.7); }
        .tariff-top{ display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
        .tariff-hero .tariff-top{ color: rgba(242,239,232,0.6); }
        .tariff-kind{ color: var(--accent); letter-spacing: 0.1em; }
        .tariff-price{ display: flex; align-items: baseline; gap: 8px; padding-top: 10px; }
        .tariff-price b{ font-size: 64px; font-weight: 500; letter-spacing: 0; line-height: 1; }
        .tariff-price .from{ font-size: 12px; color: var(--muted); }
        .tariff-price .unit{ font-size: 14px; color: var(--muted); }
        .tariff-days{ font-size: 13px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
        .tariff-hero .tariff-days{ border-color: rgba(242,239,232,0.2); }
        .tariff ul{ padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
        .tariff li{ padding-left: 18px; position: relative; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
        .tariff-hero li{ color: rgba(242,239,232,0.8); }
        .tariff li::before{ content: "—"; position: absolute; left: 0; color: var(--accent); }
        .tariff-hero .btn-dark{ background: var(--accent); color: var(--accent-ink); }
        @media (max-width: 860px){ .tariff-grid{ grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

/* ---------- Categories ---------- */
function Categories(){
  return (
    <section id="cats">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 05</div>
          <h2 className="sec-title">Что мы <em>возим.</em></h2>
          <div className="sec-meta">От 1 кг до<br/>40' контейнеров.</div>
        </header>
        <div className="cat-grid">
          {CATEGORIES.map(c => (
            <div key={c.k} className="cat">
              <span className="mono cat-k">{c.k}</span>
              <h4>{c.t}</h4>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cat-grid{ display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
        .cat{ padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 200px; display: flex; flex-direction: column; gap: 8px; transition: background .2s; }
        .cat:hover{ background: var(--bg-2); }
        .cat-k{ font-size: 11px; color: var(--accent); letter-spacing: 0.08em; }
        .cat h4{ font-size: 20px; font-weight: 500; letter-spacing: 0; margin: 4px 0 4px; line-height: 1.1; }
        .cat p{ color: var(--muted); font-size: 13.5px; line-height: 1.45; margin: 0; }
        @media (max-width: 860px){ .cat-grid{ grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 560px){ .cat-grid{ grid-template-columns: 1fr; } .cat{ min-height: auto; } }
      `}</style>
    </section>
  );
}

/* ---------- Cases ---------- */
function Cases(){
  return (
    <section id="cases">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 06</div>
          <h2 className="sec-title">Рабочие <em>сценарии.</em></h2>
          <div className="sec-meta">Четыре зоны контроля:<br/>порт, склад, таможня, выпуск.</div>
        </header>
        <div className="grid g-4 case-grid">
          {CASES.map((c, i) => (
            <article key={i} className="case">
              <figure className="case-media">
                <img src={c.img} alt={c.alt} loading="lazy" />
                <figcaption className="mono">{c.tag}</figcaption>
              </figure>
              <div className="case-meta mono">{c.meta}</div>
              <h4>{c.title}</h4>
              <a href="#customs" className="case-link">Разобрать похожий груз →</a>
            </article>
          ))}
        </div>
      </div>
      <style>{`
        .case-grid{ gap: 20px; }
        .case{ display: flex; flex-direction: column; gap: 12px; }
        .case-media{ position: relative; aspect-ratio: 4/3; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); }
        .case-media img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); transform: scale(1.01); }
        .case-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.36)); pointer-events: none; }
        .case-media figcaption{ position: absolute; left: 12px; bottom: 12px; z-index: 1; color: white; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
        .case-meta{ font-size: 11px; color: var(--muted); }
        .case h4{ font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: 0; margin: 0; }
        .case-link{ font-size: 12px; color: var(--accent); margin-top: auto; }
        @media (max-width: 760px){ .case-grid{ grid-template-columns: 1fr; } .case h4{ font-size: 18px; } }
      `}</style>
    </section>
  );
}

/* ---------- Blog ---------- */
function Blog(){
  return (
    <section id="blog">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 07</div>
          <h2 className="sec-title">Блог <em>о бизнесе</em> с Китаем.</h2>
          <div className="sec-meta">Материалы для<br/>подготовки поставки.</div>
        </header>
        <ul className="blog-list">
          {BLOG.map((b, i) => (
            <li key={i} className="blog-row">
              <span className="mono blog-num">{String(i+1).padStart(2, "0")}</span>
              <figure className="blog-thumb">
                <img src={b.img} alt={b.alt} loading="lazy" />
              </figure>
              <span className="mono blog-date">{b.d}</span>
              <span className="blog-title">{b.t}</span>
              <span className="blog-arrow">→</span>
            </li>
          ))}
        </ul>
      </div>
      <style>{`
        .blog-list{ list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
        .blog-row{ display: grid; grid-template-columns: 50px 112px 90px 1fr 24px; gap: 20px; align-items: center;
          padding: 22px 0; border-bottom: 1px solid var(--line); cursor: default; transition: color .2s; }
        .blog-row:hover{ color: var(--accent); }
        .blog-num, .blog-date{ color: var(--muted); font-size: 11px; }
        .blog-thumb{ width: 112px; aspect-ratio: 4/3; margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg-2); }
        .blog-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.03); }
        .blog-title{ font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 1.2; }
        .blog-arrow{ color: var(--accent); justify-self: end; opacity: 0; transition: opacity .2s; }
        .blog-row:hover .blog-arrow{ opacity: 1; }
        @media (max-width: 760px){
          .blog-row{ grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; }
          .blog-num, .blog-date{ display: none; }
          .blog-thumb{ width: 84px; }
          .blog-title{ font-size: 16px; }
        }
      `}</style>
    </section>
  );
}

/* ---------- FAQ ---------- */
function FAQSection(){
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq">
      <div className="wrap">
        <header className="sec-hd">
          <div className="sec-num">§ 08</div>
          <h2 className="sec-title">Частые <em>вопросы.</em></h2>
          <div className="sec-meta">Не нашли ответа?<br/><a href="#contacts" style={{ color: "var(--accent)" }}>Спросите менеджера →</a></div>
        </header>
        <div className="faq">
          {FAQ.map((f, i) => (
            <div key={i} className={`faq-row ${open === i ? "on" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="mono">{String(i+1).padStart(2, "0")}</span>
                <b>{f.q}</b>
                <span className="faq-plus">{open === i ? "–" : "+"}</span>
              </div>
              {open === i && <p className="faq-a">{f.a}</p>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq{ border-top: 1px solid var(--line); }
        .faq-row{ border-bottom: 1px solid var(--line); padding: 22px 0; cursor: pointer; }
        .faq-q{ display: grid; grid-template-columns: 50px 1fr 24px; gap: 20px; align-items: baseline; }
        .faq-q .mono{ color: var(--muted); font-size: 11px; }
        .faq-q b{ font-size: 20px; font-weight: 500; letter-spacing: 0; }
        .faq-plus{ color: var(--accent); font-size: 22px; justify-self: end; }
        .faq-a{ margin: 14px 0 0 70px; max-width: 70ch; color: var(--ink-2); line-height: 1.55; }
        @media (max-width: 760px){ .faq-a{ margin-left: 0; } }
      `}</style>
    </section>
  );
}

/* ---------- CTA ---------- */
function CTABanner(){
  return (
    <section className="cta-band">
      <div className="wrap cta-wrap">
        <div>
          <span className="eyebrow">C/ONE · консультация</span>
          <h2>Любые объёмы — <em>от пробной партии в 1 кг</em> до крупных оптовых поставок.</h2>
          <p>Максимальный вес и габариты груза ограничены только вашими потребностями. Расскажем, как организовать поставки именно под ваш бизнес.</p>
        </div>
        <figure className="cta-media">
          <img src="assets/photos/rail-containers-20260804.webp" alt="Контейнерный маршрут по железной дороге" loading="lazy" />
          <figcaption>
            <span className="mono">маршрут</span>
            <b>Китай → Россия · сборные партии и контейнеры</b>
          </figcaption>
        </figure>
        <div className="cta-actions">
          <a href="#customs" className="btn btn-primary">Заказать консультацию</a>
          <a href="#contacts" className="btn btn-ghost">Смотреть контакты</a>
        </div>
      </div>
      <style>{`
        .cta-band{ padding: 96px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
        .cta-wrap{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) auto; gap: 32px; align-items: end; }
        .cta-wrap h2{ font-size: clamp(32px, 4vw, 56px); margin: 12px 0 12px; letter-spacing: 0; font-weight: 500; line-height: 1.02; max-width: 22ch; text-wrap: balance; }
        .cta-wrap h2 em{ font-style: normal; color: var(--muted); }
        .cta-wrap p{ color: var(--ink-2); max-width: 50ch; margin: 0; font-size: 16px; line-height: 1.5; }
        .cta-media{ position: relative; aspect-ratio: 4/3; margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); min-width: 0; }
        .cta-media img{ width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.92) contrast(1.04); }
        .cta-media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.52)); pointer-events: none; }
        .cta-media figcaption{ position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: white; display: flex; flex-direction: column; gap: 5px; }
        .cta-media span{ font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .76; }
        .cta-media b{ font-size: 18px; line-height: 1.14; font-weight: 500; letter-spacing: 0; }
        .cta-actions{ display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
        @media (max-width: 1100px){ .cta-wrap{ grid-template-columns: 1fr 1fr; } .cta-actions{ grid-column: 1 / -1; flex-direction: row; } }
        @media (max-width: 760px){ .cta-wrap{ grid-template-columns: 1fr; } .cta-actions{ flex-direction: column; } .cta-media{ aspect-ratio: 16/10; } }
      `}</style>
    </section>
  );
}

/* ---------- Footer ---------- */
function FooterS(){
  return (
    <footer id="contacts">
      <div className="wrap footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="brand" style={{ color: "var(--bg)" }}>
              <span className="sq" style={{ background: "var(--bg)" }}></span>
              <span>C/ONE</span>
            </div>
            <p>Группа компаний C/ONE — доставляет грузы во все города России и Казахстана.</p>
          </div>
          <div className="footer-cols">
            <div>
              <div className="eyebrow" style={{ color: "rgba(244,241,234,0.5)" }}>Санкт-Петербург</div>
              <p>Исполкомская улица, 17<br/>+7 (812) 974-32-10<br/>с 10:00 до 18:00 МСК (пн–пт)</p>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "rgba(244,241,234,0.5)" }}>Китайский офис</div>
              <p>Провинция Шаньдун<br/>г. Ляочэн, ул. Гулоу, 111<br/>+1 (301) 116-80-90</p>
            </div>
            <div>
              <div className="eyebrow" style={{ color: "rgba(244,241,234,0.5)" }}>Связь</div>
              <p>info@conecargo.ru<br/>Telegram · WhatsApp · VK<br/>Ответим в рабочее время</p>
            </div>
          </div>
        </div>

        <div className="footer-big">C/ONE</div>

        <div className="footer-legal">
          <div>
            <span>ООО «СИ-ВАН АВТО» · ОГРН 1217800121604 · ИНН 7810924927</span>
          </div>
          <div className="footer-links">
            <span>© 2026</span>
          </div>
        </div>
      </div>
      <style>{`
        footer{ padding: 72px 0 32px; }
        .footer-top{ display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-bottom: 72px; border-bottom: 1px solid rgba(244,241,234,0.12); }
        .footer-brand p{ color: rgba(244,241,234,0.7); max-width: 32ch; margin: 18px 0 0; line-height: 1.5; }
        .footer-cols{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        .footer-cols p{ margin: 8px 0 0; color: rgba(244,241,234,0.8); line-height: 1.55; font-size: 14px; }
        .footer-big{
          font-size: clamp(120px, 28vw, 420px);
          line-height: 0.85; font-weight: 500; letter-spacing: 0;
          margin: 48px 0 24px; color: var(--bg);
          opacity: 0.92;
        }
        .footer-legal{ display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: rgba(244,241,234,0.55); font-family: var(--mono); padding-top: 18px; border-top: 1px solid rgba(244,241,234,0.12); flex-wrap: wrap; }
        .footer-links{ display: flex; gap: 24px; }
        @media (max-width: 860px){ .footer-top, .footer-cols{ grid-template-columns: 1fr; } }
      `}</style>
    </footer>
  );
}

function MobileActionBar(){
  return (
    <div className="mobile-action-bar" aria-label="Быстрые действия">
      <a href="#customs" className="btn btn-primary">Расчёт</a>
      <a href="#contacts" className="btn btn-ghost">Контакты</a>
      <style>{`
        .mobile-action-bar{ display: none; }
        @media (max-width: 640px){
          .mobile-action-bar{
            position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
            padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
            background: color-mix(in oklab, var(--bg) 88%, transparent);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            border-top: 1px solid var(--line);
          }
          .mobile-action-bar .btn{ width: 100%; justify-content: center; min-height: 44px; padding: 10px 12px; }
          body{ padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Nav, Ticker, Hero, Services, Trust, Process, Tariffs, Categories, Cases, Blog, FAQSection, CTABanner, FooterS, MobileActionBar });