// ZAO "FC" — Chemical products for wood protection
const { useState, useEffect, useMemo, useRef } = React;

const Icon = ({ path, size = 20, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...rest}>
    {path}
  </svg>
);

const I = {
  spark: <><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></>,
  arrowRight: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
  check: <polyline points="20 6 9 17 4 12"/>,
  x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
  plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
  minus: <line x1="5" y1="12" x2="19" y2="12"/>,
  compass: <><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></>,
  target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
  map: <><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></>,
  layers: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
  zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>,
  dollar: <><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></>,
  users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
  briefcase: <><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
  mic: <><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/></>,
  building: <><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M8 10h.01M16 10h.01M8 14h.01M16 14h.01"/></>,
  dot: <circle cx="12" cy="12" r="3" fill="currentColor"/>,
  clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
  calendar: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
  mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
  moon: <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>,
  sun: <><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></>,
  sliders: <><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></>,
  menu: <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
  truck: <><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
  package: <><line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" y1="22" x2="12" y2="12"/></>,
  shield: <><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></>,
  calculator: <><rect x="4" y="2" width="16" height="20" rx="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="14" strokeWidth="3"/><line x1="8" y1="14" x2="8" y2="14" strokeWidth="3"/><line x1="12" y1="14" x2="12" y2="14" strokeWidth="3"/><line x1="8" y1="10" x2="16" y2="10"/></>,
  chevronDown: <polyline points="6 9 12 15 18 9"/>,
};

// ----- CSS переменные для лесной темы -----
const surfaceAltLight = "#F0F7EE";
const surfaceAltDark = "#1A2E1E";

// ----- Цветовая тема: ЛЕСНАЯ (forest) -----
const colorTheme = {
  primary: "from-emerald-600 to-green-600",
  secondary: "from-emerald-700 to-green-600",
  gradient: "from-emerald-600 via-green-600 to-emerald-500",
  gradientBg: "from-emerald-100 to-green-100",
  gradientBgDark: "from-emerald-500/20 to-green-500/20",
  button: "bg-gradient-to-r from-emerald-700 to-green-700",
  buttonHover: "hover:bg-gradient-to-l from-emerald-700 to-green-700",
  text: "text-emerald-600",
  textHover: "text-emerald-700",
  light: "from-emerald-50 to-green-50",
  dark: "from-emerald-900/30 to-green-900/30",
  badge: "from-emerald-500 to-green-500",
  card: "from-emerald-800 via-green-800 to-emerald-700",
  accent: "from-emerald-900 via-green-900 to-emerald-800",
};

// ----- Компонент для обновления CSS переменных -----
function ThemeStyleUpdater({ dark }) {
  React.useEffect(() => {
    const root = document.documentElement;
    if (!dark) {
      root.style.setProperty("--surface-alt", surfaceAltLight);
    } else {
      root.style.setProperty("--surface-alt", surfaceAltDark);
    }
  }, [dark]);
  return null;
}

