// src/pages-home.jsx — главная страница

const SERVICES_LIST = [
{
  num: "01",
  title: "Закупки под заказ",
  desc: "Поиск и организация закупки товаров под конкретную потребность клиента — от ТЗ до доставки на склад.",
  tags: ["B2B", "под ключ"]
},
{
  num: "02",
  title: "Подбор поставщика",
  desc: "Поиск потенциальных поставщиков, первичная коммуникация, оценка коммерческих условий и надёжности.",
  tags: ["due diligence"]
},
{
  num: "03",
  title: "Международная логистика",
  desc: "Подбор маршрута, организация доставки, расчёт логистических расходов в условиях ограничений.",
  tags: ["multimodal"]
},
{
  num: "04",
  title: "Импорт / экспорт",
  desc: "Сопровождение поставок между странами, организация сделки, помощь с документами и таможней.",
  tags: ["ЕС", "СНГ"]
},
{
  num: "05",
  title: "Агентирование",
  desc: "Работа по агентской модели — поиск и организация сделки от имени или в интересах клиента.",
  tags: ["агент"]
},
{
  num: "06",
  title: "Консультирование",
  desc: "Консультации по вариантам поставки, рискам, структуре сделки, логистике и предварительной экономике.",
  tags: ["1 час бесплатно"]
}];


const PROCESS_STEPS = [
{ num: "01", title: "Запрос", desc: "Клиент отправляет задачу через форму или Telegram." },
{ num: "02", title: "Анализ", desc: "Разбираем потребность, ограничения, маршруты и риски." },
{ num: "03", title: "Варианты", desc: "Подбираем 2–3 варианта поставки или закупки." },
{ num: "04", title: "Согласование", desc: "Фиксируем условия, сроки, стоимость, документы." },
{ num: "05", title: "Исполнение", desc: "Организуем закупку, документы и логистику." },
{ num: "06", title: "Доставка", desc: "Передаём товар или результат клиенту." }];


const ADVANTAGES = [
{
  title: "Работаем с нестандартными запросами",
  desc: "Не отказываем там, где \"стандартному\" брокеру слишком сложно. Берёмся за поставки в условиях ограничений и нетипичных маршрутов."
},
{
  title: "Ищем практические маршруты",
  desc: "Не \"теоретически возможные\", а те, что реально работают сегодня: с учётом санкционных, документальных и логистических рисков."
},
{
  title: "Закрываем задачу под ключ",
  desc: "От поиска поставщика до прибытия товара на ваш склад. Один контакт — одно решение."
},
{
  title: "Считаем экономику честно",
  desc: "Даём диапазон стоимости и сроков до старта работы. Не заходим в сделку с непросчитанным риском."
}];


function MarqueeStrip() {
  const items = [
  "Импорт под ключ", "Поставщики ЕС → СНГ", "Multimodal logistics",
  "Подбор маршрутов", "Агентирование B2B", "Закупки по ТН ВЭД",
  "Сопровождение сделки", "Документы и таможня"];

  const full = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {full.map((s, i) =>
        <span key={i} className="marquee__item" style={{ fontFamily: "sans-serif" }}>
            {s}<span className="marquee__dot" />
          </span>
        )}
      </div>
    </div>);

}

