import Image from "next/image";
import StickyNav from "@/components/StickyNav";
import Footer from "@/components/Footer";
import ArticlesGrid from "./ArticlesGrid";
import "./light.css";

/* ─── Base URL ─── */
const SITE = "https://victor-buto.super.site";

/* ─── Featured ─── */
const featured = [
  {
    href: `${SITE}/posts/1970`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/17db2248-765e-4abf-abc7-be3fd0c72853/gemini_generated_image_qugifqugifqugifq-min_-1-_-1/w=800,quality=80,fit=scale-down",
    title: "История идей: Зарождение Хип-хопа в\u00A01970-ых",
    tag: "Бренд билдинг",
    alt: "Хип-хоп 70-х",
  },
  {
    href: `${SITE}/posts/interest-odyssey`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/e670b16a-e196-48de-9dd9-a8b5abfa6b01/CleanShot_2023-07-21_at_17.57.272x/w=800,quality=80,fit=scale-down",
    title: "Одиссея XXI века. Поиски интереса к\u00A0жизни",
    tag: "Эссе",
    alt: "Одиссея",
  },
  {
    href: "/confessions_from_exile",
    image: "https://ik.imagekit.io/victorbuto/IMG_6843.JPG?tr=w-800,q-80,f-auto",
    title: "Исповедь фрилансера эмигранта",
    tag: "Эссе",
    alt: "Исповедь фрилансера эмигранта",
  },
];

