/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
 */

import { 
  Sprout, 
  Leaf, 
  BarChart3, 
  ShieldAlert, 
  Droplet, 
  ThermometerSnowflake, 
  ThermometerSun, 
  FlaskConical, 
  Zap, 
  CheckCircle2, 
  ChevronRight, 
  FileText,
  Phone,
  Mail,
  MapPin,
  TrendingUp,
  Boxes,
  Microscope,
  Info,
  BadgeCheck,
  ExternalLink,
  ShieldCheck,
  X,
  Send,
  Loader2,
  Truck,
  Factory,
  Snowflake,
  Sun,
  Flame,
  Youtube,
  Lock,
  Unlock,
  Copy,
  Trash2,
  Plus,
  ArrowLeft,
  AlertCircle,
  RefreshCw
} from "lucide-react";
import React, { useState, useEffect, useRef } from "react";
import { 
  motion, 
  useScroll, 
  useTransform,
  AnimatePresence
} from "motion/react";

// --- Components ---

const LeadModal = ({ isOpen, onClose }: { isOpen: boolean, onClose: () => void }) => {
  const [formData, setFormData] = useState({ name: "", email: "", phone: "", comment: "" });
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("loading");
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const blogerId = urlParams.get('blogerId') || '';
      const utmTags = {
        utm_source: urlParams.get('utm_source') || '',
        utm_medium: urlParams.get('utm_medium') || '',
        utm_campaign: urlParams.get('utm_campaign') || '',
        utm_content: urlParams.get('utm_content') || '',
        utm_term: urlParams.get('utm_term') || ''
      };

      const response = await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...formData,
          blogerId,
          utmTags
        }),
      });
      if (response.ok) {
        setStatus("success");
        if (typeof (window as any).gtag === 'function') {
          (window as any).gtag('event', 'form_submit', {
            'event_category': 'Engagement',
            'event_label': 'Lead Form'
          });
        }
        setTimeout(onClose, 2000);
      } else {
        const errorData = await response.json();
        console.error("Lead submission failed:", errorData);
        setStatus("error");
      }
    } catch (err) {
      console.error("Network error during lead submission:", err);
      setStatus("error");
    }
  };

  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-brand-ink/60 backdrop-blur-sm overflow-y-auto"
          onClick={(e) => {
            if (e.target === e.currentTarget) onClose();
          }}
        >
          <motion.div 
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            className="bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden relative my-auto"
            onClick={(e) => e.stopPropagation()}
          >
            <button 
              onClick={onClose}
              className="absolute top-4 right-4 p-2 hover:bg-brand-bg rounded-full transition-colors text-brand-ink/70"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="p-8">
              <h3 className="font-serif text-2xl font-bold text-brand-ink mb-2">Надіслати запит</h3>
              <p className="text-sm text-brand-ink/80 mb-6 italic leading-relaxed">
                Ми підготуємо персональну пропозицію для вашого господарства.
              </p>

              {status === "success" ? (
                <div className="py-12 text-center space-y-4">
                  <div className="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto">
                    <CheckCircle2 className="w-8 h-8 text-brand-green" />
                  </div>
                  <p className="font-bold text-brand-ink">Заявку успішно надіслано!</p>
                  <p className="text-sm opacity-80">Ми зв'яжемося з вами найближчим часом.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-4">
                  <div className="space-y-1">
                    <label className="micro-label ml-4">Ваше ім'я</label>
                    <input 
                      required
                      type="text" 
                      value={formData.name}
                      onChange={e => setFormData({ ...formData, name: e.target.value })}
                      placeholder="Олександр Ковальчук"
                      className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-lg outline-none focus:border-brand-green transition-colors font-sans"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="micro-label ml-4">E-mail</label>
                    <input 
                      required
                      type="email" 
                      value={formData.email}
                      onChange={e => setFormData({ ...formData, email: e.target.value })}
                      placeholder="example@gmail.com"
                      className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-lg outline-none focus:border-brand-green transition-colors font-sans"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="micro-label ml-4">Телефон</label>
                    <input 
                      required
                      type="tel" 
                      value={formData.phone}
                      onChange={e => setFormData({ ...formData, phone: e.target.value })}
                      placeholder="+380"
                      className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-lg outline-none focus:border-brand-green transition-colors font-sans"
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="micro-label ml-4">Коментар / Культура</label>
                    <textarea 
                      value={formData.comment}
                      onChange={e => setFormData({ ...formData, comment: e.target.value })}
                      placeholder="Наприклад: Кукурудза, 200 га"
                      rows={3}
                      className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-lg outline-none focus:border-brand-green transition-colors font-sans resize-none"
                    />
                  </div>

                  {status === "error" && (
                    <p className="text-xs text-brand-red font-medium text-center italic">Помилка при відправці. Спробуйте пізніше.</p>
                  )}

                  <button 
                    disabled={status === "loading"}
                    className="w-full bg-brand-ink text-white py-4 rounded-lg font-bold text-sm tracking-widest uppercase flex items-center justify-center gap-2 hover:bg-brand-green transition-all shadow-xl shadow-brand-ink/10"
                  >
                    {status === "loading" ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />}
                    Надіслати
                  </button>
                </form>
              )}
            </div>
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

const OptimizedImage = ({ src, alt, className, title, width, height, priority = false, logoBlend = false }: any) => {
  const isWebPSupported = src.endsWith('.png') || src.endsWith('.jpg');
  const webpSrc = isWebPSupported ? src.replace(/\.(png|jpg)$/, '.webp') : null;
  
  return (
    <picture>
      {webpSrc && <source srcSet={webpSrc} type="image/webp" />}
      <img
        src={src}
        alt={alt}
        title={title}
        className={`${className} ${logoBlend ? 'logo-blend' : ''}`}
        width={width}
        height={height}
        loading={priority ? "eager" : "lazy"}
        decoding="async"
        referrerPolicy="no-referrer"
        {...(priority ? { fetchPriority: "high" } as any : {})}
      />
    </picture>
  );
};

const Navbar = () => (
  <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-bg/80 backdrop-blur-xl border-b border-brand-ink/5">
    <div className="max-w-7xl mx-auto px-4">
      <div className="h-20 flex items-center justify-between gap-8">
        {/* Logo Section */}
        <a href="#about" title="BioLamino — Повернутися на головну" className="flex items-center gap-3 shrink-0">
          <div className="bg-white p-2 rounded shadow-sm border border-brand-ink/5">
            <OptimizedImage 
              src="/MainLogoBioLAmino.png" 
              alt="BioLamino — Молекулярне живлення рослин" 
              title="BioLamino логотип" 
              className="h-8 w-auto" 
              width="140"
              height="32"
              logoBlend
            />
          </div>
          <div className="hidden sm:block">
            <div className="font-serif font-bold text-xl leading-none tracking-tighter text-brand-ink">BioLamino</div>
            <div className="text-[8px] uppercase font-bold tracking-[0.2em] text-slate-500">Молекулярний догляд за рослинами</div>
          </div>
        </a>

        {/* Navigation Links */}
        <div className="hidden lg:flex items-center gap-10 micro-label">
          <a href="#tech" title="Дізнатися про технологію молекулярного живлення" className="hover:text-brand-green transition-colors">Технологія</a>
          <a href="#products" title="Каталог продукції BioLamino" className="hover:text-brand-green transition-colors">Продукти</a>
          <a href="#docs" title="Офіційні протоколи випробувань та сертифікати" className="hover:text-brand-green transition-colors">Протоколи</a>
          <a href="#economy" title="Економічна ефективність використання добрив" className="hover:text-brand-green transition-colors">Економіка</a>
        </div>

        {/* Call CTA */}
        <div className="flex items-center gap-4">
          <div className="hidden md:block text-right">
            <div className="micro-label mb-1">Миттєва консультація</div>
            <a 
              href="tel:+380672952518" 
              title="Зателефонувати менеджеру BioLamino"
              className="text-sm font-bold text-brand-ink hover:text-brand-green transition-colors"
            >
              +38 (067) 295-25-18
            </a>
          </div>
          <a 
            href="tel:+380672952518" 
            title="Зателефонувати нам"
            className="bg-brand-green text-white px-6 py-3 rounded-full micro-label !text-white !tracking-widest hover:scale-105 active:scale-95 transition-all shadow-lg shadow-brand-green/20 flex items-center gap-2"
          >
            <Phone className="w-3.5 h-3.5" /> 
            <span className="hidden sm:inline">Зателефонувати</span>
            <span className="sm:hidden">Виклик</span>
          </a>
        </div>
      </div>
    </div>
  </nav>
);

const Hero = () => (
  <>
    <section id="about" className="relative min-h-[90vh] pt-32 pb-20 overflow-hidden flex items-center bg-brand-bg">
      <div className="max-w-7xl mx-auto px-4 relative z-10 grid lg:grid-cols-[1fr_380px] gap-12 items-center">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
        >
          <OptimizedImage 
            src="/MainLogoBioLAmino.png" 
            alt="BioLamino — преміальні органічні добрива" 
            title="BioLamino — Молекулярна енергія вашого врожаю" 
            className="h-20 w-auto mb-10 -ml-2" 
            width="350"
            height="80"
            priority
            logoBlend
          />
          <div className="flex gap-3 mb-6">
            <span className="micro-label bg-brand-ink/5 px-2 py-1 rounded inline-flex items-center gap-1">🌱 100% Природна синергія</span>
            <span className="micro-label bg-brand-ink/5 px-2 py-1 rounded inline-flex items-center gap-1">📋 Офіційне виробництво</span>
          </div>
          <h1 className="font-serif text-5xl md:text-8xl font-bold text-brand-ink leading-[1.05] mb-6 tracking-tight">
            Молекулярна енергія <br /><span className="text-brand-green">вашого врожаю.</span>
          </h1>
          <p className="text-xl text-brand-ink/80 mb-8 max-w-xl leading-relaxed font-sans">
            Перші в Україні преміальні органічні рідкі добрива з подвійною дією (Амінокислоти + Пептиди). 
            Знімають стрес за 2 години, живлять до 21 дня.
          </p>

          <div className="flex flex-col sm:flex-row gap-4 mb-12 relative z-20">
            <a 
              href="tel:+380672952518"
              title="Зателефонувати для консультації"
              className="bg-brand-green text-white px-8 py-4 rounded-full font-bold flex items-center justify-center gap-2 hover:bg-brand-green/90 transition-all font-sans shadow-xl shadow-brand-green/20"
            >
              <Phone className="w-5 h-5" /> Отримати консультацію
            </a>
            <button 
              onClick={(e) => {
                e.preventDefault();
                window.dispatchEvent(new CustomEvent('openLeadModal'));
              }}
              title="Відкрити форму запиту"
              className="bg-white text-brand-ink border border-brand-ink/10 px-8 py-4 rounded-full font-bold flex items-center justify-center gap-2 hover:bg-brand-bg transition-all font-sans"
            >
              <Mail className="w-5 h-5" /> Залишити заявку
            </button>
            <a 
              href="#docs"
              title="Дивитися звіти та протоколи випробувань"
              className="bg-transparent text-brand-ink border border-brand-ink/20 px-8 py-4 rounded-full font-bold flex items-center justify-center gap-2 hover:bg-brand-ink/5 transition-colors font-sans"
            >
              <FileText className="w-5 h-5" /> Протоколи випробувань
            </a>
          </div>
        </motion.div>

        <motion.div 
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1 }}
          className="bg-brand-ink text-white p-10 rounded-xl relative overflow-hidden shadow-2xl border border-white/5"
        >
          <div className="relative z-10 space-y-8">
            <div className="pl-6 border-l-2 border-brand-green">
              <div className="micro-label text-white/70 mb-2">Рівень 1: Швидкий старт</div>
              <div className="font-serif text-2xl mb-2">Вільні L-амінокислоти</div>
              <div className="text-[13px] text-white/80 font-sans italic">Проникнення за 2-6 годин. Стоп-стрес.</div>
            </div>
            <div className="pl-6 border-l-2 border-brand-gold">
              <div className="micro-label text-white/70 mb-2">Рівень 2: Тривалий захист</div>
              <div className="font-serif text-2xl mb-2">Олігопептиди</div>
              <div className="text-[13px] text-white/80 font-sans italic">Захист 14-21 день. Біо-транспорт.</div>
            </div>
          </div>
          <div className="absolute -bottom-10 -right-10 opacity-10 text-[180px] font-serif leading-none">🧬</div>
        </motion.div>
      </div>
    </section>

    {/* Brand Trust Bar */}
    <div className="bg-brand-bg border-y border-brand-ink/5 py-12">
      <div className="max-w-7xl mx-auto px-4 flex flex-wrap justify-center items-center gap-12 md:gap-24">
        <div className="flex flex-col items-center gap-2 group text-slate-700 hover:text-brand-ink transition-all">
          <OptimizedImage 
            src="/MainLogoBioLAmino.png" 
            alt="BioLamino — Глобальний бренд органічних добрив" 
            title="BioLamino — Офіційний виробник" 
            className="h-10 md:h-12 w-auto grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all" 
            width="140"
            height="48"
            logoBlend
          />
          <span className="micro-label leading-none">Глобальний бренд</span>
        </div>
        <div className="flex flex-col items-center gap-2 group text-slate-700 hover:text-brand-ink transition-all">
          <OptimizedImage 
            src="/ProductLogoGlyco-Froce.png" 
            alt="Біостимулятор Glyco-Force" 
            title="Glyco-Force — Антистресова технологія" 
            className="h-10 md:h-12 w-auto grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all" 
            width="48"
            height="48"
            logoBlend
          />
          <span className="micro-label leading-none">Антистресова технологія</span>
        </div>
        <div className="flex flex-col items-center gap-2 group text-slate-700 hover:text-brand-ink transition-all">
          <OptimizedImage 
            src="/ProductLogoHemo-Froce.png" 
            alt="Амінокислотний концентрат Hemo-Force" 
            title="Hemo-Force — Молекулярний ріст" 
            className="h-10 md:h-12 w-auto grayscale opacity-70 group-hover:grayscale-0 group-hover:opacity-100 transition-all" 
            width="48"
            height="48"
            logoBlend
          />
          <span className="micro-label leading-none">Молекулярний ріст</span>
        </div>
      </div>
    </div>
  </>
);

