// shared.jsx — primitives used by both variants.
// Exposes: Pill, Slot, Marquee, Eyebrow, Reveal, useReveal, ServicesList, ClientsRow, ProcessSteps, Footer.

const { useEffect, useRef, useState, useMemo, useLayoutEffect } = React;

/* ----- Responsive hook -------------------------------------------------- */
function useIsMobile(bp = 760) {
  const [m, setM] = useState(
    typeof window !== 'undefined' && window.innerWidth < bp);
  useEffect(() => {
    const f = () => setM(window.innerWidth < bp);
    f();
    window.addEventListener('resize', f);
    return () => window.removeEventListener('resize', f);
  }, [bp]);
  return m;
}
window.useIsMobile = useIsMobile;

/* ----- Pill button ------------------------------------------------------ */
function Pill({ label = 'Связаться', initials = 'А', arrow = '→', variant = 'solid', onClick, style }) {
  return (
    <button className={`pill ${variant === 'ghost' ? 'ghost' : ''}`} onClick={onClick} style={style}>
      <span className="pill-dot">{initials}</span>
      <span>{label}</span>
      <span className="pill-arrow">{arrow}</span>
    </button>);

}

/* ----- Slot (image placeholder) ----------------------------------------- */
function Slot({ label = 'image', warm, style, children }) {
  return (
    <div className={`slot ${warm ? 'warm' : ''}`} style={{ ...style, backgroundColor: "rgb(217, 200, 179)" }}>
      {children}
      <span className="slot-label">{label}</span>
    </div>);

}

/* ----- Eyebrow ---------------------------------------------------------- */
function Eyebrow({ children, style }) {
  return <div className="eyebrow" style={style}>{children}</div>;
}

/* ----- Reveal-on-scroll wrapper ----------------------------------------- */
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style, ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Initial visibility check on mount (artboards stack vertically in
    // design-canvas; many sections sit far below the viewport and we
    // need them to animate when scrolled into view).
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          el.classList.add('in');
          obs.unobserve(el);
        }
      });
    }, { rootMargin: '0px 0px -10% 0px', threshold: 0.05 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <Tag
      ref={ref}
      className={`reveal ${className}`}
      style={{ '--reveal-delay': `${delay}ms`, ...style }}
      {...rest}>
      
      {children}
    </Tag>);

}

/* ----- Marquee ---------------------------------------------------------- */
function Marquee({ items, duration = 40, fontSize = 64, style }) {
  // Render items 3x for seamless loop.
  const repeat = [...items, ...items, ...items];
  return (
    <div className="marquee" style={style}>
      <div className="marquee-track" style={{ animationDuration: `${duration}s` }}>
        {repeat.map((item, i) =>
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 48,
          whiteSpace: 'nowrap',
          fontWeight: 600, letterSpacing: '-0.03em', fontSize,
          color: typeof item === 'object' ? undefined : undefined
        }}>
            {typeof item === 'string' ? <span>{item}</span> : item}
            <span style={{
            width: 12, height: 12, borderRadius: '50%',
            background: 'var(--accent)', flexShrink: 0
          }} />
          </div>
        )}
      </div>
    </div>);

}

/* ----- Services list shared data ---------------------------------------- */
const SERVICES = [
{
  num: '01', iconKey: 'smm',
  title: 'SMM-стратегия', tag: 'фундамент',
  desc: 'Системное ведение соцсетей с фокусом на бизнес-показатели, а не на эстетику ради эстетики.',
  includes: ['Аудит ниши и конкурентов', 'Портрет аудитории', 'Рубрикатор и медиаплан', 'KPI и метрики результата']
},
{
  num: '02', iconKey: 'content',
  title: 'Контент-маркетинг', tag: 'контент',
  desc: 'Рубрики, сценарии, голос бренда. Контент, который двигает аудиторию по воронке.',
  includes: ['Сценарии reels и YouTube Shorts', 'Тексты постов и сторис', 'Голос бренда и tone of voice', 'Календарь публикаций']
},
{
  num: '03', iconKey: 'production',
  title: 'Продакшн', tag: 'видео',
  desc: 'Съёмка, монтаж, motion. Видеограф и дизайнер внутри команды — без лишних подрядчиков.',
  includes: ['Съёмки на локации и в студии', 'Монтаж рилс и роликов', 'Графика и motion-дизайн', 'Цветокоррекция и звук']
},
{
  num: '04', iconKey: 'ads',
  title: 'Таргетированная реклама', tag: 'трафик',
  desc: 'Гипотезы, креативы, аналитика. Трафик, который превращается в выручку.',
  includes: ['Стратегия таргета', 'Креативы под аудитории', 'A/B-тесты гипотез', 'Отчётность по выручке']
},
{
  num: '05', iconKey: 'visual',
  title: 'Визуальная коммуникация', tag: 'дизайн',
  desc: 'Айдентика для соцсетей, шаблоны, обложки, презентации. Единый визуальный язык.',
  includes: ['Айдентика для соцсетей', 'Шаблоны постов и сторис', 'Обложки highlights', 'Презентации и медиакит']
},
{
  num: '06', iconKey: 'brand',
  title: 'Упаковка бренда', tag: 'стратегия',
  desc: 'Позиционирование, смыслы, tone of voice. То, что отличает вас от рынка.',
  includes: ['Позиционирование', 'УТП и оффер', 'Tone of voice', 'Карта смыслов и нарратив']
},
{
  num: '07', iconKey: 'sales',
  title: 'Продажи через соцсети', tag: 'выручка',
  desc: 'Контент + реклама + продукт + воронка. Соцсети как канал продаж, а не витрина.',
  includes: ['Воронка продаж', 'Скрипты для директа', 'Связка с CRM/Telegram', 'Отчётность по выручке']
}];