// ---------- Header ----------
function Header({ t, lang, onSetLang, dark, onSetDark }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const drawerRef = useRef(null);
  const hamburgerRef = useRef(null);
  const firstLinkRef = useRef(null);

  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);

  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  useEffect(() => {
    if (!menuOpen) return;
    const onClick = (e) => {
      if (
        drawerRef.current && !drawerRef.current.contains(e.target) &&
        hamburgerRef.current && !hamburgerRef.current.contains(e.target)
      ) {
        setMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", onClick);
    document.addEventListener("touchstart", onClick);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("touchstart", onClick);
    };
  }, [menuOpen]);

  useEffect(() => {
    if (menuOpen && firstLinkRef.current) {
      firstLinkRef.current.focus();
    }
  }, [menuOpen]);

  useEffect(() => {
    const mql = window.matchMedia("(min-width: 768px)");
    const onChange = (e) => { if (e.matches) setMenuOpen(false); };
    if (mql.addEventListener) mql.addEventListener("change", onChange);
    else mql.addListener(onChange);
    return () => {
      if (mql.removeEventListener) mql.removeEventListener("change", onChange);
      else mql.removeListener(onChange);
    };
  }, []);

  const closeDrawer = () => setMenuOpen(false);
  const toggleTheme = () => onSetDark(!dark);

  return (
    <header className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${scrolled || menuOpen ? "bg-[var(--surface)]/80 backdrop-blur-xl border-b border-[var(--border)] shadow-sm" : "bg-transparent"}`}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 lg:h-[72px]">
          <a href="#" className="flex items-center gap-2.5 shrink-0 min-w-0">
            <img src="/images/FK_logo.png" alt="ЗАО «ФК»" className="w-9 h-9 object-contain" />
            <span className="text-[14px] sm:text-[15px] font-bold tracking-tight text-[var(--fg)] whitespace-nowrap truncate">ЗАО «ФК»</span>
          </a>
          <nav className="hidden md:flex items-center gap-7">
            {t.nav.map(l => (
              <a key={l.label} href={l.href} className="text-sm font-medium text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">{l.label}</a>
            ))}
          </nav>
          <div className="flex items-center gap-2">
            <div className="flex items-center gap-0.5 rounded-full bg-[var(--surface-alt)] border border-[var(--border)] p-0.5 sm:mr-1" aria-label="Language">
              {["ru", "en"].map(l => (
                <button
                  key={l}
                  type="button"
                  onClick={() => onSetLang(l)}
                  aria-pressed={lang === l}
                  className={`px-2 sm:px-3 py-0.5 sm:py-1 text-[11px] sm:text-xs font-semibold rounded-full transition-all uppercase ${
                    lang === l
                      ? `${colorTheme.button} text-white shadow-sm`
                      : "text-[var(--fg-muted)] hover:text-[var(--fg)]"
                  }`}
                >
                  {l}
                </button>
              ))}
            </div>
            <button
              onClick={toggleTheme}
              className="hidden md:inline-flex items-center justify-center w-9 h-9 rounded-full bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] hover:bg-[var(--surface)] transition-all"
              aria-label="Toggle theme"
            >
              <Icon path={dark ? I.sun : I.moon} size={18} strokeWidth="2" />
            </button>
            <a href="#cta" className={`hidden md:inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-white rounded-lg ${colorTheme.button} ${colorTheme.buttonHover} transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5`}>
              {t.navCta}
            </a>
            <button
              ref={hamburgerRef}
              type="button"
              onClick={() => setMenuOpen(o => !o)}
              aria-expanded={menuOpen}
              aria-controls="mobile-drawer"
              aria-label={menuOpen ? "Close menu" : "Open menu"}
              className="md:hidden inline-flex items-center justify-center w-11 h-11 rounded-full text-[var(--fg)] hover:bg-[var(--surface-alt)] transition-colors"
            >
              <Icon path={menuOpen ? I.x : I.menu} size={22} strokeWidth="2.25" />
            </button>
          </div>
        </div>
      </div>
      <div
        id="mobile-drawer"
        ref={drawerRef}
        className={`md:hidden overflow-hidden transition-all duration-200 ease-out border-t border-[var(--border)] bg-[var(--surface)]/95 backdrop-blur-xl ${menuOpen ? "max-h-[80vh] opacity-100" : "max-h-0 opacity-0 border-transparent"}`}
        aria-hidden={!menuOpen}
      >
        <nav className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex flex-col">
          {t.nav.map((l, i) => (
            <a
              key={l.label}
              href={l.href}
              ref={i === 0 ? firstLinkRef : null}
              onClick={closeDrawer}
              className="block px-2 py-3 text-base font-semibold text-[var(--fg-secondary)] hover:text-[var(--fg)] border-b border-[var(--border)] last:border-b-0 min-h-[44px]"
            >
              {l.label}
            </a>
          ))}
          <button
            onClick={() => { toggleTheme(); closeDrawer(); }}
            className="mt-2 flex items-center justify-center gap-2 py-3 text-base font-semibold text-[var(--fg)] border-b border-[var(--border)] min-h-[44px]"
          >
            <Icon path={dark ? I.sun : I.moon} size={18} strokeWidth="2" />
            {dark ? "Светлая тема" : "Тёмная тема"}
          </button>
          <a
            href="#cta"
            onClick={closeDrawer}
            className={`mt-5 inline-flex items-center justify-center w-full py-3.5 text-base font-semibold text-white rounded-lg ${colorTheme.button} transition-all shadow-md min-h-[44px]`}
          >
            {t.navCta}
          </a>
        </nav>
      </div>
    </header>
  );
}

// ---------- Hero ----------
function Hero({ t }) {
  return (
    <section className="relative pt-24 sm:pt-28 pb-14 sm:pb-16 lg:pt-40 lg:pb-24 overflow-hidden">
      <div className="absolute inset-0 -z-10 pointer-events-none">
        <div className="absolute top-0 left-1/4 w-[600px] max-w-[90vw] h-[600px] max-h-[90vw] bg-emerald-300/30 rounded-full blur-3xl" />
        <div className="absolute top-20 right-1/4 w-[500px] max-w-[80vw] h-[500px] max-h-[80vw] bg-green-300/25 rounded-full blur-3xl" />
        <div className="absolute -bottom-20 left-1/3 w-[400px] max-w-[70vw] h-[400px] max-h-[70vw] bg-emerald-300/25 rounded-full blur-3xl" />
      </div>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl text-center mx-auto">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 mb-7 rounded-full bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg-secondary)] text-[13px] font-medium">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
            {t.hero.badge}
          </div>
          <h1 className="text-4xl sm:text-5xl lg:text-[76px] font-extrabold tracking-tight leading-[1.05] text-[var(--fg)]">
            {t.hero.h1pre}{" "}
            <span className={`bg-gradient-to-r ${colorTheme.gradient} bg-clip-text text-transparent`}>
              {t.hero.h1post}
            </span>
          </h1>
          <p className="mt-6 sm:mt-7 text-base sm:text-xl text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">
            {t.hero.lead}
          </p>
          <div className="mt-7 sm:mt-9 flex flex-col sm:flex-row items-stretch sm:items-center justify-center gap-3 sm:gap-4">
            <a href="#cta" className={`inline-flex items-center justify-center px-6 sm:px-8 py-3.5 sm:py-4 text-base font-semibold text-white rounded-lg ${colorTheme.button} ${colorTheme.buttonHover} transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 min-h-[44px]`}>
              {t.hero.ctaPrimary}<Icon path={I.arrowRight} size={16} strokeWidth="2.5" style={{ marginLeft: 8 }} />
            </a>
            <a href="#products" className={`inline-flex items-center justify-center px-6 sm:px-8 py-3.5 sm:py-4 text-base font-semibold text-white rounded-lg ${colorTheme.button} ${colorTheme.buttonHover} transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 min-h-[44px]`}>
              {t.hero.ctaSecondary}
            </a>
          </div>
          <div className="mt-10 flex flex-wrap justify-center gap-x-8 gap-y-3">
            {t.hero.meta.map((m, i) => (
              <div key={i} className="flex items-center gap-2 text-sm text-[var(--fg-muted)]">
                <span className="w-1 h-1 rounded-full bg-emerald-500" />
                {m}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Products ----------
function Products({ t, onOpenDetails }) {
  return (
    <section id="products" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface-alt)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.products.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.products.title}
          </h2>
          <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.products.sub}</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6">
          {t.products.items.map((p, i) => (
            <div key={i} className="group p-5 sm:p-6 rounded-2xl bg-[var(--surface)] border border-[var(--border)] hover:border-transparent hover:shadow-xl transition-all text-center">
              <div className={`w-12 h-12 rounded-xl bg-gradient-to-br ${colorTheme.gradientBg} dark:${colorTheme.gradientBgDark} flex items-center justify-center ${colorTheme.text} mx-auto mb-4`}>
                <Icon path={I.package} size={22} />
              </div>
              <h3 className="text-lg font-bold text-[var(--fg)] mb-2">{p.name}</h3>
              <p className="text-sm text-[var(--fg-secondary)] leading-relaxed mb-3">{p.shortDesc}</p>
              <div className="text-xs font-mono text-[var(--fg-muted)] mb-2">{p.tu}</div>
              <a href={p.certificateLink} className={`text-xs ${colorTheme.text} hover:${colorTheme.textHover} underline inline-block mb-2`}>
                {p.certificateLabel}
              </a>
              <p className={`text-sm font-semibold ${colorTheme.text} mb-3`}>{p.price}</p>
              <button
                onClick={() => onOpenDetails(p.id)}
                className={`inline-flex items-center gap-1 text-sm font-medium ${colorTheme.text} hover:${colorTheme.textHover} transition-colors`}
              >
                {t.products.detailsButton} <Icon path={I.arrowRight} size={14} strokeWidth="2.5" />
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Product Details ----------
function ProductDetails({ t, activeTab, setActiveTab, isOpen, setIsOpen, lang }) {
  const tabs = t.productDetails.tabs;
  const currentTab = tabs.find(tab => tab.id === activeTab);

  const closeDetails = () => {
    setIsOpen(false);
    setActiveTab(undefined);
  };

  if (!isOpen || activeTab === undefined || !currentTab) {
    return (
      <section id="details" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface)] scroll-mt-20">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-10 sm:mb-14">
            <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.productDetails.eyebrow}</p>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
              {t.productDetails.title}
            </h2>
            <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.productDetails.sub}</p>
          </div>
          <div className="rounded-2xl bg-[var(--surface-alt)] border border-[var(--border)] p-12 text-center">
            <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${colorTheme.gradientBg} dark:${colorTheme.gradientBgDark} flex items-center justify-center mx-auto mb-4`}>
              <Icon path={I.package} size={28} className={colorTheme.text} />
            </div>
            <p className="text-[var(--fg-secondary)] text-lg">
              {lang === 'ru' ? 'Нажмите "Подробнее" на карточке товара, чтобы увидеть характеристики' : 'Click "More details" on a product card to see specifications'}
            </p>
          </div>
        </div>
      </section>
    );
  }

  const content = currentTab.content;

  return (
    <section id="details" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface)] scroll-mt-20">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.productDetails.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.productDetails.title}
          </h2>
          <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.productDetails.sub}</p>
        </div>
        
        <div className="rounded-2xl border border-[var(--border)] bg-[var(--surface-alt)] overflow-hidden">
          <div className={`bg-gradient-to-r ${colorTheme.card} px-5 sm:px-6 py-4`}>
            <h3 className="text-xl sm:text-2xl font-bold text-white text-center">{currentTab.name}</h3>
          </div>
          <div className="p-5 sm:p-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
              <div className="space-y-3">
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Состав:</span> <span className="text-[var(--fg-secondary)]">{content.composition}</span></p>
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Область применения:</span> <span className="text-[var(--fg-secondary)]">{content.application}</span></p>
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Расход:</span> <span className="text-[var(--fg-secondary)]">{content.consumption}</span></p>
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Фасовка:</span> <span className="text-[var(--fg-secondary)]">{content.packaging}</span></p>
              </div>
              <div className="space-y-3">
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Срок годности:</span> <span className="text-[var(--fg-secondary)]">{content.shelfLife}</span></p>
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Условия хранения:</span> <span className="text-[var(--fg-secondary)]">{content.storage}</span></p>
                <p className="text-sm"><span className="font-semibold text-[var(--fg)]">Преимущества:</span> <span className="text-[var(--fg-secondary)]">{content.advantages}</span></p>
              </div>
            </div>
            <div className="mt-6 text-center pt-4 border-t border-[var(--border)]">
              <button
                onClick={closeDetails}
                className="inline-flex items-center gap-2 px-5 py-2 rounded-lg bg-[var(--surface)] border border-[var(--border)] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors text-sm"
              >
                <Icon path={I.x} size={14} strokeWidth="2.5" />
                {lang === 'ru' ? 'Свернуть' : 'Collapse'}
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Calculator ----------
function Calculator({ t }) {
  const [selectedProduct, setSelectedProduct] = useState(t.products.items[0]?.name || "");
  const [area, setArea] = useState("");
  const [treatmentType, setTreatmentType] = useState("planed");
  const [fireGroup, setFireGroup] = useState("I");
  const [khfMethod, setKhfMethod] = useState("surface");
  const [f403Method, setF403Method] = useState("transport");
  const [result, setResult] = useState(0);
  const [resultUnit, setResultUnit] = useState("кг");
  const [dryResult, setDryResult] = useState(0); // только для Фоскон-Кострома-Плюс

  const getNumericArea = () => {
    if (area === "" || area === null || area === undefined) return 0;
    const num = parseFloat(area);
    return isNaN(num) ? 0 : num;
  };

  React.useEffect(() => {
    const numericArea = getNumericArea();
    let calculated = 0;
    let unit = "кг";
    let calculatedDry = 0;

    if (numericArea === 0) {
      setResult(0);
      setResultUnit("—");
      setDryResult(0);
      return;
    }

    switch (selectedProduct) {
      case "Фоскон-Кострома-Плюс":
        // Расход раствора
        if (fireGroup === "I") {
          calculated = numericArea * 500; // г/м² раствора
        } else {
          calculated = numericArea * 300; // г/м² раствора
        }
        unit = "кг (раствор)";
        calculated = calculated / 1000;

        // Расход сухого порошка (30% от раствора)
        calculatedDry = calculated * 0.30;
        break;
        
      case "Фоскон 403":
        if (f403Method === "transport") {
          calculated = numericArea * 0.25;
        } else {
          calculated = numericArea * 0.75;
        }
        unit = "кг (на м³)";
        break;
        
      case "ХМ-32":
        if (khfMethod === "surface") {
          if (treatmentType === "planed") {
            calculated = numericArea * 450;
          } else {
            calculated = numericArea * 750;
          }
          unit = "кг";
          calculated = calculated / 1000;
        } else if (khfMethod === "soaking") {
          calculated = numericArea * 6;
          unit = "кг (на м³)";
        } else {
          calculated = numericArea * 14;
          unit = "кг (на м³)";
        }
        break;
        
      case "ХФ":
        if (khfMethod === "surface") {
          if (treatmentType === "planed") {
            calculated = numericArea * 450;
          } else {
            calculated = numericArea * 750;
          }
          unit = "кг";
          calculated = calculated / 1000;
        } else if (khfMethod === "soaking") {
          calculated = numericArea * 6;
          unit = "кг (на м³)";
        } else {
          calculated = numericArea * 12;
          unit = "кг (на м³)";
        }
        break;
        
      default:
        calculated = numericArea * 0.2;
        unit = "кг";
    }

    setResult(Math.round(calculated * 10) / 10);
    setResultUnit(unit);
    setDryResult(Math.round(calculatedDry * 10) / 10);
  }, [selectedProduct, area, treatmentType, fireGroup, khfMethod, f403Method]);

  const productOptions = t.products.items.map(p => p.name);
  const isFireProtect = selectedProduct === "Фоскон-Кострома-Плюс";
  const isF403 = selectedProduct === "Фоскон 403";
  const isDeepBioprotect = selectedProduct === "ХМ-32";
  const isKhf = selectedProduct === "ХФ";
  const showVolume = isF403 || (isKhf && khfMethod !== "surface") || (isDeepBioprotect && khfMethod !== "surface");

  // Количество мешков (для сухого порошка)
  const bagsNeeded = isFireProtect && dryResult > 0 ? Math.ceil(dryResult / 30) : 0;

  return (
    <section id="calculator" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface-alt)]">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.calculator.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.calculator.title}
          </h2>
          <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.calculator.sub}</p>
        </div>
        <div className="bg-[var(--surface)] rounded-2xl p-6 sm:p-8 border border-[var(--border)]">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-sm font-semibold text-[var(--fg)] mb-2">{t.calculator.productLabel}</label>
              <select
                value={selectedProduct}
                onChange={(e) => setSelectedProduct(e.target.value)}
                className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
              >
                {productOptions.map(p => (
                  <option key={p} value={p}>{p}</option>
                ))}
              </select>
            </div>
            
            <div>
              <label className="block text-sm font-semibold text-[var(--fg)] mb-2">
                {showVolume ? "Объём древесины (м³)" : "Площадь обработки (м²)"}
              </label>
              <input
                type="text"
                inputMode="decimal"
                value={area}
                onChange={(e) => {
                  const val = e.target.value;
                  if (val === "" || /^\d*\.?\d*$/.test(val)) {
                    setArea(val);
                  }
                }}
                placeholder="0"
                className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
              />
              <p className="text-xs text-[var(--fg-muted)] mt-1">
                Можно оставить пустым или ввести 0
              </p>
            </div>

            {/* Выбор способа нанесения для ХМ-32 и ХФ */}
            {(isDeepBioprotect || isKhf) && (
              <div>
                <label className="block text-sm font-semibold text-[var(--fg)] mb-2">Способ нанесения</label>
                <select
                  value={khfMethod}
                  onChange={(e) => setKhfMethod(e.target.value)}
                  className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="surface">Поверхностное нанесение (кисть/распыление)</option>
                  <option value="soaking">Длительное вымачивание (погружение)</option>
                  <option value="autoclave">Автоклавная пропитка</option>
                </select>
              </div>
            )}

            {/* Выбор типа обработки для Фоскон 403 */}
            {isF403 && (
              <div>
                <label className="block text-sm font-semibold text-[var(--fg)] mb-2">Тип обработки</label>
                <select
                  value={f403Method}
                  onChange={(e) => setF403Method(e.target.value)}
                  className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="transport">Транспортный антисептик (250 г/м³)</option>
                  <option value="capital">Капитальная защита (750 г/м³)</option>
                </select>
              </div>
            )}

            {/* Выбор типа древесины для поверхностного нанесения */}
            {((isDeepBioprotect || isKhf) && khfMethod === "surface") && (
              <div>
                <label className="block text-sm font-semibold text-[var(--fg)] mb-2">Тип обрабатываемой поверхности</label>
                <select
                  value={treatmentType}
                  onChange={(e) => setTreatmentType(e.target.value)}
                  className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="planed">Строганая древесина</option>
                  <option value="sawn">Пиленая древесина</option>
                </select>
              </div>
            )}

            {/* Выбор группы огнезащиты для Фоскон-Кострома-Плюс */}
            {isFireProtect && (
              <div>
                <label className="block text-sm font-semibold text-[var(--fg)] mb-2">Группа огнезащитной эффективности</label>
                <select
                  value={fireGroup}
                  onChange={(e) => setFireGroup(e.target.value)}
                  className="w-full p-3 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-[var(--fg)] focus:outline-none focus:ring-2 focus:ring-emerald-500"
                >
                  <option value="I">I группа (500 г/м² раствора)</option>
                  <option value="II">II группа (300 г/м² раствора)</option>
                </select>
              </div>
            )}

            {/* Дополнительная информация */}
            {isF403 && f403Method === "transport" && (
              <div className="md:col-span-2">
                <div className="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
                  <p className="text-sm text-emerald-800 dark:text-emerald-300">
                    🚚 Транспортный антисептик: 250 г/м³ (одна обработка).
                  </p>
                </div>
              </div>
            )}

            {isF403 && f403Method === "capital" && (
              <div className="md:col-span-2">
                <div className="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
                  <p className="text-sm text-emerald-800 dark:text-emerald-300">
                    🛡️ Капитальная защита: 750 г/м³ (2-3 слоя).
                  </p>
                </div>
              </div>
            )}

            {isFireProtect && (
              <div className="md:col-span-2">
                <div className="p-3 rounded-xl bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-700">
                  <p className="text-sm text-emerald-800 dark:text-emerald-300">
                    💡 Расход сухого порошка — 30% от расхода раствора. Мешки по 30 кг.
                  </p>
                </div>
              </div>
            )}
          </div>
          
          <div className={`mt-8 p-5 rounded-xl bg-gradient-to-r ${colorTheme.card} text-white text-center`}>
            <p className="text-sm font-medium opacity-90">{t.calculator.resultLabel}</p>
            <p className="text-4xl font-extrabold mt-1">
              {getNumericArea() === 0 ? "—" : `${result} ${resultUnit}`}
            </p>
            {isFireProtect && dryResult > 0 && (
				<>
					<p className="text-sm font-medium opacity-90 mt-2">Сухой порошок</p>
					<p className="text-2xl font-bold mt-1">
						{dryResult} кг 
						{bagsNeeded > 0 && (
							<span className="text-base font-normal opacity-90 block sm:inline sm:ml-2">
								(≈ {bagsNeeded} 
								{bagsNeeded === 1 ? ' мешок' : 
								bagsNeeded >= 2 && bagsNeeded <= 4 ? ' мешка' : 
								' мешков'} по 30 кг)
							</span>
						)}
					</p>
				</>
			)}
            <p className="text-xs opacity-80 mt-2">* Расчёт ориентировочный</p>
          </div>
          <div className="mt-6 text-center">
            <button
              onClick={() => {
                const numericArea = getNumericArea();
                document.getElementById('form-product').value = selectedProduct;
                document.getElementById('form-area').value = numericArea;
                document.getElementById('form-consumption').value = result;
                document.getElementById('product_calc').value = selectedProduct;
                document.getElementById('product_text').value = selectedProduct;
                document.getElementById('area_text').value = numericArea;
                let consumptionText = numericArea === 0 ? "не указан" : result + ' ' + resultUnit;
                if (isFireProtect && numericArea !== 0) {
                  consumptionText = `Раствор: ${result} кг, Порошок: ${dryResult} кг (≈ ${bagsNeeded} мешков)`;
                }
                if (isF403 && numericArea !== 0) {
                  consumptionText = result + ' ' + resultUnit + (f403Method === "transport" ? ' (транспортный)' : ' (капитальная)');
                }
                if ((isKhf || isDeepBioprotect) && numericArea !== 0) {
                  if (khfMethod === "surface") consumptionText = result + ' ' + resultUnit + ' (поверхностно)';
                  else if (khfMethod === "soaking") consumptionText = result + ' ' + resultUnit + ' (вымачивание)';
                  else consumptionText = result + ' ' + resultUnit + ' (автоклав)';
                }
                document.getElementById('consumption_text').value = consumptionText;
                document.getElementById('cta').scrollIntoView({ behavior: 'smooth' });
              }}
              className={`inline-flex items-center justify-center px-6 py-3 text-base font-semibold text-white rounded-lg ${colorTheme.button} ${colorTheme.buttonHover} transition-all shadow-md`}
            >
              {t.calculator.button}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Advantages ----------
