// Shared components for all Botlex landing variants
const { useState, useEffect, useRef, useMemo } = React;

// ============ BOTLEX LOGO ============
function BotlexLogo({ size = 28, color = "#003366", showWordmark = true }) {
  return (
    <span
      style={{
        display: "inline-flex",
        alignItems: "center",
        fontWeight: 900,
        fontSize: 25.4,
        lineHeight: 1,
        letterSpacing: "-0.04em",
        color,
        fontFamily: "Manrope, sans-serif"
      }}>
      BOTLEX
    </span>);

}

// ============ ANIMATED CHAT (Instagram Direct style) ============
const DEFAULT_SCRIPT = [
{ from: "user", text: "Добрий день! Яка ціна?", delay: 700 },
{ from: "ai", typing: 1100, text: "Вітаю! Мене звати Марина, я ваш АІ-менеджер.", delay: 500 },
{ from: "ai", text: "Підкажіть, будь ласка, кількість гостей і дати — підберу варіанти.", delay: 800 },
{ from: "user", text: "2 осіб, 26-27 травня", delay: 700 },
{ from: "ai", typing: 1200, text: "Для вашого перебування з 26 по 27 травня у нас є два прекрасних варіанти:\n\n• Стандарт (з видом на скелю) — 3000 грн/доба\n• Люкс (з видом на річку) — 4000 грн/доба\n\nЯкщо бажаєте забронювати один з номерів, дайте знати — і я допоможу вам з оформленням.", delay: 0 }];


function ChatAnimation({
  script = DEFAULT_SCRIPT,
  height = 480,
  contactName = "Hotel · AI-агент",
  brand = "instagram",
  loop = true
}) {
  const [visible, setVisible] = useState([]);
  const [typing, setTyping] = useState(false);
  const scrollRef = useRef(null);
  const timersRef = useRef([]);

  useEffect(() => {
    let cancelled = false;
    const run = async () => {
      while (!cancelled) {
        setVisible([]);
        setTyping(false);
        await new Promise((r) => setTimeout(r, 800));
        for (let i = 0; i < script.length; i++) {
          if (cancelled) return;
          const m = script[i];
          if (m.typing) {
            setTyping(true);
            await new Promise((r) => setTimeout(r, m.typing));
            if (cancelled) return;
            setTyping(false);
          }
          setVisible((v) => [...v, { ...m, id: `${Date.now()}-${i}` }]);
          await new Promise((r) => setTimeout(r, m.delay ?? 800));
        }
        if (!loop) return;
        await new Promise((r) => setTimeout(r, 3000));
      }
    };
    run();
    return () => {
      cancelled = true;
      timersRef.current.forEach((t) => clearTimeout(t));
    };
  }, [script, loop]);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTo({
        top: scrollRef.current.scrollHeight,
        behavior: "smooth"
      });
    }
  }, [visible, typing]);

  // Brand navy with white hotel mark
  const accent = "#003366";

  return (
    <div
      style={{
        height,
        background: "white",
        border: "1px solid #E5E7EB",
        borderRadius: 20,
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        fontFamily: "Manrope, sans-serif",
        boxShadow: "0 24px 48px -16px rgba(0,51,102,0.18), 0 4px 12px -4px rgba(0,0,0,0.06)"
      }}>
      
      {/* Chat header */}
      <div
        style={{
          padding: "12px 16px",
          borderBottom: "1px solid #F0F0F0",
          display: "flex",
          alignItems: "center",
          gap: 10
        }}>
        
        <div
          style={{
            width: 38,
            height: 38,
            borderRadius: "50%",
            background: accent,
            display: "grid",
            placeItems: "center",
            color: "white",
            position: "relative",
            overflow: "hidden"
          }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M3 21V9.5L12 3l9 6.5V21H3z" stroke="white" strokeWidth="1.8" strokeLinejoin="round" fill="none" />
            <rect x="7" y="12" width="3" height="3" stroke="white" strokeWidth="1.3" fill="none" />
            <rect x="14" y="12" width="3" height="3" stroke="white" strokeWidth="1.3" fill="none" />
            <path d="M10 21v-3.5h4V21" stroke="white" strokeWidth="1.6" strokeLinejoin="round" fill="none" />
          </svg>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontWeight: 600, fontSize: 14, color: "#0A0A0A" }}>{contactName}</div>
          <div style={{ fontSize: 11, color: "#10B981", display: "flex", alignItems: "center", gap: 5 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#10B981" }}></span>
            Онлайн
          </div>
        </div>
        <div style={{ display: "flex", gap: 14, color: "#999" }}></div>
      </div>

      {/* Messages */}
      <div ref={scrollRef}
      style={{
        flex: 1,
        overflow: "hidden",
        padding: "16px 14px 32px",
        display: "flex",
        flexDirection: "column",
        gap: 6,
        background: "#FAFAFA"
      }}>
        
        {visible.map((m, idx) => {
          const isUser = m.from === "user";
          const prevSame = idx > 0 && visible[idx - 1].from === m.from;
          return (
            <div
              key={m.id}
              style={{
                display: "flex",
                justifyContent: isUser ? "flex-end" : "flex-start",
                marginTop: prevSame ? 2 : 8,
                animation: "msgIn 0.35s cubic-bezier(0.2,0.9,0.3,1.2)"
              }}>
              
              <div
                style={{
                  maxWidth: "78%",
                  padding: "9px 14px",
                  borderRadius: isUser ? "20px 20px 6px 20px" : "20px 20px 20px 6px",
                  background: isUser ? "#003366" : "#EFEFEF",
                  color: isUser ? "white" : "#0A0A0A",
                  fontSize: 14,
                  lineHeight: 1.45,
                  fontWeight: 400,
                  textWrap: "pretty"
                }}>
                
                <span style={{ whiteSpace: "pre-wrap" }}>{m.text}</span>
              </div>
            </div>);

        })}
        {typing &&
        <div style={{ display: "flex", justifyContent: "flex-start", marginTop: 4 }}>
            <div
            style={{
              padding: "12px 16px",
              borderRadius: "20px 20px 20px 6px",
              background: "#EFEFEF",
              display: "flex",
              gap: 4
            }}>
            
              {[0, 1, 2].map((i) =>
            <span
              key={i}
              style={{
                width: 7,
                height: 7,
                borderRadius: "50%",
                background: "#999",
                display: "inline-block",
                animation: `typingBounce 1.2s infinite ${i * 0.2}s`
              }}>
            </span>
            )}
            </div>
          </div>
        }
      </div>

      {/* Input bar removed — chat is a demo, not interactive */}
    </div>);

}

