// All non-calculator sections: Nav, Hero, Capabilities, Parts, Equipment, Materials, Process, About, FAQ, Contact, Footer

const { useState: uS } = React;

// ───── ICONS ─────
const Icon = {
  Weight: () => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M10 18 L38 18 L34 40 L14 40 Z" />
      <circle cx="24" cy="12" r="4" />
      <path d="M20 18 Q24 14 28 18" />
    </svg>
  ),
  Cut: () => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="14" cy="14" r="6" />
      <circle cx="14" cy="34" r="6" />
      <path d="M19 18 L40 38" />
      <path d="M19 30 L40 10" />
    </svg>
  ),
  Stack: () => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="8" y="30" width="32" height="8" />
      <rect x="12" y="20" width="24" height="8" />
      <rect x="16" y="10" width="16" height="8" />
    </svg>
  ),
  Tool: () => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M28 8 L40 20 L24 36 L12 24 Z" />
      <path d="M12 24 L8 28 L20 40 L24 36" />
      <circle cx="32" cy="16" r="2" />
    </svg>
  ),
  Check: () => (
    <svg viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="24" cy="24" r="18" />
      <path d="M16 24 L22 30 L33 18" />
    </svg>
  ),
  Arrow: () => <svg width="16" height="10" viewBox="0 0 16 10" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M1 5 L15 5 M10 1 L15 5 L10 9" /></svg>,
};

// ───── NAV ─────
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#" className="nav-logo">
          <span className="mark">МК</span>
          <div>
            <div>ТД МКПП</div>
            <div className="sub">с 2013 г · Рязань</div>
          </div>
        </a>
        <div className="nav-links">
          <a href="#capabilities">Возможности</a>
          <a href="#video">Видео</a>
          <a href="#calculator">Калькулятор</a>
          <a href="#parts">Каталог</a>
          <a href="#equipment">Оборудование</a>
          <a href="#about">О компании</a>
          <a href="#map">Карта</a>
          <a href="#contact">Контакты</a>
        </div>
        <div className="nav-cta">
          <span className="nav-phone">+7 (4912) 93-27-71</span>
          <a href="#contact" className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 12 }}>
            Заявка <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ───── HERO ─────