function Advantages({ t }) {
  const icons = [I.shield, I.building, I.check, I.truck];
  return (
    <section id="advantages" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.advantages.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.advantages.title}
          </h2>
          <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.advantages.sub}</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-5">
          {t.advantages.items.map((a, i) => (
            <div key={i} className="p-5 sm:p-6 rounded-2xl bg-[var(--surface-alt)] border border-[var(--border)] hover:border-emerald-200 transition-all text-center">
              <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${colorTheme.gradientBg} dark:${colorTheme.gradientBgDark} flex items-center justify-center ${colorTheme.text} mx-auto mb-4 shadow-md`}>
                <Icon path={icons[i % icons.length]} size={24} />
              </div>
              <h3 className="text-lg font-bold text-[var(--fg)] mb-2">{a.title}</h3>
              <p className="text-sm text-[var(--fg-secondary)] leading-relaxed">{a.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- How to Order ----------
function HowToOrder({ t }) {
  return (
    <section id="order" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface-alt)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.order.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.order.title}
          </h2>
          <p className="mt-5 text-base sm:text-lg text-[var(--fg-secondary)] max-w-2xl mx-auto leading-relaxed">{t.order.sub}</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-6 lg:gap-8">
          {t.order.steps.map((s, i) => (
            <div key={i} className="relative p-6 sm:p-7 rounded-2xl bg-[var(--surface)] border border-[var(--border)] text-center">
              <div className={`absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full ${colorTheme.button} text-white flex items-center justify-center text-sm font-bold shadow-md`}>
                {i + 1}
              </div>
              <div className="mt-4 mb-4">
                <div className={`w-14 h-14 rounded-xl bg-gradient-to-br ${colorTheme.gradientBg} dark:${colorTheme.gradientBgDark} flex items-center justify-center ${colorTheme.text} mx-auto`}>
                  <Icon path={i === 0 ? I.mail : (i === 1 ? I.clock : I.truck)} size={24} />
                </div>
              </div>
              <h3 className="text-lg font-bold text-[var(--fg)] mb-2">{s.title}</h3>
              <p className="text-sm text-[var(--fg-secondary)] leading-relaxed">{s.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- About Company ----------
function AboutCompany({ t }) {
  return (
    <section id="about" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
          <div>
            <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.about.eyebrow}</p>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight mb-6">
              {t.about.title}
            </h2>
            <p className="text-base lg:text-lg text-[var(--fg-secondary)] leading-relaxed mb-6">{t.about.description}</p>
            <div className="grid grid-cols-2 gap-4 sm:gap-6">
              {t.about.stats.map((s, i) => (
                <div key={i} className="p-4 rounded-xl bg-[var(--surface-alt)] border border-[var(--border)] text-center">
                  <div className={`text-2xl sm:text-3xl font-extrabold bg-gradient-to-r ${colorTheme.primary} bg-clip-text text-transparent`}>{s.value}</div>
                  <div className="text-xs text-[var(--fg-muted)] mt-1">{s.label}</div>
                </div>
              ))}
            </div>
          </div>
          <div className={`bg-gradient-to-br ${colorTheme.accent} rounded-2xl p-8 text-white shadow-xl`}>
            <div className="text-6xl mb-4">🏭</div>
            <h3 className="text-2xl font-bold mb-3">{t.about.cardTitle}</h3>
            <p className="text-emerald-100 leading-relaxed">{t.about.cardText}</p>
            <div className="mt-6 pt-6 border-t border-white/20">
              <div className="text-sm font-medium opacity-80 mb-2">{t.about.emailLabel}</div>
              <a href={`mailto:${t.about.email}`} className="text-lg font-semibold hover:underline break-all">{t.about.email}</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Not This ----------
function NotThis({ t }) {
  return (
    <section className="py-14 sm:py-20 lg:py-28 bg-[var(--surface-alt)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.notThis.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">{t.notThis.title}</h2>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-5xl mx-auto">
          {t.notThis.items.map((it, i) => (
            <div key={i} className="p-5 sm:p-6 lg:p-7 rounded-2xl bg-[var(--surface)] border border-[var(--border)] flex gap-4 sm:gap-5">
              <div className="w-10 h-10 rounded-full bg-red-50 dark:bg-red-500/10 border border-red-100 dark:border-red-500/20 flex items-center justify-center text-red-500 shrink-0">
                <Icon path={I.x} size={18} strokeWidth="2.5" />
              </div>
              <div>
                <h3 className="text-base font-bold text-[var(--fg)] mb-1.5">{it.title}</h3>
                <p className="text-sm text-[var(--fg-secondary)] leading-relaxed">{it.description}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ({ t }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="py-14 sm:py-20 lg:py-28 bg-[var(--surface)]">
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-10 sm:mb-14">
          <p className={`text-sm font-semibold ${colorTheme.text} uppercase tracking-wide mb-3`}>{t.faq.eyebrow}</p>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-tight text-[var(--fg)] leading-tight">
            {t.faq.title}
          </h2>
        </div>
        <div className="space-y-3">
          {t.faq.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`rounded-xl border transition-all ${isOpen ? "bg-[var(--surface-alt)] border-emerald-200 dark:border-emerald-500/30" : "bg-[var(--surface-alt)] border-[var(--border)]"}`}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  className="w-full flex items-start justify-between gap-4 p-5 lg:p-6 text-left min-h-[56px]"
                >
                  <span className="text-base lg:text-lg font-bold text-[var(--fg)] leading-snug">{it.q}</span>
                  <span className={`w-8 h-8 rounded-full bg-[var(--surface)] border border-[var(--border)] flex items-center justify-center text-[var(--fg)] shrink-0 transition-transform ${isOpen ? "rotate-180" : ""}`}>
                    <Icon path={isOpen ? I.minus : I.plus} size={16} strokeWidth="2.5" />
                  </span>
                </button>
                {isOpen && (
                  <div className="px-5 lg:px-6 pb-6 pt-0 -mt-2">
                    <p className="text-sm lg:text-base text-[var(--fg-secondary)] leading-relaxed">{it.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA({ t }) {
  const [formSent, setFormSent] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const formData = new FormData(form);
    const response = await fetch('/send.php', { method: 'POST', body: formData });
    if (response.ok) {
      setFormSent(true);
      // Отправка события в Яндекс.Метрику (счётчик 109592018)
      if (typeof ym !== 'undefined') {
        ym(109592018, 'reachGoal', 'form_submit');
      }
    }
  };

  if (formSent) {
    return (
      <section id="cta" className="py-16 sm:py-20 lg:py-32 relative overflow-hidden">
        <div className={`absolute inset-0 bg-gradient-to-br ${colorTheme.accent}`} />
        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div className="bg-white/20 backdrop-blur rounded-2xl p-8 text-white">
            <svg className="w-16 h-16 mx-auto mb-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
            </svg>
            <h3 className="text-2xl font-bold mb-2">Спасибо за заявку!</h3>
            <p>Мы свяжемся с вами в ближайшее время.</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section id="cta" className="py-16 sm:py-20 lg:py-32 relative overflow-hidden">
      <div className={`absolute inset-0 bg-gradient-to-br ${colorTheme.accent}`} />
      <div className="absolute inset-0" style={{ background: "radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%)" }} />
      <div className="absolute inset-0" style={{ background: "radial-gradient(ellipse at bottom left, rgba(0,0,0,0.15), transparent 60%)" }} />
      <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-8">
          <div className="inline-flex items-center gap-2 px-3.5 py-1.5 mb-5 rounded-full bg-white/15 backdrop-blur border border-white/25 text-white text-[13px] font-medium">
            <Icon path={I.mail} size={14} strokeWidth="2.5" />
            1 запрос · 24ч ответ
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight">
            {t.cta.title}
          </h2>
          <p className="mt-4 text-lg text-emerald-100 max-w-2xl mx-auto">{t.cta.sub}</p>
        </div>

        <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 sm:p-8 border border-white/20">
          <form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <input type="hidden" name="product" id="form-product" />
            <input type="hidden" name="area" id="form-area" />
            <input type="hidden" name="consumption" id="form-consumption" />
            
            <div>
              <label className="block text-sm font-medium text-white mb-1">Ваше имя / Компания *</label>
              <input type="text" name="name" required className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Email *</label>
              <input type="email" name="email" required className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Телефон *</label>
              <input type="tel" name="phone" required className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Продукт</label>
              <input type="text" name="product_text" id="product_text" className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Площадь (м²)</label>
              <input type="text" name="area_text" id="area_text" className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Продукт из калькулятора</label>
              <input type="text" name="product_calc" id="product_calc" readOnly className="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white/70 cursor-default" />
            </div>
            <div>
              <label className="block text-sm font-medium text-white mb-1">Расход (кг)</label>
              <input type="text" name="consumption_text" id="consumption_text" readOnly className="w-full px-4 py-2 rounded-lg bg-white/10 border border-white/20 text-white/70 cursor-default" />
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-white mb-1">Комментарий</label>
              <textarea name="comment" rows="3" className="w-full px-4 py-2 rounded-lg bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50"></textarea>
            </div>

            <div className="md:col-span-2">
              <label className="flex items-start gap-2 text-sm text-white/80">
                <input type="checkbox" name="agreement" required className="mt-0.5 shrink-0" />
                <span>
                  Я даю согласие на обработку персональных данных в соответствии с 
                  <a href="/privacy-policy.html" target="_blank" className="underline hover:text-white ml-1">Политикой конфиденциальности</a>
                </span>
              </label>
              <p className="text-xs text-white/60 mt-1 ml-6">
                * Согласие требуется в соответствии с Федеральным законом № 152-ФЗ «О персональных данных»
              </p>
            </div>

            <div className="md:col-span-2">
              <button type="submit" className={`w-full py-3 px-6 rounded-lg text-white font-semibold ${colorTheme.button} ${colorTheme.buttonHover} transition-all shadow-lg`}>
                {t.cta.primary}
              </button>
            </div>
          </form>
          <p className="text-center text-sm text-emerald-200 mt-4">{t.cta.small}</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  return (
    <footer className="bg-gray-900 text-gray-400">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 sm:gap-8">
          <div className="col-span-1">
            <div className="flex items-center gap-2 mb-4">
              <img src="/images/FK_logo.png" alt="ЗАО «ФК»" className="w-9 h-9 object-contain" />
              <span className="text-base font-bold text-white tracking-tight">{t.footer.tag}</span>
            </div>
            <p className="text-sm text-gray-500 leading-relaxed max-w-xs">{t.footer.desc}</p>
          </div>
          {t.footer.cols.map((col, i) => (
            <div key={i}>
              <h4 className="text-sm font-semibold text-white mb-4">{col.title}</h4>
              <ul className="space-y-2.5">
                {col.links.map((l, j) => (
                  <li key={j}>
                    {l.href ? (
                      <a href={l.href} className="text-sm text-gray-500 hover:text-white transition-colors">{l.label}</a>
                    ) : (
                      <span className="text-sm text-gray-500">{l.label}</span>
                    )}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <div className="border-t border-gray-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex flex-col sm:flex-row justify-between items-center gap-3">
            <p className="text-xs text-gray-600">{t.footer.rights}</p>
            <a 
              href="/privacy-policy.html" 
              target="_blank" 
              className="text-xs text-gray-500 hover:text-white transition-colors"
            >
              Политика конфиденциальности
            </a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- App ----------
function App() {
  const [lang, setLang] = useState(() => {
    try {
      const saved = localStorage.getItem("landing-lang");
      if (saved === "ru" || saved === "en") return saved;
    } catch (e) {}
    return "ru";
  });
  const [dark, setDark] = useState(() => {
    try {
      const saved = localStorage.getItem("landing-dark");
      if (saved === "true" || saved === "false") return saved === "true";
    } catch (e) {}
    return true;
  });
  const [activeDetailsTab, setActiveDetailsTab] = useState(undefined);
  const [detailsOpen, setDetailsOpen] = useState(false);

  const t = useMemo(() => window.DATA[lang], [lang]);

  React.useEffect(() => {
    document.documentElement.classList.toggle("dark", dark);
    document.documentElement.setAttribute("lang", lang);
  }, [dark, lang]);

  React.useEffect(() => {
    try { localStorage.setItem("landing-lang", lang); } catch (e) {}
    try { localStorage.setItem("landing-dark", String(dark)); } catch (e) {}
  }, [lang, dark]);

  const handleOpenDetails = (productId) => {
    setActiveDetailsTab(productId);
    setDetailsOpen(true);
    setTimeout(() => {
      const detailsSection = document.getElementById("details");
      if (detailsSection) {
        const offset = 80;
        const elementPosition = detailsSection.getBoundingClientRect().top + window.pageYOffset;
        window.scrollTo({ top: elementPosition - offset, behavior: "smooth" });
      }
    }, 50);
  };

  if (!t) return <div className="p-10 text-center">Loading...</div>;

  return (
    <>
      <ThemeStyleUpdater dark={dark} />
      <Header t={t} lang={lang} onSetLang={setLang} dark={dark} onSetDark={setDark} />
      <main>
        <Hero t={t} />
        <Products t={t} onOpenDetails={handleOpenDetails} />
        <ProductDetails 
          t={t} 
          activeTab={activeDetailsTab} 
          setActiveTab={setActiveDetailsTab} 
          isOpen={detailsOpen} 
          setIsOpen={setDetailsOpen}
          lang={lang}
        />
        <Calculator t={t} />
        <Advantages t={t} />
        <HowToOrder t={t} />
        <AboutCompany t={t} />
        <NotThis t={t} />
        <FAQ t={t} />
        <FinalCTA t={t} />
      </main>
      <Footer t={t} />
    </>
  );
}

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