// ============ STAT TILE ============
function StatTile({ value, label, accent = "#003366", variant = "default" }) {
  if (variant === "boxed") {
    return (
      <div style={{ padding: "20px 24px", background: "white", border: "1px solid #E5E7EB", borderRadius: 12 }}>
        <div style={{ fontSize: 36, fontWeight: 700, color: accent, letterSpacing: "-0.03em", lineHeight: 1 }}>
          {value}
        </div>
        <div style={{ fontSize: 13, color: "#6B7280", marginTop: 6, fontWeight: 500 }}>{label}</div>
      </div>);

  }
  return (
    <div>
      <div style={{ fontSize: 40, fontWeight: 700, color: accent, letterSpacing: "-0.03em", lineHeight: 1 }}>
        {value}
      </div>
      <div style={{ fontSize: 13, color: "#6B7280", marginTop: 8, fontWeight: 500, lineHeight: 1.4 }}>{label}</div>
    </div>);

}

// ============ DATA: Pains, Capabilities, Channels, Integrations, Niches, Cases ============

const PAINS = [
{
  iconKey: "Clock",
  title: "Менеджери не встигають відповідати",
  text: "Ліди чекають по 30+ хвилин — і йдуть до конкурентів, які відповіли першими."
},
{
  iconKey: "Moon",
  title: "Заявки вночі та у вихідні зливаються",
  text: "70% запитів приходять поза робочими годинами. Вранці клієнт уже купив в іншому місці."
},
{
  iconKey: "Money",
  title: "Бюджет на рекламу горить дарма",
  text: "Кожен лід коштує $2-15. Повільна обробка = втрачені гроші, які вже сплачені Facebook."
}];


const CAPABILITIES = [
{ iconKey: "Lightning", title: "Відповідає за 3 секунди", text: "Реагує на перше повідомлення клієнта швидше за людину" },
{ iconKey: "Send", title: "Пише першим", text: "Якщо заявка з сайту — сам починає діалог у месенджері" },
{ iconKey: "Comment", title: "Відповідає на коментарі", text: "Закриває питання під постами та переводить у Direct" },
{ iconKey: "Image", title: "Надсилає фото та відео", text: "Показує товари, інтер'єри, прайси прямо в чаті" },
{ iconKey: "Bell", title: "Push-нагадування", text: "Повертає клієнта до незавершеного діалогу" },
{ iconKey: "TrendUp", title: "Робить допродаж", text: "Пропонує супутні товари та апгрейди в потрібний момент" },
{ iconKey: "User", title: "Збирає дані клієнта", text: "Ім'я, телефон, потребу — і одразу в CRM" },
{ iconKey: "Card", title: "Приймає оплату", text: "За реквізитами або через LiqPay, WayForPay, Monobank" },
{ iconKey: "Settings", title: "Працює з CRM", text: "Створює угоди, оновлює статуси, лишає коментарі" },
{ iconKey: "Handshake", title: "Передає менеджеру", text: "Складні запити одразу йдуть людині з повним контекстом" }];