function HomeHero({ navigate }) {
  return (
    <section className="section section--first" style={{ paddingTop: 64, paddingBottom: 72 }} data-screen-label="Home / Hero">
      <div className="wrap">
        <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 40, fontFamily: "sans-serif" }}>
          <span className="tag" style={{ fontFamily: "sans-serif" }}>B2B · импорт / экспорт</span>
          <span className="t-caption" style={{ color: "var(--text-dim)" }}>
            <span style={{ color: "var(--success)" }}>●</span> &nbsp;Принимаем заявки
          </span>
        </div>

        <h1 className="t-display reveal reveal--1" style={{ marginBottom: 40, maxWidth: 1200 }}>
          Импорт, экспорт и поставки <span className="accent" style={{ color: "rgb(182, 123, 107)" }}>под&nbsp;ключ</span> в сложной международной логистике.
        </h1>

        <div className="reveal reveal--2" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "end", marginTop: 32 }}>
          <p className="t-lead" style={{ maxWidth: 640 }}>
            Подбираем поставщиков, организуем закупку, логистику и сопровождение сделки для компаний из РБ, РФ и СНГ. Работаем там, где обычная схема не работает.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button size="lg" onClick={() => navigate("request")}>
              Оставить заявку <ArrowIcon size={14} />
            </Button>
            <Button size="lg" variant="ghost" onClick={() => navigate("services")}>
              Запросить консультацию
            </Button>
          </div>
        </div>
      </div>

      {/* stats bar */}
      <div className="wrap" style={{ marginTop: 96 }}>
        <div className="reveal reveal--3" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: 6,
          overflow: "hidden"
        }}>
          {[
          { label: "Направления услуг", value: "7", caption: "от закупки до доставки" },
          { label: "Стран в работе", value: "20+", caption: "ЕС, Азия, СНГ" },
          { label: "Средний срок ответа", value: "< 4ч", caption: "по рабочим заявкам" },
          { label: "Конфиденциальность", value: "NDA", caption: "по умолчанию" }].
          map((s, i) =>
          <div key={i} style={{ background: "var(--bg-0)", padding: "28px 28px 24px", fontFamily: "sans-serif" }}>
              <div className="t-caption" style={{ marginBottom: 24 }}>{s.label}</div>
              <div style={{ fontSize: "clamp(36px, 4vw, 52px)", fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 10 }}>
                {s.value}
              </div>
              <div className="t-caption" style={{ color: "var(--text-dim)", textTransform: "none", letterSpacing: 0 }}>
                {s.caption}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function HomeAbout({ navigate }) {
  return (
    <section className="section" data-screen-label="Home / About preview">
      <div className="wrap">
        <SectionHead
          num="01"
          tag="О компании"
          title="Кто мы и что делаем"
          lead="Команда практиков в закупках, агентировании и международной логистике. Работаем с B2B-клиентами, которым нужно привезти товар тогда, когда стандартные схемы не работают."
          aside={<Button variant="ghost" onClick={() => navigate("about")}>Подробнее о компании <ArrowIcon /></Button>} />
        
        <div className="grid grid--3">
          {[
          { num: "→", title: "Практический результат", desc: "Не презентации и обещания — конкретный товар на вашем складе в согласованный срок." },
          { num: "→", title: "Гибкость и скорость", desc: "Не отказываем, если задача нестандартная. Решаем то, что в типовом сценарии не решается." },
          { num: "→", title: "Конфиденциальность", desc: "NDA по умолчанию. Не раскрываем поставщиков, маршруты, бренды и контрагентов." }].
          map((c, i) =>
          <Reveal key={i} delay={i * 0.08} className="card">
              <div style={{ color: "var(--accent)", fontFamily: "var(--font-ui), ui-sans-serif, sans-serif", marginBottom: 24, fontSize: 14 }}>{c.num}</div>
              <h3 className="t-h3" style={{ marginBottom: 14 }}>{c.title}</h3>
              <p className="t-body">{c.desc}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function HomeServices({ navigate }) {
  return (
    <section className="section" data-screen-label="Home / Services">
      <div className="wrap">
        <SectionHead
          num="02"
          tag="Направления работы"
          title="Шесть направлений — одна точка входа"
          lead="Закрываем задачу в любой точке цепочки: от первичного запроса поставщику до прибытия груза в страну назначения."
          aside={<Button variant="ghost" onClick={() => navigate("services")}>Все услуги <ArrowIcon /></Button>} />
        
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "var(--line)",
          border: "1px solid var(--line)",
          borderRadius: 6,
          overflow: "hidden"
        }} className="services-grid-home">
          {SERVICES_LIST.map((s) =>
          <div key={s.num} style={{ background: "var(--bg-0)" }}>
              <ServiceCard {...s} onClick={() => navigate("services")} />
            </div>
          )}
        </div>
        <style>{`
          @media (max-width: 980px) {
            .services-grid-home { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 640px) {
            .services-grid-home { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>);

}

function ServiceCard({ num, title, desc, tags, onClick }) {
  return (
    <div
      onClick={onClick}
      style={{
        padding: "36px 32px 32px",
        cursor: "pointer",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        gap: 16,
        transition: "background 0.2s ease",
        position: "relative"
      }}
      onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-2)"}
      onMouseLeave={(e) => e.currentTarget.style.background = "var(--bg-0)"}>
      
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="mono" style={{ fontSize: 13, color: "var(--accent)", fontFamily: "Manrope" }}>{num} /</span>
        <ArrowIcon size={14} />
      </div>
      <h3 className="t-h3" style={{ marginTop: 8 }}>{title}</h3>
      <p className="t-body" style={{ flex: 1 }}>{desc}</p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {tags.map((t) =>
        <span key={t} style={{
          fontSize: 11, fontFamily: "var(--font-ui), ui-sans-serif, sans-serif",
          letterSpacing: "0.04em", textTransform: "uppercase",
          color: "var(--text-dim)",
          padding: "4px 8px",
          border: "1px solid var(--line)",
          borderRadius: 3
        }}>{t}</span>
        )}
      </div>
    </div>);

}

function HomeProcess() {
  return (
    <section className="section" data-screen-label="Home / Process" style={{ background: "var(--bg-1)" }}>
      <div className="wrap">
        <SectionHead
          num="03"
          tag="Схема работы"
          title="Как мы работаем"
          lead="Шесть шагов от первого письма до полученного товара. Без бесконечных согласований и сюрпризов в счёте." />
        
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(6, 1fr)",
          gap: 0,
          position: "relative"
        }} className="process-grid">
          {PROCESS_STEPS.map((s, i) =>
          <Reveal key={s.num} delay={i * 0.06} style={{
            padding: "32px 24px 0",
            borderRight: i < 5 ? "1px solid var(--line)" : "none",
            position: "relative"
          }}>
              <div style={{
              width: 36, height: 36, borderRadius: "50%",
              background: "var(--bg-0)",
              border: "1px solid var(--accent-line)",
              color: "var(--accent)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: "var(--font-ui), ui-sans-serif, sans-serif", fontSize: 13, fontWeight: 600,
              marginBottom: 24
            }}>
                {String(i + 1)}
              </div>
              <h4 style={{ fontSize: 20, fontWeight: 600, marginBottom: 10, letterSpacing: "-0.01em" }}>{s.title}</h4>
              <p className="t-body" style={{ fontSize: 14 }}>{s.desc}</p>
            </Reveal>
          )}
        </div>
        <style>{`
          @media (max-width: 980px) {
            .process-grid { grid-template-columns: repeat(3, 1fr) !important; row-gap: 32px; }
            .process-grid > *:nth-child(3) { border-right: none !important; }
          }
          @media (max-width: 640px) {
            .process-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .process-grid > * { border-right: none !important; }
          }
        `}</style>
      </div>
    </section>);

}

function HomeAdvantages() {
  return (
    <section className="section" data-screen-label="Home / Advantages">
      <div className="wrap">
        <SectionHead
          num="04"
          tag="Почему с нами"
          title={'Не «индивидуальный подход», а конкретика'}
          lead="Без шаблонных формулировок. Четыре причины, по которым клиенты выбирают нас вместо обычного посредника." />
        
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="adv-grid">
          {ADVANTAGES.map((a, i) =>
          <Reveal key={i} delay={i * 0.08} className="card" style={{ padding: "40px 36px" }}>
              <div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
                <span className="mono" style={{ fontSize: 14, color: "var(--accent)", flex: "0 0 auto" }}>
                  {String(i + 1).padStart(2, "0")} /
                </span>
                <div>
                  <h3 className="t-h3" style={{ marginBottom: 14 }}>{a.title}</h3>
                  <p className="t-body">{a.desc}</p>
                </div>
              </div>
            </Reveal>
          )}
        </div>
        <style>{`
          @media (max-width: 720px) {
            .adv-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </section>);

}

function HomeCases() {
  return (
    <section className="section" data-screen-label="Home / Cases">
      <div className="wrap">
        <SectionHead
          num="05"
          tag="Обезличенные кейсы"
          title={'Что выглядит «невозможным» — на практике решаемо'}
          lead="Все кейсы публикуются в обезличенной форме: без названий клиентов, поставщиков, брендов и точных маршрутов." />
        
        <div className="grid grid--3">
          {[
          {
            tag: "Производство · ЕС → СНГ",
            task: "Найти и организовать поставку промышленного оборудования из ЕС.",
            result: "Подобрали поставщика, согласовали условия, организовали маршрут и документы. Срок — 6 недель.",
            illust: "equipment",
            stats: [["Срок", "6 нед"], ["Документы", "12"], ["Поставщиков", "4 → 1"]],
          },
          {
            tag: "Подбор поставщика · Азия",
            task: "Найти 3 альтернативных поставщика взамен выпавшего основного.",
            result: "Закрыли вопрос за 11 дней, дали клиенту сравнительные коммерческие условия.",
            illust: "supplier",
            stats: [["Срок", "11 дн"], ["Шорт-лист", "3"], ["Запросов", "27"]],
          },
          {
            tag: "Логистика · мультимодал",
            task: "Перестроить маршрут после закрытия привычного коридора доставки.",
            result: "Собрали мультимодальный маршрут, сократили срок на 9 дней относительно исходного плана.",
            illust: "route",
            stats: [["Экономия", "−9 дн"], ["Перегрузок", "3"], ["Видов транспорта", "3"]],
          }].
          map((c, i) =>
          <Reveal key={i} delay={i * 0.08} className="card" style={{ display: "flex", flexDirection: "column", gap: 20, padding: 0, overflow: "hidden" }}>
              <CaseIllustration kind={c.illust} tag={c.tag} stats={c.stats} />
              <div style={{ display: "flex", flexDirection: "column", gap: 14, padding: "0 28px 28px" }}>
                <div>
                  <div className="t-caption" style={{ marginBottom: 6, color: "var(--accent)" }}>Задача</div>
                  <p style={{ fontSize: 15, lineHeight: 1.5 }}>{c.task}</p>
                </div>
                <div>
                  <div className="t-caption" style={{ marginBottom: 6, color: "var(--accent)" }}>Результат</div>
                  <p className="t-body" style={{ fontSize: 14 }}>{c.result}</p>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function HomeCTA({ navigate }) {
  return (
    <section className="section" data-screen-label="Home / CTA" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="wrap">
        <div style={{
          background: "var(--bg-1)",
          border: "1px solid var(--line)",
          borderRadius: 8,
          padding: "80px 64px",
          position: "relative",
          overflow: "hidden"
        }} className="cta-block">
          <div style={{
            position: "absolute",
            top: 0, right: 0,
            width: 480, height: 480,
            background: "radial-gradient(circle, var(--accent-soft) 0%, transparent 65%)",
            pointerEvents: "none"
          }} />
          <div style={{ position: "relative", maxWidth: 820 }}>
            <span className="tag" style={{ marginBottom: 32, display: "inline-flex" }}>● Готовы обсудить задачу</span>
            <h2 className="t-h1" style={{ marginBottom: 28 }}>
              Расскажите о задаче — мы оценим, что реально привезти и&nbsp;<span className="accent">за сколько</span>.
            </h2>
            <p className="t-lead" style={{ marginBottom: 40, maxWidth: 640 }}>
              Опишите запрос в форме заявки. В течение 4 рабочих часов вернёмся с уточняющими вопросами или первичной оценкой.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <Button size="lg" onClick={() => navigate("request")}>
                Оставить заявку <ArrowIcon />
              </Button>
              <Button size="lg" variant="ghost" onClick={() => navigate("contacts")}>
                Другие способы связи
              </Button>
            </div>
          </div>
        </div>
        <style>{`
          @media (max-width: 720px) {
            .cta-block { padding: 48px 28px !important; }
          }
        `}</style>
      </div>
    </section>);

}

function HomePage({ navigate }) {
  return (
    <div className="page-enter">
      <HomeHero navigate={navigate} />
      <MarqueeStrip />
      <HomeAbout navigate={navigate} />
      <HomeServices navigate={navigate} />
      <HomeProcess />
      <HomeAdvantages />
      <HomeCases />
      <HomeCTA navigate={navigate} />
    </div>);

}

Object.assign(window, {
  HomePage, SERVICES_LIST, PROCESS_STEPS, ADVANTAGES, ServiceCard, MarqueeStrip
});