/* ----- Niches data ------------------------------------------------------- */
const NICHES = [
'Недвижимость', 'Рестораны', 'Компьютеры',
'Премиум-бренды', 'Услуги', 'Lifestyle',
'Коммерция', 'HoReCa', 'Фестивали'];


/* ----- Clients data — real logos (white plates on dark) ----------------- */
const CLIENT_LOGOS = [
{ name: 'Aviasales', src: 'assets/logos/aviasales.png' },
{ name: 'Payme', src: 'assets/logos/payme.png' },
{ name: 'Uzum Tezkor', src: 'assets/logos/uzum-tezkor.png' },
{ name: 'Uzum', src: 'assets/logos/uzumbank.svg' },
{ name: 'Yandex Go', src: 'assets/logos/yandex-go.png' },
{ name: 'Yandex Market', src: 'assets/logos/yandex-market.png' },
{ name: 'Mezana Development', src: 'assets/logos/mezana.png' },
{ name: 'Millennium House', src: 'assets/logos/millennium.png' },
{ name: 'Trilliant', src: 'assets/logos/trilliant.png' },
{ name: 'Sushi Yummy', src: 'assets/logos/sushi-yummy.png' },
{ name: 'Pasta Pasta', src: 'assets/logos/pasta-pasta.png' }];

const CLIENTS = CLIENT_LOGOS.map((l) => l.name);


/* ----- Process steps ---------------------------------------------------- */
const PROCESS = [
{ num: '01', title: 'Знакомство · бриф', text: 'Созваниваемся, разбираем нишу и текущую точку. Подписываем NDA, фиксируем задачи и метрики, по которым будем считать результат.', tag: 'предоплата 50%' },
{ num: '02', title: 'Стратегия · контент-план', text: 'Готовим маркетинг-стратегию, позиционирование, рубрикатор, визуальный язык и медиаплан. Согласовываем с вами и выходим в производство.', tag: '7–10 дней' },
{ num: '03', title: 'Производство', text: 'Съёмка, монтаж, дизайн, копирайтинг и таргет — всё внутри команды. Контент выходит сериями, реклама запускается на тёплый поток.', tag: 'старт месяца' },
{ num: '04', title: 'Отчёт · итоги', text: 'В конце цикла — отчёт по выручке, заявкам и метрикам, не по охватам. Усиливаем то, что работает, отключаем то, что нет.', tag: 'разбор' }];