/* ─── All articles (без кино) ─── */
const articles = [
  {
    href: `${SITE}/posts/1970`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/17db2248-765e-4abf-abc7-be3fd0c72853/gemini_generated_image_qugifqugifqugifq-min_-1-_-1/w=800,quality=80,fit=scale-down",
    title: "История идей: Зарождение Хип-хопа в\u00A01970-ых",
    tag: "Бренд билдинг",
    meta: "Видео · 40 мин",
    alt: "Хип-хоп 70-х",
  },
  {
    href: `${SITE}/posts/lesswrong`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/2c6a0369-e92e-43c3-9f25-57c38aefb95d/GQEYilpbEAUKAZ-/w=800,quality=80,fit=scale-down",
    title: "LessWrong. Принципы рациональности для жизни и\u00A0работы",
    tag: "Смыслы",
    meta: "Статья",
    alt: "LessWrong",
  },
  {
    href: `${SITE}/posts/future-of-expert-media`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/59b40fd1-ece3-4deb-b034-b02d8d969f25/CleanShot_2025-01-14_at_19.29.442x/w=800,quality=80,fit=scale-down",
    title: "Будущее Telegram каналов и\u00A0экспертных медиа",
    tag: "Исследования",
    meta: "Статья",
    alt: "Telegram каналы",
  },
  {
    href: `${SITE}/1214dc8841df80bdb440dec88004ced5`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/8ec371fa-0f78-4f6c-8247-cd73fe0b2123/Frame_6_(2)/w=800,quality=80,fit=scale-down",
    title: "24 эксперта рассказали, что такое успешное исследование",
    tag: "Исследования",
    meta: "Статья",
    alt: "24 эксперта",
  },
  {
    href: `${SITE}/posts/synthesis`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/c8175ead-fc82-4e21-9ca9-fba9e09b7822/%D0%9B%D0%B5%D0%BA%D1%86%D0%B8%D1%8F_%D0%BF%D0%BE_%D1%81%D0%B8%D0%BD%D1%82%D0%B5%D0%B7%D1%83_(%D0%9A%D0%BE%D0%BD%D1%82%D1%83%D1%80)_-_Frame_34/w=800,quality=80,fit=scale-down",
    title: "Зачем молиться богу синтеза",
    tag: "Исследования",
    meta: "Статья",
    alt: "Синтез",
  },
  {
    href: `${SITE}/posts/how-to-knowledge-base`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/3eb3de2c-dc02-488c-822e-58b5d8578ed4/CleanShot_2024-03-24_at_18.42.392x/w=800,quality=80,fit=scale-down",
    title: "Как я\u00A0веду личную базу знаний",
    tag: "Исследования",
    meta: "Гайд",
    alt: "База знаний",
  },
  {
    href: `${SITE}/posts/buto-adhd-16c`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/df417e1f-c8b2-4c0f-86cd-ffa3c7b3b25b/Work_questions_-_%D0%A1%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F/w=800,quality=80,fit=scale-down",
    title: "(Почти) Исчерпывающая модель пользователя Buto-ADHD-16C",
    tag: "Исследования",
    meta: "Статья",
    alt: "Модель пользователя",
  },
  {
    href: `${SITE}/4ac0ff90177e4bccab8e773bea1346f4`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/92c5a5a9-e664-44b3-85c4-5675d28ce8a5/met_terracotta_funerary_plaque/w=800,quality=80,fit=scale-down",
    title: "Список вопросов для погружения в\u00A0рынок",
    tag: "Исследования",
    meta: "Гайд",
    alt: "Вопросы для рынка",
  },
  {
    href: `${SITE}/posts/competitors-research-150-methods`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/3c23d4db-dda4-4600-aba5-cc57d40a6842/%D0%91%D0%B5%D0%B7_%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F/w=800,quality=80,fit=scale-down",
    title: "Выжимаем максимум из\u00A0анализа конкурентов. 150 бесплатных идей",
    tag: "Исследования",
    meta: "Гайд",
    alt: "Анализ конкурентов",
  },
  {
    href: `${SITE}/c49ee3c52a1e4ef4b03cd812069cd4b7`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/ef81050a-4633-465c-9d40-252379012180/woodcuts_2/w=800,quality=80,fit=scale-down",
    title: "Пирамида контента. Зачем писать, когда есть люди экспертнее меня?",
    tag: "Смыслы",
    meta: "Эссе",
    alt: "Пирамида контента",
  },
  {
    href: `${SITE}/9642c40879b94998b608169e9b1b1e0b`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/1524e3d9-f0f2-43a6-b1b3-1d339596052b/a-peaceful-library-with-a-variety-of-books-on-the-shelves-wallpaper-2048x768_85/w=800,quality=80,fit=scale-down",
    title: "Источники для исследования рынка",
    tag: "Исследования",
    meta: "Гайд",
    alt: "Библиотека",
  },
  {
    href: `${SITE}/posts/dovetail`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/41872bdc-5647-4f81-aad1-30fd117c0415/CleanShot_2023-04-13_at_22.29.302x/w=800,quality=80,fit=scale-down",
    title: "Как я\u00A0обрабатываю записи интервью и\u00A0делаю синтез в\u00A0Dovetail",
    tag: "Исследования",
    meta: "Гайд",
    alt: "Dovetail",
  },
  {
    href: `${SITE}/347a84b971304e0197d2db9a81ba8825`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/6332d83a-efb9-4871-b9dc-b6a4a834fe3b/%D0%92%D0%BE%D1%80%D0%BE%D0%BD%D0%BA%D0%B0_%D0%B8%D1%81%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BF%D0%B5%D1%80%D0%B5%D0%B4_%D0%B7%D0%B0%D0%BF%D1%83%D1%81%D0%BA%D0%BE%D0%BC_%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B0/w=800,quality=80,fit=scale-down",
    title: "Воронка исследования перед запуском продукта",
    tag: "Исследования",
    meta: "Статья",
    alt: "Воронка исследования",
  },
  {
    href: `${SITE}/posts/jobs-to-be-done-1`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/8636ac52-47e6-48e3-838b-aa9fb81c750a/JTBD_framework/w=800,quality=80,fit=scale-down",
    title: "Jobs To Be Done для нищих. Часть\u00A01. Теория",
    tag: "Исследования",
    meta: "Гайд",
    alt: "JTBD теория",
  },
  {
    href: `${SITE}/posts/jobs-to-be-done-2`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/253b17e5-a312-49ba-b7a0-11dc05ba9423/JTBD_abstractions/w=800,quality=80,fit=scale-down",
    title: "Jobs To Be Done для нищих. Часть\u00A02. Практика",
    tag: "Исследования",
    meta: "Гайд",
    alt: "JTBD практика",
  },
  {
    href: `${SITE}/posts/interest-odyssey`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/e670b16a-e196-48de-9dd9-a8b5abfa6b01/CleanShot_2023-07-21_at_17.57.272x/w=800,quality=80,fit=scale-down",
    title: "Одиссея XXI века. Поиски интереса к\u00A0жизни",
    tag: "Эссе",
    meta: "Лонгрид",
    alt: "Одиссея",
  },
  {
    href: `${SITE}/posts/24`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/3f4a12b1-fc4e-4867-8dcc-f04d631954c4/CleanShot_2024-06-16_at_11.04.162x/w=800,quality=80,fit=scale-down",
    title: "24 идеи, чтобы найти в\u00A0работе смысл",
    tag: "Эссе",
    meta: "Лонгрид",
    alt: "24 идеи",
  },
  {
    href: `${SITE}/posts/improve-friendship-aka-anton-chekhov`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/0a1be8d0-ff5a-4b70-b402-112cb617f62a/Floating_likes/w=800,quality=80,fit=scale-down",
    title: "Как повысить качество общения. На\u00A0примере писем Антона Чехова",
    tag: "Эссе",
    meta: "Эссе",
    alt: "Чехов",
  },
  {
    href: `${SITE}/posts/eternity-spirit`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/88854c99-3725-4d42-b956-63a803f9ca69/%D0%94%D1%83%D1%85_%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8/w=800,quality=80,fit=scale-down",
    title: "Дух времени",
    tag: "Эссе",
    meta: "Эссе",
    alt: "Дух времени",
  },
  {
    href: `${SITE}/posts/mark-avreliy-adidas`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/55023273-dd18-4e14-b01b-ffaa8bdaa17c/Mark_is_gopnik/w=800,quality=80,fit=scale-down",
    title: "Пацанские цитаты Марка Аврелия",
    tag: "Эссе",
    meta: "Эссе",
    alt: "Марк Аврелий",
  },
  {
    href: `${SITE}/posts/personal-canon`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/cec0dfe1-a57b-495f-bd1c-54f39a317f7c/5U0zYT/w=800,quality=80,fit=scale-down",
    title: "Personal Canon. Все мои важные ссылки",
    tag: "Смыслы",
    meta: "Подборка",
    alt: "Personal Canon",
  },
  {
    href: `${SITE}/posts/existential-zapffe`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/b361c8e5-f935-44ce-8648-1ad4fddee517/4_%D1%80%D0%B5%D1%88%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D0%B0_%D1%81%D0%BC%D0%B5%D1%80%D1%82%D0%B8/w=800,quality=80,fit=scale-down",
    title: "Решения экзистенциального вопроса. Часть\u00A01. Петер Цапффе",
    tag: "Эссе",
    meta: "Эссе",
    alt: "Цапффе",
  },
  {
    href: `${SITE}/posts/cant-see-meaning`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/9d4a8125-46be-41b3-811e-efbd8a297ff6/Frame_8/w=800,quality=80,fit=scale-down",
    title: "Не вижу смысла. Хочу vs Надо",
    tag: "Эссе",
    meta: "Эссе",
    alt: "Хочу vs Надо",
  },
  {
    href: `${SITE}/posts/telegram`,
    image: "https://images.spr.so/cdn-cgi/imagedelivery/j42No7y-dcokJuNgXeA0ig/310e833c-e91f-418d-bf54-d98071a7844c/nasa_carina_nebula/w=800,quality=80,fit=scale-down",
    title: "Полезные чаты в\u00A0Telegram",
    tag: "Исследования",
    meta: "Подборка",
    alt: "Telegram чаты",
  },
];

