// Sections.jsx — PilotBlock, WhatYouGet, HowWorks, PanelMock, TelegramScene, NextSteps

function SectionTag({ children, color = '#3b82f6' }) {
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: `${color}14`, border: `1px solid ${color}30`, borderRadius: 20, padding: '5px 14px', marginBottom: 16 }}>
      <span style={{ fontSize: 11, fontWeight: 700, color, letterSpacing: 2, textTransform: 'uppercase' }}>{children}</span>
    </div>
  );
}

function SecTitle({ children }) {
  return <h2 style={{ fontSize: 'clamp(28px,4vw,48px)', fontWeight: 900, color: '#e2e8f0', marginBottom: 12, lineHeight: 1.1, fontFamily: "'Outfit', sans-serif" }}>{children}</h2>;
}

// ── PILOT BLOCK ──────────────────────────────────────
function PilotBlock({ t, onCTA }) {
  const items = [t.pilot.item1, t.pilot.item2, t.pilot.item3, t.pilot.item4];
  return (
    <section className="sec-pad" style={{ padding: '80px 24px', background: '#0f111a' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div className="pilot-card" style={{
          background: '#130608',
          border: '2px solid #e11d48',
          borderRadius: 24, padding: '48px 56px',
          position: 'relative', overflow: 'hidden',
          boxShadow: '0 0 60px rgba(225,29,72,0.2), inset 0 0 60px rgba(225,29,72,0.03)',
        }}>
          <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, #e11d48, #ff4d6d, #e11d48)', borderRadius: '24px 24px 0 0' }}/>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
              <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#e11d48', animation: 'pulse 1.5s infinite', boxShadow: '0 0 8px #e11d48' }}/>
              <span style={{ fontSize: 12, fontWeight: 800, color: '#e11d48', letterSpacing: 3, textTransform: 'uppercase' }}>{t.pilot.badge}</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.1fr) minmax(0,0.9fr)', gap: 48, alignItems: 'start' }} className="pilot-grid">
              <div>
                <h2 style={{ fontSize: 'clamp(20px,2.5vw,34px)', fontWeight: 900, color: '#ffffff', marginBottom: 16, lineHeight: 1.2, fontFamily: "'Outfit', sans-serif" }}>{t.pilot.title}</h2>
                <p style={{ fontSize: 15, color: '#cbd5e1', lineHeight: 1.7, marginBottom: 32 }}>{t.pilot.sub}</p>
                <button onClick={onCTA} style={{
                  background: '#e11d48', color: '#fff', border: 'none', borderRadius: 10,
                  padding: '14px 28px', fontSize: 15, fontWeight: 700, cursor: 'pointer',
                  boxShadow: '0 4px 24px rgba(225,29,72,0.5)',
                  transition: 'opacity 0.15s',
                  fontFamily: "'DM Sans', sans-serif",
                }}>
                  {t.pilot.cta}
                </button>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {items.map((item, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                    <div style={{ width: 22, height: 22, minWidth: 22, borderRadius: 6, background: '#e11d4825', border: '1px solid #e11d4860', display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: 2 }}>
                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#e11d48" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <span style={{ fontSize: 14, color: '#e2e8f0', lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── PANEL MOCKUP ─────────────────────────────────────
function PanelMock({ lang }) {
  const [activeTab, setActiveTab] = React.useState('overview');

  const PM = {
    uk: {
      tabs: ['Огляд', 'Події', 'Алерти'],
      overview: 'Аналітика прогресу', planned: 'Заплановано', actual: 'Фактично',
      deviations: 'Критичні відхилення', allEvents: 'Всі події →',
      evLog: 'Журнал подій',
      devItems: [
        { t: 'Затримка поставки цементу', s: '6 днів', badge: 'HIGH', c: '#e11d48' },
        { t: 'Виявлено дефекти зварювання', s: 'На розгляді', badge: 'HIGH', c: '#f59e0b' },
      ],
      evItems: [
        { time: 'Сьогодні 14:22', desc: 'Бетонна суміш 15м³ — Секція В, Поверх 3', tag: 'Поставка', tagColor: '#3b82f6' },
        { time: 'Сьогодні 11:05', desc: 'Монтаж арматури завершено — Секція А', tag: 'Прогрес', tagColor: '#10b981' },
        { time: 'Сьогодні 09:30', desc: 'Вікна: розбіжність кількості зі стандартом (+3 шт)', tag: 'Аномалія', tagColor: '#f59e0b' },
        { time: 'Вчора 17:45', desc: 'Тижневий звіт прогресу сформовано — всі секції', tag: 'Звіт', tagColor: '#a855f7' },
      ],
      alertItems: [
        { sev: 'КРИТИЧНО', t: 'Цемент — затримка поставки 6 днів', s: 'Секція А · Відповідальний: Петренко М.', color: '#e11d48' },
        { sev: 'ВИСОКА', t: 'Дефекти зварювання в опорній стіні', s: 'Секція Б · На розгляді', color: '#f59e0b' },
        { sev: 'СЕРЕДНЯ', t: 'Відхилення кількості матеріалів +12%', s: 'Секція В · Потребує підтвердження', color: '#3b82f6' },
      ],
    },
    ru: {
      tabs: ['Обзор', 'События', 'Алерты'],
      overview: 'Аналитика прогресса', planned: 'Запланировано', actual: 'Фактически',
      deviations: 'Критические отклонения', allEvents: 'Все события →',
      evLog: 'Журнал событий',
      devItems: [
        { t: 'Задержка поставки цемента', s: '6 дней', badge: 'HIGH', c: '#e11d48' },
        { t: 'Обнаружены дефекты сварки', s: 'На рассмотрении', badge: 'HIGH', c: '#f59e0b' },
      ],
      evItems: [
        { time: 'Сегодня 14:22', desc: 'Бетонная смесь 15м³ — Секция В, Этаж 3', tag: 'Поставка', tagColor: '#3b82f6' },
        { time: 'Сегодня 11:05', desc: 'Монтаж арматуры завершён — Секция А', tag: 'Прогресс', tagColor: '#10b981' },
        { time: 'Сегодня 09:30', desc: 'Окна: расхождение кол-ва со стандартом (+3 шт)', tag: 'Аномалия', tagColor: '#f59e0b' },
        { time: 'Вчера 17:45', desc: 'Еженедельный отчёт сформирован — все секции', tag: 'Отчёт', tagColor: '#a855f7' },
      ],
      alertItems: [
        { sev: 'КРИТИЧНО', t: 'Цемент — задержка поставки 6 дней', s: 'Секция А · Ответственный: Петренко М.', color: '#e11d48' },
        { sev: 'ВЫСОКАЯ', t: 'Дефекты сварки в опорной стене', s: 'Секция Б · На рассмотрении', color: '#f59e0b' },
        { sev: 'СРЕДНЯЯ', t: 'Отклонение кол-ва материалов +12%', s: 'Секция В · Требует подтверждения', color: '#3b82f6' },
      ],
    },
    en: {
      tabs: ['Overview', 'Events', 'Alerts'],
      overview: 'Progress Analytics', planned: 'Planned', actual: 'Actual',
      deviations: 'Critical Deviations', allEvents: 'All events →',
      evLog: 'Event Log',
      devItems: [
        { t: 'Cement delivery delay', s: '6 days', badge: 'HIGH', c: '#e11d48' },
        { t: 'Welding defects detected', s: 'Under review', badge: 'HIGH', c: '#f59e0b' },
      ],
      evItems: [
        { time: 'Today 14:22', desc: 'Concrete mix 15m³ — Section C, Floor 3', tag: 'Delivery', tagColor: '#3b82f6' },
        { time: 'Today 11:05', desc: 'Rebar installation completed — Section A', tag: 'Progress', tagColor: '#10b981' },
        { time: 'Today 09:30', desc: 'Windows: qty mismatch vs standard (+3 units)', tag: 'Anomaly', tagColor: '#f59e0b' },
        { time: 'Yesterday 17:45', desc: 'Weekly progress report generated — all sections', tag: 'Report', tagColor: '#a855f7' },
      ],
      alertItems: [
        { sev: 'CRITICAL', t: 'Cement delivery 6 days overdue', s: 'Section A · Responsible: Petrenko M.', color: '#e11d48' },
        { sev: 'HIGH', t: 'Welding defects in support wall', s: 'Section B · Under review', color: '#f59e0b' },
        { sev: 'MEDIUM', t: 'Material qty deviation +12%', s: 'Section C · Requires confirmation', color: '#3b82f6' },
      ],
    },
  };
  const p = PM[lang] || PM.en;
  const tabs = p.tabs.map((label, i) => ({ id: ['overview','events','alerts'][i], label }));

  return (
    <div className="panel-mock-wrap" style={{ background: '#0f111a', border: '1px solid #1e293b', borderRadius: 16, overflow: 'hidden', boxShadow: '0 32px 80px rgba(0,0,0,0.6)', maxWidth: 860, margin: '0 auto' }}>
      {/* Panel header */}
      <div className="panel-mock-header" style={{ background: '#151925', borderBottom: '1px solid #1e293b', padding: '12px 20px', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, background: '#3b82f6', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{ fontSize: 12, fontWeight: 900, color: '#fff' }}>B</span>
        </div>
        <span style={{ fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>BLD Panel</span>
        <span style={{ fontSize: 11, color: '#475569', marginLeft: 4 }}>ЖК Сонячна Брама</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          {tabs.map(tab => (
            <button key={tab.id} onClick={() => setActiveTab(tab.id)} style={{
              background: activeTab === tab.id ? '#1a1f2e' : 'transparent',
              border: activeTab === tab.id ? '1px solid #1e293b' : '1px solid transparent',
              borderRadius: 6, padding: '5px 12px', fontSize: 12, fontWeight: 600,
              color: activeTab === tab.id ? '#e2e8f0' : '#64748b', cursor: 'pointer',
            }}>{tab.label}</button>
          ))}
        </div>
      </div>
      {/* Panel content */}
      <div className="panel-mock-content" style={{ padding: 20 }}>
        {activeTab === 'overview' && (
          <div className="panel-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {/* Progress chart */}
            <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 12, padding: 16 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#e2e8f0', marginBottom: 12 }}>{p.overview}</div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 12, fontSize: 11 }}>
                <span style={{ color: '#3b82f6' }}>● {p.planned}</span>
                <span style={{ color: '#10b981' }}>● {p.actual}</span>
              </div>
              <svg viewBox="0 0 260 100" style={{ width: '100%', height: 90 }}>
                <polyline points="0,95 40,80 80,65 120,50 160,35 200,20 260,10" fill="none" stroke="#3b82f640" strokeWidth="2" strokeDasharray="4,4"/>
                <polyline points="0,95 40,82 80,68 120,52 160,38 200,25 260,18" fill="none" stroke="#10b981" strokeWidth="2"/>
                {[0,40,80,120,160,200,260].map((x,i) => (
                  <circle key={i} cx={x} cy={[95,82,68,52,38,25,18][i]} r="3" fill="#10b981"/>
                ))}
              </svg>
            </div>
            {/* Critical deviations */}
            <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 12, padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 12 }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#e11d48" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                <span style={{ fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>{p.deviations}</span>
              </div>
              {p.devItems.map((item, i) => (
                <div key={i} style={{ background: '#1a1f2e', border: `1px solid ${item.c}20`, borderRadius: 8, padding: '10px 12px', marginBottom: 8 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontSize: 12, color: '#e2e8f0', fontWeight: 600 }}>{item.t}</span>
                    <span style={{ fontSize: 10, background: `${item.c}20`, color: item.c, borderRadius: 4, padding: '2px 6px', fontWeight: 700 }}>{item.badge}</span>
                  </div>
                  <div style={{ fontSize: 11, color: '#64748b', marginTop: 4 }}>{item.s}</div>
                </div>
              ))}
            </div>
            {/* Events log */}
            <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 12, padding: 16, gridColumn: '1 / -1' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
                <span style={{ fontSize: 13, fontWeight: 700, color: '#e2e8f0' }}>{p.evLog}</span>
                <span style={{ fontSize: 11, color: '#3b82f6', cursor: 'pointer' }}>{p.allEvents}</span>
              </div>
              <table className="panel-mock-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
                <thead>
                  <tr>
                    {['ДАТА', 'ПОДІЯ', 'АВТОР', 'ОПИС'].map(h => (
                      <td key={h} style={{ fontSize: 10, color: '#475569', fontWeight: 700, padding: '0 0 8px', letterSpacing: 1 }}>{h}</td>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {[
                    { d: '13.02 10:30', ev: 'Фотофіксація', who: 'Петренко М.І.', desc: 'Завершено бетонування фундаменту...', color: '#10b981' },
                    { d: '13.02 09:15', ev: 'Доставка матеріалів', who: 'Система', desc: 'Отримано партію арматури 20 тонн...', color: '#3b82f6' },
                    { d: '12.02 16:45', ev: '⚠ Критичне відхилення', who: 'Коваленко А.С.', desc: 'Виявлено тріщину в опорній стіні...', color: '#e11d48' },
                  ].map((row, i) => (
                    <tr key={i}>
                      <td style={{ fontSize: 11, color: '#64748b', padding: '8px 0', whiteSpace: 'nowrap' }}>{row.d}</td>
                      <td style={{ fontSize: 11, color: row.color, fontWeight: 600, padding: '8px 8px' }}>{row.ev}</td>
                      <td style={{ fontSize: 11, color: '#94a3b8', padding: '8px 8px' }}>{row.who}</td>
                      <td style={{ fontSize: 11, color: '#475569', padding: '8px 0', maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{row.desc}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}
        {activeTab === 'events' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {p.evItems.map((e, i) => (
              <div key={i} style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 10, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 16 }}>
                <span style={{ fontSize: 11, color: '#475569', whiteSpace: 'nowrap', minWidth: 100 }}>{e.time}</span>
                <span style={{ flex: 1, fontSize: 13, color: '#e2e8f0' }}>{e.desc}</span>
                <span style={{ fontSize: 10, background: `${e.tagColor}20`, color: e.tagColor, borderRadius: 4, padding: '3px 8px', fontWeight: 700 }}>{e.tag}</span>
              </div>
            ))}
          </div>
        )}
        {activeTab === 'alerts' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {p.alertItems.map((a, i) => (
              <div key={i} style={{ background: '#151925', border: `1px solid ${a.color}30`, borderRadius: 10, padding: '14px 18px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                  <span style={{ fontSize: 10, background: `${a.color}20`, color: a.color, borderRadius: 4, padding: '2px 8px', fontWeight: 800 }}>{a.sev}</span>
                  <span style={{ fontSize: 14, color: '#e2e8f0', fontWeight: 600 }}>{a.t}</span>
                </div>
                <span style={{ fontSize: 12, color: '#64748b' }}>{a.s}</span>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// ── WHAT YOU GET ─────────────────────────────────────
function WhatYouGet({ t, lang }) {
  return (
    <section className="sec-pad" style={{ padding: '100px 24px', background: '#0b0d14' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionTag color="#10b981">PRODUCT</SectionTag>
          <SecTitle>{t.what.title}</SecTitle>
          <p style={{ fontSize: 17, color: '#64748b', maxWidth: 500, margin: '0 auto' }}>{t.what.sub}</p>
        </div>
        <div className="what-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {t.what.cards.map((card, i) => {
            const colors = ['#3b82f6','#10b981','#e11d48','#2AABEE','#a855f7','#f59e0b'];
            const color = colors[i % colors.length];
            const icons = ['▤','◈','⚡','✈','◉','✉'];
            const isLight = i === 3; // Telegram card — white highlight
            return (
              <div key={i} style={{
                background: isLight ? '#ffffff' : '#151925',
                border: isLight ? 'none' : `1px solid ${color}20`,
                borderRadius: 18,
                padding: 28,
                boxShadow: isLight ? '0 8px 32px rgba(0,0,0,0.3)' : 'none',
                transition: 'transform 0.2s, box-shadow 0.2s',
                position: 'relative',
                overflow: 'hidden',
              }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-5px)'; e.currentTarget.style.boxShadow = isLight ? '0 16px 48px rgba(0,0,0,0.4)' : `0 8px 32px ${color}20`; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = isLight ? '0 8px 32px rgba(0,0,0,0.3)' : 'none'; }}
              >
                {isLight && <div style={{ position: 'absolute', top: -20, right: -20, width: 100, height: 100, borderRadius: '50%', background: 'rgba(42,171,238,0.08)' }}/>}
                <div style={{ width: 44, height: 44, borderRadius: 12, background: isLight ? `${color}15` : `${color}14`, border: `1px solid ${color}30`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, fontSize: 20, color }}>{icons[i]}</div>
                <h3 style={{ fontSize: 16, fontWeight: 700, color: isLight ? '#0f111a' : '#e2e8f0', marginBottom: 8 }}>{card.t}</h3>
                <p style={{ fontSize: 14, color: isLight ? '#334155' : '#64748b', lineHeight: 1.6 }}>{card.d}</p>
              </div>
            );
          })}
        </div>
        {/* Panel mockup */}
        <div style={{ marginTop: 64 }}>
          <div style={{ textAlign: 'center', marginBottom: 32 }}>
            <p style={{ fontSize: 14, color: '#475569', letterSpacing: 2, textTransform: 'uppercase', fontWeight: 700 }}>
              {t.what.sub.split('.')[0]} →
            </p>
          </div>
          <PanelMock lang={lang} />
        </div>
      </div>
    </section>
  );
}

// ── HOW IT WORKS ─────────────────────────────────────
function HowWorks({ t }) {
  return (
    <section className="sec-pad" style={{ padding: '100px 24px', background: '#0f111a' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionTag color="#3b82f6">ROLES</SectionTag>
          <SecTitle>{t.howWorks.title}</SecTitle>
          <p style={{ fontSize: 17, color: '#64748b', maxWidth: 580, margin: '0 auto' }}>{t.howWorks.sub}</p>
        </div>
        <div className="roles-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {t.howWorks.roles.map((role, i) => (
            <div key={i} style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 16, padding: 28, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 20, right: 20 }}>
                <span style={{ fontSize: 10, background: i === 0 ? '#10b98120' : '#3b82f620', color: i === 0 ? '#10b981' : '#3b82f6', borderRadius: 4, padding: '3px 8px', fontWeight: 700, textTransform: 'uppercase' }}>{role.tag}</span>
              </div>
              <div style={{ width: 48, height: 48, borderRadius: 12, background: i === 0 ? '#10b98114' : '#3b82f614', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, fontSize: 22 }}>
                {['🏗️','💻','🔍'][i]}
              </div>
              <h3 style={{ fontSize: 18, fontWeight: 700, color: '#e2e8f0', marginBottom: 10 }}>{role.role}</h3>
              <p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.7 }}>{role.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── TELEGRAM SCENE ───────────────────────────────────
function TelegramScene({ t, lang }) {
  const [visibleSteps, setVisibleSteps] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setVisibleSteps(v => v < t.tg.steps.length ? v + 1 : v);
    }, 1400);
    return () => clearInterval(interval);
  }, [t]);

  return (
    <section className="sec-pad" style={{ padding: '100px 24px', background: '#0b0d14' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionTag color="#2AABEE">TELEGRAM → PANEL</SectionTag>
          <SecTitle>{t.tg.title}</SecTitle>
          <p style={{ fontSize: 17, color: '#64748b', maxWidth: 540, margin: '0 auto' }}>{t.tg.sub}</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }} className="tg-grid">

          {/* Phone frame with real Telegram UI */}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <div className="tg-phone" style={{
              width: 320,
              background: '#1c1c1e',
              borderRadius: 44,
              padding: '14px 8px 10px',
              boxShadow: '0 0 0 2px #3a3a3c, 0 0 0 4px #2c2c2e, 0 40px 80px rgba(0,0,0,0.7)',
              position: 'relative',
            }}>
              {/* Side buttons */}
              <div style={{ position: 'absolute', left: -3, top: 100, width: 3, height: 32, background: '#3a3a3c', borderRadius: '2px 0 0 2px' }}/>
              <div style={{ position: 'absolute', left: -3, top: 144, width: 3, height: 56, background: '#3a3a3c', borderRadius: '2px 0 0 2px' }}/>
              <div style={{ position: 'absolute', left: -3, top: 210, width: 3, height: 56, background: '#3a3a3c', borderRadius: '2px 0 0 2px' }}/>
              <div style={{ position: 'absolute', right: -3, top: 160, width: 3, height: 72, background: '#3a3a3c', borderRadius: '0 2px 2px 0' }}/>
              {/* Dynamic island */}
              <div style={{ width: 110, height: 30, background: '#1c1c1e', borderRadius: 20, margin: '0 auto 8px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
                <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#2c2c2e' }}/>
                <div style={{ width: 50, height: 10, borderRadius: 8, background: '#2c2c2e' }}/>
              </div>
              {/* Screen */}
              <div style={{ borderRadius: 32, overflow: 'hidden', background: '#ffffff' }}>
                {/* Status bar */}
                <div style={{ background: '#ffffff', padding: '8px 20px 4px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span style={{ fontSize: 12, fontWeight: 700, color: '#000' }}>9:41</span>
                  <div style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
                    <svg width="14" height="10" viewBox="0 0 14 10"><rect x="0" y="3" width="2" height="7" rx="1" fill="#000"/><rect x="3" y="2" width="2" height="8" rx="1" fill="#000"/><rect x="6" y="1" width="2" height="9" rx="1" fill="#000"/><rect x="9" y="0" width="2" height="10" rx="1" fill="#000"/></svg>
                    <svg width="14" height="10" viewBox="0 0 20 14" fill="none" stroke="#000" strokeWidth="2"><path d="M1 5C4.3 1.7 8 0 10 0s5.7 1.7 9 5"/><path d="M3.5 7.5C6 5 8 4 10 4s4 1 6.5 3.5"/><path d="M6 10c1.3-1.3 2.7-2 4-2s2.7.7 4 2"/><circle cx="10" cy="13" r="1.5" fill="#000" stroke="none"/></svg>
                    <div style={{ width: 22, height: 11, borderRadius: 3, border: '1.5px solid #000', padding: '1px 1px', display: 'flex', alignItems: 'center' }}>
                      <div style={{ width: '85%', height: '100%', background: '#000', borderRadius: 1.5 }}/>
                    </div>
                  </div>
                </div>
                {/* Telegram header */}
                <div style={{ background: '#ffffff', padding: '8px 16px 10px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid #f0f0f0' }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2AABEE" strokeWidth="2"><polyline points="15 18 9 12 15 6"/></svg>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#2AABEE', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.08-.65.02-.18.27-.36.74-.55 2.92-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .24z"/></svg>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, color: '#000', lineHeight: 1.2 }}>BLD Construction Software</div>
                    <div style={{ fontSize: 10, color: '#2AABEE' }}>bot</div>
                  </div>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#aaa" strokeWidth="2"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
                </div>
                {/* Messages */}
                <div style={{ background: '#e5ddd5', backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23c5b8a8\' fill-opacity=\'0.15\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")', padding: '12px 10px', minHeight: 260, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {/* Date bubble */}
                  <div style={{ textAlign: 'center', marginBottom: 4 }}>
                    <span style={{ background: 'rgba(0,0,0,0.25)', color: '#fff', fontSize: 10, borderRadius: 8, padding: '3px 8px' }}>Today</span>
                  </div>
                  {t.tg.steps.slice(0, visibleSteps).map((step, i) => {
                    const isBot = step.from === 'BLD';
                    return (
                      <div key={i} style={{ display: 'flex', justifyContent: isBot ? 'flex-start' : 'flex-end', animation: 'slideUp 0.3s ease' }}>
                        <div style={{
                          background: isBot ? '#ffffff' : '#dcf8c6',
                          borderRadius: isBot ? '4px 12px 12px 12px' : '12px 4px 12px 12px',
                          padding: '7px 10px', maxWidth: '82%',
                          boxShadow: '0 1px 2px rgba(0,0,0,0.15)',
                        }}>
                          {isBot && <div style={{ fontSize: 10, color: '#2AABEE', marginBottom: 2, fontWeight: 700 }}>BLD Construction Software</div>}
                          <div style={{ fontSize: 12, color: '#1a1a1a', lineHeight: 1.5 }}>{step.msg}</div>
                          <div style={{ fontSize: 9, color: '#999', textAlign: 'right', marginTop: 2, display: 'flex', justifyContent: 'flex-end', alignItems: 'center', gap: 2 }}>
                            {['10:31','10:31','10:32','10:32'][i]}
                            {!isBot && <span style={{ color: '#4fc3f7' }}>✓✓</span>}
                          </div>
                        </div>
                      </div>
                    );
                  })}
                  {visibleSteps < t.tg.steps.length && (
                    <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
                      <div style={{ background: '#fff', borderRadius: '4px 12px 12px 12px', padding: '8px 12px', display: 'flex', gap: 3, alignItems: 'center', boxShadow: '0 1px 2px rgba(0,0,0,0.15)' }}>
                        {[0,1,2].map(d => <div key={d} style={{ width: 6, height: 6, borderRadius: '50%', background: '#aaa', animation: `bounce 1.2s ${d*0.2}s infinite` }}/>)}
                      </div>
                    </div>
                  )}
                </div>
                {/* Input bar */}
                <div style={{ background: '#f0f0f0', padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ flex: 1, background: '#fff', borderRadius: 20, padding: '7px 14px', fontSize: 12, color: '#aaa' }}>
                    {t.tg.steps[0]?.from === 'BLD' ? 'Написати...' : 'Написати...'}
                  </div>
                  <div style={{ width: 32, height: 32, borderRadius: '50%', background: '#2AABEE', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                  </div>
                </div>
              </div>
              {/* Home indicator */}
              <div style={{ width: 100, height: 4, background: '#555', borderRadius: 2, margin: '8px auto 0' }}/>
            </div>
          </div>

          {/* Panel result */}
          <div>
            <p style={{ fontSize: 15, color: '#64748b', marginBottom: 28, lineHeight: 1.6 }}>{t.tg.panelNote}</p>
            <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 16, padding: 24 }}>
              <div style={{ fontSize: 11, color: '#475569', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 20 }}>{lang === 'uk' ? 'Панель BLD' : lang === 'ru' ? 'Панель BLD' : 'BLD Panel'}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {[
                  { icon: '📦', label: t.tg.steps[0]?.msg?.slice(0,28) || '', value: lang==='uk'?'Арматура 20т · Секція Б':lang==='ru'?'Арматура 20т · Секция Б':'Rebar 20t · Section B', color: '#10b981' },
                  { icon: '⚠️', label: lang==='uk'?'Відхилення зафіксовано':lang==='ru'?'Отклонение зафиксировано':'Deviation flagged', value: lang==='uk'?'+2т вище норми':lang==='ru'?'+2т выше нормы':'+2t over standard', color: '#f59e0b' },
                  { icon: '📋', label: lang==='uk'?'Подію створено':lang==='ru'?'Событие создано':'Event created', value: lang==='uk'?'Накладну #2402 оброблено':lang==='ru'?'Накладная #2402 обработана':'Invoice #2402 processed', color: '#3b82f6' },
                ].map((item, i) => (
                  <div key={i} style={{ background: '#1a1f2e', border: `1px solid ${item.color}20`, borderRadius: 10, padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, opacity: visibleSteps > i + 1 ? 1 : 0.25, transition: 'opacity 0.5s' }}>
                    <span style={{ fontSize: 18 }}>{item.icon}</span>
                    <div>
                      <div style={{ fontSize: 11, color: item.color, fontWeight: 700 }}>{item.label}</div>
                      <div style={{ fontSize: 12, color: '#94a3b8', marginTop: 2 }}>{item.value}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}


// ── NEXT STEPS ───────────────────────────────────────
function NextSteps({ t }) {
  return (
    <section id="next" className="sec-pad" style={{ padding: '100px 24px', background: '#0b0d14' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <SectionTag color="#a855f7">PROCESS</SectionTag>
          <SecTitle>{t.next.title}</SecTitle>
        </div>
        <div className="next-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {t.next.steps.map((step, i) => (
            <div key={i} style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: 16, padding: 24, position: 'relative' }}>
              <div style={{ fontSize: 42, fontWeight: 900, color: '#1e293b', fontFamily: "'Outfit', sans-serif", marginBottom: 12, lineHeight: 1 }}>{step.n}</div>
              <h3 style={{ fontSize: 16, fontWeight: 700, color: '#e2e8f0', marginBottom: 8 }}>{step.t}</h3>
              <p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.6 }}>{step.d}</p>
              {i < t.next.steps.length - 1 && (
                <div style={{ position: 'absolute', bottom: -20, left: '50%', transform: 'translateX(-50%)', color: '#1e293b', fontSize: 20, display: 'none' }}>↓</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


// ── CHAT SECTION ─────────────────────────────────────
// System prompt for the AI lives in config.js (window.BLD_CONFIG.GEMINI_SYSTEM_PROMPT).

function ChatSection({ t, lang }) {
  const [messages, setMessages] = React.useState([]);
  const [input, setInput] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [leadSaved, setLeadSaved] = React.useState(false);
  const endRef = React.useRef(null);

  const scrollDown = () => { if (endRef.current) endRef.current.parentElement.scrollTop = endRef.current.offsetTop; };
  React.useEffect(scrollDown, [messages]);

  const greeting = lang === 'uk'
    ? 'Привіт! Я можу відповісти на питання про BLD, пілот, вартість або налаштування. Що вас цікавить?'
    : lang === 'ru'
    ? 'Привет! Могу ответить на вопросы о BLD, пилоте, стоимости или настройке. Что вас интересует?'
    : 'Hi! I can answer questions about BLD, the pilot, pricing, or setup. What would you like to know?';

  const successLabel =
    lang === 'uk' ? '✓ Заявку збережено' :
    lang === 'ru' ? '✓ Заявка сохранена' :
    '✓ Application saved';

  const sendMessage = async (text) => {
    if (!text.trim() || loading) return;
    setMessages(m => [...m, { role: 'user', content: text }]);
    setInput('');
    setLoading(true);
    try {
      const raw = await window.bldAI.complete({ history: messages, userMessage: text });
      const { text: displayText, lead } = window.bldDB.parseLeadFromReply(raw);
      setMessages(m => [...m, { role: 'assistant', content: displayText, leadConfirmed: !!lead }]);

      if (lead && !leadSaved) {
        try {
          await window.bldDB.submitAILead({ ...lead, lang });
          setLeadSaved(true);
        } catch (err) {
          console.error('[BLD lead save]', err);
          setMessages(m => [...m, {
            role: 'assistant',
            content: lang === 'uk' ? '⚠️ Заявку не вдалося зберегти. Напишіть нам на email.' :
                     lang === 'ru' ? '⚠️ Заявку не удалось сохранить. Напишите нам на email.' :
                     '⚠️ Could not save your application. Please email us.',
          }]);
        }
      }
    } catch (err) {
      console.error('[BLD AI]', err);
      setMessages(m => [...m, { role: 'assistant', content: t.chat.errorMsg }]);
    }
    setLoading(false);
  };

  const scrollToForm = () => { const el = document.getElementById('form'); if (el) el.scrollIntoView({ behavior: 'smooth' }); };

  const navItems = [
    { icon: '◉', label: lang === 'uk' ? 'Мої проекти' : lang === 'ru' ? 'Мои проекты' : 'My Projects', active: false },
    { icon: '◈', label: lang === 'uk' ? 'Стандарти' : lang === 'ru' ? 'Стандарты' : 'Standards', active: false },
    { icon: '⚡', label: lang === 'uk' ? 'Підтримка' : lang === 'ru' ? 'Поддержка' : 'Support', active: true },
  ];

  return (
    <section className="chat-section-pad" style={{ padding: '100px 24px', background: '#0f111a' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: '#3b82f614', border: '1px solid #3b82f630', borderRadius: 20, padding: '5px 14px', marginBottom: 16 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#3b82f6', animation: 'pulse 1.5s infinite' }}/>
            <span style={{ fontSize: 11, fontWeight: 700, color: '#3b82f6', letterSpacing: 2, textTransform: 'uppercase' }}>AI ASSISTANT</span>
          </div>
          <h2 style={{ fontSize: 'clamp(26px,3.5vw,42px)', fontWeight: 900, color: '#e2e8f0', marginBottom: 12, fontFamily: "'Outfit', sans-serif" }}>{t.chat.title}</h2>
          <p style={{ fontSize: 16, color: '#64748b' }}>
            {lang === 'uk' ? 'Запитайте про пілот, вартість або як BLD працює — прямо тут.' :
             lang === 'ru' ? 'Спросите о пилоте, стоимости или как работает BLD — прямо здесь.' :
             'Ask about the pilot, pricing, or how BLD works — right here.'}
          </p>
        </div>

        {/* Full-width panel-style chat */}
        <div className="chat-wrapper" style={{
          background: '#0f111a', border: '1px solid #1e293b', borderRadius: 20,
          overflow: 'hidden', display: 'flex', height: 580,
          boxShadow: '0 32px 80px rgba(0,0,0,0.6)',
        }}>
          {/* Sidebar */}
          <div className="chat-sidebar" style={{ width: 240, background: '#151925', borderRight: '1px solid #1e293b', display: 'flex', flexDirection: 'column', flexShrink: 0 }}>
            {/* Logo */}
            <div style={{ padding: '18px 18px 14px', borderBottom: '1px solid #1e293b', display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 30, height: 30, borderRadius: 9, background: 'linear-gradient(135deg,#3b82f6,#2563eb)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <span style={{ fontSize: 13, fontWeight: 900, color: '#fff', fontFamily: "'Outfit', sans-serif" }}>B</span>
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 800, color: '#e2e8f0' }}>BLD Panel</div>
                <div style={{ fontSize: 10, color: '#475569' }}>Demo</div>
              </div>
            </div>
            {/* Nav */}
            <div style={{ padding: '12px 8px', flex: 1 }}>
              {navItems.map((item, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px',
                  borderRadius: 8, marginBottom: 2, cursor: 'pointer',
                  background: item.active ? '#1a1f2e' : 'transparent',
                  color: item.active ? '#e2e8f0' : '#64748b',
                  transition: 'all 0.15s',
                }}>
                  <span style={{ fontSize: 14, color: item.active ? '#3b82f6' : '#475569' }}>{item.icon}</span>
                  <span style={{ fontSize: 13, fontWeight: item.active ? 600 : 400 }}>{item.label}</span>
                  {item.active && <div style={{ marginLeft: 'auto', width: 6, height: 6, borderRadius: '50%', background: '#3b82f6' }}/>}
                </div>
              ))}
            </div>
            {/* Suggestions */}
            <div style={{ padding: '12px 10px', borderTop: '1px solid #1e293b' }}>
              <div style={{ fontSize: 10, color: '#334155', fontWeight: 700, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8, padding: '0 4px' }}>
                {lang === 'uk' ? 'Спробуйте запитати' : lang === 'ru' ? 'Попробуйте спросить' : 'Try asking'}
              </div>
              {t.chat.suggestions.map((s, i) => (
                <button key={i} onClick={() => sendMessage(s)} style={{
                  width: '100%', background: 'transparent', border: 'none', borderRadius: 6,
                  padding: '7px 8px', fontSize: 11, color: '#475569', cursor: 'pointer',
                  textAlign: 'left', marginBottom: 2, transition: 'all 0.15s',
                  fontFamily: "'DM Sans', sans-serif", lineHeight: 1.4,
                }}
                  onMouseEnter={e => { e.currentTarget.style.background='#1a1f2e'; e.currentTarget.style.color='#94a3b8'; }}
                  onMouseLeave={e => { e.currentTarget.style.background='transparent'; e.currentTarget.style.color='#475569'; }}
                >{s}</button>
              ))}
            </div>
          </div>

          {/* Main chat area */}
          <div className="chat-main" style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
            {/* Header */}
            <div className="chat-main-header" style={{ background: '#151925', borderBottom: '1px solid #1e293b', padding: '14px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#10b981', boxShadow: '0 0 6px #10b981' }}/>
              <span style={{ fontSize: 14, fontWeight: 700, color: '#e2e8f0' }}>BLD AI Assistant</span>
              <span style={{ fontSize: 11, color: '#334155', background: '#1a1f2e', borderRadius: 4, padding: '2px 8px', marginLeft: 4 }}>MVP</span>
              {leadSaved && (
                <span style={{ fontSize: 11, color: '#10b981', fontWeight: 700, background: '#10b98115', border: '1px solid #10b98130', borderRadius: 6, padding: '3px 8px', marginLeft: 4 }}>{successLabel}</span>
              )}
              <div style={{ marginLeft: 'auto', display: 'flex', gap: 6 }}>
                {['#ef4444','#f59e0b','#10b981'].map(c => <div key={c} style={{ width: 10, height: 10, borderRadius: '50%', background: c, opacity: 0.7 }}/>)}
              </div>
            </div>

            {/* Messages */}
            <div className="chat-main-messages" style={{ flex: 1, overflowY: 'auto', padding: '24px', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <div style={{ width: 28, height: 28, borderRadius: 8, background: '#3b82f620', border: '1px solid #3b82f640', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 900, color: '#3b82f6' }}>B</div>
                <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: '4px 14px 14px 14px', padding: '14px 18px', maxWidth: '75%' }}>
                  <p style={{ fontSize: 14, color: '#cbd5e1', lineHeight: 1.7, margin: 0 }}>{greeting}</p>
                </div>
              </div>

              {/* Mobile-only quick suggestions (hidden on desktop) */}
              {messages.length === 0 && (
                <div className="chat-mobile-suggestions" style={{ flexDirection: 'column', gap: 6, marginLeft: 40 }}>
                  {t.chat.suggestions.map((s, i) => (
                    <button key={i} onClick={() => sendMessage(s)} style={{
                      background: '#151925', border: '1px solid #1e293b', borderRadius: 8,
                      padding: '9px 12px', fontSize: 12, color: '#94a3b8', cursor: 'pointer',
                      textAlign: 'left', fontFamily: "'DM Sans', sans-serif", lineHeight: 1.4,
                    }}>{s}</button>
                  ))}
                </div>
              )}

              {messages.map((msg, i) => {
                const isUser = msg.role === 'user';
                const hasFormRef = /заявк|apply|form|пілот|pilot|пилот/i.test(msg.content);
                return (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', justifyContent: isUser ? 'flex-end' : 'flex-start', animation: 'slideUp 0.3s ease' }}>
                    {!isUser && <div style={{ width: 28, height: 28, borderRadius: 8, background: '#3b82f620', border: '1px solid #3b82f640', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 900, color: '#3b82f6' }}>B</div>}
                    <div style={{ background: isUser ? '#1d4ed8' : '#151925', border: isUser ? 'none' : '1px solid #1e293b', borderRadius: isUser ? '14px 4px 14px 14px' : '4px 14px 14px 14px', padding: '12px 16px', maxWidth: '72%' }}>
                      <p style={{ fontSize: 14, color: '#e2e8f0', lineHeight: 1.7, margin: 0, whiteSpace: 'pre-wrap' }}>{msg.content}</p>
                      {msg.leadConfirmed && (
                        <div style={{ marginTop: 10, background: '#10b98115', border: '1px solid #10b98130', borderRadius: 8, padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 6 }}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#10b981" strokeWidth="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                          <span style={{ fontSize: 12, color: '#10b981', fontWeight: 700 }}>{successLabel}</span>
                        </div>
                      )}
                      {!isUser && !msg.leadConfirmed && hasFormRef && (
                        <button onClick={scrollToForm} style={{ marginTop: 10, background: '#3b82f620', border: '1px solid #3b82f640', borderRadius: 6, padding: '6px 12px', fontSize: 12, color: '#3b82f6', cursor: 'pointer', fontWeight: 700, fontFamily: "'DM Sans', sans-serif" }}>
                          {lang === 'uk' ? '→ Залишити заявку' : lang === 'ru' ? '→ Оставить заявку' : '→ Apply for pilot'}
                        </button>
                      )}
                    </div>
                    {isUser && <div style={{ width: 28, height: 28, borderRadius: 8, background: '#1d4ed820', border: '1px solid #1d4ed840', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 11, color: '#93c5fd' }}>✎</div>}
                  </div>
                );
              })}

              {loading && (
                <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <div style={{ width: 28, height: 28, borderRadius: 8, background: '#3b82f620', border: '1px solid #3b82f640', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontSize: 12, fontWeight: 900, color: '#3b82f6' }}>B</div>
                  <div style={{ background: '#151925', border: '1px solid #1e293b', borderRadius: '4px 14px 14px 14px', padding: '14px 18px' }}>
                    <div style={{ display: 'flex', gap: 5 }}>
                      {[0,1,2].map(d => <div key={d} style={{ width: 7, height: 7, borderRadius: '50%', background: '#3b82f6', animation: `bounce 1.2s ${d*0.2}s infinite` }}/>)}
                    </div>
                  </div>
                </div>
              )}
              <div ref={endRef}/>
            </div>

            {/* Input */}
            <div className="chat-main-input-wrap" style={{ padding: '14px 24px 18px', borderTop: '1px solid #1e293b', background: '#0f111a' }}>
              {leadSaved ? (
                <div style={{ textAlign: 'center', padding: '8px 0', fontSize: 13, color: '#10b981', fontWeight: 600 }}>
                  {lang === 'uk' ? 'Заявку отримано. Зв\'яжемось з вами на email.' :
                   lang === 'ru' ? 'Заявка получена. Свяжемся с вами по email.' :
                   'Application received. We\'ll reach out by email.'}
                </div>
              ) : (
              <div style={{ display: 'flex', gap: 10, alignItems: 'center', background: '#151925', border: '1px solid #1e293b', borderRadius: 12, padding: '4px 4px 4px 16px', transition: 'border-color 0.15s' }}
                onFocusCapture={e => e.currentTarget.style.borderColor='#3b82f6'}
                onBlurCapture={e => e.currentTarget.style.borderColor='#1e293b'}
              >
                <input
                  value={input}
                  onChange={e => setInput(e.target.value)}
                  onKeyDown={e => { if (e.key === 'Enter') sendMessage(input); }}
                  placeholder={t.chat.placeholder}
                  style={{ flex: 1, background: 'transparent', border: 'none', color: '#e2e8f0', fontSize: 14, outline: 'none', fontFamily: "'DM Sans', sans-serif", padding: '10px 0' }}
                />
                <button onClick={() => sendMessage(input)} disabled={loading || !input.trim()} style={{
                  width: 40, height: 40, borderRadius: 9, border: 'none',
                  background: input.trim() && !loading ? '#3b82f6' : '#1a1f2e',
                  color: '#fff', cursor: input.trim() && !loading ? 'pointer' : 'default',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0, transition: 'background 0.15s',
                }}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
                </button>
              </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PilotBlock, WhatYouGet, HowWorks, TelegramScene, NextSteps, ChatSection });