/* ----- Cases data (real projects) --------------------------------------- */
const CASES = [
{
  id: 'mezana', code: '01', client: 'Mezana Development',
  niche: 'Недвижимость · Девелопмент', year: '2026',
  img: 'assets/cases/mezana.jpg',
  services: 'SMM, контент-стратегия, продюсирование, сценарии Reels, копирайтинг, управление контент-командой, аналитика.',
  result: 'Более 100 проданных квартир через digital и контент-маркетинг.',
  metrics: [{ value: '100+', label: 'квартир продано' }, { value: 'digital', label: 'канал продаж' }],
  accent: '#8aa9ff'
},
{
  id: 'aviasales', code: '02', client: 'Aviasales',
  niche: 'Travel · Telegram-кампания', year: '2025',
  img: 'assets/cases/aviasales.jpg',
  services: 'Telegram-кампания по продвижению авиабилетов через Aviasales с акцентом на выгодные направления и сезонные предложения.',
  result: 'Охват 13 500 000 при бюджете 220 000 000 сум.',
  metrics: [{ value: '13.5M', label: 'охват' }, { value: '220M', label: 'бюджет, сум' }],
  accent: '#2f6bf2'
},
{
  id: 'yandexgo', code: '03', client: 'Yandex GO',
  niche: 'Доставка · Кампания', year: '2025',
  img: 'assets/cases/yandexgo.jpg',
  services: 'Digital-кампания продвижения сервиса с акцентом на охват и узнаваемость.',
  result: 'Охват 800 000 при бюджете 92 000 000 сум.',
  metrics: [{ value: '800K', label: 'охват' }, { value: '92M', label: 'бюджет, сум' }],
  accent: '#ffd23a'
},
{
  id: 'quanto', code: '04', client: 'Quanto Estate',
  niche: 'Недвижимость · Дубай', year: '2026',
  img: 'assets/cases/quanto.jpg',
  services: 'Контент для недвижимости в Дубае, Reels-сценарии, SMM, продающий digital-контент.',
  result: 'Продающий контент-поток для премиальной недвижимости в Дубае.',
  metrics: null,
  accent: '#5bc7d6'
},
{
  id: 'trilliant', code: '05', client: 'Trilliant',
  niche: 'Недвижимость · Бизнес-центр', year: '2024',
  img: 'assets/cases/trilliant.jpg',
  services: 'SMM, визуальная коммуникация, контент-планирование, аналитика.',
  result: 'Единый визуальный язык и системное ведение соцсетей.',
  metrics: null,
  accent: '#9ab0c4'
},
{
  id: 'geekcon', code: '06', client: 'GeekCon',
  niche: 'Ивент · Мероприятие', year: '2025',
  img: 'assets/cases/geekcon.jpg',
  services: 'SMM, digital-продвижение мероприятия, вовлекающий контент.',
  result: '1200+ проданных билетов на фестиваль.',
  metrics: null,
  accent: '#d6a8ff'
},
{
  id: 'millennium', code: '07', client: 'Millennium House',
  niche: 'Недвижимость', year: '2024',
  img: 'assets/cases/millennium.jpg',
  services: 'Контент-маркетинг, SMM, визуальная стратегия для недвижимости.',
  result: 'Системное контент-планирование и продающая визуальная коммуникация.',
  metrics: null,
  accent: '#a8c4a2'
},
{
  id: 'ofiyat', code: '08', client: 'Ofiyat Residence',
  niche: 'Недвижимость', year: '2024',
  img: 'assets/cases/ofiyat.jpg',
  services: 'Контент-планирование, SMM, сценарии и визуальная коммуникация.',
  result: 'Системное контент-планирование и продающая визуальная коммуникация.',
  metrics: null,
  accent: '#c9a87a'
},
{
  id: 'binaun', code: '09', client: 'Binaun Inshaat',
  niche: 'Недвижимость', year: '2026',
  img: 'assets/cases/binaun.jpg',
  services: 'SMM, контент-продюсирование, сценарии, копирайтинг, контент-стратегия, постановка ТЗ команде.',
  result: 'Системное контент-планирование и продающая визуальная коммуникация.',
  metrics: null,
  accent: '#8aa9ff'
},
{
  id: 'human2human', code: '10', client: 'Human2Human',
  niche: 'Недвижимость', year: '2024',
  img: 'assets/cases/human2human.jpg',
  services: 'Creative marketing, SMM, контент-стратегия, копирайтинг.',
  result: 'Системное контент-планирование и продающая визуальная коммуникация.',
  metrics: null,
  accent: '#f4a8c4'
},
{
  id: 'wesolve', code: '11', client: 'WeSolve',
  niche: 'Компьютеры', year: '2025',
  img: null,
  services: 'Digital-стратегия, SMM, креативный контент, сценарии, аналитика, управление контент-процессами.',
  result: 'Выстроенный контент-процесс и узнаваемость бренда в digital.',
  metrics: null,
  accent: '#8aa9ff'
},
{
  id: 'asfalt24', code: '12', client: 'Asfalt24',
  niche: 'Асфальтирование', year: '2026',
  img: null,
  services: 'Контент-маркетинг, экспертный контент, SMM, копирайтинг, стратегия продвижения.',
  result: 'Экспертное позиционирование и рост входящих заявок.',
  metrics: null,
  accent: '#9ab0c4'
}];