/* ─── Icons ─── */
function ArrowIcon() {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M7 17L17 7M17 7H7M17 7V17" />
    </svg>
  );
}

/* ─── Page (Server Component) ─── */
export default function LightPage() {

  return (
    <div className="min-h-screen bg-[#F9F9F7] text-[#050505] antialiased overflow-x-hidden light-page">
      {/* Sticky Nav — client component */}
      <StickyNav />

      {/* Hero */}
      <section className="relative min-h-screen flex flex-col items-center justify-center">
        <div className="text-center px-6 animate-fade-in">
          <h1 className="font-black text-[clamp(4rem,15vw,12rem)] leading-[0.85] tracking-tighter">
            Victor
            <br />
            <span className="text-[#7a1b1b]">Buto</span>
          </h1>
          <div className="mt-8 flex items-center justify-center gap-4">
            <span className="w-12 h-[2px] bg-[#7a1b1b]" />
            <p className="text-sm md:text-base uppercase tracking-[0.3em] text-[#7a1b1b]">Research &amp; Sensemaking</p>
            <span className="w-12 h-[2px] bg-[#7a1b1b]" />
          </div>
        </div>

        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2">
          <span className="text-[10px] uppercase tracking-[0.3em] text-black/30">Scroll</span>
          <span className="w-[1px] h-10 bg-gradient-to-b from-[#7a1b1b]/50 to-transparent animate-pulse" />
        </div>
      </section>

      {/* Marquee */}
      <section className="relative py-4 overflow-hidden border-y border-[#7a1b1b]/30 bg-[#7a1b1b]">
        <div className="marquee-track whitespace-nowrap">
          {[...Array(12)].map((_, i) => (
            <span key={i} className="mx-8 text-2xl md:text-4xl font-black uppercase tracking-tight text-white">
              • Ищу фрилансеров исследователей: CJM кудесников, качей в бренд стратегии, семиотиков
            </span>
          ))}
        </div>
      </section>

      {/* About — split layout */}
      <section className="max-w-6xl mx-auto px-6 md:px-12 py-24 grid md:grid-cols-2 gap-16 items-start">
        <div className="sticky top-24">
          <div className="inline-block px-3 py-1 bg-[#7a1b1b] text-white text-xs uppercase tracking-widest mb-6">
            Обо мне
          </div>
          <h2 className="text-3xl md:text-5xl font-black leading-[1.05] tracking-tight">
            Помогаю проектировать сильные бренды с&nbsp;помощью исследований и&nbsp;стратегического подхода
          </h2>
        </div>
        <div className="space-y-6 leading-relaxed text-black/60 body-text">
          <p>
            Я&nbsp;Виктор Буто, управляю отделами исследований в&nbsp;
            <a href="https://signal.ony.ru/" target="_blank" rel="noopener noreferrer" className="text-[#7a1b1b] underline underline-offset-4 hover:opacity-70 transition-opacity font-semibold">Signal</a>
            {" "}и&nbsp;
            <a href="https://ony.ru/" target="_blank" rel="noopener noreferrer" className="text-[#7a1b1b] underline underline-offset-4 hover:opacity-70 transition-opacity font-semibold">ONY</a>.
            Мы топ-3 в&nbsp;брендинге и&nbsp;бренд-стратегиям. Работаем почти со&nbsp;всеми топами в&nbsp;РФ: МТС, Т-Банком, Яндекс Go, X5, hh, Золотым Яблоком, Новой Третьяковкой.
          </p>
          <p>
            Наши исследования помогают выходить на&nbsp;новую аудиторию и&nbsp;говорить с&nbsp;ней на&nbsp;одном языке, выстраивать стратегию бренда, определённый имидж, маркетинговую и&nbsp;продуктовую стратегию. Делаем глубинные интервью, семиотику, анализ конкурентов, сегментацию, CJM, JTBD, опросы, UX рисерч, Go-to-market зарубеж.
          </p>
          <p>
            Изучаю бренд билдинг: как создаются сильные идеи, как они распространяются.
            Например, разбирал{" "}
            <a href="https://youtu.be/DJkJoBgL9eM" target="_blank" rel="noopener noreferrer" className="text-[#7a1b1b] underline underline-offset-4 hover:opacity-70 transition-opacity">
              идеи раннего хип-хопа
            </a>,{" "}
            <a href="https://habr.com/ru/articles/978416/" target="_blank" rel="noopener noreferrer" className="text-[#7a1b1b] underline underline-offset-4 hover:opacity-70 transition-opacity">
              историю успеха Христианства
            </a>.
          </p>
        </div>
      </section>

      {/* Featured — bento grid */}
      <section className="max-w-6xl mx-auto px-6 md:px-12 py-16">
        <div className="mb-12">
          <h2 className="text-3xl md:text-7xl font-black leading-[0.85] tracking-tighter">
            Избранное<span className="text-[#7a1b1b]">.</span>
          </h2>
        </div>

        <div className="grid md:grid-cols-2 gap-4">
          <a
            href={featured[0].href}
            target="_blank"
            rel="noopener noreferrer"
            className="group relative md:row-span-2 aspect-[3/2] md:aspect-auto overflow-hidden bg-black/5 border border-black/10 hover:border-[#7a1b1b]/50 transition-all duration-500"
          >
            <Image
              src={featured[0].image}
              alt={featured[0].alt}
              fill
              sizes="(max-width: 768px) 100vw, 50vw"
              priority
              className="object-cover transition-transform duration-700 group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent" />
            <div className="absolute bottom-0 left-0 right-0 p-6">
              <span className="inline-block px-2 py-1 bg-[#7a1b1b] text-white text-xs font-bold uppercase tracking-wider mb-3">
                {featured[0].tag}
              </span>
              <h3 className="text-xl md:text-4xl font-bold leading-tight text-white">{featured[0].title}</h3>
            </div>
            <div className="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white">
              <ArrowIcon />
            </div>
          </a>

          {featured.slice(1, 4).map((article) => (
            <a
              key={article.title}
              href={article.href}
              target="_blank"
              rel="noopener noreferrer"
              className="group relative aspect-[16/9] overflow-hidden bg-black/5 border border-black/10 hover:border-[#7a1b1b]/50 transition-all duration-500"
            >
              <Image
                src={article.image}
                alt={article.alt}
                fill
                sizes="(max-width: 768px) 100vw, 50vw"
                className="object-cover transition-transform duration-700 group-hover:scale-105"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-4">
                <span className="inline-block px-2 py-0.5 bg-[#7a1b1b] text-white text-[10px] font-bold uppercase tracking-wider mb-1">
                  {article.tag}
                </span>
                <h3 className="text-base md:text-xl font-bold leading-snug text-white">{article.title}</h3>
              </div>
              <div className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/10 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity text-white">
                <ArrowIcon />
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* Services — 5 blocks + CTA block */}
      <section className="max-w-6xl mx-auto px-6 md:px-12 py-20">
        <h2 className="text-3xl md:text-7xl font-black leading-[0.85] tracking-tighter mb-12">
          С чем могу помочь<span className="text-[#7a1b1b]">.</span>
        </h2>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">01</span>
            <h3 className="text-xl font-bold mt-3 mb-3">Спроектировать исследование</h3>
            <p className="text-black/60 leading-relaxed text-sm">Соберу задачу из&nbsp;разрозненного понимания, подберу метод, обозначу ограничения, подскажу, как провести исследование, где найти информацию, респондентов для интервью, как проанализировать результаты.</p>
          </div>
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">02</span>
            <h3 className="text-xl font-bold mt-3 mb-3">Нащупать суть бренда</h3>
            <p className="text-black/60 leading-relaxed text-sm">Разложу по&nbsp;фреймворку доступную информацию, подскажу, какие исследования провести для поиска сильного инсайта, как построить стратегию и&nbsp;визуальную айдентику от&nbsp;сути бренда.</p>
          </div>
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">03</span>
            <h3 className="text-xl font-bold mt-3 mb-3">ИИ в&nbsp;исследованиях</h3>
            <p className="text-black/60 leading-relaxed text-sm">Расскажу, как эффективно применять нейросети без галлюцинаций, какие модели использовать. Могу провести лекцию или воркшоп для вашей команды.</p>
          </div>
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">04</span>
            <h3 className="text-xl font-bold mt-3 mb-3">Go-to-market исследование</h3>
            <p className="text-black/60 leading-relaxed text-sm">Помогу спроектировать все нужные этапы рисерча для успеха нового продукта, подскажу где искать информацию на&nbsp;рынке РФ и&nbsp;зарубежных рынках.</p>
          </div>
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">05</span>
            <h3 className="text-xl font-bold mt-3 mb-3">Решить проблемы по&nbsp;исследованиям</h3>
            <p className="text-black/60 leading-relaxed text-sm">Глубинные интервью (кастдевы), анализ рынка, Jobs To Be Done, анализ конкурентов, оценка рынка, опросы, анализ активности в&nbsp;соцсетях, исследование культуры.</p>
          </div>
          <div className="border border-black/10 p-6 hover:border-[#7a1b1b]/50 transition-colors">
            <span className="text-[#7a1b1b] text-sm font-bold uppercase tracking-wider">06</span>
            <h3 className="text-xl font-bold mt-3 mb-3">Нужна помощь?</h3>
            <div className="flex flex-col gap-3">
              <a href="https://t.me/victorbuto" target="_blank" rel="noopener noreferrer" className="w-full text-center px-6 py-3 border border-black/20 font-bold text-sm uppercase tracking-wider hover:border-[#7a1b1b] hover:text-[#7a1b1b] transition-colors">Пишите в&nbsp;лс</a>
              <a href="https://t.me/+apzJx1vMpr84NzYy" target="_blank" rel="noopener noreferrer" className="w-full text-center px-6 py-3 border border-black/20 font-bold text-sm uppercase tracking-wider hover:border-[#7a1b1b] hover:text-[#7a1b1b] transition-colors">Ищите ответы в&nbsp;тг канале</a>
            </div>
          </div>
        </div>
      </section>

      {/* Articles grid with filters — client component */}
      <ArticlesGrid articles={articles} />

      <Footer />
    </div>
  );
}