```react
import React, { useState, useEffect, useRef } from 'react';
import { 
  ShieldCheck, Leaf, ChevronDown, Check, Crown, Flame, 
  Mountain, FlaskConical, Sparkles, Activity, Link as LinkIcon, 
  QrCode, Camera, Mail, Phone, MapPin
} from 'lucide-react';

// --- Компонент анимации ---
const FadeIn = ({ children, delay = 0, direction = 'up', duration = 1 }) => {
  const [isVisible, setIsVisible] = useState(false);
  const domRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.unobserve(domRef.current);
        }
      });
    }, { threshold: 0.1 });
    
    if (domRef.current) observer.observe(domRef.current);
    return () => observer.disconnect();
  }, []);

  const getTransform = () => {
    switch(direction) {
      case 'up': return 'translateY(40px)';
      case 'down': return 'translateY(-40px)';
      case 'left': return 'translateX(40px)';
      case 'right': return 'translateX(-40px)';
      default: return 'translateY(40px)';
    }
  };

  return (
    <div
      ref={domRef}
      style={{
        opacity: isVisible ? 1 : 0,
        transform: isVisible ? 'none' : getTransform(),
        transition: `opacity ${duration}s cubic-bezier(0.2, 0.8, 0.2, 1) ${delay}s, transform ${duration}s cubic-bezier(0.2, 0.8, 0.2, 1) ${delay}s`
      }}
      className="will-change-transform"
    >
      {children}
    </div>
  );
};

export default function App() {
  return (
    <div className="min-h-screen bg-[#030205] text-[#e0e0e0] font-sans selection:bg-[#6b21a8] selection:text-white">
      
      {/* Навигация */}
      <nav className="fixed w-full z-50 top-0 transition-all duration-500 bg-[#030205]/80 backdrop-blur-xl border-b border-[#3b1c4a]/30">
        <div className="max-w-7xl mx-auto px-6 h-20 md:h-24 flex items-center justify-between">
          <div className="flex flex-col">
            <span className="text-xl md:text-2xl font-light tracking-[0.25em] text-white uppercase font-serif">
              Inca Trail
            </span>
            <span className="text-[9px] md:text-[10px] tracking-[0.3em] text-[#9b59b6] uppercase mt-1">
              Ecuador • Zamora
            </span>
          </div>
          <div className="hidden lg:flex gap-8 text-[11px] font-light tracking-[0.15em] uppercase text-neutral-400">
            <a href="#philosophy" className="hover:text-[#c39bd3] transition-colors duration-300">Концепция</a>
            <a href="#process" className="hover:text-[#c39bd3] transition-colors duration-300">Процесс</a>
            <a href="#comparison" className="hover:text-[#c39bd3] transition-colors duration-300">Профиль</a>
            <a href="#tzunki" className="hover:text-[#c39bd3] transition-colors duration-300">TZNK & Блокчейн</a>
          </div>
          <a href="#contacts" className="hidden md:inline-flex px-6 py-3 border border-[#6b21a8] text-[#c39bd3] text-xs font-light tracking-[0.15em] uppercase hover:bg-[#6b21a8] hover:text-white transition-all duration-500">
            Связь
          </a>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="relative min-h-screen flex flex-col justify-center items-center pt-24 pb-12 overflow-hidden">
        <div 
          className="absolute inset-0 z-0 bg-cover bg-center transform scale-105"
          style={{ 
            backgroundImage: "url('https://images.unsplash.com/photo-1620575306359-25f0a071cde2?q=80&w=2000&auto=format&fit=crop')",
            filter: "brightness(0.25) contrast(1.2) grayscale(40%)" 
          }}
        ></div>
        <div className="absolute inset-0 z-0 bg-gradient-to-b from-[#1a0b2e]/60 via-[#030205]/80 to-[#030205]"></div>
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] md:w-[800px] md:h-[800px] bg-[#6b21a8]/20 rounded-full blur-[120px] md:blur-[150px] pointer-events-none z-0"></div>
        
        <div className="relative z-10 max-w-5xl mx-auto px-6 text-center flex-grow flex flex-col justify-center">
          <FadeIn delay={0.2} duration={1.5}>
            <div className="inline-flex items-center gap-3 mb-8">
              <div className="w-6 md:w-8 h-[1px] bg-[#9b59b6]"></div>
              <p className="text-[#c39bd3] text-xs md:text-sm font-light tracking-[0.3em] uppercase">
                Абсолют Какао
              </p>
              <div className="w-6 md:w-8 h-[1px] bg-[#9b59b6]"></div>
            </div>
          </FadeIn>
          
          <FadeIn delay={0.5} duration={1.5}>
            <h1 className="text-4xl md:text-6xl lg:text-8xl font-serif text-white leading-[1.1] mb-8 font-light">
              Фиолетовое <span className="italic text-transparent bg-clip-text bg-gradient-to-r from-[#c39bd3] to-[#7d3c98]">Золото</span>
            </h1>
          </FadeIn>
          
          <FadeIn delay={0.8} duration={1.5}>
            <p className="text-base md:text-xl text-neutral-300 max-w-3xl mx-auto font-light leading-relaxed mb-16">
              Мы останавливаем время. Оригинальный Насиональ из Самора Чинчипе, 
              сохранивший первозданную биохимию и цвет истинной природы.
            </p>
          </FadeIn>
        </div>

        <FadeIn delay={1.1} duration={1.5}>
          <a href="#philosophy" className="relative z-10 flex items-center justify-center text-[#9b59b6] hover:text-white transition-colors duration-500 cursor-pointer p-4">
            <ChevronDown size={32} className="animate-bounce font-light" strokeWidth={1} />
          </a>
        </FadeIn>
      </section>

      {/* The Purple Philosophy */}
      <section id="philosophy" className="py-24 md:py-32 bg-[#030205] relative border-b border-[#3b1c4a]/30 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 md:gap-20 items-center">
            <FadeIn direction="right">
              <div className="relative">
                <div className="absolute -inset-4 bg-gradient-to-r from-[#4a235a] to-transparent opacity-20 blur-2xl"></div>
                <h2 className="text-3xl md:text-5xl font-serif text-white mb-8 leading-tight relative">
                  Секрет цвета: <br/><span className="text-[#c39bd3] italic">Сохранение жизни</span>
                </h2>
                <div className="space-y-6 text-neutral-400 font-light text-base md:text-lg leading-relaxed relative">
                  <p>
                    Классическая ферментация какао — это великое искусство. Это прекрасная отрасль, создающая сложный гастрономический профиль элитного шоколада, к которой мы относимся с глубоким уважением.
                  </p>
                  <p>
                    Однако для проекта <strong className="text-white font-normal">«Фиолетовое Золото»</strong> мы выбрали принципиально иной путь. Наша цель — не создание шоколадного вкуса через окисление, а <strong className="text-white font-normal">крио-фиксация изначальной биохимии</strong> растения. Мы отказываемся от ферментации намеренно.
                  </p>
                  <p>
                    Глубокий фиолетовый срез нашего боба — это визуальный паспорт его нативности. Это абсолютное сохранение оригинальных антоцианов, антиоксидантов и нетронутой молекулярной структуры Cacao Ancestral.
                  </p>
                </div>
              </div>
            </FadeIn>

            <FadeIn direction="left" delay={0.2}>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                <div className="bg-[#0a0612] p-8 border border-[#3b1c4a] rounded-sm text-center lg:translate-y-8 flex flex-col items-center">
                  <ShieldCheck className="text-[#9b59b6] mb-4 shrink-0" size={32} strokeWidth={1} />
                  <h4 className="text-white font-serif text-xl mb-2">Нативная матрица</h4>
                  <p className="text-neutral-500 text-sm font-light">Отсутствие кислот распада и температурного разрушения молекул.</p>
                </div>
                <div className="bg-[#0a0612] p-8 border border-[#3b1c4a] rounded-sm text-center flex flex-col items-center">
                  <Activity className="text-[#9b59b6] mb-4 shrink-0" size={32} strokeWidth={1} />
                  <h4 className="text-white font-serif text-xl mb-2">Биодоступность</h4>
                  <p className="text-neutral-500 text-sm font-light">Максимальный природный уровень эпикатехина и теобромина.</p>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Terroir Section */}
      <section id="terroir" className="py-24 md:py-32 bg-[#050308] relative">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid lg:grid-cols-2 gap-16 md:gap-20 items-center">
            <FadeIn direction="right">
              <div className="relative aspect-[4/5] overflow-hidden rounded-sm border border-[#3b1c4a]/50 group">
                <div className="absolute inset-0 bg-[#4a235a]/10 group-hover:bg-transparent transition-colors duration-1000 z-10 pointer-events-none"></div>
                <img 
                  src="https://images.unsplash.com/photo-1542841791-09885b5a2663?q=80&w=1000&auto=format&fit=crop" 
                  alt="Девственные леса Саморы" 
                  className="object-cover w-full h-full opacity-80 filter grayscale-[20%] group-hover:scale-105 transition-transform duration-1000"
                />
              </div>
            </FadeIn>

            <FadeIn direction="left" delay={0.2}>
              <div>
                <div className="flex items-center gap-4 mb-8">
                  <div className="w-12 h-[1px] bg-[#9b59b6]"></div>
                  <p className="text-[#c39bd3] text-xs font-light tracking-[0.2em] uppercase">Колыбель какао</p>
                </div>
                
                <h2 className="text-3xl md:text-5xl font-serif text-white mb-8 leading-tight">
                  Высокогорье Саморы. Майо-чинчипе.<br/>
                  <span className="text-2xl md:text-3xl text-[#c39bd3] italic mt-3 block">Эндемичный какао. Шуарские фермеры.</span>
                </h2>

                <div className="space-y-6 text-neutral-400 font-light text-base md:text-lg leading-relaxed">
                  <p>
                    Самора Чинчипе — место, где более 5000 лет назад культура Майо-Чинчипе впервые прикоснулась к сакральному растению. Это не просто регион, это родина мирового какао.
                  </p>
                  <p>
                    Наше сырье — это <strong className="text-white font-normal">аутентичный сорт Насиональ</strong>. Он не выращивается на выжженных солнцем индустриальных плантациях. Он рождается на высоте, в густой тени девственных фруктовых лесов, сохраняя симбиоз с древней экосистемой Амазонии.
                  </p>
                  <p className="text-neutral-300 italic border-l-2 border-[#6b21a8] pl-6 mt-6">
                    Богатая минералами почва, кристальная вода и забота индейцев племени Шуар формируют мощный дух растения, который мы бережно фиксируем в каждом бобе.
                  </p>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* The 10-Hour Rule (Process) */}
      <section id="process" className="py-24 md:py-32 bg-[#020104] relative border-y border-[#3b1c4a]/30 overflow-hidden">
        <div className="absolute top-0 right-0 w-[300px] h-[300px] md:w-[500px] md:h-[500px] bg-[#4a235a]/10 rounded-full blur-[120px] pointer-events-none"></div>
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <FadeIn>
            <div className="text-center max-w-3xl mx-auto mb-16 md:mb-24">
              <h2 className="text-3xl md:text-5xl font-serif text-white mb-6">Искусство Времени: Правило 10 Часов</h2>
              <p className="text-neutral-400 font-light text-base md:text-lg">
                Наш процесс — это ювелирная термодинамическая хирургия. Мы останавливаем окисление навсегда за 10 часов от момента сбора плода в лесу.
              </p>
            </div>
          </FadeIn>

          <div className="relative">
            <div className="hidden md:block absolute top-1/2 left-0 w-full h-[1px] bg-[#3b1c4a] -translate-y-1/2"></div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 relative z-10">
              <FadeIn delay={0.1}>
                <div className="bg-[#0a0612] border border-[#3b1c4a]/50 p-8 md:p-10 relative group hover:border-[#c39bd3]/50 transition-colors duration-500 h-full flex flex-col items-center">
                  <div className="md:absolute md:top-0 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 bg-[#020104] px-4 mb-6 md:mb-0">
                    <span className="text-[#c39bd3] font-serif italic text-2xl">0h</span>
                  </div>
                  <h4 className="text-xl font-serif text-white text-center mt-2 md:mt-6 mb-4">Лесной Сбор</h4>
                  <p className="text-neutral-400 text-sm font-light text-center leading-relaxed flex-grow">
                    Ручной сбор плодов в диких садах Саморы. Прямая логистика в охлаждаемых контейнерах исключает малейший риск случайного старта ферментации в пути.
                  </p>
                </div>
              </FadeIn>

              <FadeIn delay={0.3}>
                <div className="bg-[#0a0612] border border-[#3b1c4a]/50 p-8 md:p-10 relative group hover:border-[#c39bd3]/50 transition-colors duration-500 h-full flex flex-col items-center">
                  <div className="md:absolute md:top-0 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 bg-[#020104] px-4 mb-6 md:mb-0">
                    <span className="text-[#c39bd3] font-serif italic text-2xl">3h</span>
                  </div>
                  <h4 className="text-xl font-serif text-white text-center mt-2 md:mt-6 mb-4">Вакуумный Щит (80°C)</h4>
                  <p className="text-neutral-400 text-sm font-light text-center leading-relaxed flex-grow">
                    Ошпаривание в вакуумной среде при 80°C (ровно 5 минут). Точечный термический шок денатурирует фермент окисления. Фиолетовый пигмент фиксируется навечно.
                  </p>
                </div>
              </FadeIn>

              <FadeIn delay={0.5}>
                <div className="bg-[#0a0612] border border-[#3b1c4a]/50 p-8 md:p-10 relative group hover:border-[#c39bd3]/50 transition-colors duration-500 h-full flex flex-col items-center">
                  <div className="md:absolute md:top-0 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 bg-[#020104] px-4 mb-6 md:mb-0">
                    <span className="text-[#c39bd3] font-serif italic text-2xl">10h</span>
                  </div>
                  <h4 className="text-xl font-serif text-white text-center mt-2 md:mt-6 mb-4">Стабилизация (40°C)</h4>
                  <p className="text-neutral-400 text-sm font-light text-center leading-relaxed flex-grow">
                    Бережная сушка при 40°C до идеальных 6-8% влажности. Формирование «стеклянного хруста» без потери эфирных масел. Фасовка в вакуум.
                  </p>
                </div>
              </FadeIn>
            </div>
          </div>
        </div>
      </section>

      {/* Comparisons Section (Tables) */}
      <section id="comparison" className="py-24 md:py-32 bg-[#050308] relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
          <FadeIn>
            <div className="text-center mb-16 md:mb-20">
              <h2 className="text-3xl md:text-5xl font-serif text-white mb-6">Сравнительная Матрица</h2>
              <p className="text-neutral-400 font-light text-base md:text-lg max-w-2xl mx-auto">
                Два разных пути в мире премиального какао: искусство вкуса против науки сохранения жизни.
              </p>
            </div>
          </FadeIn>

          {/* Таблица 1: Подходы и Цели */}
          <FadeIn delay={0.2}>
            <div className="mb-16">
              <h3 className="text-xl font-serif text-[#c39bd3] mb-6 flex items-center gap-3">
                <ShieldCheck size={20} className="shrink-0" /> Философия и Процесс
              </h3>
              <div className="overflow-x-auto pb-4">
                <table className="w-full text-left border-collapse min-w-[700px]">
                  <thead>
                    <tr className="border-b border-[#3b1c4a]">
                      <th className="py-4 px-4 text-neutral-500 font-light w-1/4">Параметр</th>
                      <th className="py-4 px-4 text-neutral-400 font-normal w-1/4">Индустриальный</th>
                      <th className="py-4 px-4 text-neutral-300 font-normal w-1/4">Fine Flavor (Традиция)</th>
                      <th className="py-4 px-4 text-[#c39bd3] font-serif text-lg w-1/4 border-l border-[#3b1c4a] bg-[#0a0612]/50">Inca Trail</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm font-light">
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Ферментация</td>
                      <td className="py-4 px-4 text-neutral-500">Массовая (7-10 дней)</td>
                      <td className="py-4 px-4 text-neutral-300">Контролируемая (для вкуса)</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50"><strong className="font-normal text-[#c39bd3]">0 дней.</strong> Вакуумный щит.</td>
                    </tr>
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Термообработка</td>
                      <td className="py-4 px-4 text-neutral-500">Жесткая обжарка</td>
                      <td className="py-4 px-4 text-neutral-300">Бережная обжарка</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50"><strong className="font-normal text-[#c39bd3]">Крио-стабилизация</strong> (макс 40°C)</td>
                    </tr>
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Главная цель</td>
                      <td className="py-4 px-4 text-neutral-500">Удешевление, объем</td>
                      <td className="py-4 px-4 text-neutral-300">Сложная ароматика, гастрономия</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50">Максимальная биодоступность</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </FadeIn>

          {/* Таблица 2: Биохимический профиль */}
          <FadeIn delay={0.3}>
            <div>
              <h3 className="text-xl font-serif text-[#c39bd3] mb-6 flex items-center gap-3">
                <Activity size={20} className="shrink-0" /> Пищевой и Биохимический Профиль
              </h3>
              <div className="overflow-x-auto pb-4">
                <table className="w-full text-left border-collapse min-w-[700px]">
                  <thead>
                    <tr className="border-b border-[#3b1c4a]">
                      <th className="py-4 px-4 text-neutral-500 font-light w-1/4">Показатель</th>
                      <th className="py-4 px-4 text-neutral-400 font-normal w-1/4">Индустриальный</th>
                      <th className="py-4 px-4 text-neutral-300 font-normal w-1/4">Fine Flavor (Традиция)</th>
                      <th className="py-4 px-4 text-[#c39bd3] font-serif text-lg w-1/4 border-l border-[#3b1c4a] bg-[#0a0612]/50">Inca Trail</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm font-light">
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Цвет (Антоцианы)</td>
                      <td className="py-4 px-4 text-neutral-500">Блекло-коричневый (разрушены)</td>
                      <td className="py-4 px-4 text-neutral-300">Темно-коричневый (снижены)</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50">Насыщенный <strong className="font-normal text-[#c39bd3]">Фиолетовый</strong> (100% сохранены)</td>
                    </tr>
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Кислотность (pH)</td>
                      <td className="py-4 px-4 text-neutral-500">Высокая (уксусная, молочная)</td>
                      <td className="py-4 px-4 text-neutral-300">Сбалансированная ферментацией</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50">Нативная (кислоты ферментации отсутствуют)</td>
                    </tr>
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Риск Микотоксинов</td>
                      <td className="py-4 px-4 text-red-900/50">Высокий</td>
                      <td className="py-4 px-4 text-neutral-300">Низкий (строгий контроль)</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50"><strong className="text-green-400 font-normal">Нулевой</strong> (нет среды для плесени)</td>
                    </tr>
                    <tr className="border-b border-neutral-900 hover:bg-[#0a0612]/30 transition-colors">
                      <td className="py-4 px-4 text-neutral-400">Полифенолоксидаза</td>
                      <td className="py-4 px-4 text-neutral-500">Активна (идет распад)</td>
                      <td className="py-4 px-4 text-neutral-300">Активна (идет формирование вкуса)</td>
                      <td className="py-4 px-4 text-white border-l border-[#3b1c4a] bg-[#0a0612]/50"><strong className="text-[#c39bd3] font-normal">Мгновенно денатурирована</strong></td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* TZNK & Blockchain Section */}
      <section id="tzunki" className="py-24 md:py-32 bg-[#020104] relative border-t border-[#3b1c4a]/30 overflow-hidden">
        <div className="absolute inset-0 opacity-[0.05] pointer-events-none" style={{ backgroundImage: 'radial-gradient(#c39bd3 1px, transparent 1px)', backgroundSize: '24px 24px' }}></div>
        
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <FadeIn direction="right">
              <div className="space-y-8">
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-[#6b21a8]/20 border border-[#9b59b6]/30 rounded text-[#c39bd3] text-xs uppercase tracking-widest font-mono">
                  <LinkIcon size={14} className="shrink-0" /> Аутентичность
                </div>
                <h2 className="text-3xl md:text-5xl font-serif text-white leading-tight">
                  Проект TZNK & <br/>Вечный Блокчейн
                </h2>
                <div className="space-y-6 text-neutral-400 font-light text-base md:text-lg leading-relaxed">
                  <p>
                    Производство фиолетового какао неразрывно связано с проектом <strong className="text-white font-normal">TZNK (tzunki.com)</strong>. Наша работа с индейцами Шуар — это реальная помощь в сохранении лесов Амазонии, уважение к труду общин и защита их наследия.
                  </p>
                  <p>
                    Массовый рынок скрывает истинное происхождение продукта. Мы внедряем беспрецедентный уровень прозрачности: от момента сбора плода до запечатывания палеты с вакуумными 5-кг упаковками — <strong className="text-white font-normal">всё фиксируется на фото и видео</strong>.
                  </p>
                </div>
              </div>
            </FadeIn>

            <FadeIn direction="left" delay={0.2}>
              <div className="bg-[#0a0612] border border-[#3b1c4a] p-8 md:p-10 rounded-sm relative shadow-2xl overflow-hidden">
                <img src="https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?q=80&w=800&auto=format&fit=crop" alt="Джунгли паттерн" className="absolute inset-0 w-full h-full object-cover opacity-10 mix-blend-overlay pointer-events-none" />
                <div className="absolute top-0 right-0 p-6 opacity-20 pointer-events-none">
                  <QrCode size={100} className="text-[#9b59b6]" />
                </div>

                <div className="relative z-10 space-y-8">
                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded bg-[#1a0b2e] flex items-center justify-center shrink-0 border border-[#3b1c4a]">
                      <Camera size={20} className="text-[#c39bd3] shrink-0" />
                    </div>
                    <div>
                      <h4 className="text-white font-serif text-lg md:text-xl mb-1">Визуальный контроль</h4>
                      <p className="text-neutral-500 font-light text-sm">Фиксация каждого этапа: координаты сбора, фермер, вакуумная обработка и фасовка.</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded bg-[#1a0b2e] flex items-center justify-center shrink-0 border border-[#3b1c4a]">
                      <LinkIcon size={20} className="text-[#c39bd3] shrink-0" />
                    </div>
                    <div>
                      <h4 className="text-white font-serif text-lg md:text-xl mb-1">Запись в Блокчейн</h4>
                      <p className="text-neutral-500 font-light text-sm">История партии навсегда вписывается в децентрализованный реестр. Данные невозможно подделать.</p>
                    </div>
                  </div>

                  <div className="flex items-start gap-4">
                    <div className="w-10 h-10 rounded bg-[#1a0b2e] flex items-center justify-center shrink-0 border border-[#3b1c4a]">
                      <QrCode size={20} className="text-[#c39bd3] shrink-0" />
                    </div>
                    <div>
                      <h4 className="text-white font-serif text-lg md:text-xl mb-1">Цифровой паспорт</h4>
                      <p className="text-neutral-500 font-light text-sm">Каждая упаковка имеет уникальный QR-код, открывающий историю создания именно этого какао.</p>
                    </div>
                  </div>
                </div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* Directions of Use */}
      <section className="py-24 md:py-32 bg-[#050308] relative border-t border-[#3b1c4a]/30">
         <div className="max-w-7xl mx-auto px-6">
          <FadeIn>
            <div className="text-center mb-16 md:mb-20">
              <h2 className="text-3xl md:text-5xl font-serif text-white mb-6">Векторы Применения</h2>
              <p className="text-neutral-400 font-light text-base md:text-lg max-w-2xl mx-auto">
                Совершенное, готовое к употреблению сырье без необходимости химической фумигации.
              </p>
            </div>
          </FadeIn>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            <FadeIn delay={0.1}>
              <div className="group p-8 md:p-10 bg-[#0a0612] border border-[#3b1c4a]/50 hover:border-[#c39bd3] transition-colors duration-500 h-full">
                <Mountain className="text-[#9b59b6] mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500" size={40} strokeWidth={1} />
                <h3 className="text-2xl font-serif text-white mb-4">Церемониальный Абсолют</h3>
                <p className="text-neutral-400 font-light leading-relaxed">
                  Лучший в мире какао для сакральных практик. Выращен в древних фруктовых лесах. Отсутствие ферментации сохраняет не только молекулу теобромина, но и оригинальную энергию Амазонии. Идеальный проводник.
                </p>
              </div>
            </FadeIn>

            <FadeIn delay={0.2}>
              <div className="group p-8 md:p-10 bg-[#0a0612] border border-[#3b1c4a]/50 hover:border-[#c39bd3] transition-colors duration-500 h-full">
                <Sparkles className="text-[#9b59b6] mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500" size={40} strokeWidth={1} />
                <h3 className="text-2xl font-serif text-white mb-4">Элитное Какао-Масло</h3>
                <p className="text-neutral-400 font-light leading-relaxed">
                  Отказ от ферментации означает полное отсутствие кислот распада. Результат — кристально чистое какао-масло с деликатнейшим нативным ароматом, идеальное для высокой парфюмерии и косметологии.
                </p>
              </div>
            </FadeIn>

            <FadeIn delay={0.3}>
              <div className="group p-8 md:p-10 bg-[#0a0612] border border-[#3b1c4a]/50 hover:border-[#c39bd3] transition-colors duration-500 h-full">
                <Leaf className="text-[#9b59b6] mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500" size={40} strokeWidth={1} />
                <h3 className="text-2xl font-serif text-white mb-4">Уникальный Порошок</h3>
                <p className="text-neutral-400 font-light leading-relaxed">
                  База для революционных суперфудов. Яркий фиолетовый цвет, непревзойденный уровень антиоксидантов делают этот продукт функциональным ингредиентом номер один для спортивного и ноотропного питания.
                </p>
              </div>
            </FadeIn>

            <FadeIn delay={0.4}>
              <div className="group p-8 md:p-10 bg-[#0a0612] border border-[#3b1c4a]/50 hover:border-[#c39bd3] transition-colors duration-500 h-full">
                <FlaskConical className="text-[#9b59b6] mb-6 shrink-0 group-hover:scale-110 transition-transform duration-500" size={40} strokeWidth={1} />
                <h3 className="text-2xl font-serif text-white mb-4">Сырье для Экстрактов</h3>
                <p className="text-neutral-400 font-light leading-relaxed">
                  Мечта биохакинга. Нативные флавоноиды, не разрушенные бактериями. Вакуумная сушка сохраняет идеальную матрицу для последующей высокотехнологичной экстракции (CO2, спиртовой или водной).
                </p>
              </div>
            </FadeIn>
          </div>
         </div>
      </section>

      {/* Contacts / Partnership */}
      <section id="contacts" className="py-24 md:py-32 bg-[#020104] border-t border-[#3b1c4a]/30">
        <div className="max-w-4xl mx-auto px-6">
          <FadeIn>
            <div className="text-center mb-16">
              <h2 className="text-3xl md:text-4xl font-serif text-white mb-4">Контакты и Партнерство</h2>
              <p className="text-neutral-500 font-light tracking-wide">Свяжитесь с нами для обсуждения поставок.</p>
            </div>
          </FadeIn>

          <FadeIn delay={0.2} direction="up">
            <div className="p-8 md:p-12 border border-[#3b1c4a]/50 hover:border-[#c39bd3]/50 transition-colors duration-500 bg-[#0a0612] max-w-2xl mx-auto text-center relative overflow-hidden">
              <div className="absolute -top-10 -right-10 text-[#6b21a8]/10 pointer-events-none">
                <Leaf size={150} />
              </div>
              
              <h4 className="text-2xl font-serif text-white mb-8 relative z-10">The Inca Trail Foods</h4>
              
              <div className="flex flex-col items-center justify-center gap-6 font-light relative z-10">
                
                <div className="flex items-center gap-4 text-neutral-300">
                  <MapPin className="text-[#9b59b6] shrink-0" size={20} />
                  <span className="tracking-wide">Провинция Самора Чинчипе, Эквадор</span>
                </div>

                <a href="mailto:info@incatrailfoods.com" className="flex items-center gap-4 text-neutral-300 hover:text-white transition-colors group">
                  <Mail className="text-[#9b59b6] shrink-0 group-hover:text-white transition-colors" size={20} />
                  <span className="tracking-wider">info@incatrailfoods.com</span>
                </a>

                <a href="https://wa.me/593982873007" className="flex items-center gap-4 text-neutral-300 hover:text-white transition-colors group">
                  <Phone className="text-[#9b59b6] shrink-0 group-hover:text-white transition-colors" size={20} />
                  <span className="tracking-wider">+593 98 287 3007 <span className="text-xs text-neutral-500 ml-2">(WhatsApp / Telegram)</span></span>
                </a>

              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-12 border-t border-[#3b1c4a]/30 bg-[#010002] text-center">
        <p className="text-neutral-600 text-xs font-light">
          © {new Date().getFullYear()} The Inca Trail Foods. Ecuador, Zamora Chinchipe.
        </p>
      </footer>
    </div>
  );
}


```