const PainPoints = () => (
  <section id="challenges" className="py-24 bg-brand-bg relative overflow-hidden">
    {/* Decorative Background Patterns */}
    <div className="absolute top-0 left-0 w-full h-full pointer-events-none opacity-[0.03]">
      <Leaf className="absolute top-10 left-10 w-64 h-64 -rotate-12" />
      <Leaf className="absolute bottom-10 right-10 w-96 h-96 rotate-45" />
      <Leaf className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] rotate-90" />
    </div>

    <div className="max-w-7xl mx-auto px-4 relative z-10">
      <div className="bg-brand-green rounded-[2rem] md:rounded-[3rem] p-8 md:p-32 mb-[-140px] md:mb-[-200px] pb-[200px] md:pb-[13rem] text-center relative overflow-hidden">
        {/* Subtle inner decor for the green block */}
        <div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full -translate-y-1/2 translate-x-1/2 blur-3xl pointer-events-none" />
        
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          className="relative z-10"
        >
          <span className="text-white/80 text-[11px] font-semibold mb-8 block uppercase tracking-[0.2em]">Виклики сезону</span>
          <h2 className="font-serif text-2xl md:text-5xl font-black text-white leading-[1.2] tracking-tight uppercase max-w-4xl mx-auto">
            Коли природа <br className="hidden md:block" /> випробовує на міцність
          </h2>
        </motion.div>
      </div>

      <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 relative px-4 md:px-0 z-20">
        {[
          { 
            title: <>Заморозки&nbsp;<span className="whitespace-nowrap">(-5°C)</span></>, 
            pain: "Розрив клітин льодом та загибель цвіту за ніч.", 
            benefit: "L-proline підвищує концентрацію соку, працюючи як природний антифриз.", 
            icon: <Snowflake className="w-8 h-8 text-blue-400" />,
            illustrationColor: "text-blue-400"
          },
          { 
            title: <>Посуха&nbsp;<span className="whitespace-nowrap">(+40°C)</span></>, 
            pain: "Зупинка фотосинтезу та стерилізація пилку.", 
            benefit: "Амінокислоти регулюють продихи, зберігаючи вологу всередині рослини.", 
            icon: <Sun className="w-8 h-8 text-orange-400" />,
            illustrationColor: "text-brand-gold"
          },
          { 
            title: "Гербіцидна яма", 
            pain: "Пригнічення росту та пожовтіння від агрохімії.", 
            benefit: "Пептиди миттєво запускають синтез ферментів для детоксикації.", 
            icon: <FlaskConical className="w-8 h-8 text-brand-green" />,
            illustrationColor: "text-brand-green"
          },
          { 
            title: "Опіки КАС", 
            pain: "Некрози листя після внесення азотних сумішей.", 
            benefit: "Швидка регенерація тканин та загоєння мікро-ран на листку.", 
            icon: <Flame className="w-8 h-8 text-red-500" />,
            illustrationColor: "text-red-500"
          },
        ].map((item, idx) => (
            <motion.div 
              key={idx} 
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ delay: idx * 0.1 }}
              className="bg-white rounded-[1.5rem] md:rounded-[2.5rem] shadow-[0_12px_32px_rgba(0,0,0,0.06)] border border-brand-ink/5 overflow-hidden flex flex-col h-full hover:shadow-[0_20px_48px_rgba(0,0,0,0.1)] transition-shadow"
            >
              {/* Card Header */}
              <div className="p-6 md:p-8 flex items-center justify-center gap-4 border-b border-brand-ink/5">
                <div className="shrink-0">{item.icon}</div>
                <h3 className="card-title text-center">{item.title}</h3>
              </div>

              {/* Content Body */}
              <div className="flex-1 flex flex-col">
                {/* Pain Block */}
                <div className="bg-[#F8F9F8] py-8 md:py-10 px-6 flex flex-col items-center flex-1 text-center border-b border-brand-ink/5">
                  <div className="micro-label text-slate-400 mb-4 md:mb-6">Наслідки без BioLamino</div>
                  
                  {/* Simplified Illustration Area */}
                  <div className="mb-6 md:mb-8 relative w-20 md:w-24 h-20 md:h-24 flex items-center justify-center">
                     <div className={`absolute inset-0 bg-current opacity-[0.05] rounded-full scale-150 blur-2xl ${item.illustrationColor}`} />
                     <Leaf className={`w-10 h-10 md:w-12 md:h-12 opacity-40 ${item.illustrationColor}`} />
                     <ShieldAlert className="absolute -top-1 -right-1 w-5 h-5 md:w-6 md:h-6 text-red-500 opacity-80" />
                  </div>

                  <p className="card-body-text max-w-[220px]">
                    {item.pain}
                  </p>
                </div>

                {/* Action Block */}
                <div className="bg-[#EBF5EE] py-8 md:py-10 px-6 flex flex-col items-center flex-1 text-center">
                  <div className="micro-label text-brand-green/60 mb-4 md:mb-6">Дія BioLamino</div>
                  
                  {/* Action Illustration Area */}
                  <div className="mb-6 md:mb-8 relative w-20 md:w-24 h-20 md:h-24 flex items-center justify-center">
                     <div className="absolute inset-0 bg-brand-green/5 rounded-full scale-150 blur-2xl" />
                     <Leaf className="w-10 h-10 md:w-12 md:h-12 text-brand-green" />
                     <CheckCircle2 className="absolute -top-1 -right-1 w-5 h-5 md:w-6 md:h-6 text-brand-green" />
                  </div>

                  <p className="card-body-text max-w-[220px]">
                    {item.benefit}
                  </p>
                </div>
              </div>
            </motion.div>
        ))}
      </div>
    </div>
  </section>
);


const Technology = () => (
  <section id="tech" className="py-32 bg-brand-bg relative overflow-hidden">
    {/* Decorative DNA-like pattern */}
    <div className="absolute top-0 right-0 w-1/3 h-full bg-brand-green/5 -skew-x-12 translate-x-1/4 pointer-events-none" />

    <div className="max-w-7xl mx-auto px-4 relative z-10">
      <div className="grid lg:grid-cols-[1.2fr_1fr] gap-20 items-center">
        <div>
          <div className="mb-8">
            <span className="flex items-center gap-4 text-[11px] uppercase font-semibold tracking-[0.20em] text-brand-gold font-sans before:content-[''] before:w-12 before:h-px before:bg-brand-gold/40">
              Технологія майбутнього
            </span>
          </div>
          <h2 className="font-serif text-5xl md:text-8xl font-bold text-brand-ink leading-[0.9] tracking-tighter mb-12">
            Технологія <span className="italic text-brand-green">молекулярної</span> енергії
          </h2>
          
          <div className="grid sm:grid-cols-2 gap-12">
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-full bg-white border border-brand-ink/10 flex items-center justify-center shadow-sm">
                <FlaskConical className="w-5 h-5 text-brand-green" />
              </div>
              <p className="text-brand-ink/80 text-lg leading-relaxed font-sans italic border-l-2 border-brand-green/20 pl-6">
                Рослини витрачають до <span className="font-bold text-brand-ink">40% енергії</span> на розщеплення важкої хімії. Ми даємо їм "готове" живлення.
              </p>
            </div>
            <div className="space-y-4">
              <div className="w-10 h-10 rounded-full bg-white border border-brand-ink/10 flex items-center justify-center shadow-sm">
                <Microscope className="w-5 h-5 text-brand-gold" />
              </div>
              <p className="text-brand-ink/80 text-lg leading-relaxed font-sans italic border-l-2 border-brand-gold/20 pl-6">
                L-амінокислоти BioLamino розпізнаються клітиною як <span className="font-bold text-brand-ink">власні ресурси</span>.
              </p>
            </div>
          </div>
        </div>

        <div className="space-y-4">
          <div className="bg-white p-10 rounded-2xl border border-brand-ink/10 shadow-xl relative group hover:border-brand-green/30 transition-colors">
            <div className="absolute top-6 right-6 micro-label text-brand-green">Гідроліз v2.1</div>
            <h3 className="card-title mb-6">Ензимний гідроліз 55°C</h3>
            <div className="space-y-6 card-body-text leading-relaxed">
              <div className="flex gap-4">
                <div className="h-full w-px bg-brand-ink/10 mt-1" />
                <p>На відміну від агресивного хімічного розщеплення, ми зберігаємо цілісність <span className="text-brand-ink font-bold">100% живих L-амінокислот</span>.</p>
              </div>
              <div className="flex gap-4">
                <div className="h-full w-px bg-brand-ink/10 mt-1" />
                <p>Низькотемпературна обробка гарантує відсутність баластних солей та важких металів.</p>
              </div>
            </div>
            <div className="mt-8 pt-8 border-t border-brand-ink/5 flex items-center gap-10">
              <div>
                <div className="text-3xl font-bold text-brand-ink font-sans">100%</div>
                <div className="micro-label text-brand-ink/60">Біодоступність</div>
              </div>
              <div className="h-10 w-px bg-brand-ink/10" />
              <div>
                <div className="text-3xl font-bold text-brand-ink font-sans">55°C</div>
                <div className="micro-label text-brand-ink/60">Безпечний процес</div>
              </div>
            </div>
          </div>
          
          <div className="p-8 bg-brand-ink text-white rounded-2xl flex items-center gap-6">
            <div className="w-16 h-16 shrink-0 rounded-full bg-white/10 flex items-center justify-center">
              <Zap className="w-8 h-8 text-brand-gold" />
            </div>
            <div>
              <p className="text-sm font-sans italic opacity-80 leading-relaxed">
                "Ми використовуємо плазму крові та гемопротеїни як базу. Це вершина чистоти в органічному виробництві добрив."
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);