/* ----- Services list component ------------------------------------------ */
function ServicesList({ accent = 'var(--accent)' }) {
  const [hover, setHover] = useState(null);
  return (
    <div style={{ borderTop: '1px solid var(--line)' }}>
      {SERVICES.map((s, i) =>
      <Reveal key={s.num} delay={i * 40}>
          <div
          onMouseEnter={() => setHover(i)}
          onMouseLeave={() => setHover(null)}
          style={{
            display: 'grid',
            gridTemplateColumns: '80px 1fr 1.4fr 60px',
            alignItems: 'center',
            gap: 32,
            padding: '32px 0',
            borderBottom: '1px solid var(--line)',
            transition: 'padding .3s ease, background .3s ease',
            paddingLeft: hover === i ? 24 : 0,
            cursor: 'pointer'
          }}>
          
            <span style={{ color: 'var(--muted)', fontSize: 14, fontFamily: 'JetBrains Mono, ui-monospace, monospace' }}>{s.num}</span>
            <h3 style={{
            fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em', lineHeight: 1,
            color: hover === i ? accent : 'var(--fg)',
            transition: 'color .3s'
          }}>{s.title}</h3>
            <p style={{ color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.5, maxWidth: 540 }}>{s.desc}</p>
            <span style={{ justifySelf: 'end', color: hover === i ? accent : 'var(--muted)', fontSize: 20, transition: 'color .3s, transform .3s', transform: hover === i ? 'translateX(4px)' : 'none' }}>→</span>
          </div>
        </Reveal>
      )}
    </div>);

}

/* ----- Process steps component ------------------------------------------ */
function ProcessSteps() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--line)', border: '1px solid var(--line)' }}>
      {PROCESS.map((p, i) =>
      <Reveal key={p.num} delay={i * 80} style={{ background: 'var(--bg)' }}>
          <div style={{ padding: '40px 28px 48px', minHeight: 360, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 56 }}>
              <span style={{ fontSize: 14, fontFamily: 'JetBrains Mono, monospace', color: 'var(--muted)' }}>{p.num}</span>
              <span style={{ fontSize: 12, color: 'var(--dim)' }}>шаг</span>
            </div>
            <h4 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 16, lineHeight: 1.1 }}>{p.title}</h4>
            <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, marginTop: 'auto' }}>{p.text}</p>
          </div>
        </Reveal>
      )}
    </div>);

}

/* ----- Clients marquee row ---------------------------------------------- */
function ClientsRow({ size = 56 }) {
  return (
    <Marquee
      duration={45}
      fontSize={size}
      items={CLIENTS.map((c) =>
      <span style={{ color: 'var(--fg)', fontWeight: 500, letterSpacing: '-0.03em' }}>{c}</span>
      )} />);


}

/* ----- Footer ----------------------------------------------------------- */
function Footer({ accent = 'var(--accent)' }) {
  const m = useIsMobile();
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '64px 64px 40px' }} className="ak-footer">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 80 }} className="ak-footer-grid">
        <div>
          <div style={{ fontSize: 14, color: 'var(--muted)', marginBottom: 16 }}>© 2026 · Акмаль Хайдаров</div>
          <div style={{ fontSize: 13, color: 'var(--dim)', maxWidth: 320, lineHeight: 1.5 }}>
            Маркетинг, контент и продажи через соцсети. Работаем с проектами, для которых результат — единственная метрика.
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Связь</div>
          <a href="https://t.me/xaydarov_a1" target="_blank" rel="noopener" style={{ fontSize: 16, color: 'var(--fg)', textDecoration: 'none', display: 'block' }}>Telegram · @xaydarov_a1</a>
          <a href="https://www.instagram.com/xaydarov.a1/" target="_blank" rel="noopener" style={{ fontSize: 16, color: 'var(--fg-2)', textDecoration: 'none', display: 'block', marginTop: 4 }}>Instagram · @xaydarov.a1</a>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Соцсети</div>
          <a href="https://t.me/xaydarov_a1" target="_blank" rel="noopener" style={{ fontSize: 16, color: 'var(--fg)', textDecoration: 'none', display: 'block' }}>Telegram ↗</a>
          <a href="https://www.instagram.com/xaydarov.a1/" target="_blank" rel="noopener" style={{ fontSize: 16, color: 'var(--fg-2)', textDecoration: 'none', display: 'block', marginTop: 4 }}>Instagram ↗</a>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>База</div>
          <div style={{ fontSize: 16 }}>Ташкент</div>
          <div style={{ fontSize: 16, color: 'var(--fg-2)' }}>Работаем удалённо</div>
        </div>
      </div>
      <div style={{
        fontWeight: 800, letterSpacing: '-0.06em',
        fontSize: m ? 'clamp(30px, 10vw, 56px)' : 220, lineHeight: 0.85, color: accent, opacity: 0.92,
        whiteSpace: 'nowrap'
      }}>
        khaydarov<span style={{ color: 'var(--fg)' }}>.smm</span>
      </div>
    </footer>);

}

/* ----- Expose to other scripts ----------------------------------------- */
Object.assign(window, {
  Pill, Slot, Marquee, Eyebrow, Reveal,
  ServicesList, ProcessSteps, ClientsRow, Footer,
  SERVICES, NICHES, CLIENTS, CLIENT_LOGOS, PROCESS, CASES
});