function Hero() {
  const today = new Date();
  const dateStr = today.toLocaleDateString('ru-RU', { day: '2-digit', month: 'short', year: 'numeric' });
  return (
    <section className="hero">
      <div className="container">
        <div className="hero-meta">
          <span><span className="dot"></span>Производство активно · приём заявок</span>
          <span>{dateStr.toUpperCase()} · РЯЗАНЬ</span>
          <span>120 Т / МЕС</span>
        </div>

        <div className="hero-grid">
          <div>
            <h1 className="hero-h1">
              Поковки от <span className="em">0,4</span> до <span className="em">1 250&nbsp;кг</span>.<br/>
              Партиями от одной штуки.
            </h1>
            <p className="lead">
              Торговый Дом «Механо-Кузнечно-Прессовое производство» —
              горячая штамповка и свободная ковка деталей из легированных,
              углеродистых и инструментальных сталей. Стабильно с 2013 года.
            </p>

            <div className="hero-cta" style={{ marginTop: 40 }}>
              <a href="#calculator" className="btn btn-primary">
                Рассчитать стоимость
                <span className="arrow">→</span>
              </a>
              <a href="#parts" className="btn btn-ghost">
                Смотреть каталог
              </a>
            </div>
          </div>

          <div className="hero-side">
            <div className="hero-stats">
              <div className="hero-stat">
                <div className="v">2013<span className="u">год</span></div>
                <div className="l">Работаем с</div>
              </div>
              <div className="hero-stat">
                <div className="v">120<span className="u">т/мес</span></div>
                <div className="l">Производство</div>
              </div>
              <div className="hero-stat">
                <div className="v">1 250<span className="u">кг</span></div>
                <div className="l">Макс. вес поковки</div>
              </div>
              <div className="hero-stat">
                <div className="v">10+<span className="u">марок</span></div>
                <div className="l">Сталей в работе</div>
              </div>
            </div>
          </div>
        </div>

        <div className="hero-image-strip">
          {[
            ['Цех ковки · общий план', '01'],
            ['Раскалённая заготовка', '02'],
            ['Молот 3000 кг', '03'],
            ['Контроль качества', '04'],
          ].map(([label, num]) => (
            <div className="hero-tile" key={num}>
              <div className={'placeholder' + (num === '02' ? ' amber' : '')}>фото<br/>{label.toLowerCase()}</div>
              <div className="hero-tile-num">[{num}/04]</div>
              <div className="hero-tile-label">{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── MARQUEE ─────
function Marquee() {
  const items = ['Горячая штамповка', '·', 'Свободная ковка', '·', 'От 1 шт', '·', 'Своя оснастка', '·', 'Контроль структуры', '·', '120 т/мес', '·', 'Рязань', '·', 'С 2013 года', '·', 'Давальческий металл', '·', 'Легированные стали'];
  return (
    <div className="marquee">
      <div className="marquee-track">
        <span>{items.map((i, k) => <React.Fragment key={k}>{i === '·' ? <span className="dot" /> : i}</React.Fragment>)}</span>
        <span aria-hidden="true">{items.map((i, k) => <React.Fragment key={k}>{i === '·' ? <span className="dot" /> : i}</React.Fragment>)}</span>
      </div>
    </div>
  );
}

// ───── VIDEO ─────
function VideoSection() {
  const [playing, setPlaying] = uS(false);
  const chapters = [
    { ts: '00:00', t: 'Общий план цеха' },
    { ts: '00:42', t: 'Раскрой и нагрев' },
    { ts: '01:28', t: 'Молоты и штамповка' },
    { ts: '02:15', t: 'Контроль качества' },
  ];
  return (
    <section id="video" className="section video-section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">03</span> Видео-презентация</div>
            <h2>Производство<br/>в кадре</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Полный цикл — от заготовки до готовой поковки. Снято в нашем
              кузнечном цехе в Рязани. Длительность 2:48.
            </p>
          </div>
        </div>

        <div className="video-frame" onClick={() => setPlaying(true)}>
          {!playing && (
            <>
              <div className="poster"></div>
              <div className="video-meta tl"><span className="rec">REC · ЦЕХ КОВКИ</span></div>
              <div className="video-meta tr">ТД МКПП · 2024</div>
              <div className="video-meta bl">02:48 · 4K</div>
              <div className="video-meta br">▶ НАЖМИТЕ ДЛЯ ВОСПРОИЗВЕДЕНИЯ</div>
              <div className="video-play"><div className="triangle"></div></div>
            </>
          )}
          {playing && (
            // Replace the src below with the real production video URL.
            // Using a YouTube placeholder embed; can also be <video src="...mp4" controls autoPlay />.
            <iframe
              src="about:blank"
              title="Видео-презентация ТД МКПП"
              allow="autoplay; fullscreen; picture-in-picture"
              style={{ background: '#000' }}
            />
          )}
        </div>

        <div className="video-chapters">
          {chapters.map((c) => (
            <div className="video-chapter" key={c.ts}>
              <span className="ts">{c.ts}</span>
              <span className="t">{c.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── CAPABILITIES ─────
function Capabilities() {
  const caps = [
    { num: '01', icon: <Icon.Weight />, title: 'От 0,4 до 1 250 кг', desc: 'Изготавливаем поковки в широком диапазоне массы — методами горячей штамповки или свободной ковки.' },
    { num: '02', icon: <Icon.Stack />, title: 'От 1 шт до партии', desc: 'Размер партии не имеет значения. Работаем как с единичными заказами, так и с серийным производством.' },
    { num: '03', icon: <Icon.Cut />, title: 'Свой раскрой и резка', desc: 'Рассчитываем размеры заготовок и режем металлопрокат на собственных пресс-ножницах и пилах.' },
    { num: '04', icon: <Icon.Tool />, title: 'Сложные формы', desc: 'Разрабатываем и изготавливаем специальные оснастки методом свободной ковки для нестандартных деталей.' },
  ];
  return (
    <section id="capabilities" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">02</span> Возможности</div>
            <h2>Что мы<br/>умеем делать</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Производственные мощности — 120 тонн в месяц. Изготавливаем из своего
              или давальческого материала: легированные, углеродистые, инструментальные стали.
            </p>
          </div>
        </div>
        <div className="cap-grid">
          {caps.map((c) => (
            <div className="cap" key={c.num}>
              <div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div className="cap-icon">{c.icon}</div>
                  <span className="cap-num">[{c.num}]</span>
                </div>
                <h4>{c.title}</h4>
                <p>{c.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── PARTS CATALOG ─────
function PartsCatalog() {
  return (
    <section id="parts" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">05</span> Каталог</div>
            <h2>Типовые<br/>поковки</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Шесть основных групп изделий с типовыми размерами. Нестандартные
              формы и оснастку проектируем под заказ.
            </p>
          </div>
        </div>
        <div className="parts-grid">
          {PART_TYPES.map((p, i) => (
            <div className="part" key={p.id} onClick={() => {
              document.getElementById('calculator')?.scrollIntoView({ behavior: 'smooth' });
            }}>
              <div className="part-head">
                <div>
                  <div className="part-num">[{String(i + 1).padStart(2, '0')} / {p.short}]</div>
                  <div className="part-name" style={{ marginTop: 8 }}>{p.name}</div>
                </div>
                <span style={{ color: 'var(--fg-3)' }}>↗</span>
              </div>
              <div className="part-figure">{p.drawing}</div>
              <div className="part-specs">
                {p.specs.map((s) => {
                  const [k, ...rest] = s.split(/[=<]/);
                  const isWeight = s.startsWith('до');
                  return (
                    <div className="spec" key={s}>
                      <span>{isWeight ? 'Вес' : k.trim()}</span>
                      <b>{isWeight ? s : s}</b>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── EQUIPMENT ─────
function Equipment() {
  const equip = [
    { num: '01', name: 'Паровоздушные молота', tag: 'Ковка', spec: 'Падающие части 150–3000 кг' },
    { num: '02', name: 'Штамповочные молота', tag: 'Штамповка', spec: 'Падающие части 1600 и 3000 кг' },
    { num: '03', name: 'Пресс-ножницы', tag: 'Раскрой', spec: 'Усилие до 1000 тс' },
    { num: '04', name: 'Горизонтально-ковочная машина', tag: 'Ковка', spec: 'Серийная штамповка' },
    { num: '05', name: 'Газовые печи', tag: 'Нагрев', spec: 'До температуры ковки' },
    { num: '06', name: 'Ленточнопильные станки', tag: 'Резка', spec: 'Точный размерный раскрой' },
  ];
  return (
    <section id="equipment" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">06</span> Оборудование</div>
            <h2>Кузнечный<br/>цех</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Шесть единиц основного оборудования закрывают полный цикл —
              от раскроя металлопроката до контроля готовой детали.
            </p>
          </div>
        </div>
        <div className="equip-list">
          {equip.map((e) => (
            <div className="equip-row" key={e.num}>
              <span className="equip-num">[{e.num}]</span>
              <div className="equip-name">{e.name}</div>
              <span className="equip-tag">{e.tag}</span>
              <span className="equip-spec">{e.spec}</span>
              <span className="equip-arrow">→</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── MATERIALS ─────
function MaterialsSection() {
  return (
    <section className="section mats-section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">07</span> Материалы</div>
            <h2>Стали<br/>в работе</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Работаем с легированными, углеродистыми, инструментальными и нержавеющими сталями.
              Список не ограничен — уточните вашу марку при заказе.
            </p>
          </div>
        </div>
        <div className="mats-grid">
          {MATERIALS.map((m) => (
            <div className="mat-chip" key={m.id}>
              {m.name}
              <span className="cat">{m.cat}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── PROCESS ─────
function Process() {
  const steps = [
    { n: 1, title: 'Заявка', desc: 'Чертёж или эскиз с размерами, материал, тираж. Принимаем по почте, форме или телефону.' },
    { n: 2, title: 'Расчёт', desc: 'Технолог проверяет применимость, рассчитывает заготовку, готовит коммерческое предложение.' },
    { n: 3, title: 'Оснастка', desc: 'При необходимости проектируем и изготавливаем штампы или специальную оснастку под форму.' },
    { n: 4, title: 'Производство', desc: 'Раскрой, нагрев в газовой печи, ковка или штамповка, обрезка облоя, выправление.' },
    { n: 5, title: 'Контроль', desc: 'Проверка размеров, при необходимости — контроль структуры металла. Отгрузка.' },
  ];
  return (
    <section id="process" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">08</span> Процесс</div>
            <h2>Как мы<br/>работаем</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              От первой заявки до отгрузки — пять прозрачных этапов. Сроки и
              стоимость фиксируются после согласования технического задания.
            </p>
          </div>
        </div>
        <div className="process-grid">
          {steps.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-num">{String(s.n).padStart(2, '0')}<span className="of">/05</span></div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── ABOUT ─────
function About() {
  return (
    <section id="about" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">09</span> О компании</div>
            <h2>Куем для каждого,<br/>как для себя</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Стабильная работа с 2013 года, постоянный рост качества и техники,
              положительные отзывы клиентов из машиностроения, нефтегаза и энергетики.
            </p>
          </div>
        </div>

        <div className="about-grid">
          <div>
            <p>
              ТД «МКПП» уделяет тщательное внимание каждому клиенту. За годы работы
              мы собрали много положительных отзывов, что показывает наш профессионализм
              и самоотдачу делу. С каждым годом растём, развиваемся и повышаем качество
              продукции.
            </p>
            <p>
              Кузнечный цех ориентирован на производство поковок методом горячей штамповки
              и свободной ковки для деталей и запасных частей. Действующая технология позволяет
              получать штамповки разнообразной конфигурации из деформируемых углеродистых и
              высоколегированных сталей.
            </p>

            <div className="about-quote">
              «Мы куём с удовольствием для каждого, как для себя.»
              <div className="about-sig">Панаев В. М. · Генеральный директор</div>
            </div>
          </div>

          <div className="about-stats">
            <h4>Цифры</h4>
            <div className="about-stat-row"><span>Год основания</span><span className="v">2013</span></div>
            <div className="about-stat-row"><span>Производство в месяц</span><span className="v">120 т</span></div>
            <div className="about-stat-row"><span>Диапазон веса</span><span className="v">0,4 — 1 250 кг</span></div>
            <div className="about-stat-row"><span>Длина заготовки</span><span className="v">до 3 500 мм</span></div>
            <div className="about-stat-row"><span>Усилие пресс-ножниц</span><span className="v">до 1 000 тс</span></div>
            <div className="about-stat-row"><span>Падающие части молота</span><span className="v">до 3 000 кг</span></div>
            <div className="about-stat-row"><span>География поставок</span><span className="v">РФ и СНГ</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───── FAQ ─────
function FAQ() {
  const items = [
    { q: 'Какой минимальный заказ?', a: 'Размер партии для нас не имеет значения — мы изготавливаем как одну деталь, так и серию любого объёма. Стоимость единицы при больших тиражах ниже за счёт оснастки.' },
    { q: 'Можно ли работать с давальческим материалом?', a: 'Да, мы изготавливаем поковки как из своего, так и из вашего металла. При работе с давальческим материалом необходимо предоставить сертификаты соответствия.' },
    { q: 'Какие сроки изготовления?', a: 'Сроки зависят от наличия оснастки, тиража и сложности детали. Стандартный заказ — от 2 до 6 недель. Точные сроки фиксируются в коммерческом предложении.' },
    { q: 'Делаете ли вы термообработку и механическую обработку?', a: 'Базово мы изготавливаем поковки. Термообработка и финальная механическая обработка возможны через партнёров — обсуждается отдельно при заказе.' },
    { q: 'Как контролируется качество?', a: 'Мы контролируем геометрические размеры по чертежу. По дополнительному требованию проводим контроль структуры металла, твёрдости и других параметров.' },
    { q: 'В какие регионы вы поставляете?', a: 'Работаем по всей территории России и СНГ. Логистика согласовывается отдельно — самовывоз из Рязани или доставка транспортной компанией.' },
  ];
  const [open, setOpen] = uS(0);
  return (
    <section id="faq" className="section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">10</span> Вопросы</div>
            <h2>Что обычно<br/>спрашивают</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Если вашего вопроса здесь нет — напишите нам, ответим
              в течение рабочего дня.
            </p>
          </div>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={'faq-item' + (open === i ? ' open' : '')} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───── MAP ─────
function MapSection() {
  return (
    <section id="map" className="section map-section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">12</span> На карте</div>
            <h2>Найти нас<br/>в Рязани</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Производство расположено по адресу: ул. Станкозаводская, 7 лит Н.
              Возможен самовывоз и приёмка металла на месте.
            </p>
          </div>
        </div>

        <div className="map-wrap">
          <div className="map-overlay">
            <h5>ТД МКПП · Производство</h5>
            <div className="addr">390042 г. Рязань<br/>ул. Станкозаводская, 7&nbsp;лит&nbsp;Н</div>
            <div className="meta">54.6178° N · 39.7423° E</div>
          </div>
          <iframe
            src="https://yandex.ru/map-widget/v1/?ll=39.742300%2C54.617800&z=17&pt=39.742300%2C54.617800,pm2rdl&l=map&mode=search&text=%D0%A2%D0%94%20%D0%9C%D0%9A%D0%9F%D0%9F%20%D0%A0%D1%8F%D0%B7%D0%B0%D0%BD%D1%8C"
            title="ТД МКПП на карте Яндекс"
            allow="geolocation"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          ></iframe>
        </div>
      </div>
    </section>
  );
}

// ───── CONTACT ─────
function Contact() {
  const [sent, setSent] = uS(false);
  const [files, setFiles] = uS([]);
  const [dragOver, setDragOver] = uS(false);
  const fileInputRef = React.useRef(null);

  const MAX_SIZE = 25 * 1024 * 1024; // 25 MB per file
  const ACCEPT = ".pdf,.dwg,.dxf,.step,.stp,.iges,.igs,.stl,.doc,.docx,.xls,.xlsx,.zip,.rar,.7z,.png,.jpg,.jpeg,.tiff";

  const fmtSize = (b) => {
    if (b < 1024) return b + ' Б';
    if (b < 1024 * 1024) return (b / 1024).toFixed(1) + ' КБ';
    return (b / 1024 / 1024).toFixed(1) + ' МБ';
  };
  const extOf = (name) => (name.split('.').pop() || '').toUpperCase();

  const addFiles = (incoming) => {
    const arr = Array.from(incoming || []);
    const next = [...files];
    for (const f of arr) {
      if (f.size > MAX_SIZE) continue;
      if (next.find(x => x.name === f.name && x.size === f.size)) continue;
      next.push(f);
    }
    setFiles(next.slice(0, 10));
  };
  const removeFile = (i) => setFiles(files.filter((_, idx) => idx !== i));

  const onDrop = (e) => {
    e.preventDefault(); setDragOver(false);
    addFiles(e.dataTransfer.files);
  };
  const onDragOver = (e) => { e.preventDefault(); setDragOver(true); };
  const onDragLeave = () => setDragOver(false);

  const submit = (e) => { e.preventDefault(); setSent(true); setTimeout(() => { setSent(false); setFiles([]); }, 4000); };
  return (
    <section id="contact" className="section contact-section">
      <div className="container">
        <div className="sec-head">
          <div className="sec-title">
            <div className="eyebrow"><span className="num">11</span> Контакты</div>
            <h2>Оставьте<br/>заявку</h2>
          </div>
          <div className="sec-desc">
            <p className="lead">
              Наша цель — долговременное и взаимовыгодное сотрудничество.
              Опишите задачу — пришлём предложение в течение рабочего дня.
            </p>
          </div>
        </div>

        <div className="contact-grid">
          <div className="contact-info">
            <div className="contact-block">
              <h5>Адрес</h5>
              <div className="v">390042 Россия, г. Рязань<br/>улица Станкозаводская, 7 лит Н</div>
            </div>
            <div className="contact-block">
              <h5>Отдел продаж</h5>
              <div className="v"><a href="tel:+79150442088">+7 (915) 044-20-88</a></div>
              <div className="sub">Антонов Валерий Валерьевич, исполнительный директор</div>
            </div>
            <div className="contact-block">
              <h5>Производство</h5>
              <div className="v"><a href="tel:+74912932771">+7 (4912) 93-27-71</a></div>
            </div>
            <div className="contact-block">
              <h5>Email</h5>
              <div className="v"><a href="mailto:v.antonov@td-mkpp.ru">v.antonov@td-mkpp.ru</a></div>
              <div className="v" style={{ marginTop: 6 }}><a href="mailto:antonova.i@td-mkpp.ru">antonova.i@td-mkpp.ru</a></div>
            </div>
            <div className="contact-block">
              <h5>Генеральный директор</h5>
              <div className="v">Панаев Владимир Михайлович</div>
            </div>
          </div>

          <form className="form" onSubmit={submit}>
            <div className="form-row">
              <div className="form-field">
                <label>Имя *</label>
                <input type="text" required placeholder="Иван Петров" />
              </div>
              <div className="form-field">
                <label>Компания</label>
                <input type="text" placeholder="ООО «Машзавод»" />
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Email *</label>
                <input type="email" required placeholder="ivan@example.ru" />
              </div>
              <div className="form-field">
                <label>Телефон</label>
                <input type="tel" placeholder="+7 (___) ___-__-__" />
              </div>
            </div>
            <div className="form-field">
              <label>Тип запроса</label>
              <select defaultValue="quote">
                <option value="quote">Запрос коммерческого предложения</option>
                <option value="tech">Технический вопрос</option>
                <option value="batch">Серийное производство</option>
                <option value="other">Другое</option>
              </select>
            </div>
            <div className="form-field">
              <label>Описание задачи *</label>
              <textarea required placeholder="Тип детали, размеры, материал, тираж, сроки."></textarea>
            </div>
            <div className="form-field">
              <label>
                Документы
                <span className="label-hint">— чертежи, 3D-модели, спецификации</span>
              </label>
              <div
                className={`dropzone${dragOver ? ' is-over' : ''}`}
                onClick={() => fileInputRef.current && fileInputRef.current.click()}
                onDrop={onDrop}
                onDragOver={onDragOver}
                onDragLeave={onDragLeave}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInputRef.current && fileInputRef.current.click(); } }}
                role="button"
                tabIndex={0}
              >
                <div className="dz-icon" aria-hidden="true">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="square">
                    <path d="M12 4v12" />
                    <path d="M6 10l6-6 6 6" />
                    <path d="M4 20h16" />
                  </svg>
                </div>
                <div className="dz-text">
                  <div className="dz-title">
                    {files.length === 0
                      ? 'Перетащите файлы сюда или нажмите для выбора'
                      : `Добавить ещё (${files.length} из 10)`}
                  </div>
                  <div className="dz-meta">PDF · DWG · DXF · STEP · STL · DOC · XLS · ZIP — до 25 МБ каждый</div>
                </div>
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple
                  accept={ACCEPT}
                  onChange={(e) => { addFiles(e.target.files); e.target.value = ''; }}
                  style={{ display: 'none' }}
                />
              </div>

              {files.length > 0 && (
                <ul className="file-list">
                  {files.map((f, i) => (
                    <li className="file-item" key={i}>
                      <span className="file-ext">{extOf(f.name).slice(0, 4)}</span>
                      <span className="file-name" title={f.name}>{f.name}</span>
                      <span className="file-size">{fmtSize(f.size)}</span>
                      <button
                        type="button"
                        className="file-remove"
                        onClick={() => removeFile(i)}
                        aria-label={`Удалить ${f.name}`}
                      >×</button>
                    </li>
                  ))}
                </ul>
              )}
            </div>
            <div className="form-submit">
              <button type="submit" className="btn btn-primary">
                {sent ? '✓ Заявка отправлена' : 'Отправить заявку'}
                {!sent && <span className="arrow">→</span>}
              </button>
              <span className="form-note">
                Отправляя форму, вы соглашаетесь на обработку персональных данных.
              </span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

// ───── FOOTER ─────
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <a href="#" className="nav-logo" style={{ marginBottom: 16 }}>
              <span className="mark">МК</span>
              <div>
                <div>ТД МКПП</div>
                <div className="sub">Торговый Дом</div>
              </div>
            </a>
            <p style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: '36ch', marginTop: 16 }}>
              Механо-Кузнечно-Прессовое производство.
              Поковки методами штамповки и свободной ковки с 2013 года.
            </p>
          </div>
          <div>
            <h6>Разделы</h6>
            <ul>
              <li><a href="#capabilities">Возможности</a></li>
              <li><a href="#calculator">Калькулятор</a></li>
              <li><a href="#parts">Каталог</a></li>
              <li><a href="#equipment">Оборудование</a></li>
              <li><a href="#about">О компании</a></li>
            </ul>
          </div>
          <div>
            <h6>Контакты</h6>
            <ul>
              <li><a href="tel:+74912932771">+7 (4912) 93-27-71</a></li>
              <li><a href="tel:+79150442088">+7 (915) 044-20-88</a></li>
              <li><a href="mailto:v.antonov@td-mkpp.ru">v.antonov@td-mkpp.ru</a></li>
              <li><a href="mailto:antonova.i@td-mkpp.ru">antonova.i@td-mkpp.ru</a></li>
            </ul>
          </div>
          <div>
            <h6>Адрес</h6>
            <ul>
              <li>390042 г. Рязань</li>
              <li>ул. Станкозаводская, 7 лит Н</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© ТД «МКПП» · 2013–{new Date().getFullYear()}</span>
          <span>Все права защищены</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Marquee, VideoSection, Capabilities, PartsCatalog, Equipment, MaterialsSection, Process, About, FAQ, MapSection, Contact, Footer });