const Products = () => {
  const [zoomedImage, setZoomedImage] = useState<{ src: string; alt: string; title: string; product: 'glyco' | 'hemo' } | null>(null);

  useEffect(() => {
    if (!zoomedImage) return;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") setZoomedImage(null);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [zoomedImage]);

  const targetRef = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: targetRef,
    offset: ["start end", "end start"],
  });

  const yBg1 = useTransform(scrollYProgress, [0, 1], [-150, 150]);
  const yBg2 = useTransform(scrollYProgress, [0, 1], [150, -150]);
  const yLogo = useTransform(scrollYProgress, [0, 1], [-40, 40]);
  const yStats = useTransform(scrollYProgress, [0, 1], [20, -20]);
  const yText = useTransform(scrollYProgress, [0, 1], [10, -10]);

  return (
    <section ref={targetRef} id="products" className="py-24 bg-brand-bg relative overflow-hidden">
      {/* Decorative background elements with parallax */}
      <motion.div 
        style={{ y: yBg1 }}
        className="absolute top-10 right-10 opacity-10 pointer-events-none hidden lg:block will-change-transform"
      >
        <Leaf className="w-64 h-64 text-brand-green/20" />
      </motion.div>
      <motion.div 
        style={{ y: yBg2 }}
        className="absolute bottom-10 left-10 opacity-10 pointer-events-none hidden lg:block rotate-180 will-change-transform"
      >
        <Boxes className="w-48 h-48 text-brand-green/20" />
      </motion.div>

      <div className="max-w-7xl mx-auto px-4 relative z-10">
        <div className="mb-16">
          <h2 className="text-4xl font-black text-brand-ink mb-4 tracking-tight uppercase">Продукція BioLamino</h2>
          <p className="text-lg text-brand-ink/80 font-sans">Преміальні органічні концентрати для професійного агробізнесу.</p>
        </div>

        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
          {/* Glyco Force Card */}
          <div className="group bg-white rounded-[2.5rem] border border-brand-ink/5 p-8 md:p-10 shadow-2xl flex flex-col relative overflow-hidden transition-all duration-500">
            <div className="flex items-start justify-between mb-8">
              <div className="flex items-center gap-4">
                <motion.div style={{ y: yLogo }} className="w-16 h-16 shrink-0 relative z-10 will-change-transform">
                  <OptimizedImage 
                    src="/ProductLogoGlyco-Froce.png" 
                    alt="Біостимулятор Glyco-Force" 
                    title="Glyco-Force — Антистресант для рослин" 
                    className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-700" 
                    width="64"
                    height="64"
                    logoBlend
                  />
                </motion.div>
                <motion.div style={{ y: yText }} className="will-change-transform">
                  <h3 className="card-title text-3xl tracking-tighter leading-none mb-1 uppercase">GLYCO-FORCE</h3>
                  <div className="micro-label text-brand-ink/60 uppercase">Біостимулятор-антистресант</div>
                </motion.div>
              </div>
            </div>
            
            <motion.div style={{ y: yStats }} className="grid grid-cols-3 gap-4 mb-10 pb-8 border-b border-brand-ink/5 font-sans will-change-transform">
              <div className="text-center px-2">
                <div className="text-3xl font-black text-brand-green mb-1">171</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <Droplet className="w-3 h-3" /> г/л Актив
                </div>
              </div>
              <div className="text-center px-2 border-x border-brand-ink/5">
                <div className="text-3xl font-black text-brand-green mb-1">89</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <Boxes className="w-3 h-3" /> Аміно
                </div>
              </div>
              <div className="text-center px-2">
                <div className="text-3xl font-black text-brand-green mb-1">82</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <Zap className="w-3 h-3" /> Пептиди
                </div>
              </div>
            </motion.div>

            <motion.div style={{ y: yText }} className="flex gap-4 mb-6 items-center will-change-transform">
              <div className="flex -space-x-1 opacity-60">
                <ThermometerSun className="w-8 h-8 text-brand-ink" />
                <Leaf className="w-8 h-8 text-brand-green" />
              </div>
              <p className="card-body-text font-medium">
                Відновлення після хімічних опіків (КАС) та заморозків, утримання зав'язі при +40°C.
              </p>
            </motion.div>

            {/* Canister Container Info */}
            <div className="mb-6 p-5 bg-gradient-to-br from-brand-bg to-white border border-brand-ink/5 rounded-2xl flex flex-col sm:flex-row items-center gap-6 group/canister transition-all duration-300 hover:bg-white hover:shadow-xl hover:border-brand-green/20">
              <div 
                onClick={() => setZoomedImage({
                  src: "/глікофорс в банках 5 та 20 літрів.webp",
                  alt: "Оригінальна каністра Glyco-Force 5л та 20л",
                  title: "Glyco-Force",
                  product: 'glyco'
                })}
                className="w-full sm:w-32 h-44 shrink-0 flex items-center justify-center bg-white rounded-xl p-3 border border-brand-ink/5 relative overflow-hidden shadow-sm cursor-zoom-in group/img transition-all hover:border-brand-green/30"
                title="Натисніть для збільшення зображення каністри"
              >
                <div className="absolute inset-0 bg-brand-green/[0.02] opacity-100 group-hover/canister:bg-brand-green/[0.06] transition-colors duration-300" />
                <OptimizedImage 
                  src="/глікофорс в банках 5 та 20 літрів.webp" 
                  alt="Оригінальна каністра Glyco-Force 5 та 20 літрів" 
                  title="Оригінальна каністра Glyco-Force" 
                  className="max-h-full max-w-full object-contain relative z-10 transition-transform duration-500 group-hover/canister:scale-105"
                />
                <div className="absolute inset-0 bg-brand-ink/40 opacity-0 group-hover/img:opacity-100 transition-opacity duration-300 z-20 flex flex-col items-center justify-center text-white p-2">
                  <span className="text-[10px] font-bold uppercase tracking-widest bg-brand-green/90 px-2 py-1 rounded shadow-md font-sans">Збільшити</span>
                </div>
              </div>
              <div className="space-y-2 text-center sm:text-left">
                <span className="text-[10px] uppercase font-bold tracking-widest text-brand-green block leading-none">Тара та фасування</span>
                <h4 className="text-base font-bold text-brand-ink leading-tight">Каністри 5л, 20л та єврокуби 1000л</h4>
                <p className="text-[12px] text-brand-ink/80 leading-relaxed font-sans">
                  Зручні варіанти для будь-яких масштабів: роздрібні поставки у фірмових каністрах ємністю 5 та 20 літрів із герметичним захистом, а також оптові відвантаження в єврокубах (1000 літрів) для великих агрогосподарств.
                </p>
              </div>
            </div>

            <div className="mt-auto grid grid-cols-[1.5fr_1fr_1fr] gap-3">
              <a 
                href="/Протокол випробування  Glyco-Force Рідкий біостимулятор на основі ензимного гідролізату тваринних глікопротеїнів.pdf"
                target="_blank"
                title="Завантажити протокол випробувань Glyco-Force"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-brand-green border-2 border-brand-green/20 rounded-xl py-4 hover:bg-brand-green text-center hover:text-white transition-colors"
              >
                <FileText className="w-4 h-4" /> Протокол <br className="hidden sm:block" /> випробування
              </a>
              <a 
                href="tel:+380672952518"
                title="Миттєвий виклик менеджера"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-brand-green border-2 border-brand-green/20 rounded-xl py-4 hover:bg-brand-green text-center hover:text-white transition-colors"
              >
                <Phone className="w-4 h-4" /> Виклик
              </a>
              <button 
                onClick={() => window.dispatchEvent(new CustomEvent('openLeadModal'))}
                title="Замовити Glyco-Force"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-white bg-brand-green rounded-xl py-4 hover:bg-brand-ink transition-all shadow-lg shadow-brand-green/20"
              >
                <Send className="w-4 h-4" /> Заявка
              </button>
            </div>
          </div>

          {/* Hemo Force Card */}
          <div className="group bg-white rounded-[2.5rem] border border-brand-ink/5 p-8 md:p-10 shadow-2xl flex flex-col relative overflow-hidden transition-all duration-500">
            <div className="flex items-start justify-between mb-8">
              <div className="flex items-center gap-4">
                <motion.div style={{ y: yLogo }} className="w-16 h-16 shrink-0 relative z-10 will-change-transform">
                  <OptimizedImage 
                    src="/ProductLogoHemo-Froce.png" 
                    alt="Амінокислотний концентрат Hemo-Force" 
                    title="Hemo-Force — Молекулярне живлення" 
                    className="w-full h-full object-contain group-hover:scale-110 transition-transform duration-700" 
                    width="64"
                    height="64"
                    logoBlend
                  />
                </motion.div>
                <motion.div style={{ y: yText }} className="will-change-transform">
                  <h3 className="card-title text-3xl tracking-tighter leading-none mb-1 uppercase">HEMO-FORCE</h3>
                  <div className="micro-label text-brand-ink/60 uppercase">Амінокислотний концентрат</div>
                </motion.div>
              </div>
            </div>
            
            <motion.div style={{ y: yStats }} className="grid grid-cols-3 gap-4 mb-10 pb-8 border-b border-brand-ink/5 font-sans will-change-transform">
              <div className="text-center px-2">
                <div className="text-3xl font-black text-brand-green mb-1">229</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <Droplet className="w-3 h-3" /> г/л Актив
                </div>
              </div>
              <div className="text-center px-2 border-x border-brand-ink/5">
                <div className="text-3xl font-black text-brand-green mb-1">1.3</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <FlaskConical className="w-3 h-3" /> Тріпто
                </div>
              </div>
              <div className="text-center px-2">
                <div className="text-3xl font-black text-brand-green mb-1">371</div>
                <div className="flex items-center justify-center gap-1.5 micro-label text-brand-ink/70">
                  <Zap className="w-3 h-3" /> Fe мг/кг
                </div>
              </div>
            </motion.div>

            <motion.div style={{ y: yText }} className="flex gap-4 mb-6 items-center will-change-transform">
              <div className="flex -space-x-1 opacity-60">
                <Sprout className="w-8 h-8 text-brand-green" />
                <Leaf className="w-8 h-8 text-brand-ink" />
              </div>
              <p className="card-body-text font-medium">
                Потужний ріст кореневої системи, ліквідація хлорозу за 24 години, зняття дефіциту фосфору.
              </p>
            </motion.div>

            {/* Canister Container Info */}
            <div className="mb-6 p-5 bg-gradient-to-br from-brand-bg to-white border border-brand-ink/5 rounded-2xl flex flex-col sm:flex-row items-center gap-6 group/canister transition-all duration-300 hover:bg-white hover:shadow-xl hover:border-brand-green/20">
              <div 
                onClick={() => setZoomedImage({
                  src: "/гемофорс в банках 5 та 20 літрів.webp",
                  alt: "Оригінальна каністра Hemo-Force 5л та 20л",
                  title: "Hemo-Force",
                  product: 'hemo'
                })}
                className="w-full sm:w-32 h-44 shrink-0 flex items-center justify-center bg-white rounded-xl p-3 border border-brand-ink/5 relative overflow-hidden shadow-sm cursor-zoom-in group/img transition-all hover:border-brand-green/30"
                title="Натисніть для збільшення зображення каністри"
              >
                <div className="absolute inset-0 bg-brand-green/[0.02] opacity-100 group-hover/canister:bg-brand-green/[0.06] transition-colors duration-300" />
                <OptimizedImage 
                  src="/гемофорс в банках 5 та 20 літрів.webp" 
                  alt="Оригінальна каністра Hemo-Force 5 та 20 літрів" 
                  title="Оригінальна каністра Hemo-Force" 
                  className="max-h-full max-w-full object-contain relative z-10 transition-transform duration-500 group-hover/canister:scale-105"
                />
                <div className="absolute inset-0 bg-brand-ink/40 opacity-0 group-hover/img:opacity-100 transition-opacity duration-300 z-20 flex flex-col items-center justify-center text-white p-2">
                  <span className="text-[10px] font-bold uppercase tracking-widest bg-brand-green/90 px-2 py-1 rounded shadow-md font-sans">Збільшити</span>
                </div>
              </div>
              <div className="space-y-2 text-center sm:text-left">
                <span className="text-[10px] uppercase font-bold tracking-widest text-brand-green block leading-none">Тара та фасування</span>
                <h4 className="text-base font-bold text-brand-ink leading-tight">Каністри 5л, 20л та єврокуби 1000л</h4>
                <p className="text-[12px] text-brand-ink/80 leading-relaxed font-sans">
                  Зручні варіанти для будь-яких масштабів: роздрібні поставки у фірмових каністрах ємністю 5 та 20 літрів із герметичним захистом, а також оптові відвантаження в єврокубах (1000 літрів) для великих агрогосподарств.
                </p>
              </div>
            </div>

            <div className="mt-auto grid grid-cols-[1.5fr_1fr_1fr] gap-3">
              <a 
                href="/Протокол випробування Гемофорс 27032026  .pdf"
                target="_blank"
                title="Завантажити результати лабораторних випробувань Hemo-Force"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-brand-green border-2 border-brand-green/20 rounded-xl py-4 hover:bg-brand-green text-center hover:text-white transition-colors"
              >
                <FileText className="w-4 h-4" /> Протокол <br className="hidden sm:block" /> випробування
              </a>
              <a 
                href="tel:+380672952518"
                title="Зателефонувати у відділ продажу щодо Hemo-Force"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-brand-green border-2 border-brand-green/20 rounded-xl py-4 hover:bg-brand-green text-center hover:text-white transition-colors"
              >
                <Phone className="w-4 h-4" /> Виклик
              </a>
              <button 
                onClick={() => window.dispatchEvent(new CustomEvent('openLeadModal'))}
                title="Оформити заявку на покупку Hemo-Force"
                className="flex items-center justify-center gap-2 text-xs uppercase font-bold text-white bg-brand-green rounded-xl py-4 hover:bg-brand-ink transition-all shadow-lg shadow-brand-green/20"
              >
                <Send className="w-4 h-4" /> Заявка
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Lightbox / Zoom Modal */}
      <AnimatePresence>
        {zoomedImage && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className={`absolute inset-0 z-[100] flex flex-col items-center bg-brand-ink/95 backdrop-blur-md p-4 md:p-8 cursor-zoom-out select-none ${
              zoomedImage.product === 'glyco' 
                ? 'justify-start pt-16 sm:pt-24 md:justify-center md:pt-8' 
                : 'justify-end pb-16 sm:pb-24 md:justify-center md:pb-8'
            }`}
            onClick={() => setZoomedImage(null)}
          >
            {/* Container for Image & Labels */}
            <div className="relative flex flex-col items-center max-w-full" onClick={(e) => e.stopPropagation()}>
              
              {/* Close Button floating right on the image container */}
              <motion.button
                initial={{ opacity: 0, scale: 0.8 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.8 }}
                onClick={() => setZoomedImage(null)}
                className="absolute -top-4 -right-4 md:-top-5 md:-right-5 p-2 bg-brand-green text-white rounded-full transition-colors z-[160] shadow-xl border border-white/20 hover:bg-brand-ink cursor-pointer"
                title="Закрити зображення (Esc)"
              >
                <X className="w-5 h-5" />
              </motion.button>

              <motion.div
                initial={{ opacity: 0, scale: 0.9, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.9, y: 20 }}
                transition={{ type: "spring", damping: 25, stiffness: 180 }}
                className="bg-white p-4 md:p-6 rounded-[2rem] shadow-2xl flex items-center justify-center max-w-[95vw] sm:max-w-xl md:max-w-2xl max-h-[70vh] md:max-h-[75vh] relative overflow-hidden"
              >
                <img
                  src={zoomedImage.src}
                  alt={zoomedImage.alt}
                  className="max-w-full max-h-[60vh] md:max-h-[65vh] object-contain select-none cursor-zoom-out"
                  onClick={() => setZoomedImage(null)}
                />
              </motion.div>

              {/* Title / Description under the zoom container */}
              <motion.div 
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: 10 }}
                className="mt-6 text-center text-white space-y-1 px-4"
              >
                <p className="text-base font-serif text-brand-green uppercase font-black tracking-widest">{zoomedImage.title}</p>
                <p className="text-xs text-white/70 font-sans">{zoomedImage.alt}</p>
                <p className="text-[10px] text-white/40 uppercase tracking-widest pt-2 font-mono">Натисніть у будь-якому місці для закриття</p>
              </motion.div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </section>
  );
};