const CHANNELS = [
{ name: "Instagram Direct", logoKey: "Instagram" },
{ name: "Facebook Messenger", logoKey: "Messenger" },
{ name: "Telegram", logoKey: "Telegram" },
{ name: "Viber", logoKey: "Viber" },
{ name: "WhatsApp", logoKey: "WhatsApp" },
{ name: "OLX", logoKey: "OLX" },
{ name: "Віджет на сайті", logoKey: "Web" }];


const INTEGRATIONS = [
{
  category: "CRM",
  items: ["KeyCRM", "Servio", "EasyWeek", "EasyMS", "KeepinCRM", "OneBox", "SalesDrive", "Cliniccards", "Instasport"]
},
{ category: "Таблиці", items: ["Google Sheets", "Excel"] },
{ category: "Календарі", items: ["Google Calendar", "Calendly", "Outlook"] },
{ category: "Платіжні системи", items: ["LiqPay", "WayForPay", "Monobank"] }];


const NICHES = [
{ iconKey: "Hotel", name: "Готелі та котеджі", text: "Бронює номери, надсилає правила, приймає передоплату" },
{ iconKey: "Dumbbell", name: "Спортзали", text: "Записує на пробне, продає абонементи, нагадує про оплату" },
{ iconKey: "Scissors", name: "Салони краси", text: "Підбирає майстра, бронює час, шле нагадування" },
{ iconKey: "Tooth", name: "Стоматології та клініки", text: "Записує на консультацію, відповідає на питання про послуги" },
{ iconKey: "Bag", name: "E-commerce", text: "Консультує по товарах, оформлює замовлення, приймає оплату" },
{ iconKey: "Wrench", name: "Автосервіси", text: "Записує на діагностику, рахує орієнтовну вартість" },
{ iconKey: "Fork", name: "Ресторани та кафе", text: "Приймає бронь столиків, формує меню для івентів" },
{ iconKey: "Scale", name: "Юридичні послуги", text: "Кваліфікує запит, бронює консультацію з юристом" }];


const CASES = [
{
  name: "IZKI",
  logo: "izki.jpg",
  niche: "Екокурорт",
  city: "с. Ізки, Закарпатська обл.",
  channels: ["Instagram", "Telegram", "Viber", "WhatsApp"],
  systems: ["Servio", "LiqPay"],
  feature: "Закриває весь цикл бронювання у 4 каналах — плюс push-нагадування про незавершену бронь та автовідповіді на коментарі під постами."
},
{
  name: "Amarant",
  logo: "amarant.jpg",
  niche: "Спортивно-розважальний комплекс",
  city: "м. Умань",
  channels: ["Instagram"],
  systems: ["Instasport", "LiqPay"],
  feature: "Веде запис, продає абонементи та приймає оплату через LiqPay прямо в Instagram Direct — без переходів на сайт."
},
{
  name: "Tysha Tatariv",
  logo: "tysha.jpg",
  niche: "Котеджне містечко",
  city: "с. Татарів, Івано-Франківська обл.",
  channels: ["Instagram"],
  systems: ["BookMeNow"],
  feature: "Бронює з динамічною ціною: у пік сезону сам піднімає тариф, у низький — пропонує знижку, щоб будиночки не простоювали."
},
{
  name: "MontBlanc Apartments",
  logo: "monblanc.jpg",
  niche: "Апартаменти",
  city: "м. Хмельницький",
  channels: ["Instagram", "Telegram", "WhatsApp"],
  systems: ["EasyMS"],
  feature: "Тримає бронювання у трьох месенджерах і підхоплює Booking — шле інструкції заселення та відкриває ворота паркінгу за запитом гостя."
},
{
  name: "SlavskoGlamp",
  logo: "slavskoglamp.jpg",
  niche: "Глемпінг",
  city: "смт. Славське, Львівська обл.",
  channels: ["Instagram"],
  systems: ["BookMeNow"],
  feature: "Веде клієнта від першого «яка ціна?» до броні в BookMeNow — з фото шатрів та підбором дат прямо в Direct."
},
{
  name: "Чорна Скеля",
  logo: "chornaskelya.jpg",
  niche: "Готель",
  city: "м. Виноградів, Закарпатська обл.",
  channels: ["Instagram", "Telegram", "WhatsApp"],
  systems: ["Servio"],
  feature: "Тримає три месенджери в одному вікні: бронює номери та одразу заносить гостя в Servio — без дублювання вручну."
},
{
  name: "Provance House",
  logo: "provance.jpg",
  niche: "Котеджне містечко",
  city: "смт. Славське, Львівська обл.",
  channels: ["Instagram"],
  systems: ["BookMeNow"],
  feature: "Бронює будиночки в BookMeNow + push-нагадування про незавершену бронь та автовідповіді на коментарі під постами."
}];


// Export to window so all variants can use
Object.assign(window, {
  BotlexLogo,
  ChatAnimation,
  StatTile,
  PAINS,
  CAPABILITIES,
  CHANNELS,
  INTEGRATIONS,
  NICHES,
  CASES,
  DEFAULT_SCRIPT
});