const Proofs = () => (
  <section id="docs" className="py-24 bg-brand-bg border-t border-brand-ink/10 relative overflow-hidden">
    {/* Background watermark */}
    <div className="absolute -right-20 top-20 text-[300px] font-serif opacity-[0.03] select-none pointer-events-none rotate-12">
      СЕРТИФІКОВАНО
    </div>

    <div className="max-w-7xl mx-auto px-4 relative z-10">
      <div className="flex flex-col md:flex-row md:items-end justify-between mb-20 gap-x-12 gap-y-8">
        <div className="max-w-3xl">
          <div className="mb-6">
            <span className="flex items-center gap-4 text-[11px] uppercase font-semibold tracking-[0.20em] text-brand-gold font-sans before:content-[''] before:w-12 before:h-px before:bg-brand-gold/40">
              Гарантія прозорості
            </span>
          </div>
          <h2 className="font-serif text-5xl md:text-7xl font-bold text-brand-ink leading-[1.1] italic mb-8">
            Офіційне <br />підтвердження
          </h2>
          <h3 className="font-serif text-3xl md:text-4xl font-bold text-slate-500">Експертний аналіз ринку</h3>
        </div>
        <p className="text-brand-ink/80 font-sans text-base max-w-sm italic leading-relaxed border-l-2 border-brand-green/20 pl-8 mb-2">
          Кожна партія продукції проходить лабораторний контроль та має сертифікат відповідності ДСТУ.
        </p>
      </div>

      <div className="grid md:grid-cols-2 gap-10">
        {[
          { 
            m: "Органічні препарати часто піняться та забивають форсунки.", 
            a: "BioLamino проходять 3-етапну мікрофільтрацію після гідролізу. Повна розчинність без осаду навіть у холодній воді.",
            statValue: "0.01%",
            statLabel: "залишок",
            subStat: "НА СИТІ",
            icon: <Droplet className="w-12 h-12 text-brand-green" />,
            factIcon: <div className="flex gap-2 items-center opacity-70">
              <div className="w-8 h-10 border border-white/40 rounded flex flex-col items-center justify-center p-1"><div className="w-full h-1 bg-white/20 mb-1" /><div className="w-full h-2 bg-white/40" /></div>
              <ChevronRight className="w-4 h-4 text-white/40" />
              <div className="w-8 h-10 border border-white/40 rounded flex flex-col items-center justify-center p-1"><div className="w-full h-1 bg-white/20 mb-1" /><div className="w-full h-4 bg-white/40" /></div>
              <ChevronRight className="w-4 h-4 text-white/40" />
              <div className="w-10 h-12 border-2 border-brand-green rounded flex flex-col items-center justify-center p-1"><div className="w-full h-1 bg-white/10 mb-1" /><div className="w-full h-8 bg-brand-green" /></div>
            </div>
          },
          { 
            m: "Синтетичні хелати стабільніші за органічні сполуки.", 
            a: "Наші пептиди — це природні хелатори, які не лише тримають мікроелементи, а й самі є джерелом живлення.",
            statValue: "100%",
            statLabel: "засвоєння",
            subStat: "КЛІТИНОЮ",
            icon: <Zap className="w-12 h-12 text-brand-green" />,
            factIcon: <div className="flex gap-4 items-center opacity-70">
              <Boxes className="w-8 h-8 text-white" />
              <ChevronRight className="w-4 h-4 text-white" />
              <Sprout className="w-12 h-12 text-brand-green" />
            </div>
          }
        ].map((item, idx) => (
          <div key={idx} className="bg-white rounded-[2.5rem] overflow-hidden shadow-[0_32px_80px_-20px_rgba(0,0,0,0.08)] border border-brand-ink/5 flex flex-col h-full transform transition-all hover:scale-[1.01] relative group">
            {/* Watermark Number */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-serif text-[240px] font-bold text-brand-ink/[0.03] leading-none select-none pointer-events-none z-0">
              0{idx + 1}
            </div>

            {/* Myth Section */}
            <div className="p-10 md:p-12 pb-6 relative z-10 flex-grow flex flex-col">
              <div className="bg-brand-green/5 rounded-[2rem] p-10 md:p-12 flex-grow flex flex-col items-center text-center">
                <div className="micro-label text-slate-400 mb-8">Популярний міф:</div>
                <div className="flex flex-col items-center gap-6">
                  <div className="p-5 bg-white rounded-[1.5rem] shadow-sm mb-2">
                    {item.icon}
                  </div>
                  <p className="card-body-text font-serif italic font-medium text-slate-700 text-center max-w-sm">{item.m}</p>
                </div>
              </div>
            </div>

            {/* Fact Section */}
            <div className="mt-auto bg-brand-ink text-white p-10 md:p-12 relative overflow-hidden">
              {/* Decoration Graphic */}
              <div className="absolute right-[-10%] top-1/2 -translate-y-1/2 w-64 h-64 bg-brand-green/10 rounded-full blur-[100px] pointer-events-none" />
              
              <div className="relative z-10 flex flex-col">
                <div className="micro-label text-brand-gold mb-6">Науковий факт:</div>
                <p className="card-body-text !text-white/90 text-lg mb-12 max-w-lg">{item.a}</p>
                
                <div className="flex items-end justify-between gap-6">
                  <div className="shrink-0 mb-2">
                    {item.factIcon}
                  </div>
                  
                  <div className="w-28 h-28 rounded-full border-4 border-brand-green flex flex-col items-center justify-center bg-brand-ink shadow-[0_0_40px_rgba(22,163,74,0.2)]">
                      <div className="font-sans font-bold text-3xl leading-none text-white">{item.statValue}</div>
                      <div className="micro-label text-brand-green mt-2 leading-none !text-[12px]">
                        {item.statLabel}
                      </div>
                      <div className="micro-label !text-white/40 mt-1.5 leading-none normal-case tracking-normal !text-[11px]">
                        {item.subStat}
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-24 relative pb-12">
        {/* Background Decorations */}
        <div className="absolute -left-20 top-1/2 -translate-y-1/2 opacity-10 pointer-events-none hidden lg:block">
          <Leaf className="w-48 h-48 text-brand-green rotate-45" />
        </div>
        <div className="absolute -right-10 top-0 opacity-10 pointer-events-none hidden lg:block">
          <Leaf className="w-32 h-32 text-brand-green -rotate-12" />
        </div>

        <div className="text-center mb-16 px-4">
          <h2 className="font-serif text-5xl md:text-7xl font-bold text-brand-ink mb-6">Сертифікація та прозорість</h2>
          <p className="text-xl text-brand-ink/80 font-sans italic max-w-2xl mx-auto leading-relaxed">
            Кожна партія продукції проходить <span className="font-bold text-brand-ink">лабораторний контроль</span>.
          </p>
        </div>

        <div className="max-w-4xl mx-auto bg-white rounded-[2.5rem] md:rounded-[3.5rem] shadow-[0_32px_64px_-16px_rgba(0,0,0,0.1)] border border-brand-ink/5 p-8 md:p-16 relative overflow-hidden mx-4">
          {/* Quality Badge */}
          <div className="absolute top-10 right-10">
            <div className="w-20 h-20 bg-brand-green rounded-full flex items-center justify-center shadow-2xl shadow-brand-green/40 ring-8 ring-brand-green/5">
              <BadgeCheck className="w-12 h-12 text-white" />
            </div>
          </div>

          <div className="flex items-center gap-5 mb-8">
            <h3 className="card-title text-4xl md:text-5xl">Документація</h3>
            <div className="p-2 border border-brand-ink/10 rounded-lg">
              <FileText className="w-8 h-8 text-brand-ink/30" />
            </div>
          </div>
          
          <p className="card-body-text mb-12 italic text-lg md:text-xl max-w-2xl">
            Ви можете завантажити повні технічні карти та протоколи випробувань за 2026 рік.
          </p>

          <div className="space-y-8">
            {[
              {
                name: "Glyco-Force.pdf",
                desc: "Технічна карта",
                size: "PDF 2.8 MB",
                url: "/Протокол випробування  Glyco-Force Рідкий біостимулятор на основі ензимного гідролізату тваринних глікопротеїнів.pdf"
              },
              {
                name: "Hemo-Force.pdf",
                desc: "Протокол випробувань 2026",
                size: "PDF 3.1 MB",
                url: "/Протокол випробування Гемофорс 27032026  .pdf"
              }
            ].map((file, i) => (
              <div key={i} className="flex flex-col sm:flex-row items-center justify-between p-8 rounded-[2rem] border border-brand-ink/5 bg-[#F9FBFA] hover:border-brand-green/20 hover:bg-white transition-all duration-500 group shadow-sm hover:shadow-xl">
                <div className="flex items-center gap-8 mb-6 sm:mb-0">
                  <div className="w-20 h-20 rounded-2xl bg-white border border-brand-ink/5 flex items-center justify-center shadow-sm group-hover:scale-110 transition-transform">
                    <div className="relative">
                      <FileText className="w-10 h-10 text-brand-green" />
                      <div className="absolute -bottom-1 -right-1 bg-brand-green text-[7px] text-white font-bold px-1 rounded border border-white">PDF</div>
                    </div>
                  </div>
                  <div>
                    <div className="card-title text-2xl group-hover:text-brand-green transition-colors">{file.name}</div>
                    <div className="card-body-text mt-1">{file.desc}</div>
                    <div className="micro-label text-brand-ink/60 mt-2">{file.size}</div>
                  </div>
                </div>
                <a 
                  href={file.url} 
                  target="_blank"
                  title={`Завантажити документ: ${file.name}`}
                  className="bg-brand-green text-white px-10 py-5 rounded-full font-bold text-[13px] uppercase tracking-[0.15em] flex items-center gap-4 hover:bg-brand-ink transition-all shadow-xl shadow-brand-green/20 group-hover:translate-x-2"
                >
                  ЗАВАНТАЖИТИ <TrendingUp className="w-4 h-4 rotate-90" />
                </a>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);


const Economy = () => (
  <section id="economy" className="py-24 bg-brand-ink text-white relative overflow-hidden">
    {/* Decorative background element */}
    <div className="absolute top-0 right-0 w-1/2 h-full bg-brand-green/5 -skew-x-12 translate-x-1/4" />
    
    <div className="max-w-7xl mx-auto px-4 relative z-10">
      <div className="grid lg:grid-cols-2 gap-16 items-center">
        <div>
          <div className="inline-block bg-brand-green px-4 py-1 rounded mb-6 micro-label !text-white">Економічне обґрунтування</div>
          <h2 className="font-serif text-4xl md:text-5xl font-bold mb-8 leading-tight">
            Більше активної речовини — <br />
            <span className="text-green-400">менша собівартість.</span>
          </h2>
          
          <div className="grid sm:grid-cols-2 gap-8 mb-10">
            <div className="p-6 bg-white/10 border border-white/20 rounded-xl relative">
              <div className="text-green-400 font-sans text-4xl font-bold mb-2">1.0 г</div>
              <div className="micro-label !text-white mb-3">Органіки на 1 грн</div>
              <p className="card-body-text !text-white/90">В препаратах BioLamino. Максимальна концентрація активу.</p>
              <div className="absolute top-4 right-4 text-2xl">🇺🇦</div>
            </div>
            <div className="p-6 bg-white/10 border border-white/20 rounded-xl relative">
              <div className="text-red-400 font-sans text-4xl font-bold mb-2">0.3 г</div>
              <div className="micro-label !text-white mb-3">Середній імпорт</div>
              <p className="card-body-text !text-white/90">Ви платите за воду та логістику через кордон.</p>
              <div className="absolute top-4 right-4 text-2xl opacity-90">🚢</div>
            </div>
          </div>

          <p className="font-serif italic text-xl text-white/80 leading-relaxed">
            «BioLamino — це не просто добриво, це інвестиція з окупністю 400%+. Кожна гривня працює безпосередньо на врожай.»
          </p>
        </div>

        <div className="bg-white p-10 md:p-16 rounded-2xl shadow-2xl text-brand-ink relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-brand-green/5 rounded-full -translate-y-1/2 translate-x-1/2" />
          
          <h3 className="card-title text-3xl mb-4 relative z-10">Розрахунок для вашого поля</h3>
          <p className="card-body-text mb-10 relative z-10 italic">
            Фермери зазвичай не люблять заповнювати форми. Зателефонуйте нам зараз — ми розрахуємо схему за 5 хвилин у телефонній розмові.
          </p>
          
          <div className="space-y-6 relative z-10">
            <a 
              href="tel:+380672952518" 
              className="flex flex-col items-center justify-center gap-4 bg-brand-green text-white p-10 rounded-xl hover:scale-[1.02] active:scale-95 transition-all shadow-2xl shadow-brand-green/20 group text-center"
            >
              <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition-transform">
                <Phone className="w-8 h-8 text-white" />
              </div>
              <div>
                <div className="text-3xl font-bold mb-1">+38 (067) 295-25-18</div>
                <div className="text-[10px] uppercase font-bold tracking-[0.3em] text-white/80">Пряма лінія зв'язку</div>
              </div>
            </a>

              <div className="grid grid-cols-2 gap-4">
                <button
                  onClick={() => window.dispatchEvent(new CustomEvent('openLeadModal'))}
                  className="col-span-2 p-4 bg-brand-bg border border-brand-ink/10 rounded-lg flex items-center justify-center gap-3 hover:bg-white transition-all micro-label !text-brand-ink"
                >
                  <Mail className="w-4 h-4" /> Залишити письмову заявку
                </button>
                <div className="p-4 bg-brand-bg border border-brand-ink/5 rounded-lg flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-brand-green/10 flex items-center justify-center shrink-0">
                    <CheckCircle2 className="w-4 h-4 text-brand-green" />
                  </div>
                  <span className="micro-label leading-tight !text-brand-ink/80">Миттєва відповідь</span>
                </div>
                <div className="p-4 bg-brand-bg border border-brand-ink/5 rounded-lg flex items-center gap-3">
                  <div className="w-8 h-8 rounded-full bg-brand-gold/10 flex items-center justify-center shrink-0">
                    <BarChart3 className="w-4 h-4 text-brand-gold" />
                  </div>
                  <span className="micro-label leading-tight !text-brand-ink/80">Точний розрахунок окупності</span>
                </div>
              </div>

            <p className="text-center micro-label !text-brand-ink/80 pt-4 tracking-[0.2em]">чи напишіть нам у месенджери</p>
          </div>
        </div>
      </div>
    </div>
  </section>
);


const B2B = () => {
  const [formData, setFormData] = useState({ name: "", company: "", email: "", phone: "", message: "" });
  const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus("loading");
    try {
      const urlParams = new URLSearchParams(window.location.search);
      const blogerId = urlParams.get('blogerId') || '';
      const utmTags = {
        utm_source: urlParams.get('utm_source') || '',
        utm_medium: urlParams.get('utm_medium') || '',
        utm_campaign: urlParams.get('utm_campaign') || '',
        utm_content: urlParams.get('utm_content') || '',
        utm_term: urlParams.get('utm_term') || ''
      };

      const response = await fetch("/api/leads", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: formData.name,
          email: formData.email,
          phone: formData.phone,
          comment: `[B2B] Компанія: ${formData.company}. Повідомлення: ${formData.message}`,
          blogerId,
          utmTags
        }),
      });
      if (response.ok) {
        setStatus("success");
        if (typeof (window as any).gtag === 'function') {
          (window as any).gtag('event', 'form_submit', {
            'event_category': 'Engagement',
            'event_label': 'B2B Form'
          });
        }
        setFormData({ name: "", company: "", email: "", phone: "", message: "" });
        setTimeout(() => setStatus("idle"), 3000);
      } else {
        setStatus("error");
      }
    } catch (error) {
      console.error(error);
      setStatus("error");
    }
  };

  return (
    <section id="b2b" className="py-24 bg-brand-bg px-4">
      <div className="max-w-7xl mx-auto">
        <div className="bg-white rounded-[3rem] shadow-[0_40px_100px_-20px_rgba(0,0,0,0.08)] border border-brand-ink/5 overflow-hidden relative">
          {/* Top Content */}
          <div className="p-12 md:p-20 lg:pr-[40%]">
            <div className="flex items-center gap-3 mb-10">
              <OptimizedImage 
                src="/MainLogoBioLAmino.png" 
                alt="BioLamino — B2B Партнерство" 
                title="BioLamino — Постачання IBC контейнерами" 
                className="h-8 w-auto" 
                width="140"
                height="32"
                logoBlend
              />
              <span className="font-serif font-bold text-xl text-brand-ink">BioLamino</span>
            </div>

            <h2 className="text-5xl md:text-7xl font-black text-brand-green tracking-tight uppercase mb-8 leading-none">B2B Партнерство</h2>
            
            <div className="space-y-6 max-w-2xl mb-12">
              <p className="text-xl md:text-2xl text-brand-ink/80 font-sans font-medium leading-relaxed">
                Постачаємо натуральні гідролізати кубовими об'ємами (IBC) для виробників РКД.
              </p>
              <p className="text-lg text-brand-ink/80 font-sans italic">
                Шукаєте преміальну основу? BioLamino — ваш технологічний фундамент.
              </p>
            </div>

            <a 
              href="tel:+380672952518" 
              title="Обговорити партнерські умови співпраці"
              className="inline-flex items-center justify-center bg-brand-green text-white px-12 py-6 rounded-full font-black text-xl hover:bg-brand-ink transition-all shadow-2xl shadow-brand-green/30 active:scale-95"
            >
              Обговорити партнерство
            </a>
          </div>

          {/* IBC Illustration */}
          <div className="absolute right-0 top-1/2 -translate-y-1/2 w-[35%] h-[70%] hidden lg:flex items-center justify-center pointer-events-none pr-12">
            <div className="relative w-full h-full">
              {/* Simplified IBC Grid Visual */}
              <div className="absolute inset-0 flex flex-col items-center justify-center translate-y-10 group">
                <div className="relative scale-125">
                  {/* 3 IBC Containers Stacked */}
                  <div className="w-48 h-40 border-4 border-brand-ink/10 bg-brand-green/5 rounded-lg relative mb-[-20px] ml-16 shadow-xl flex items-center justify-center overflow-hidden">
                    <div className="absolute bottom-0 w-full h-2/3 bg-brand-green/20" />
                    <Boxes className="w-12 h-12 text-brand-green opacity-20" />
                  </div>
                  <div className="flex gap-4">
                    <div className="w-48 h-40 border-4 border-brand-ink/10 bg-brand-green/5 rounded-lg relative shadow-xl flex items-center justify-center overflow-hidden">
                      <div className="absolute bottom-0 w-full h-1/2 bg-brand-green/20" />
                      <Boxes className="w-12 h-12 text-brand-green opacity-20" />
                    </div>
                    <div className="w-48 h-40 border-4 border-brand-ink/10 bg-brand-green/5 rounded-lg relative shadow-xl flex items-center justify-center overflow-hidden">
                      <div className="absolute bottom-0 w-full h-3/4 bg-brand-green/20" />
                      <Boxes className="w-12 h-12 text-brand-green opacity-20" />
                    </div>
                  </div>
                </div>
                {/* Floating Molecule Decor */}
                <div className="absolute -top-10 right-0 animate-bounce duration-[3000ms]">
                  <div className="w-8 h-8 rounded-full border-2 border-brand-green/50 bg-white" />
                  <div className="w-4 h-4 rounded-full border-2 border-brand-green/50 bg-white absolute -bottom-4 -left-2" />
                </div>
              </div>
              {/* Background Sprout Decors */}
              <Leaf className="absolute top-0 right-10 w-32 h-32 text-brand-green/5 -rotate-12" />
              <Leaf className="absolute bottom-0 left-0 w-24 h-24 text-brand-green/10 rotate-45" />
            </div>
          </div>

          {/* Bottom Section: Form & Info */}
          <div className="bg-[#F0F7F2] p-12 md:p-20 grid lg:grid-cols-[1.5fr_1fr] gap-20 items-end border-t border-brand-ink/5">
            {/* Partnership Form */}
            <form onSubmit={handleSubmit} className="space-y-8">
              <h3 className="card-title text-3xl uppercase mb-8">Письмовий запит</h3>
              <div className="grid sm:grid-cols-2 gap-6">
                <input 
                  type="text" 
                  placeholder="Ім'я" 
                  required
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="bg-white border-2 border-brand-green/20 rounded-2xl p-5 outline-none focus:border-brand-green transition-colors font-sans font-medium"
                />
                <input 
                  type="text" 
                  placeholder="Компанія" 
                  required
                  value={formData.company}
                  onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                  className="bg-white border-2 border-brand-green/20 rounded-2xl p-5 outline-none focus:border-brand-green transition-colors font-sans font-medium"
                />
                <input 
                  type="email" 
                  placeholder="Email" 
                  required
                  value={formData.email}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  className="bg-white border-2 border-brand-green/20 rounded-2xl p-5 outline-none focus:border-brand-green transition-colors font-sans font-medium"
                />
                <input 
                  type="tel" 
                  placeholder="Телефон" 
                  required
                  value={formData.phone}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  className="bg-white border-2 border-brand-green/20 rounded-2xl p-5 outline-none focus:border-brand-green transition-colors font-sans font-medium"
                />
                <textarea 
                  placeholder="Повідомлення" 
                  rows={3}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  className="bg-white border-2 border-brand-green/20 rounded-2xl p-5 outline-none focus:border-brand-green transition-colors font-sans font-medium sm:col-span-2 resize-none"
                />
              </div>
              
              <div className="flex flex-col sm:flex-row items-center gap-6">
                <button 
                  type="submit"
                  disabled={status === "loading"}
                  className="w-full sm:w-auto bg-brand-green text-white px-12 py-5 rounded-full font-black text-lg hover:bg-brand-ink transition-all shadow-xl shadow-brand-green/20 disabled:opacity-50"
                >
                  {status === "loading" ? <Loader2 className="w-6 h-6 animate-spin mx-auto" /> : "Надіслати запит"}
                </button>
                
                {status === "success" && (
                  <motion.div 
                    initial={{ opacity: 0, x: -10 }}
                    animate={{ opacity: 1, x: 0 }}
                    className="text-brand-green font-bold flex items-center gap-2"
                  >
                    <CheckCircle2 className="w-5 h-5" /> Дякуємо! Ваш запит надіслано.
                  </motion.div>
                )}
                {status === "error" && (
                  <div className="text-brand-red font-bold flex items-center gap-2">
                    <ShieldAlert className="w-5 h-5" /> Помилка. Спробуйте пізніше.
                  </div>
                )}
              </div>
            </form>

            {/* Info Features */}
            <div className="flex flex-wrap lg:flex-nowrap justify-between gap-12 lg:pb-5">
              <div className="text-center space-y-4">
                <div className="w-16 h-16 bg-white rounded-2xl shadow-lg flex items-center justify-center mx-auto ring-4 ring-brand-green/5">
                  <Truck className="w-8 h-8 text-brand-green" />
                </div>
                <div className="text-[11px] font-black uppercase tracking-widest leading-tight text-brand-ink">Швидка <br />доставка IBC</div>
              </div>
              <div className="text-center space-y-4">
                <div className="w-16 h-16 bg-white rounded-2xl shadow-lg flex items-center justify-center mx-auto ring-4 ring-brand-green/5">
                  <Factory className="w-8 h-8 text-brand-green" />
                </div>
                <div className="text-[11px] font-black uppercase tracking-widest leading-tight text-brand-ink">Виробництво <br />РКД</div>
              </div>
              <div className="text-center space-y-4">
                <div className="w-16 h-16 bg-white rounded-2xl shadow-lg flex items-center justify-center mx-auto ring-4 ring-brand-green/5">
                  <Microscope className="w-8 h-8 text-brand-green" />
                </div>
                <div className="text-[11px] font-black uppercase tracking-widest leading-tight text-brand-ink">Гарантована <br />якість</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="bg-brand-ink text-white pt-24 pb-12">
    <div className="max-w-7xl mx-auto px-4">
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-12 gap-y-16 mb-24">
        {/* Brand Column */}
        <div className="space-y-8">
          <div className="bg-brand-bg p-3 rounded shadow-inner inline-block mt-1">
            <OptimizedImage 
              src="/MainLogoBioLAmino.png" 
              alt="BioLamino — Глобальний бренд органічних добрив" 
              title="BioLamino — Виробництво в Україні" 
              className="h-10 w-auto" 
              width="175"
              height="40"
              logoBlend
            />
          </div>
          <div className="space-y-5">
            <h3 className="font-serif text-3xl font-bold tracking-tighter text-white">BioLamino</h3>
            <p className="text-sm text-white/85 leading-[1.6] font-sans italic font-normal">
              Преміальні органічні рішення для професійного агробізнесу. Енергія молекул, спрямована на результат.
            </p>
            <div className="flex items-center gap-4 pt-2">
              <a 
                href="https://www.youtube.com/@BioLamino" 
                target="_blank" 
                rel="noopener noreferrer"
                className="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center hover:bg-brand-green hover:text-white transition-all text-white/60"
                title="Підписуйтесь на наш YouTube"
              >
                <Youtube className="w-5 h-5" />
              </a>
              <a 
                href="https://www.tiktok.com/@biolamino" 
                target="_blank" 
                rel="noopener noreferrer"
                className="w-10 h-10 bg-white/5 rounded-full flex items-center justify-center hover:bg-brand-green hover:text-white transition-all text-white/60"
                title="Ми в TikTok"
              >
                <svg 
                  viewBox="0 0 24 24" 
                  fill="none" 
                  stroke="currentColor" 
                  strokeWidth="2" 
                  strokeLinecap="round" 
                  strokeLinejoin="round" 
                  className="w-5 h-5"
                >
                  <path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" />
                </svg>
              </a>
            </div>
          </div>
        </div>

        {/* Products Column */}
        <div className="space-y-8">
          <h3 className="micro-label !text-amber-400">Продукти</h3>
          <ul className="space-y-8 flex flex-col">
            <li>
              <a href="#products" title="Дивитися деталі про Glyco-Force" className="group block">
                <span className="block font-serif text-[1.25rem] font-bold group-hover:text-amber-400 transition-colors text-white mb-1">Glyco-Force</span>
                <span className="micro-label !text-white/70 leading-none">Біостимулятор-антистресант</span>
              </a>
            </li>
            <li>
              <a href="#products" title="Дивитися деталі про Hemo-Force" className="group block">
                <span className="block font-serif text-[1.25rem] font-bold group-hover:text-red-400 transition-colors text-white mb-1">Hemo-Force</span>
                <span className="micro-label !text-white/70 leading-none">Амінокислотний концентрат</span>
              </a>
            </li>
          </ul>
        </div>

        {/* Navigation Column */}
        <div className="space-y-8">
          <h3 className="micro-label !text-amber-400">Навігація</h3>
          <ul className="flex flex-col gap-4 font-sans text-sm text-white/90">
            <li><a href="#about" title="Перейти до розділу Про технологію" className="hover:text-white hover:opacity-100 opacity-80 transition-all duration-300">Про технологію</a></li>
            <li><a href="#tech" title="Дізнатися про молекулярний рівень" className="hover:text-white hover:opacity-100 opacity-80 transition-all duration-300">Молекулярний рівень</a></li>
            <li><a href="#economy" title="Економічна вигода використання" className="hover:text-white hover:opacity-100 opacity-80 transition-all duration-300">Економічна вигода</a></li>
            <li><a href="#docs" title="Дивитися сертифікати та протоколи" className="hover:text-white hover:opacity-100 opacity-80 transition-all duration-300">Офіційні протоколи</a></li>
            <li><a href="#b2b" title="Умови співпраці для дилерів та партнерів" className="hover:text-white hover:opacity-100 opacity-80 transition-all duration-300">B2B та партнерство</a></li>
          </ul>
        </div>

        {/* Contacts Column */}
        <div className="space-y-8">
          <h3 className="micro-label !text-amber-400">Контакти</h3>
          <div className="space-y-10">
            <div className="space-y-3">
              <p className="text-[13px] font-black text-white uppercase tracking-tight leading-tight">
                ТОВ «ЄВРО-КОМЕРС»
              </p>
              <p className="text-[12px] text-white/85 leading-[1.6] font-sans max-w-[240px]">
                80100, Україна, Львівська обл., Шептицький р-н, м. Шептицький, вул. Львівська, 19
              </p>
            </div>
            
            <div className="flex flex-col gap-5">
              <a 
                href="tel:+380672952518" 
                title="Зателефонувати в BioLamino"
                className="flex items-center gap-4 text-white hover:text-green-400 transition-colors font-bold text-2xl leading-none group"
              >
                <div className="w-10 h-10 rounded-full bg-green-400/10 flex items-center justify-center group-hover:bg-green-400/20 transition-colors shrink-0">
                  <Phone className="w-5 h-5 text-green-400" />
                </div>
                <span>+380 67 295 25 18</span>
              </a>
              <a 
                href="mailto:info@bioLamino.com" 
                title="Надіслати нам email"
                className="flex items-center gap-4 text-white hover:opacity-80 transition-opacity text-base font-sans group"
              >
                <div className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center group-hover:bg-white/10 transition-colors shrink-0 border border-white/5">
                  <Mail className="w-5 h-5" />
                </div>
                <span className="underline decoration-white/20 underline-offset-[4px] decoration-1 decoration-solid">info@bioLamino.com</span>
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Bar */}
      <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-baseline gap-6">
        <div className="text-[10px] uppercase font-bold tracking-[0.2em] text-white/70 font-sans">
          © {new Date().getFullYear()} BioLamino. Молекулярне живлення рослин.
        </div>
        <div className="flex gap-8 text-[10px] uppercase font-bold tracking-widest text-white/70">
          <span className="cursor-help hover:text-white transition-opacity">Оригінальне виробництво України</span>
          <span className="cursor-help hover:text-white transition-opacity">Сертифікована якість</span>
        </div>
      </div>
    </div>
  </footer>
);

// --- SEO Optimizer: Dynamically Toggle Search Indexing ---
const useNoIndex = () => {
  useEffect(() => {
    let meta = document.querySelector('meta[name="robots"]');
    const existed = !!meta;
    if (!meta) {
      meta = document.createElement('meta');
      meta.setAttribute('name', 'robots');
      document.head.appendChild(meta);
    }
    meta.setAttribute('content', 'noindex, nofollow');
    return () => {
      if (meta) {
        if (existed) {
          meta.setAttribute('content', 'index, follow');
        } else {
          meta.remove();
        }
      }
    };
  }, []);
};

// --- Hidden Master Panel for URL and Code Phrase Generation ---
const LabubuPanel = () => {
  useNoIndex();
  const [password, setPassword] = useState("");
  const [isAuthorized, setIsAuthorized] = useState(false);
  const [error, setError] = useState("");
  const [bloggers, setBloggers] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [newBloggerId, setNewBloggerId] = useState("");
  const [newBloggerName, setNewBloggerName] = useState("");
  const [copiedId, setCopiedId] = useState<string | null>(null);

  useEffect(() => {
    const savedPass = sessionStorage.getItem("labubu_panel_pass");
    if (savedPass === "Labubu@Biolam1n@") {
      setIsAuthorized(true);
      fetchBloggers(savedPass);
    }
  }, []);

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (password === "Labubu@Biolam1n@") {
      sessionStorage.setItem("labubu_panel_pass", password);
      setIsAuthorized(true);
      fetchBloggers(password);
    } else {
      setError("Невірний пароль доступу. Спробуйте ще раз.");
    }
  };

  const fetchBloggers = async (pass: string) => {
    setLoading(true);
    try {
      const res = await fetch("/api/bloggers", {
        headers: { "x-admin-password": pass }
      });
      if (res.ok) {
        const data = await res.json();
        setBloggers(Object.values(data));
      } else {
        setError("Помилка завантаження даних.");
      }
    } catch (err) {
      setError("Помилка з'єднання з девелопер сервером.");
    } finally {
      setLoading(false);
    }
  };

  const handleCreate = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newBloggerId.trim()) return;

    setError("");
    const pass = sessionStorage.getItem("labubu_panel_pass") || "";
    try {
      const res = await fetch("/api/bloggers", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-admin-password": pass
        },
        body: JSON.stringify({
          bloggerId: newBloggerId.trim().toLowerCase(),
          name: newBloggerName
        })
      });

      if (res.ok) {
        const newB = await res.json();
        setBloggers(prev => [newB, ...prev]);
        setNewBloggerId("");
        setNewBloggerName("");
      } else {
        const errData = await res.json();
        setError(errData.error || "Помилка додавання блогера.");
      }
    } catch (err) {
      setError("Помилка з'єднання з сервером.");
    }
  };

  const handleDelete = async (bloggerId: string) => {
    if (!confirm(`Ви дійсно бажаєте видалити блогера "${bloggerId}" та всю його статистику?`)) return;

    const pass = sessionStorage.getItem("labubu_panel_pass") || "";
    try {
      const res = await fetch("/api/bloggers/delete", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-admin-password": pass
        },
        body: JSON.stringify({ bloggerId })
      });

      if (res.ok) {
        setBloggers(prev => prev.filter(b => b.id !== bloggerId));
      } else {
        setError("Помилка видалення.");
      }
    } catch (e) {
      setError("Помилка з'єднання з сервером.");
    }
  };

  const handleCopy = (text: string, id: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    setTimeout(() => setCopiedId(null), 2000);
  };

  if (!isAuthorized) {
    return (
      <div className="min-h-screen bg-brand-bg flex items-center justify-center p-6 font-sans">
        <div className="bg-white p-8 md:p-10 rounded-[2rem] border border-brand-ink/10 shadow-2xl max-w-md w-full text-center space-y-6">
          <div className="w-16 h-16 bg-brand-gold/10 rounded-full flex items-center justify-center mx-auto text-brand-gold">
            <Lock className="w-8 h-8" />
          </div>
          <div className="space-y-2">
            <h1 className="font-serif text-2xl font-black tracking-tight text-brand-ink uppercase">Вхід до генератора</h1>
            <p className="text-xs text-brand-ink/60 font-sans">Панель формування посилань та промо-кампаній.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4 text-left">
            <div className="space-y-2">
              <label className="text-xs uppercase tracking-wider font-extrabold text-brand-ink/70">Пароль доступу</label>
              <input
                type="password"
                required
                value={password}
                onChange={e => setPassword(e.target.value)}
                placeholder="Введіть секретний пароль..."
                className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-xl outline-none focus:border-brand-green transition-colors font-sans text-sm"
              />
            </div>
            {error && (
              <p className="text-xs text-red-500 flex items-center gap-1.5 font-bold">
                <AlertCircle className="w-3.5 h-3.5 shrink-0" /> {error}
              </p>
            )}
            <button
              type="submit"
              className="w-full bg-brand-green hover:bg-brand-ink text-white font-bold py-3.5 px-6 rounded-xl transition-colors flex items-center justify-center gap-2 cursor-pointer shadow-md"
            >
              Підтвердити <Unlock className="w-4 h-4" />
            </button>
          </form>

          <a href="/" className="inline-block text-xs font-bold text-brand-green hover:underline">← Повернутися на сайт</a>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-brand-bg font-sans p-4 sm:p-8">
      <div className="max-w-7xl mx-auto space-y-8">
        <div className="bg-white rounded-[2rem] p-6 sm:p-8 border border-brand-ink/10 flex flex-col md:flex-row md:items-center justify-between gap-6 shadow-sm">
          <div className="space-y-2">
            <div className="flex items-center gap-3">
              <span className="bg-brand-green/10 text-brand-green px-3 py-1 rounded-full text-xs uppercase tracking-wider font-black font-mono">Генератор посилань</span>
              <a href="/" className="text-xs text-brand-green hover:underline flex items-center gap-1 font-bold">
                <ArrowLeft className="w-3 h-3" /> на Головну
              </a>
            </div>
            <h1 className="font-serif text-3xl font-black tracking-tight text-brand-ink uppercase">BioLamino • Конструктор реферальних посилань</h1>
            <p className="text-xs text-brand-ink/60 max-w-2xl leading-relaxed">
              Створюйте персональні ID для блогерів та автоматично генеруйте для них кодові фрази. Партнери зможуть відстежувати свою індивідуальну статистику самостійно.
            </p>
          </div>

          <div className="flex gap-3 shrink-0">
            <button
               onClick={() => {
                 sessionStorage.removeItem("labubu_panel_pass");
                 setIsAuthorized(false);
               }}
               className="bg-brand-ink/5 hover:bg-brand-ink/15 text-brand-ink font-bold text-xs py-3 px-5 rounded-xl transition-all flex items-center gap-2 cursor-pointer border border-brand-ink/10 shadow-sm"
            >
               Вийти з кабінету <Lock className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>

        <div className="bg-white rounded-[2rem] p-6 sm:p-8 border border-brand-ink/10 shadow-sm space-y-6">
          <h2 className="font-serif text-xl font-black text-brand-ink uppercase">Додати нового блогера / партнера</h2>
          
          <form onSubmit={handleCreate} className="grid grid-cols-1 md:grid-cols-3 gap-6 items-end">
            <div className="space-y-2">
              <label className="text-xs uppercase tracking-wider font-extrabold text-brand-ink/70">ID блогера у системі (лат. літери, цифри)</label>
              <input
                type="text"
                required
                value={newBloggerId}
                onChange={e => setNewBloggerId(e.target.value.replace(/[^a-zA-Z0-9_-]/g, ""))}
                placeholder="Приклад: agro_blogger"
                className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-xl outline-none focus:border-brand-green transition-colors font-mono text-sm"
              />
            </div>
            <div className="space-y-2">
              <label className="text-xs uppercase tracking-wider font-extrabold text-brand-ink/70">Ім'я блогера / партнерської лінії</label>
              <input
                type="text"
                value={newBloggerName}
                onChange={e => setNewBloggerName(e.target.value)}
                placeholder="Приклад: Павло Реферальна Лінія"
                className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-xl outline-none focus:border-brand-green transition-colors font-sans text-sm"
              />
            </div>
            <button
              type="submit"
              className="bg-brand-green hover:bg-brand-ink text-white font-bold h-[48px] rounded-xl transition-colors flex items-center justify-center gap-2 cursor-pointer shadow-md select-none"
            >
              <Plus className="w-5 h-5" /> Додати та згенерувати посилання
            </button>
          </form>

          {error && (
            <div className="p-4 bg-red-50 text-red-700 rounded-xl border border-red-100 text-xs font-bold flex items-center gap-2">
              <AlertCircle className="w-4 h-4 shrink-0" /> {error}
            </div>
          )}
        </div>

        <div className="bg-white rounded-[2rem] border border-brand-ink/10 shadow-sm overflow-hidden">
          <div className="p-6 border-b border-brand-bg bg-brand-bg/20 flex justify-between items-center">
            <h2 className="font-serif text-xl font-black text-brand-ink uppercase">Активні кампанії блогерів</h2>
            <button 
              onClick={() => fetchBloggers(sessionStorage.getItem("labubu_panel_pass") || "")}
              className="p-2 hover:bg-brand-bg rounded-lg text-brand-ink/70 hover:text-brand-ink transition-colors"
              title="Оновити статистику"
            >
              <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
            </button>
          </div>

          {loading && bloggers.length === 0 ? (
            <div className="p-12 text-center text-brand-ink/60 font-sans">
              <Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-brand-green" />
              Завантаження аналітики з бази...
            </div>
          ) : bloggers.length === 0 ? (
            <div className="p-12 text-center text-brand-ink/50 font-sans italic">
              Партнери відсутні. Створіть перший ID вище.
            </div>
          ) : (
            <div className="overflow-x-auto text-sm">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-brand-bg/60 border-b border-brand-ink/5 font-sans text-xs uppercase tracking-wider font-extrabold text-brand-ink/70">
                    <th className="px-6 py-4">Блогер ID / Опис</th>
                    <th className="px-6 py-4">Кодова фраза</th>
                    <th className="px-6 py-4 font-mono">Лендинг URL (blogerId)</th>
                    <th className="px-6 py-4 font-mono">Кабінет для Блогера</th>
                    <th className="px-6 py-4 text-center">Переходи</th>
                    <th className="px-6 py-4 text-center">Консульт / Дзвінки</th>
                    <th className="px-6 py-4 text-center">Заявки (Ліди)</th>
                    <th className="px-6 py-4 text-center">Конверсія (CR)</th>
                    <th className="px-6 py-4 text-right">Видалити</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-brand-bg text-xs">
                  {bloggers.map((blogger) => {
                    const trackingLink = `${window.location.origin}/?blogerId=${blogger.id}`;
                    const statsLink = `${window.location.origin}/blogger?code=${blogger.codePhrase}`;
                    const cvRate = blogger.visits ? ((blogger.leads / blogger.visits) * 100).toFixed(1) : "0.0";

                    return (
                      <tr key={blogger.id} className="hover:bg-brand-bg/20 transition-colors">
                        <td className="px-6 py-4">
                          <p className="font-extrabold text-brand-ink font-mono">{blogger.id}</p>
                          <p className="text-[10px] text-brand-ink/65">{blogger.name || 'Не вказано'}</p>
                        </td>
                        <td className="px-6 py-4 font-bold text-brand-green font-mono">
                          {blogger.codePhrase}
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-1.5">
                            <input 
                              type="text" 
                              readOnly 
                              value={trackingLink} 
                              className="bg-brand-bg/80 px-2 py-1 rounded text-[10px] border border-brand-ink/5 font-mono max-w-[140px]" 
                            />
                            <button
                              onClick={() => handleCopy(trackingLink, `${blogger.id}-track`)}
                              className="px-2 py-1 bg-brand-green/10 hover:bg-brand-green/20 text-brand-green rounded font-bold cursor-pointer font-sans text-[10px]"
                            >
                              {copiedId === `${blogger.id}-track` ? "Скоп." : "Коп."}
                            </button>
                          </div>
                        </td>
                        <td className="px-6 py-4">
                          <div className="flex items-center gap-1.5">
                            <input 
                              type="text" 
                              readOnly 
                              value={statsLink} 
                              className="bg-brand-bg/80 px-2 py-1 rounded text-[10px] border border-brand-ink/5 font-mono max-w-[140px]" 
                            />
                            <button
                              onClick={() => handleCopy(statsLink, `${blogger.id}-stats`)}
                              className="px-2 py-1 bg-brand-green/10 hover:bg-brand-green/20 text-brand-green rounded font-bold cursor-pointer font-sans text-[10px]"
                            >
                              {copiedId === `${blogger.id}-stats` ? "Скоп." : "Коп."}
                            </button>
                            <a 
                              href={statsLink} 
                              target="_blank" 
                              rel="noreferrer" 
                              className="p-1 hover:bg-brand-bg rounded text-brand-ink/65 hover:text-brand-ink"
                              title="Переглянути кабінет"
                            >
                              <ExternalLink className="w-3.5 h-3.5" />
                            </a>
                          </div>
                        </td>
                        <td className="px-6 py-4 text-center font-bold text-brand-ink font-mono text-sm">
                          {blogger.visits || 0}
                        </td>
                        <td className="px-6 py-4 text-center font-mono">
                          <span className="text-zinc-600 font-bold">{blogger.consultation_clicks || 0}</span>
                          <span className="text-brand-ink/30"> / </span>
                          <span className="text-brand-gold font-bold">{blogger.call_clicks || 0}</span>
                        </td>
                        <td className="px-6 py-4 text-center font-extrabold text-brand-green font-mono text-sm">
                          {blogger.leads || 0}
                        </td>
                        <td className="px-6 py-4 text-center font-bold font-mono text-indigo-600 text-[11px]">
                          {cvRate}%
                        </td>
                        <td className="px-6 py-4 text-right">
                          <button
                            onClick={() => handleDelete(blogger.id)}
                            className="p-1.5 text-red-500 hover:bg-red-50 hover:text-red-700 rounded-lg transition-colors cursor-pointer"
                            title="Видалити"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// --- Secure Cabinet of Blogger Statistics ---
const BloggerStatsPage = () => {
  useNoIndex();
  const [code, setCode] = useState("");
  const [blogger, setBlogger] = useState<any | null>(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const codeParam = urlParams.get("code");
    if (codeParam) {
      setCode(codeParam);
      fetchStats(codeParam);
    }
  }, []);

  const fetchStats = async (authCode: string) => {
    setLoading(true);
    setError("");
    try {
      const res = await fetch(`/api/blogger/stats?code=${encodeURIComponent(authCode.trim())}`);
      if (res.ok) {
        const data = await res.json();
        setBlogger(data);
      } else {
        setError("Кодова фраза не знайдена. Будь ласка, перевірте правильність вводу.");
      }
    } catch (e) {
      setError("Помилка з'єднання з девелопер сервером.");
    } finally {
      setLoading(false);
    }
  };

  const handleLogin = (e: React.FormEvent) => {
    e.preventDefault();
    if (!code.trim()) return;
    fetchStats(code);
  };

  const handleRefresh = () => {
    if (blogger && blogger.codePhrase) {
      fetchStats(blogger.codePhrase);
    }
  };

  if (loading && !blogger) {
    return (
      <div className="min-h-screen bg-brand-bg flex items-center justify-center p-6 font-sans">
        <div className="text-center space-y-3">
          <Loader2 className="w-10 h-10 animate-spin text-brand-green mx-auto" />
          <p className="text-brand-ink/70 font-bold text-sm">Завантаження статистики співпраці BioLamino...</p>
        </div>
      </div>
    );
  }

  if (!blogger) {
    return (
      <div className="min-h-screen bg-brand-bg flex items-center justify-center p-6 font-sans">
        <div className="bg-white p-8 md:p-10 rounded-[2rem] border border-brand-ink/10 shadow-2xl max-w-md w-full text-center space-y-6">
          <div className="w-16 h-16 bg-brand-green/10 rounded-full flex items-center justify-center mx-auto text-brand-green">
            <BarChart3 className="w-8 h-8" />
          </div>
          <div className="space-y-2">
            <h1 className="font-serif text-2xl font-black tracking-tight text-brand-ink uppercase leading-snug">Кабінет Партнера BioLamino</h1>
            <p className="text-xs text-brand-ink/65 font-sans leading-relaxed">
              Введіть секретну кодову фразу, щоб переглянути індивідуальну статистику переходів, кліків та лідів.
            </p>
          </div>

          <form onSubmit={handleLogin} className="space-y-4 text-left">
            <div className="space-y-2">
              <label className="text-xs uppercase tracking-wider font-extrabold text-brand-ink/70 flex items-center gap-1.5">Кодова фраза партнера</label>
              <input
                type="text"
                required
                value={code}
                onChange={e => setCode(e.target.value)}
                placeholder="Приклад: schedryi-kolos-24"
                className="w-full bg-brand-bg border border-brand-ink/10 px-4 py-3 rounded-xl outline-none focus:border-brand-green transition-colors font-mono text-sm"
              />
            </div>
            {error && (
              <p className="text-xs text-red-500 font-bold flex items-center gap-1.5">
                <AlertCircle className="w-3.5 h-3.5 shrink-0" /> {error}
              </p>
            )}
            <button
              type="submit"
              className="w-full bg-brand-green hover:bg-brand-ink text-white font-bold py-3.5 px-6 rounded-xl transition-colors flex items-center justify-center gap-2 cursor-pointer shadow-md text-sm select-none"
            >
              Переглянути звіт
            </button>
          </form>

          <a href="/" className="inline-block text-xs font-bold text-brand-green hover:underline">← На Лендинг BioLamino</a>
        </div>
      </div>
    );
  }

  const cvRate = blogger.visits ? ((blogger.leads / blogger.visits) * 100).toFixed(1) : "0.0";
  const trackingLink = `${window.location.origin}/?blogerId=${blogger.id}`;
  const totalClicks = (blogger.consultation_clicks || 0) + (blogger.call_clicks || 0);

  return (
    <div className="min-h-screen bg-brand-bg font-sans p-4 sm:p-8">
      <div className="max-w-4xl mx-auto space-y-8">
        
        <div className="bg-white rounded-[2rem] p-6 sm:p-8 border border-brand-ink/10 flex flex-col sm:flex-row items-center justify-between gap-6 shadow-sm">
          <div className="space-y-2 text-center sm:text-left">
            <div className="flex flex-wrap items-center justify-center sm:justify-start gap-2.5">
              <span className="bg-brand-green/10 text-brand-green px-3 py-1 rounded-full text-[10px] uppercase tracking-wider font-black font-mono">
                Кабінет партнера
              </span>
              <button
                onClick={() => setBlogger(null)}
                className="text-[11px] text-brand-ink/50 hover:text-brand-green hover:underline font-bold"
              >
                Змінити кабінет
              </button>
            </div>
            <h1 className="font-serif text-3xl font-black text-brand-ink uppercase tracking-tight">
              Статистика • {blogger.name || blogger.id}
            </h1>
            <p className="text-xs text-brand-ink/60">
              ID партнера в реферальній системі BioLamino: <span className="font-mono bg-brand-bg px-2 py-0.5 rounded font-bold border border-brand-ink/5">{blogger.id}</span>
            </p>
          </div>

          <button 
            onClick={handleRefresh}
            className="shrink-0 bg-brand-bg hover:bg-brand-green/10 text-brand-ink border border-brand-ink/10 font-bold text-xs py-3 px-6 rounded-xl transition-all flex items-center justify-center gap-2 cursor-pointer shadow-sm active:scale-95"
          >
            <RefreshCw className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`} /> Оновити показники
          </button>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">

          <div className="bg-white p-6 rounded-[2rem] border border-brand-ink/15 shadow-sm space-y-2">
            <p className="text-[10px] uppercase tracking-wider font-extrabold text-brand-ink/55">Унікальні Переходи</p>
            <div className="flex items-baseline gap-2">
              <p className="text-4xl font-black font-mono text-brand-ink">{blogger.visits || 0}</p>
            </div>
            <p className="text-[10px] text-brand-ink/50 italic leading-snug">Переходи по реферальному URL</p>
          </div>

          <div className="bg-white p-6 rounded-[2rem] border border-brand-ink/15 shadow-sm space-y-2">
            <p className="text-[10px] uppercase tracking-wider font-extrabold text-brand-ink/55">Кліки на контакти</p>
            <div className="flex items-baseline gap-2">
              <p className="text-4xl font-black font-mono text-brand-gold">{totalClicks}</p>
            </div>
            <p className="text-[10px] text-brand-ink/50 leading-snug font-sans">
              Консульт: <span className="font-bold">{blogger.consultation_clicks || 0}</span>, Дзвінок: <span className="font-bold">{blogger.call_clicks || 0}</span>
            </p>
          </div>

          <div className="bg-white p-6 rounded-[2rem] border border-brand-ink/15 shadow-sm space-y-2">
            <p className="text-[10px] uppercase tracking-wider font-extrabold text-brand-ink/55">Подано заявок (ліди)</p>
            <div className="flex items-baseline gap-2">
              <p className="text-4xl font-black font-mono text-brand-green">{blogger.leads || 0}</p>
            </div>
            <p className="text-[10px] text-brand-ink/50 italic leading-snug">Надіслано форм замовлення</p>
          </div>

          <div className="bg-white p-6 rounded-[2rem] border border-brand-ink/15 shadow-sm space-y-2">
            <p className="text-[10px] uppercase tracking-wider font-extrabold text-brand-ink/55">Конверсія переходів</p>
            <div className="flex items-baseline gap-2">
              <p className="text-4xl font-black font-mono text-indigo-600">{cvRate}%</p>
            </div>
            <p className="text-[10px] text-brand-ink/50 italic leading-snug">Відсоток переходу у заявки</p>
          </div>

        </div>

        <div className="bg-white rounded-[2rem] p-6 sm:p-8 border border-brand-ink/10 shadow-sm space-y-4">
          <h2 className="font-serif text-lg font-black text-brand-ink uppercase">Ваше персональне реферальне посилання</h2>
          <p className="text-xs text-brand-ink/70 leading-relaxed">
            Будь ласка, вкажіть це посилання у ваших відео, дописах або коментарях. Користувачі, які перейдуть на сайт за цим посиланням і залишать заявку або клікнуть кнопку контактів, будуть автоматично зараховані у вашу партнерську статистику.
          </p>
          <div className="flex flex-col sm:flex-row items-center gap-3">
            <input 
              type="text" 
              readOnly 
              value={trackingLink} 
              className="bg-brand-bg px-4 py-3 rounded-xl border border-brand-ink/10 font-mono text-xs w-full outline-none" 
            />
            <button
              onClick={() => {
                navigator.clipboard.writeText(trackingLink);
                alert("Персональне посилання успiшно скопiйовано!");
              }}
              className="w-full sm:w-auto bg-brand-green hover:bg-brand-ink text-white font-bold py-3.5 px-6 rounded-xl transition-colors cursor-pointer text-xs shrink-0 select-none text-center shadow"
            >
              Скопіювати
            </button>
          </div>
          <div className="pt-2 text-center select-none">
            <p className="text-[10px] text-brand-ink/40 font-bold uppercase tracking-widest font-mono">Дякуємо за ваш внесок у розвиток органічного землеробства з BioLamino!</p>
          </div>
        </div>

      </div>
    </div>
  );
};

export default function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  useEffect(() => {
    const handleLocationChange = () => {
      setCurrentPath(window.location.pathname);
    };
    window.addEventListener('popstate', handleLocationChange);
    return () => window.removeEventListener('popstate', handleLocationChange);
  }, []);

  // Capture referer / blogerId inbound traffic
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const urlBloggerId = urlParams.get('blogerId');
    if (urlBloggerId) {
      const normalized = urlBloggerId.trim().toLowerCase();
      sessionStorage.setItem('biolamino_blogger_id', normalized);
      localStorage.setItem('biolamino_blogger_id', normalized);
      
      const sessionKey = `biolamino_visited_${normalized}`;
      if (!sessionStorage.getItem(sessionKey)) {
        sessionStorage.setItem(sessionKey, 'true');
        fetch('/api/track/visit', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ blogerId: normalized })
        }).catch(err => console.error('Error tracking visit:', err));
      }
    }
  }, []);

  // Track buttons of interest (consultation, calls)
  useEffect(() => {
    const trackClick = (type: 'consultation' | 'call') => {
      const activeId = sessionStorage.getItem('biolamino_blogger_id') || localStorage.getItem('biolamino_blogger_id');
      if (activeId) {
        fetch('/api/track/click', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ blogerId: activeId, type })
        }).catch(err => console.error('Error tracking click:', err));
      }
    };

    const handleModalTriggered = () => {
      trackClick('consultation');
    };
    window.addEventListener('openLeadModal', handleModalTriggered);

    const handleDocClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement;
      const anchor = target.closest('a');
      if (anchor && anchor.href && anchor.href.startsWith('tel:')) {
        trackClick('call');
      }
    };
    document.addEventListener('click', handleDocClick);

    return () => {
      window.removeEventListener('openLeadModal', handleModalTriggered);
      document.removeEventListener('click', handleDocClick);
    };
  }, []);

  useEffect(() => {
    const handleOpen = () => setIsModalOpen(true);
    window.addEventListener('openLeadModal', handleOpen);
    return () => window.removeEventListener('openLeadModal', handleOpen);
  }, []);

  // Simple client-side router
  if (currentPath === "/labubu-panel") {
    return <LabubuPanel />;
  }

  if (currentPath === "/blogger") {
    return <BloggerStatsPage />;
  }

  return (
    <div className="min-h-screen font-sans bg-brand-bg text-brand-ink selection:bg-brand-gold selection:text-white">
      <Navbar />
      <main>
        <Hero />
        <div className="performance-optimized">
          <PainPoints />
          <Technology />
          <Products />
          <Proofs />
          <Economy />
          <B2B />
        </div>
      </main>
      <Footer />
      <LeadModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
    </div>
  );
}